Atelier

Atelier is a dark editorial system for serious tools: bone serif headlines on a carbon page, ruled by hairlines and five grey steps. One voltage blue marks links, focus and a single point on the summit of the ridge line that crosses the hero. The light theme prints the same system on bone 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 native, carbon #181818. Light is bone paper #f5f3f0, not an inversion.
Type	Libre Baskerville 400 for headings, numbers and quotes. Inter for the interface. Fira Code for 11px tracked caps labels and code.
Colour	Near monochrome: bone ink, five grey steps and one voltage blue (#438eff in dark, #1261d3 on paper).
Shape	4px controls, 8px cards, dialogs and tables, 16px only on the dusk stages and the closing panel. Pills only for radios, status dots and the spinner.
Depth	Tone plus hairline. Cards and buttons sit flat. A lift on the product pictures, an overlay shadow on floating layers.
Signature	A ridge line across the hero with one blue summit point, stone index cards on the dark page, dusk mountain stages behind the product pictures.

Principles

1. The serif speaks, Inter explains, Fira Code labels.
2. Separate with hairlines and grey steps, never with shadows.
3. Blue is a signal: links, focus, selection, the accent badge and the summit. Nothing else.
4. The serif never goes above 500 and never tracks positive.
5. One bone primary per view, paired with a bone outline.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f5f3f0	#181818	The page floor
surface-soft	#eeede9	#111111	Section bands, sidebars, table heads
surface-card (--muted)	#e9e8e4	#262626	Tinted fills: inactive tabs, hover rows, code
surface-strong	#deddd8	#323232	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#262626	Menus, selects, toasts: always opaque
card	#ffffff	#1f1f1f	The card fill
surface-dark	#181818	#111111	The inverted panel
hairline (--border)	rgb(24 24 24 / 0.1)	rgb(238 238 238 / 0.1)	Every border and divider
ink (--foreground)	#181818	#eeeeee	Headings and primary text
body-strong	#262626	#e4e4e4	Emphasised body text
body	#3b3a37	#cfcdc8	Running text
muted (--muted-foreground)	#5e5d59	#a4a19b	Secondary text, captions
muted-soft	#87857f	#7a7873	Placeholders, disabled text, icons at rest
primary	#181818	#eeeeee	The action colour
accent (--accent-fill)	#1261d3	#438eff	The saturated accent: links, the accent badge
accent-soft	#e6edfb	#162844	The tint an accent label sits on
danger (--destructive)	#b8391f	#e86e58	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #276b45, #8a5a00 and #b8391f in light, #5aa77c, #d6a34a and #e86e58 in dark.

Atelier's own variables, read by the landing hooks and the kit: --ridge (#8f8c86 light, #7a7873 dark), --dusk-top (#f0f3f7 light, #0f1729 dark), --dusk-horizon (#dfe6ee light, #34466a dark), --dusk-far (#cfd8e3 light, #2a3a58 dark), --dusk-near (#bac6d4 light, #172238 dark), --tile (#ffffff light, #e7e5e4 dark), --tile-ink (#181818 light, #181818 dark), --tile-body (#5e5d59 light, #5e5d59 dark), --tile-icon (#1a365d light, #1a365d dark), --tile-line (rgb(24 24 24 / 0.1) light, rgb(24 24 24 / 0.08) dark).

How colour is used

• Five grey steps carry structure: well #111111, canvas #181818, card #1f1f1f, raised #262626, pressed #323232.
• Ink is bone #eeeeee. Pure white appears only as the primary button's hover.
• Voltage blue is kept for links, focus rings, selection, the accent badge and the summit point.
• Status is coloured text, an icon or a 2px left rule, never a loud fill. Danger is a coral outline.
• The feature tiles and dusk stages have their own variables (--tile-*, --dusk-*) with values for both themes, so text on them stays readable.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series in a fixed order: blue, lake, brass, heather, sky and rust in dark; blue, pine, brass, plum, steel and umber on paper. Neighbours stay apart under the common colour-blindness simulations. 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 Atelier is drawn in dark first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Libre Baskerville (font-display): headings and display type (with italics).
• Inter (font-body): running text and interface copy.
• Fira Code (font-mono): code, ids and tabular labels.

Libre Baskerville is wide and bookish, with a tall x-height that stays legible as bone on carbon. Inter keeps the interface plain, and Fira Code gives the tracked caps labels and code their own voice.

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	72px	1.1	-0.025em	400	The hero headline, desktop
text-display-lg	60px	1.1	-0.025em	400	The hero headline, tablet
text-display-md	48px	1.15	-0.025em	400	Section headlines, the hero on phones
text-display-sm	36px	1.2	-0.02em	400	Section headlines on phones, big numbers
text-title-lg	24px	1.3	-0.015em	400	Page titles in the app
text-title-md	18px	1.4	-0.01em	400	Card titles
text-title-sm	16px	1.45	0	500	Small headings, table titles
text-body-lg	18px	1.55	0	400	Lead paragraphs
text-body-md	16px	1.6	0	400	Running text
text-body-sm	14px	1.5	0	400	Interface copy, table cells
text-caption	13px	1.4	0	400	Metadata, helper text
text-caption-uppercase	11px	1.4	0.1em	500	Eyebrows above headings
text-button	14px	1	0	500	Buttons
text-nav-link	14px	1.4	0	400	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Libre Baskerville at 400 for every heading, card title, big number, FAQ question and quote (italic for quotes), 500 only at title-sm. Inter at 400 and 500 for body, buttons, nav and inputs, 600 only for names in quotes. Every tracked caps label is Fira Code at 11px, 500, 0.1em, in fog.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 64px, 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).
• Comfortable density: 8px between elements, 12px in landing grids, 24px card padding, 40px controls.
• Landing sections sit 80px apart and open on a full-width hairline with a numbered running head.
• Content keeps the 80rem column. Hero headlines of 42 characters or less set in two lines at 72px.

