Cobalt

Cobalt is a white atlas drawn in hairline bars, with one electric blue square marking where to act. Headlines are huge DM Sans 500, tracked tight and left aligned, and every label is DM Mono capitals pinned by a 6px blue pixel. Surfaces are flat grey plates with 8px corners and no shadows. Pure #0000ff fills only what you act on: the primary button, the brand square, the first step, the current page and the closing slab.

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	Light native on pure white. Dark is the same system on pure black: white type, the same #0000ff fills and a periwinkle (#8585ff) for blue text.
Type	DM Sans for display and body (500 for every heading, 400 for text). DM Mono for anything in capitals, plus badges, keys, code and ids.
Colour	Black ink, cool slate text greys (#646b78), pure grey surfaces, one electric blue (#0000ff) and a data green for live states.
Shape	8px on buttons, inputs, cards and panels, 2px on tags, 4px on items nested in an 8px panel, square pixels. Circles only for radios and status dots.
Depth	Flat at rest. Elevation is surface steps: white canvas, #fafafa plate, #f2f2f2 ash, then the blue fill. Only floating layers cast a shadow.
Signature	A map of hairline bars beside a left-aligned 96px headline, mono eyebrows pinned by blue pixels, and one full-width blue slab to close the page.

Principles

1. Blue is a fill for points of action, never decoration or body text.
2. Everything starts at the left edge of the content column.
3. Capitals are always DM Mono. Headings are always DM Sans 500.
4. Step surfaces in grey before you reach for a line, and never reach for a shadow.
5. The only texture is hairline bars on a character grid.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#ffffff	#000000	The page floor
surface-soft	#fafafa	#0e0e0e	Section bands, sidebars, table heads
surface-card (--muted)	#f2f2f2	#1a1a1a	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e6e6e6	#2a2a2a	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#141414	Menus, selects, toasts: always opaque
card	#fafafa	#0e0e0e	The card fill
surface-dark	#0a0a0a	#111111	The inverted panel
hairline (--border)	#e4e6ea	#26292f	Every border and divider
ink (--foreground)	#000000	#ffffff	Headings and primary text
body-strong	#1b1e24	#e8eaee	Emphasised body text
body	#3d434d	#c4c8cf	Running text
muted (--muted-foreground)	#646b78	#9ba1ac	Secondary text, captions
muted-soft	#868c98	#6e7480	Placeholders, disabled text, icons at rest
primary	#0000ff	#0000ff	The action colour
accent (--accent-fill)	#0000ff	#8585ff	The saturated accent: links, the accent badge
accent-soft	#ebebff	#0d0d33	The tint an accent label sits on
danger (--destructive)	#d6001c	#ff5c6c	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #067a4a, #9c5700 and #d6001c in light, #3dd68c, #f5a524 and #ff5c6c in dark.

Cobalt's own variables, read by the landing hooks and the kit: --bar (#e8e8e8 light, #1c1d21 dark), --bar-mid (#cfd3da light, #2c2f35 dark), --bar-strong (#b1b7c3 light, #3b3f47 dark), --point (#098551 light, #3dd68c dark), --pixel (#0000ff light, #3b3bff dark), --on-primary-soft (rgb(255 255 255 / 0.8) light, rgb(255 255 255 / 0.8) dark), --on-primary-line (rgb(255 255 255 / 0.2) light, rgb(255 255 255 / 0.2) dark).

How colour is used

• bg-primary (#0000ff in both themes) fills the primary button, the brand mark, the first step, the current page in pagination and the closing slab. One blue block per page.
• text-accent is the same blue in light and periwinkle (#8585ff) in dark: links on hover, check marks, the selected item check and the info alert icon. Pure blue is too dark for small text on black.
• Text runs ink black for headings and nav, #3d434d for body and slate #646b78 for leads, captions and eyebrows. Eyebrow text is never blue; only its 6px pixel is.
• Surfaces are pure greys: white canvas, #fafafa plates, #f2f2f2 ash and #e6e6e6 for the strong step. No warm greys.
• Green (#098551, #3dd68c in dark) is for live and data only: the pulsing hero light, an atlas point and success.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series run blue, lime, pink, tan, sky and slate, in that order. In dark the blue lifts to #5c5cff and the rest brighten, so every series holds on black. 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: light here, because Cobalt is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• DM Sans (font-display, font-body): headings and display type; running text and interface copy.
• DM Mono (font-mono): code, ids and tabular labels (weights 400, 500).

DM Sans and DM Mono were drawn as one family, so headlines and labels share proportions. DM Sans 500 with its optical size axis sets tight, round headlines, and DM Mono carries every capital label, badge, key and id.

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	96px	1	-0.04em	500	The hero headline, desktop
text-display-lg	72px	1	-0.035em	500	The hero headline, tablet
text-display-md	40px	1.1	-0.025em	500	Section headlines, the hero on phones
text-display-sm	32px	1.15	-0.02em	500	Section headlines on phones, big numbers
text-title-lg	24px	1.25	-0.015em	500	Page titles in the app
text-title-md	18px	1.35	-0.01em	500	Card titles
text-title-sm	16px	1.4	-0.005em	500	Small headings, table titles
text-body-lg	18px	1.45	-0.012em	400	Lead paragraphs
text-body-md	16px	1.5	0	400	Running text
text-body-sm	14px	1.43	0	400	Interface copy, table cells
text-caption	13px	1.4	0	400	Metadata, helper text
text-caption-uppercase	12px	1.3	0.073em	400	Eyebrows above headings
text-button	15px	1	-0.005em	500	Buttons
text-nav-link	15px	1.4	0	500	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Headlines are DM Sans 500 and tighten as they grow: 96px at -0.04em in the hero, 40px at -0.025em, no tracking at 16px. The scale jumps from 18px straight to 32px on purpose. Capitals are always 12px DM Mono at 0.073em.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 48px, section 112px (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).
• A 4px grid: 4, 8, 12, 16, 24, 32 and 48px, with 112px between landing sections.
• Compact inside, airy between: controls are 32, 40 and 48px, cards pad 24px, and sections are split by whitespace alone.
• Everything is left aligned. From 1024px a section head splits in two: title on the left, lead on the right.
• The right half of the hero belongs to the bar atlas, so keep the headline short.

Shape and depth

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

8px is the system: buttons, inputs, menus, cards, dialogs and the product window. Tags, checkboxes, keys and tooltips take 2px; menu items, tab triggers and avatars nested in an 8px panel take 4px; the brand mark, eyebrow pixels, step markers, the progress bar and sheets are square. Borders are always 1px solid: a cool mist hairline (#e4e6ea) on dividers and plates, a firmer #cdd1d9 line on fields. Nothing casts a shadow at rest; only menus, popovers, dialogs, sheets and toasts float.

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 Cobalt
Button	8px corners, DM Sans 500 at 15px, sentence case, flat. Primary is electric blue with a white label, deeper on hover in light and brighter in dark; secondary is a flat ash key with no line; outline is a field-grey line on transparent; ghost tints on hover; danger is soft until hovered; link is blue text. Sizes are 32, 40 and 48px, and focus is a crisp 2px blue ring with a 2px offset.
Badge	A tag, not a pill: 2px corners, about 20px tall, 12px DM Mono in sentence case, no line. Neutral is ash with body text, accent is blue on pale blue, and status badges sit on their soft tint. The uppercase option sets 12px mono capitals at 0.073em.
Card	A #fafafa plate (#0e0e0e in dark) with 8px corners, a cool mist hairline and no shadow. Soft is the ash panel and strong one grey deeper, both with no line; outline is transparent with a hairline; dark is a near-black panel. Titles are DM Sans 500 at 18px.
Input, Textarea, Select	40px white fields with a #cdd1d9 line and 8px corners, no shadow. Hover firms the line, focus turns the edge into a clean 2px blue line with no halo, and invalid fields take the danger line. The mono option switches to DM Mono. Select content is a white menu with a hairline, 8px corners and a blue check.
Checkbox, RadioGroup, Switch	Checkboxes are 16px squares with 2px corners that fill blue with a white tick. Radios are the one circle, with an 8px blue dot. Switches are pixel toggles: a 2px-cornered track and a square white thumb, grey when off and blue when on.
Tabs	Default tabs sit in an ash track with 8px corners; the active tab is a white key (black in dark) with no line or shadow. Line tabs mark the active tab with a 2px blue bar under it.
Accordion	Rows split by hairlines, no boxes. Triggers are 16px DM Sans 500 in ink that turn blue on hover, with a slate chevron that turns 180 degrees.
Dialog, AlertDialog, Sheet	White panels with a hairline, 8px corners and the overlay shadow, over a flat dark scrim with no blur. Headers sit at the left edge. Alert dialogs pair an outline cancel with a primary or danger action. Sheets are square, with one hairline on the inner edge.
DropdownMenu, Popover, Select content, Tooltip	White menus with a hairline, 8px corners and the overlay shadow. Items are 32px with 4px corners and highlight to a grey tint; group labels are mono capitals, shortcuts are DM Mono and checks are blue. Tooltips are inverted square tags: black on light, white on dark.
Table	No frame of its own; it lives in a plate. An ash header band with 12px mono capitals, 48px rows split by hairlines, tabular numbers on the right and ids in DM Mono. Selected rows take the pale blue.
Alert	A flat tint with 8px corners, no side bar and no shadow. Info is ash with a blue icon; success, warning and danger sit on their soft tint with the title and icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are squares with 4px corners and mono initials. Progress is a square 4px bar with a blue fill. Skeletons are flat ash blocks that pulse, and spinners are a 16px ring in the current text colour. Separators are 1px hairlines, never dashed. Kbd is DM Mono on ash with a hairline and 2px corners. Breadcrumbs split with a slate chevron, and the current page in pagination is a blue square with a mono number. Labels are 14px DM Sans 500 in ink, never capitals. Toasts are white with a hairline and show status only in the icon.

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. Cobalt styles these:

• site-header: solid canvas on one hairline, with no blur and no wash.
• brand-mark: a 32px electric blue square with a mono initial.
• site-nav: ink links that turn blue on hover and on the current page, with no wash behind them.
• hero-eyebrow: a flat ash chip in near-black mono capitals with a small green square that pulses slowly. Reduced motion keeps it still.
• hero-title, hero-subtitle, hero-actions, hero-note: each moves to the left edge of the column; the headline breaks into even lines.
• hero-backdrop: the bar atlas. Two bar fields on a character grid, cut into landmasses by ten masks, with two blue and one green data point, pinned to the right edge of the content column. It stays faint where it sits behind text and steps up one grey from 1280px, where it clears the lead.
• hero-visual and product-preview: the flat window spans the full column, with a hairline and no shadow.
• product-preview-bar: square lights, the first one electric blue, and a square address bar.
• section: no rules; sections are split by whitespace alone.
• section-heading: left aligned. From 1024px a head in its section's container splits: eyebrow on top, title left, lead right.
• section-eyebrow: 12px slate DM Mono capitals after a 6px electric blue pixel. The logo strip title wears it too.
• logo-cloud and logo: left aligned, 56px apart, slate DM Sans 500 wordmarks tracked tight.
• feature-card and testimonial: on the canvas the cards drop their line and become #fafafa plates; quotes grow to 18px ink.
• feature-icon: no tile, just a bare 24px ink glyph at stroke 1.5.
• section pricing: plain plans are plates with no line; the featured plan keeps its blue frame.
• showcase-visual: a #fafafa stage with no line and mist bars rising from its foot; the picture on it is a white screen.
• step-marker: 40px ash squares with mono numbers; the first one is electric blue.
• stat-grid, stat and stat-value: open columns on 1px left rules, a mono label on top and a 64px tabular number below.
• faq: questions at 18px, split by hairlines, turning blue on hover.
• cta-panel: the one blue slab. Flat #0000ff, left aligned, a 40 to 72px white title, a lead in 80% white and a white bar field up its right side. The primary button turns white with a blue label, the outline partner takes a 20% white line, and focus inside is white.
• site-footer: canvas under a hairline, slate mono column heads, and body-grey links that turn blue on hover.

Everything else is type, space and the kit.

Signed-in screens

The dashboard is the white canvas with a #fafafa sidebar on a hairline, the active row on ash in ink, 24px DM Sans 500 page titles, plates with hairlines, pale blue icon tiles and tables with a mono header band.

Sign-in is a #fafafa page with one plate held by a hairline: 8px corners, 32px padding, no shadow, 40px white fields and a full-width blue button.

Do and don't

Do

• Keep #0000ff as a fill for points of action: the primary button, the brand square, the first step, the current page and the CTA slab.
• Set headlines in DM Sans 500, left aligned and tracked tight (-0.04em at 96px, -0.025em at 40px).
• Open every section with a 12px DM Mono label in capitals at 0.073em, pinned by a 6px blue square.
• Build surfaces from three steps: white canvas, #fafafa plate and #f2f2f2 ash. Flat, with 8px corners.
• Use 8px corners for buttons, inputs, cards and panels, 2px for tags and 0 for pixels. 4px is only for items nested in an 8px panel.
• Keep text cool: ink black for headings and nav, slate (#646b78) for leads and captions.
• Keep green for live and data only: the pulsing hero light, the atlas point and success.
• Put ids, counts, dates and table heads in DM Mono, with tabular-nums on numbers that line up.

Don't

• Don't add a shadow to a card, button, input or the product window. Only menus, dialogs, popovers, sheets and toasts float.
• Don't use blue as a section background, for body text or for decorative icons. The CTA slab is the one blue block per page.
• Don't center the hero or the section heads. Everything starts at the left edge of the content column.
• Don't use pill shapes on buttons, badges, tabs, inputs or avatars. Circles are for radios and status dots.
• Don't add gradients, glows, blur or photos as backgrounds. The only texture is hairline bars.
• Don't set capitals in DM Sans. Eyebrows, badges and table heads are always DM Mono.
• Don't reach for a warm grey or a second accent. Surfaces are pure greys and text greys are cool slate.
• Don't set body text below 14px or leads above 18px. The scale jumps from 18px straight to 32px.

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.