The system
The system under every work.
The Core tokens in design.md’s front matter, rendered by the same parser that lints the file: 26 colors, 18 type styles and 9 radii. Every playbook re-points these roles; the names never change.
Principles
The 12 laws.
Quiet precision everywhere, one loud idea per page. Everything else in the file applies these.
- 01
One focal point per viewport, one primary action per view.
If two things shout, neither is heard.
- 02
Neutrals do 90% of the work.
The accent appears on the primary action, focus rings, key data and the brand mark only.
- 03
Type carries hierarchy, not weight.
Display text is large and tight at weight 400–500, never 800. Labels are small, 500, and precise.
- 04
Space comes from the 4px scale, in groups.
The gap between groups is at least twice the gap inside a group: 8px inside, 16px+ between; 24px inside a section, 96px+ between sections.
- 05
Hairlines before boxes.
Structure comes from 1px low-contrast lines, tonal surface steps or a ring-shadow. Never a heavy border and a heavy shadow.
- 06
Radii are concentric and consistent.
Inner radius = outer radius − padding. One radius personality per product.
- 07
Show the real thing.
Real product UI rendered in HTML beats stock illustration. Realistic numbers beat placeholders.
- 08
States are part of the design.
Every control has hover, focus-visible, active and disabled states. Every data view has loading, empty and error states.
- 09
Motion explains; it never decorates.
Under 300ms for UI, ease-out curves, and less animation the more often something happens.
- 10
Accessible by default.
AA contrast on the surface the text actually sits on; 24px minimum hit areas (44px on touch); complete keyboard paths; reduced motion respected.
- 11
One loud idea.
Each page earns exactly one signature move — a display face, a shape, a hero technique, a color block. Everything else stays quiet.
- 12
Numbers are UI.
Tabular numerals, aligned decimals, de-emphasized units, and a trend that says what it means.
Color
Every color is a role.
Never a hue. Each ratio is measured on the surface that role actually sits on.
Surfaces
- canvas#FFFFFF
- surface#FAFAFA
- surface-2#F4F4F5
- hairline#EBEBEB
- hairline-strong#D4D4D8
Ink
- ink-strong#11111118.88:1 on canvas
- ink#33333312.63:1 on canvas
- ink-subtle#6B6B6B4.85:1 on surface-2, its worst case
Accent
- primary#0070E04.78:1 with its label
- primary-hover#005FC26.15:1 with its label
- on-primary#FFFFFF
- link#0070E04.78:1 on canvas
Inverse
- inverse#11111118.88:1 with its label
- inverse-hover#2B2B2B
- on-inverse#FFFFFF
Controls
- control-border#8A8A8A3.45:1 on canvas, a UI boundary
Status
- success#15B042
- success-fill#CAFACE
- on-success#0E7A2F4.70:1 on its fill
- warning-fill#FFF1D6
- on-warning#8A4B006.09:1 on its fill
- danger#D92D204.83:1 with a white label
- danger-fill#FFE8E6
- on-danger#B423185.62:1 on its fill
- info-fill#E6F0FF
- on-info#0058B06.04:1 on its fill
Type
One scale, eighteen styles.
Inter for product UI and Geist Mono for IDs and labels. Tracking tightens as size grows.
- display-xl72/72 · 500 · −0.04em
Quiet precision, one loud idea
- display-lg56/58 · 500 · −0.035em
Plan the quarter in one place
- display-md44/46 · 500 · −0.03em
Integrations that stay in sync
- headline32/36 · 500 · −0.025em
Integrations
- title-lg24/30 · 500 · −0.02em
Tool permissions
- title20/26 · 500 · −0.015em
Stripe
- title-sm16/20 · 500 · −0.01em
Data sync
- body-lg18/28 · 400 · −0.01em
Connect a store once, and every order, refund and payout stays in step.
- body16/24 · 400 · 0
Syncing 15 products from Shopify every 10 minutes.
- body-sm14/20 · 400 · 0
Last synced 2 minutes ago by Ana Lima.
- label13/16 · 500 · 0
Store URL
- label-sm12/16 · 500 · 0
Connected
- caption12/16 · 400 · 0
Updated Sep 23, 2026
- button13/16 · 500 · 0
Save changes
- button-lg15/20 · 500 · −0.01em
Start free trial
- numeric32/36 · 500 · −0.025em
$12,480.00
- mono12/16 · 500 · 0
0x71C7…976F
- eyebrow11/14 · 500 · 0.08em
Section 04
Space
Everything on a 4px base.
Layout widths are tokens too.
- 3xs2px
- 2xs4px
- xs8px
- sm12px
- md16px
- lg20px
- xl24px
- 2xl32px
- 3xl40px
- 4xl48px
- 5xl64px
- 6xl96px
- 7xl128px
- gutter
- 24px
- measure
- 680px
- container
- 1280px
- container-wide
- 1400px
Groups sit at least twice as far apart as the items inside them: 8px inside, 16px or more between, and 96–128px between marketing sections.
Radius
Concentric and consistent.
One radius personality per product. Core is soft precise: 10px controls, 12–16px cards.
- xs · 4pxKbd, inline code, checkboxes
- sm · 6pxBadges, tooltips
- md · 8pxInputs, sidebar items, menus
- control · 10pxButtons
- lg · 12pxApp cards, panels, popovers
- xl · 16pxModals, app-icon tiles, media
- 2xl · 24pxMarketing tiles, bento cells
- 3xl · 32pxHero panels, sections
- full · 9999pxPills, switches, avatars
− padding 8px
= inner 16px
Elevation
One depth method per surface.
Try them in this order: tone, hairline, ring, then shadow.
Motion
Motion explains; it never decorates.
Ease-out for UI, under 300ms for anything interactive, and less motion the more often it runs.
- --ease-outcubic-bezier(0.23, 1, 0.32, 1)default for UI enter/exit
- --ease-out-expocubic-bezier(0.16, 1, 0.3, 1)larger entrances, reveals, underlines
- --ease-in-outcubic-bezier(0.77, 0, 0.175, 1)things moving across the screen
- --ease-drawercubic-bezier(0.32, 0.72, 0, 1)sheets and drawers
- --ease-standardcubic-bezier(0.4, 0, 0.2, 1)color and state changes
Durations: press 160ms · fast 150ms · base 200ms · slow 300ms · enter 400ms · hero 700ms
Components
The apps cheatsheet, made real.
Rendered in the Core scope, so these are design.md’s own values. Every control takes focus, hover and press.
Buttons
Sizes at the primary variant, then every variant at md.
Inputs
40px form fields, 16px text on phones, a label above and help below.
The address your customers visit.
Enter a number from 5 to 1,440.
Selection
16px boxes with a 1px control border; the whole row is the hit area.
Badges
20px tall, 6px radius, a tinted fill and dark text of the same hue.
Keyboard
Shortcuts sit in 20px keys at the end of the control they trigger.
⌘KOpen quick actions
Rows
40px data rows and 44px list rows. Numbers are tabular and right-aligned.
| Products | 15 synced |
|---|---|
| Orders | 1,284 synced |
| Customers | 962 synced |
| Last sync | 2 minutes ago |
- Acme Goodsacme-goods.myshopify.com15 products
- Northwind Supplynorthwind-supply.myshopify.com42 products
- Harbor & Pineharbor-and-pine.myshopify.com7 products