Flint Foundations
Spacing and size
One spacing scale, a radius set, control heights and a minimum target. Nothing off scale.
Spacing scale
| Token | Value | Size |
|---|---|---|
--space-0 | 0px | |
--space-2 | 2px | |
--space-4 | 4px | |
--space-8 | 8px | |
--space-12 | 12px | |
--space-16 | 16px | |
--space-24 | 24px | |
--space-32 | 32px | |
--space-40 | 40px | |
--space-48 | 48px | |
--space-64 | 64px |
Radius
Use the roles: control for buttons, inputs and nav items, card for cards and panels, cardLg for dialogs, pill for chips and avatars.
| Token | Value | Points at | Shape |
|---|---|---|---|
--radius-xs | 4px | ramp step | |
--radius-sm | 8px | ramp step | |
--radius-md | 12px | ramp step | |
--radius-lg | 16px | ramp step | |
--radius-pill | 9999px | ramp step | |
--radius-control | 8px | radius.sm | |
--radius-card | 12px | radius.md | |
--radius-card-lg | 16px | radius.lg |
Controls, icons and targets
| Token | Value | Use |
|---|---|---|
--control-sm | 32px | Compact controls |
--control-md | 40px | Default buttons and inputs |
--icon-size-sm | 16px | Icons |
--icon-size-md | 20px | Icons |
--icon-size-lg | 24px | Icons |
--target-min | 24px | The smallest anything clickable may be (WCAG 2.5.8). Aim for 40px on anything used often; 44pt on iOS. |
Density
Set data-density="compact" to tighten inset and gap by one step. Control heights, icon sizes and the minimum target stay the same, so a denser layout never shrinks a target.
| Token | Comfortable | Compact |
|---|---|---|
--inset-sm | 8px | 4px |
--inset-md | 12px | 8px |
--inset-lg | 16px | 12px |
--inset-xl | 24px | 16px |
--gap-sm | 8px | 4px |
--gap-md | 12px | 8px |
--gap-lg | 16px | 12px |