Foundations
Spacing, radius, elevation
The shape of every surface. Eight spacing steps, one radius per role, and shadows only for things that float.
Foundation 03
Spacing, radius, elevation
The shape of every surface. Eight spacing steps, one radius per role, and shadows only for things that float.
Role
Token
Sample
Use
Spacing
Space scale
Gaps and padding
space.025 to space.400
025 · 050 · 075 · 100 · 150 · 200 · 300 · 400 = 2, 4, 6, 8, 12, 16, 24, 32px
Tailwind 0.5, 1, 1.5, 2, 3, 4, 6, 8. Nothing off the scale.
Small steps
2px and 6px
space.025 · space.075
Inside controls only
Icon to label, pill padding. Layout gaps start at 8.
Radius
Small details
Checkbox, kbd, count badge
radius.small · 4px
rounded-sm
Tags and status pills
22px tall, not clickable
radius.medium · 6px
Placed
One step under controls
Controls
Buttons, inputs, nav items, tabs
radius.large · 8px
Filter
Every 28px control, inputs included
Menus and popovers
Container, then its items
radius.large · 8px, items 6px
Floating UI
Large containers
Dialogs, cards, Kanban columns
radius.xlarge · 12px
rounded-xl
Round
Avatars, switches, Ask bar
radius.full
MK
People and toggles
Elevation
Separation order
Before any shadow
Hairline, ring, fill, then shadow
Controls get a ring; shadows only float or drag
Control
Secondary and icon buttons
shadow.control
0 0 0 1px #1C2840 18%, 0 1px 3px 4%
Raised
Kanban cards, cards on a fill
shadow.raised
#EEEFF1 ring, 0 1px 3px 6%. Dragging switches to overlay.
Overlay
Menus, popovers, Ask bar, dialogs, toasts
shadow.overlay
Ring 4%, 0 4px 8px −4px 12%, 0 4px 12px −2px 16%
Primary button depth
The one filled button per page
shadow.primary
Add candidate
Inset 1px 6% plus two green-tinted drops. Primary only.
Rules
1. Spacing uses the eight steps, 2 to 32px. The lint rejects arbitrary values.
2. Radius follows the role: 4 details, 6 pills and menu items, 8 controls and menus, 12 large containers, full for people and toggles.
3. One overlay shadow for everything that floats. No shadow-md or shadow-lg.
4. Only the primary button carries depth. Every other button stays flat or ringed.
Typography
One family, three weights, four sizes. Every text style is a token with its size, line height, weight and tracking baked in.
Motion
Short and functional, copied from the app's code. Six durations, three curves, ten shared patterns that every component names, and a few signature motions on their own component pages.