{ DESIGN SYSTEM }

Every component, beside its value

The reference the design review runs against. If something here does not match the system, the system is what is right.

Colour

Neutral graphite plus one violet. The accent is rationed: at most three accent fills in a viewport.

Token	Dark	Light	Use
`bg`	#08090B	#FFFFFF	Page ground. The only full-bleed background.
`surface-1`	#0F1114	#F7F7F8	Cards, sidebar, terminal body.
`surface-2`	#15181C	#F0F0F2	Hover, inputs, tab rails, inline code.
`surface-3`	#1C2025	#E8E8EB	Pressed, selected, active tab pill.
`border`	#23272D	#E4E4E7	Every hairline. Borders, not shadows.
`border-strong`	#343A42	#C8CAD0	Hover edges, inputs.
`fg`	#EDEEF0	#0B0C0E	Headings, primary text, primary button fill.
`fg-muted`	#A1A7B0	#555B64	Body copy. 7.8:1 dark, 6.3:1 light.
`fg-subtle`	#7D848E	#6B717A	Captions and eyebrows. The floor.
`accent`	#A99BFF	#5B47E0	Links, focus, active, one highlight per view.
`success`	#3DD68C	#0B7A45	Terminal ticks, positive deltas.
`warning`	#F5A524	#A35F00	Warning callouts. Sparingly.
`danger`	#FF6B6B	#C93636	Destructive actions and errors.

Type

Geist and Geist Mono. Eleven styles. Hierarchy is size and weight, never colour.

Style	Size / line	Tracking	Use
`display-xl`	80 / 84	-0.045em	Landing hero only
`display`	56 / 60	-0.04em	Landing section titles
`h1`	40 / 48	-0.035em	Docs page title
`h2`	28 / 36	-0.025em	Docs sections
`h3`	20 / 28	-0.015em	Subsections, card titles
`lead`	20 / 32	-0.01em	Hero and docs intro
`body`	16 / 28	—	Prose, max 72ch
`body-sm`	14 / 22	—	UI, cards, sidebar
`caption`	13 / 20	—	Footnotes, figure captions
`eyebrow`	12 / 16 mono	+0.08em	Section labels, uppercase
`code`	13.5 / 24 mono	—	Code blocks and terminals

Button

Primary is inverted, not violet. That is what lets violet mean brand everywhere else. One primary per view.

Tabs

The indicator is measured from the selected tab, not animated by index: the labels are not equal width. Arrow keys move selection, and focus moves with it.

A pill on surface-3 with an inset hairline, sliding over 240ms.

Terminal

Dark in both themes, so a screenshot of one is stable. Copy confirms in place for 1.6s rather than raising a toast.

~/contacts

grit new contacts --triple --next

API, web app and admin panel, with auth already working

cd contacts && pnpm install

The workspace, once

grit start

Opens localhost:3000 for the app, :3001 for the admin

Callout

Tip. The accent-soft fill and accent-line border are the only place a callout carries the brand colour.

Careful. Status colours appear in terminals, callouts and table cells. Never in decoration.

Shape

Radius scales with the element. Nested radius is the outer radius minus the padding.

4px

radius-xs

Inline code, kbd, tiny badges

6px

radius-sm

Sidebar items, tab pills, inputs

10px

radius-md

Buttons, code blocks, callouts

16px

radius-lg

Cards and terminals

24px

radius-xl

Large showcase panels

Atmosphere

Structure that is drawn, not implied. Corner marks are the signature, and what makes them a signature is that every section has them.

g-cnr

7×7 accent square where a rail meets a rule.

g-dots

16px dot field, behind diagrams only.

g-gridbg

56px line grid, radially masked. Hero and CTA only.

g-wash

One radial violet glow per section, at most.

Run the audit against this page before changing it: eval(await (await fetch('/design-audit.js')).text())