Shape and depth

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

Radius steps are 2, 4, 6, 8 and 16px: 4px on controls, badges, avatars and switches, 6px on menus and alerts, 8px on cards, dialogs, tables and the product window, 16px on the dusk stages and the closing panel. Borders are always 1px solid, never dashed. Shadows appear only on floating layers (overlay) and on the product pictures (lift).

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 Atelier
Button	4px corners, Inter 14px 500, sentence case, no shadow, never serif or mono. Sizes are 32, 40 and 44px with the same 14px label. Primary is a bone slab with carbon text that goes white on hover (carbon on paper); outline is a full ink line; secondary is slate with a hairline; ghost is body text; danger is a coral outline; link is blue. A pressed button sinks 1px and a disabled one fades to 40%. Focus shows a blue ring with a 2px offset.
Badge	4px corners, never a pill, no border, 13px Inter 500. Neutral is ash on iron, accent is blue on navy, status is coloured text on a near-black tint. The uppercase variant is 11px Fira Code at 0.1em.
Card	8px corners, no shadow, no hover lift. Default is graphite (white on paper) on a 1px hairline, soft is the obsidian well with the same hairline, outline is the hairline alone and strong is iron with no line. Titles in the 18px serif, descriptions in fog.
Input, Textarea, Select	40px tall, 4px corners, a 16% bone line on the card's fill; textareas start at 96px. Focus turns the line blue and adds a 2px blue halo; invalid uses coral. The mono option sets Fira Code with ligatures off. The select chevron is grey and turns ink when open; its content floats on the raised grey with an overlay shadow and a blue check on the chosen item.
Checkbox, RadioGroup, Switch	Checkbox is 16px with 2px corners and a grey line, bone with a carbon tick when checked. Radio is the one round control, with a 6px bone dot. Switch is a 4px-cornered track with a square thumb: iron when off, bone when on. All three show a blue ring with a 2px offset on focus.
Tabs	The default list is an obsidian well, and the active tab rises onto the card fill with a hairline. The line variant marks the active tab with a 1px ink underline. Never blue.
Accordion	Rows split by hairlines, triggers in the 16px serif, a grey chevron that rotates and turns ink when open. No underline and no colour change on hover.
Dialog, AlertDialog, Sheet	A carbon scrim with a 2px blur. Dialogs on the raised grey with a hairline, 8px corners and the overlay shadow, titles in the 24px serif, actions right-aligned 12px apart. Alert dialogs are narrower and have no close icon. Sheets sit flush to the edge on graphite with no radius and an 18px serif title. Destructive actions use the coral outline.
DropdownMenu, Popover, Select content, Tooltip	Raised grey, hairline, 6px corners, overlay shadow. Items have 2px corners and highlight on iron; checks and radio dots are blue. Group labels in Fira Code caps, shortcuts in Fira Code. Tooltips invert into a bone slip with carbon text and 2px corners.
Table	An 8px wrapper with a hairline. The head row sits in the obsidian well with Fira Code caps in fog. Hairline rows, an iron hover, navy for selected rows and tabular numbers. Right-align numbers and set ids in mono.
Alert	A margin note, not a slab: 6px corners, a hairline on the obsidian well, and a 2px left rule plus an icon in the status colour (ink for info).
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Square avatars with 4px corners and initials on iron. A 4px bone progress bar on an iron track. Skeletons pulse on slate, no shimmer. The spinner is a thin ring in the current text colour. Separators are 1px hairlines. Kbd in 13px Fira Code 500 with 2px corners. Breadcrumbs in fog split by small grey chevrons, the current page in ink. Pagination uses 40px ghost squares and marks the current page with an outline square. Labels in Inter 14px 500, legends in the serif. Toasts sit on the raised grey with 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. Atelier styles these:

