Primitives
The raw palette the semantic tokens are built from. Reference it only when defining tokens; screens use semantic colors. Where a palette page and a component disagreed on a grey, the component value won.
Figma: 02 / Foundations / PrimitivesPalette
Twelve scales: neutral, green, sky, purple, magenta, cyan, amber, red, orange, blue, pink and alpha.
neutral
0
50
100
200
300
400
500
525
550
600
700
800
900
950
1000
green
50
100
200
300
400
425
450
500
600
700
800
900
950
sky
50
100
200
300
400
500
600
700
800
900
950
purple
50
100
200
300
325
350
400
500
600
700
800
900
950
magenta
50
100
200
300
400
500
600
700
800
900
950
cyan
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
425
475
500
600
700
800
900
950
red
50
100
200
300
400
450
475
500
600
700
800
900
950
orange
500
550
blue
500
550
900
950
pink
500
550
alpha black
8
40
50
60
Radius
4px for badges and checks, 6px for controls, 8px for menus and lanes, 12px for cards and overlays.
rounded-xs2px · Hairline details
rounded-mark3px · Chart swatches, stacked bar segments, source accents
rounded-sm4px · Badges, checkboxes, tree toggles, pagination
rounded-md6px · Buttons, inputs, selects, tabs, calendar cells
rounded-lg8px · Menus, lanes, metric cards, kanban cards
rounded-page8px · The page corner inside AppShell, where it meets the navigation
rounded-xl12px · Cards, containers, tables, dialogs, popovers
rounded-full9999px · Avatars, status pills, the dialog close
Effects
Colors/effect/shadow drives two shadows: overlay for dialogs and drawers, popover for menus, popovers and pickers. Cards stay flat.
Spacing
Spacing follows the 4px Tailwind scale. Shared layout measurements: 280px sidebar, 72px top bar, 32px page padding, 24px gaps between containers, 24px container padding.
p-14px
p-28px
p-312px
p-416px
p-624px
p-832px
