The guiding principle for layout is that components should not provide surrounding white space. Instead, spacing between elements is owned entirely by layout components. This approach ensures that the system is as composable as possible while keeping white space completely predictable.

All of the components referenced below can be infinitely nested within each other to create a wide variety of standard layouts. Getting a firm grasp of these components is an essential part of working effectively with Arc Design system (ADS 2.0).

#Style Properties

To help all developers contributing and using the design system follow ADS layout principles, we restrict styles on all non-layout components. This prevents components from using white space (and color) CSS attributes allowing only a specific set of props to non-layout components.

#Allowed props

  • flex
  • flexGrow
  • flexShrink
  • flexBasis
  • justifySelf
  • alignSelf
  • order
  • gridArea
  • gridColumn
  • gridRow
  • gridColumnStart
  • gridColumnEnd
  • gridRowStart
  • gridRowEnd
  • position
  • zIndex
  • top
  • bottom
  • start
  • end
  • left
  • right
Did we miss a prop that should be allowed? Make a request and we can update this list.


Arc Design System provides a standard white space scale that is available across the entire component suite. As much as possible, ADS tries to make use of this scale rather than generating custom spacing rules. See Spacing for more detail.

#Sizing (Sizes)

Arc Design System provides a standard sizing scale that is available across the entire component suite. Sizes use the same scale detailed above for Spacing.


ADS Typography is one of the most important aspects of your design system, is often one of the foundational components you will want to get a handle on as it will need to work harmoniously with other elements like icons and UI controls. Your line-heights may even influence many other structural elements like spacing and grids. The fonts in Arc Design system are the following:
  • default: OutputSans
  • mono: Fira Mono, monospace
The best way to use text in ADS is to use one of our typography components:


As of 2.0, ADS uses the Capsize library when calculating font size and line height. This helps make sizing and layout of text just as predictable as every other element.

#Font Sizes

Once you know the Typography you're working with, this is probably the area you will spend the most time working through. Font sizes and line heights are closely related, and are usually influenced by, or will influence, some of the underlying grids used in your design. Arc Design System offers core text sizes that includes the following:
  • default: 16px
  • small: 14px
  • h1: 41.88px
  • h2: 25.88px
  • h3: 18.72px
Line Heights
  • default: 25.88px
  • small: 16px
  • h1: 48px
  • h2: 32px
  • h3: 25.88px
Copyright 2021 Arc XP