Layout

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.

#Spacing

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.

#Typography

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:

#Capsize

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