Northwind design tokens v0.3

Color, type, spacing and button tokens for review

Design systems team2026-10-19

Colors154 families

Type sizes8ratio 1.25

Spacing steps84 px base

Button variants43 sizes

Color

Brand and neutral

token	hex	role	on white	on neutral-900
brand-600	#5B3FD9	primary action and links	6.8	2.6
brand-500	#6E56E8	hover and focus ring	5.1	3.4
brand-100	#ECE8FD	selected row and tint	1.2	14.6
neutral-900	#14131A	body text and dark surface	17.9	1.0
neutral-700	#3B3947	secondary text	10.8	1.7
neutral-500	#6B6879	placeholder and icons	5.4	3.3
neutral-200	#DAD8E2	borders and dividers	1.4	12.7
neutral-50	#F6F5F9	page background	1.1	16.3

Status

token	hex	use	on white
success-600	#1F8F5F	confirmations and paid	4.6
warning-600	#B7791F	pending and caution	4.0
danger-600	#C93B3B	errors and destructive	5.0
info-600	#2563C9	neutral notices	5.7

Contrast against white

Text must reach 4.5:1 for AA. The dashed line is the pass mark.

Contrast ratio on white

Data

token	ratio
neutral-900	17.9 :1
neutral-700	10.8 :1
brand-600	6.8 :1
info-600	5.7 :1
neutral-500	5.4 :1
brand-500	5.1 :1
danger-600	5 :1
success-600	4.6 :1
warning-600	4 :1

Type scale

Base 16 px, scale ratio 1.25 rounded to whole pixels. Family is Inter for UI and JetBrains Mono for code.

token	size px	line height px	weight	use
text-xs	12	16	500	captions and legal
text-sm	14	20	400	table cells and helper text
text-base	16	24	400	body
text-lg	18	28	500	lead paragraph
text-xl	22	30	600	card titles
text-2xl	28	36	600	section headings
text-3xl	36	44	700	page titles
text-4xl	48	56	700	marketing hero

Size by step

text-xs12 px

text-sm14 px

text-base16 px

text-lg18 px

text-xl22 px

text-2xl28 px

text-3xl36 px

text-4xl48 px

Data

token	size px
text-xs	12 px
text-sm	14 px
text-base	16 px
text-lg	18 px
text-xl	22 px
text-2xl	28 px
text-3xl	36 px
text-4xl	48 px

Spacing and shape

Spacing scale

space-14 px

space-28 px

space-312 px

space-416 px

space-524 px

space-632 px

space-748 px

space-864 px

Data

token	px
space-1	4 px
space-2	8 px
space-3	12 px
space-4	16 px
space-5	24 px
space-6	32 px
space-7	48 px
space-8	64 px

token	value	use
radius-sm	4 px	inputs and chips
radius-md	8 px	buttons and cards
radius-lg	16 px	modals
shadow-1	0 1px 2px rgba(20,19,26,0.08)	cards at rest
shadow-2	0 4px 12px rgba(20,19,26,0.12)	menus and hover
focus-ring	0 0 0 3px #6E56E8 at 40%	all focusable controls

Buttons

Each variant is listed with its exact tokens, so the rendered result can be checked against the spec. Height comes from size, never from padding guesses.

Primary

Fill brand-600, label white, no border, radius-md. Hover fill brand-500. Pressed fill #4A31B8. Disabled fill neutral-200, label neutral-500. Use once per view.

Secondary

Fill white, label brand-600, 1 px border neutral-200, radius-md. Hover fill brand-100. Pressed fill #DDD6FA. Disabled label neutral-500.

Ghost

No fill, label neutral-700, no border. Hover fill neutral-50. Pressed fill neutral-200. For toolbar and tertiary actions.

Destructive

Fill danger-600, label white, radius-md. Hover fill #B03232. Always paired with a confirm step.

size	height px	padding x px	font	icon px
sm	32	space-3 (12)	text-sm	16
md	40	space-4 (16)	text-base	20
lg	48	space-5 (24)	text-lg	24

State matrix

variant	rest	hover	pressed	focus	disabled
Primary	brand-600	brand-500	#4A31B8	focus-ring	neutral-200
Secondary	white	brand-100	#DDD6FA	focus-ring	white
Ghost	transparent	neutral-50	neutral-200	focus-ring	transparent
Destructive	danger-600	#B03232	#982A2A	focus-ring	neutral-200

Token file

{
  "color": {
    "brand": { "600": "#5B3FD9", "500": "#6E56E8", "100": "#ECE8FD" },
    "neutral": { "900": "#14131A", "700": "#3B3947", "500": "#6B6879", "200": "#DAD8E2", "50": "#F6F5F9" },
    "danger": { "600": "#C93B3B" }
  },
  "space": { "1": 4, "2": 8, "3": 12, "4": 16, "5": 24, "6": 32, "7": 48, "8": 64 },
  "radius": { "sm": 4, "md": 8, "lg": 16 },
  "font": { "base": 16, "lg": 18, "xl": 22, "2xl": 28, "3xl": 36 }
}

Open questions for review

Darken warning-600 to pass AA, or restrict it to icons?
Is radius-md at 8 px right for buttons, or should buttons use radius-sm?
Keep text-4xl at 48 px, or step to 44 px to fit phone widths?
Add a brand-700 for dark mode links?

Back to the examples