• hero-backdrop: the accent wash is removed, so the hero is plain carbon edge to edge.
• hero-visual: a 2px ridge line in --ridge crosses the full width behind the product window, with one blue point on a navy disc at its summit. It plots left to right once and holds still under reduced motion.
• hero-title: Libre Baskerville 400, balanced.
• hero-eyebrow: a 4px hairline box with no fill, Fira Code caps in fog, the blue arrow kept.
• section: every section after the logo strip opens on a full-width hairline, with no bottom border.
• section-eyebrow: a Fira Code running head in fog; in section headings it starts with the section number in bone and a 24px rule.
• logo: serif mastheads in fog under a mono caps label; logo images turn grey.
• feature-card, feature-icon: stone index cards on the dark page (white on paper) with carbon serif titles, smoke body and navy line icons in a 4px hairline frame, 12px apart.
• product-preview: 8px corners, a graphite fill, the lift shadow, hollow window lights and a 4px address bar.
• showcase-visual: a 16px dusk stage with a far and a near mountain range rising behind the card; even rows mirror the range and the card takes the lift shadow.
• step-marker: 40px hairline squares with serif numerals in bone and no fill.
• stat-value, testimonial: serif figures with lining tabular numbers; quotes in italic serif at 17px.
• faq: questions in the 18px serif with no blue on hover; the chevron turns bone when open.
• cta-panel: always night, a dusk sky with both ranges at its foot, a serif headline and copy in body grey.
• site-header, site-nav, brand, brand-mark: no line under the header, the nav centred from 80rem with a fog underline on the current page, and a serif initial in a 1px bone square beside the name in tracked Inter caps.
• site-footer: the obsidian well with Fira Code column titles in fog.

Everything else is type, space and the kit.

Signed-in screens

The dashboard sits on carbon with an obsidian sidebar split by a hairline, page titles in the 24px serif and stat tiles as graphite cards with serif numbers. Sign-in is one graphite card on the dark page with the monogram, a serif title, fields with a blue halo on focus and a full-width bone primary.

Do and don't

Do

• Set every heading, card title, big number and quote in Libre Baskerville at 400.
• Keep blue for links, focus rings, selection, the accent badge and the summit point.
• Separate with hairlines and the five grey steps.
• Use 4px corners on controls, 8px on cards, dialogs and tables, 16px only on the dusk stages and the closing panel.
• Put every tracked caps label in Fira Code: 11px, 500, 0.1em, fog.
• Pair one bone primary with one bone outline button, one primary per view.
• Keep hero headlines to 42 characters or less, so they set in two lines.
• Check both themes: the ridge, the dusk stages and the feature tiles each have their own light values.

Don't

• Don't bold the serif. No Libre Baskerville at 600 or 700.
• Don't round anything into a pill except radios, status dots and the spinner.
• Don't add glows, gradient meshes, grids, dots or noise.
• Don't put shadows on cards or buttons.
• Don't fill buttons, badges or alerts with loud colour.
• Don't use pure white for text on dark. Bone is the brightest ink.
• Don't set buttons, nav links or body copy in the serif or in mono.
• Don't draw a second ridge or move the summit point.

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.