Foundations
Design system
The single source of truth for visuals across GETMILK Office. Reuse these primitives instead of inventing new ones — every screen should feel like the same product.
Principles
Six rules that keep the system coherent.
Tokens, not hex
Always reach for `bg-brand-600`, `text-gray-700`, `shadow-sm`. Never hardcode hex.
One primary per view
Exactly one primary button per pane — usually the rightmost. Everything else is secondary-gray or tertiary.
Quiet by default
Most surfaces are white on gray-25. Color earns its place by signalling state.
Consistent rhythm
8-px base. Stick to gap-2/3/4/6, p-3/4/5/6. Don't invent gaps.
Borders over shadows
Inside the app, prefer `border-gray-200` + `shadow-xs`. Heavy shadows belong on overlays.
Compose primitives
If you reach for ad-hoc styles, extend a primitive instead. New patterns land here first.
Colors
Tokens are exposed as Tailwind utilities like `bg-brand-600`. Light surfaces (50/100) for tints; 600/700 for solid fills and text on light.
Gray — the workhorse. 95% of UI is gray.
Brand — Use sparingly. One filled brand element per view.
Error — Destructive actions, form errors, sanctions, blocked states.
Warning — At-risk, pending review, expiring soon.
Success — Active, verified, completed, on-track.
Blue — Informational. Links inside blocks of text.
Indigo — Secondary categorical accent — charts.
Typography
Inter, with cv02–cv11 stylistic sets enabled. Display sizes for headers; UI sizes for everything else.
text-display-2xl 72 / 80 — never in product UItext-display-xl 60 / 72 — marketing onlytext-display-lg 48 / 60 — herotext-display-md 36 / 44 — section openerstext-display-sm 30 / 38 — modal titlestext-display-xs 24 / 32 — page H1 (PageHeader uses this)text-ui-xl 20 / 30text-ui-lg 18 / 28text-ui-md 16 / 24 — bodytext-ui-sm 14 / 20 — UI defaulttext-ui-xs 12 / 18 — captions, table cellsEyebrow / overline
Use `.text-eyebrow` for section labels above titles.
Spacing & radii
8-px base. Use Tailwind's gap-/p-/m- utilities. Don't reach below `gap-1`.
Spacing scale (px next to Tailwind alias)
gap-1gap-2gap-3gap-4gap-6gap-8gap-12gap-16Radii
rounded-xsrounded-smrounded-mdrounded-lgrounded-xlrounded-2xlrounded-fullShadows
`shadow-xs` is the default elevation for cards and buttons. Reserve `lg`+ for popovers/modals.
shadow-xsshadow-smshadow-mdshadow-lgshadow-xlshadow-2xlBadges
`pill-color` for status; `badge-modern` for metadata tags.
Pill-color (status)
Pill-outline
Badge-modern (metadata)
Sizes
Featured icons
Anchor empty states, modals, and feature lists.
Variant: light
Variant: outline
Variant: dark
Sizes
Cards
White surface, gray-200 border, shadow-xs. Use for grouped content.
KPI cards
One row of 3–4 above a dashboard. Don't stack rows of KPIs.
Manufacturers
1,082
+12%vs last month
Open orders
48
+3this week
Avg lead time
34d
-2dlower is better
At-risk vendors
6
+2needs review
Forms
Wrap every control in <Field>. Don't ship bare <input>s.
We'll never share it.
Must be at least 8 characters.
Empty states
Always provide an icon, a title, a sentence of context, and one CTA.
No manufacturers match your filters
Try removing a filter, widening your country list, or clearing your search.
Inbox zero
No new RFQs in the last 24 hours. We'll ping you when one arrives.
Page headers
One per route. Use SectionHeader for sub-sections inside long pages.
Operations
Manufacturers
Browse, filter, and onboard hardware vendors across the GETMILK Europe network.
Recent additions
Vendors created in the last 30 days.
…content for the section…