Blueprint

Blueprint is a dark design that reads like a set of technical drawings on a black drafting table. Every landing section is a square dashed sheet with ticked corners, and the hero and the closing sheet sit under a navy lamp with fine periwinkle rays. Labels are mono capitals, numbered like drawing sheets. Light mode is the same sheet printed on white paper.

Read this before you add a screen, a component or a colour. The tokens live in src/app/globals.css, the faces in src/app/fonts.ts, the kit in src/components/ui/.

At a glance

Theme	Dark first: a pure black canvas with grey steps up to #242424. Light is pure white with the same structure.
Type	Inter 600 with tight tracking for headlines, Inter 400 and 500 for text, Geist Mono capitals for labels.
Colour	Almost all grey. One periwinkle pen for icons, checks, links, focus and chart series 1. Muted status tones.
Shape	Frames are square, objects are round: pill buttons, badges and tabs, 8px inputs, 14px cards, 20px dialogs.
Depth	No drop shadows. Depth is a surface step and a dashed line. Only floating panels get a shadow.
Signature	Dashed sheet frames with corner ticks, numbered mono eyebrows, a navy lamp with rays, CAD grid pictures.

Principles

1. Every landing section is a square dashed sheet at the content column.
2. Solid lines for things you touch, dashed lines for things that frame.
3. One periwinkle pen. Everything else is grey.
4. Every action is a pill. Frames never round.
5. Flat by rule: depth comes from a surface step, not a shadow.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#ffffff	#000000	The page floor
surface-soft	#fafafa	#0a0a0a	Section bands, sidebars, table heads
surface-card (--muted)	#f4f4f4	#141414	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e8e8e8	#242424	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#121212	Menus, selects, toasts: always opaque
card	#ffffff	#0a0a0a	The card fill
surface-dark	#000000	#0a0a0a	The inverted panel
hairline (--border)	#e4e4e4	#2a2a2a	Every border and divider
ink (--foreground)	#000000	#ffffff	Headings and primary text
body-strong	#1c1c1c	#e0e0e0	Emphasised body text
body	#4d4d4d	#ababab	Running text
muted (--muted-foreground)	#6b6b6b	#8f8f8f	Secondary text, captions
muted-soft	#8f8f8f	#666666	Placeholders, disabled text, icons at rest
primary	#000000	#ffffff	The action colour
accent (--accent-fill)	#506aa3	#7089ba	The saturated accent: links, the accent badge
accent-soft	#edf0f7	#121a2c	The tint an accent label sits on
danger (--destructive)	#b0443c	#e5847b	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #2c7254, #88621a and #b0443c in light, #7fc0a0, #d9b46a and #e5847b in dark.

Blueprint's own variables, read by the landing hooks and the kit: --dash (#c8c8c8 light, #333333 dark), --glow-1 (rgb(112 137 186 / 0.24) light, rgb(36 48 104 / 0.7) dark), --glow-2 (rgb(112 137 186 / 0.1) light, rgb(30 38 80 / 0.5) dark), --ray (rgb(80 106 163 / 0.16) light, rgb(112 137 186 / 0.2) dark), --grid-line (rgb(80 106 163 / 0.1) light, rgb(112 137 186 / 0.1) dark), --stipple (rgb(0 0 0 / 0.3) light, rgb(255 255 255 / 0.4) dark).

How colour is used

• The canvas is pure black in dark and pure white in light. Surfaces lift in small grey steps: #0a0a0a, #141414, #242424.
• Periwinkle marks icons, checks, radio dots, the switch track, links, focus rings, progress and sheet numbers. It never fills a button or a band.
• The navy lamp and the rays live only in the hero sheet and the closing sheet.
• Status colours are muted sage, amber and brick, each with a dark soft fill for badges and alerts.
• The primary button is the inverse of the canvas: a white pill on black, a black pill on white.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series in order: periwinkle, paper grey (ink in light), sage teal, amber, brick and plum. Every pair stays apart in normal vision and in red-green colour blindness. Assign them in order; never let colour be the only way to tell two series apart.

