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).
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.
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.
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
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.
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
- default: 25.88px
- small: 16px
- h1: 48px
- h2: 32px
- h3: 25.88px