Dark mode

The palette is declared twice in src/app/globals.css: light on :root, dark under @media (prefers-color-scheme: dark) and again on .dark, where the class wins in both directions. @theme inline points every utility at those variables, so bg-canvas is one class that follows the mode. src/lib/design.ts sets the theme a first visit opens in: dark here, because Blueprint is drawn in dark first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Inter (font-display, font-body): headings and display type; running text and interface copy.
• Geist Mono (font-mono): code, ids and tabular labels.

Inter's optical size axis gives a tight, blocky display cut at 32px and up and an open text cut at body sizes, so one family carries headlines and copy. Geist Mono sets every eyebrow, tag, table head and code sample in drafting capitals.

Every face loads through next/font/google in src/app/fonts.ts: downloaded at build time and served from this app. Change a face there and here, together.

Scale

Token	Size	Line	Tracking	Weight	Use
text-display-xl	70px	1.08	-0.02em	600	The hero headline, desktop
text-display-lg	56px	1.1	-0.02em	600	The hero headline, tablet
text-display-md	40px	1.12	-0.02em	600	Section headlines, the hero on phones
text-display-sm	32px	1.2	-0.015em	600	Section headlines on phones, big numbers
text-title-lg	24px	1.3	-0.015em	600	Page titles in the app
text-title-md	18px	1.4	-0.01em	600	Card titles
text-title-sm	16px	1.4	-0.01em	600	Small headings, table titles
text-body-lg	18px	1.55	-0.01em	400	Lead paragraphs
text-body-md	16px	1.6	-0.01em	400	Running text
text-body-sm	14px	1.55	-0.005em	400	Interface copy, table cells
text-caption	12px	1.45	0	500	Metadata, helper text
text-caption-uppercase	12px	1.4	0.06em	500	Eyebrows above headings
text-button	14px	1	-0.01em	500	Buttons
text-nav-link	14px	1.4	-0.01em	500	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Display and titles are Inter 600 with -0.02em to -0.01em tracking, never lighter and never looser. Eyebrows, uppercase badges, line tabs, table heads, menu labels and shortcuts, avatar initials, pagination numbers, kbd and code are Geist Mono. Buttons and nav stay in Inter 500, and stats use Inter with tabular figures.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 48px, section 80px (the gap between landing sections).
• Content sits in max-w-content (1280px) with px-md on phones and px-lg from sm up. Reading text stops at max-w-measure (672px).
• Compact inside components: 10px gaps, 24px card padding, 40px controls.
• Generous between sections: 80px section padding, with sheet frames stacked 6px apart.
• Centre only the hero, section headings and short calls to action. Body text runs left.

Shape and depth

Token	Value	Where
rounded-xs	4px	Breadcrumb, Checkbox, Kbd
rounded-sm	6px	Accordion, Tabs, Tooltip, the landing page
rounded-md	8px	DropdownMenu, Input, Select, Skeleton, the landing page
rounded-lg	14px	Alert, Card, DropdownMenu, Popover, Select, Toaster, the landing page
rounded-xl	20px	AlertDialog, Dialog, the landing page
rounded-pill	9999px	Badge, Button, Dialog, Progress, Sheet, Switch, Tabs, Toaster, the landing page
rounded-full	9999px	Avatar, RadioGroup, Switch

Section frames, the hero sheet, the closing sheet and the stat grid are square. Inputs round at 8px, cards at 14px, dialogs and pictures at 20px, and every button, badge and default tab is a pill. Borders are 1px: solid on controls and floating panels, dashed on frames and rules. Only menus, dialogs, sheets, toasts and select content carry the overlay shadow.

Components

Every component lives in src/components/ui/ and is written against the tokens above. Import from there; never restyle a kit component inline to make a one-off.

Component	In Blueprint
Button	Every variant is a pill in Inter 500 with a 1px border slot and no shadow. Primary is the inverse of the canvas, secondary is a carbon pill with a hairline, outline is a grey line that firms up on hover, ghost is text that gains a faint fill on hover, danger is brick, link is periwinkle. Buttons press down 1px, and focus is a periwinkle ring with a canvas gap.
Badge	A pill with a 1px solid border at 12px 500. Neutral is carbon with a hairline, accent is a navy soft fill with periwinkle text, status badges use their soft fill and a faint status border. Uppercase mode turns any badge into a drafting tag: mono capitals, a dashed border and no fill.
Card	14px corners and no shadow. Default is carbon with a hairline, soft has a dashed hairline on the soft fill, strong is one grey step up with no border, outline is a dashed drawing frame, and dark keeps a faint light edge so it still reads on the black page.
Input, Textarea, Select	40px tall, 8px corners, a soft fill and a solid grey border that firms up on hover. Focus turns the border periwinkle with a soft halo, invalid turns it brick. A mono option for ids, hosts and versions. The select chevron turns ink while open, and its menu is a solid 14px panel with mono capital group labels and a periwinkle check.
Checkbox, RadioGroup, Switch	Selection is drawn with the pen: a periwinkle check on a navy soft fill, a periwinkle ring and dot for the radio, a periwinkle switch track with a canvas coloured thumb. Off is a grey border on the soft fill, or a dark track with a grey thumb. No shadows.
Tabs	Default is a carbon pill track with a hairline, the active pill on the canvas colour with no shadow. Line tabs are square mono capitals on a dashed baseline, the active one with a 1px solid ink rule.
Accordion	Rows split by dashed rules. Questions are 16px titles that turn periwinkle on hover, and the chevron turns and goes periwinkle when open. Answers are 16px body text.
Dialog, AlertDialog, Sheet	Dialogs are solid panels with a hairline, 20px corners and the overlay shadow, over a plain dark scrim with no blur. Titles are 24px, the footer sits on a dashed rule, and close is a round ghost button. Sheets are square with a hairline on the inner edge and a dashed rule under the header.
DropdownMenu, Popover, Select content, Tooltip	Solid panels with a hairline, 14px corners and the overlay shadow. Items are 8px rounded rows that highlight one grey step up, group labels and shortcuts are mono, checks and radio dots are periwinkle, separators are solid. The tooltip is an inverted chip with no border.
Table	No outer frame. Mono capital heads over a solid hairline, body rows split by dashed hairlines, tabular numbers, a faint fill on hover and a soft footer.
Alert	14px corners, a soft fill and a faint border in the status colour. Info uses the navy soft fill and a periwinkle icon.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are carbon circles with a hairline and mono initials. Progress is a periwinkle bar on a thin grey pill track, and spinners are periwinkle. Skeletons are a faint carbon block that stays still under reduced motion. Separators are dashed drafting rules. Kbd is mono with a heavier bottom edge. Breadcrumbs use a slash like a file path. Pagination numbers are mono pills, the current page outlined. Labels are 14px 500, field help is 12px grey, errors are brick, legends are 16px titles. Toasts are solid 14px panels with the overlay shadow and pill actions.

The landing page

The landing page is the same in every design; the design decides how it looks. Its sections carry data-slot hooks (listed at the top of src/components/marketing/section-heading.tsx) that globals.css may style. Blueprint styles these:

• section: every section is a numbered sheet, a dashed frame at the content column with a solid tick at each corner, 6px from its neighbours. Soft sections fill their sheet with carbon, never colour.
• hero-backdrop: the hero sheet, framed and ticked, under two navy lamp glows and a top wash, with fine periwinkle rays fanning up from the bottom centre behind the product picture.
• hero-eyebrow: a carbon chip in mono capitals with no border at rest. Its arrow becomes a filled dot.
• hero-title and section-title: lines break evenly. Weight and tracking come from the type scale.
• hero-subtitle: grey and capped at 36rem. hero-note: mono capitals in grey.
• product-preview: no shadow and a dashed bounding box 10px out. product-preview-bar turns black over a dashed rule. A real screenshot in hero-visual gets the same box.
• section-eyebrow: grey mono capitals with the sheet number in periwinkle, like 01 / FEATURES. Showcase rows count as details, like 02.1 / LABEL.
• logo: greyscale and slightly faded, full strength on hover. The strip title goes mono.
• feature-card: no box, the sheet holds the columns. feature-icon: a carbon circle with a periwinkle icon.
• showcase-visual: a carbon CAD sheet with a 24px periwinkle grid and white stipple. showcase-row: rows split by a dashed rule.
• step-marker: a carbon circle with a mono periwinkle number. The rule joining the steps is dashed.
• stat-grid: a square dashed schedule with cells split by dashed lines and tabular numbers.
• testimonial: a carbon tile with 20px corners and no border.
• faq: rows split by dashed rules.
• cta-band and cta-panel: a second, shorter hero sheet, black in both themes, lined up with the section frames, with the lamp, the rays and ticked corners.
• site-header: pure black with no blur. The hairline fades in after 6rem of scroll, links sit centred with a periwinkle underline on the current page, and header buttons become 6px carbon keys.
• brand-mark: a small sheet with its top right corner cut.
• site-footer: the last sheet, dashed top and sides with ticked top corners, running off the page. Column titles are mono.

Everything else is type, space and the kit.

Signed-in screens

The dashboard is a drawing set: black canvas, a soft sidebar split by a solid hairline, carbon stat cards with mono labels and 32px tabular numbers, tables with mono heads and dashed row rules. Sign-in is one carbon card centred on the void, with 40px fields, a full-width primary pill, outline provider pills and a dashed separator with a mono OR.

Do and don't

Do

• Frame every landing section as a square dashed sheet at the content column, 6px from its neighbour.
• Keep the canvas pure black in dark and pure white in light. Lift surfaces in small grey steps.
• Set every eyebrow, tag and table head in Geist Mono capitals with 0.04em to 0.06em tracking.
• Use periwinkle only as the pen: icons, checks, radio dots, the switch track, links, focus, progress and chart series 1.
• Make every action a pill. The one exception is the 6px carbon keys in the marketing header.
• Keep one lamp: the navy glow and rays live in the hero and the closing sheet only.
• Use tabular numbers for stats, prices and table numbers.
• Put solid lines on things you touch and dashed lines on things that frame.

Don't

• Don't add drop shadows to cards, buttons or inputs. Only floating panels get the overlay shadow.
• Don't fill a button, a band or a large area with periwinkle.
• Don't round the section frames, the hero sheet or the closing sheet.
• Don't tint a section with colour. A soft section is a carbon sheet, never a blue band.
• Don't use a solid border to contain a section. Solid lines stop at controls and panels.
• Don't set display headlines below weight 600 or track them looser than -0.015em.
• Don't add a second accent colour or a gradient outside the lamp and the rays.
• Don't centre body paragraphs longer than two lines.

Working in this design

Pasting from shadcn/ui. The token layer carries shadcn's variable names, so most snippets render unmodified. Two utility names mean something else here: bg-muted becomes bg-surface-card, and bg-accent / text-accent-foreground (a hover surface upstream) become bg-surface-card / text-ink. Here muted is a text colour and accent is the saturated accent.

Adding a token. Add it to all three palette blocks in globals.css (light, the dark media query, .dark), map it in @theme inline, and document it in the palette table above. Check contrast in both modes.

Adding a component. Check the kit first: most needs are a variant of Button, Card or Badge, or a composition on the page. A new component gets its own file in src/components/ui/, token classes only, a data-slot, and a row in the Components table here. The designer subagent owns this.