Workshop

Workshop is a calm, warm design for tools people work in all day. It reads like a quiet workshop on parchment: weight 400 headlines, ink and linen pill buttons, bone paper cut at 4px and mono caps for labels. One ember orange lives only in text and thin marks. Product pictures float on a landscape painted in CSS.

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 first: parchment #f7f7f4 and ink #26251e. Dark is the same workshop after hours: #151410 with bone text.
Type	Instrument Sans at 400 and 500 for everything; Red Hat Mono for eyebrows, labels, ids and code.
Colour	Warm neutrals, one ember (#c33c00 for text, #f54e00 for marks) and a cool blue kept only for text selection.
Shape	Buttons are pills. Cards, fields, tiles, menus and stages are cut at 4px. App windows and dialogs get 8px.
Depth	Flat paper under a 10% ink hairline. One deep, soft lift shadow for things that float.
Signature	A landscape painted in CSS under the product, and a blinking ember caret after the hero headline.

Principles

1. Whisper, don't shout: headings sit at weight 400 at every size.
2. Ember is ink, not paint: it marks text and thin lines, never a surface.
3. Pills for actions, 4px cuts for everything else.
4. A hairline first, a shadow only when something floats.
5. The painting is the loudest thing on the page, and the product sits on it.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f7f7f4	#151410	The page floor
surface-soft	#f2f1ed	#1a1915	Section bands, sidebars, table heads
surface-card (--muted)	#f2f1ed	#1d1c18	Tinted fills: inactive tabs, hover rows, code
surface-strong	#dcdbd5	#34332c	Pressed fills, progress tracks
surface-solid (--popover)	#fcfcf9	#24231e	Menus, selects, toasts: always opaque
card	#f2f1ed	#1d1c18	The card fill
surface-dark	#26251e	#0e0d0a	The inverted panel
hairline (--border)	rgb(38 37 30 / 0.1)	rgb(236 235 229 / 0.1)	Every border and divider
ink (--foreground)	#26251e	#ecebe5	Headings and primary text
body-strong	#36352e	#dcdbd3	Emphasised body text
body	#4a4943	#c4c3bb	Running text
muted (--muted-foreground)	#6a6963	#a09f97	Secondary text, captions
muted-soft	#8b8a84	#7a7971	Placeholders, disabled text, icons at rest
primary	#26251e	#ecebe5	The action colour
accent (--accent-fill)	#c33c00	#fa5a12	The saturated accent: links, the accent badge
accent-soft	#fcece3	#301408	The tint an accent label sits on
danger (--destructive)	#b11f47	#ec7385	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #2b7256, #875814 and #b11f47 in light, #66c093, #e5b568 and #ee7d8d in dark.

Workshop's own variables, read by the landing hooks and the kit: --ember (#f54e00 light, #f54e00 dark), --selection (rgb(139 196 248 / 0.45) light, rgb(139 196 248 / 0.3) dark), --paint-sky (#cbc5bf light, #1d1b21 dark), --paint-haze (#ddd3c2 light, #2e2c32 dark), --paint-ridge (#a9968f light, #3b2f33 dark), --paint-earth (#7c6f59 light, #221d16 dark), --paint-water (#a599a3 light, #1e252b dark), --paint-glow (rgb(250 238 214 / 0.6) light, rgb(245 78 0 / 0.3) dark), --paint-grain (rgb(38 37 30 / 0.03) light, rgb(236 235 229 / 0.025) dark).

How colour is used

• Parchment #f7f7f4 is the canvas. Bone #f2f1ed carries cards and the one soft band, linen #e6e5e0 fills second buttons and tiles, and paper #fcfcf9 is menus and fields.
• Ink #26251e is text and the primary pill. Body, body-strong and muted step it down for long text and metadata.
• Ember text #c33c00 marks links, eyebrows and focus. The brighter #f54e00 is only for the hero caret and the small caret before each eyebrow.
• Muted text and ember words never sit on linen, where they drop below 4.5:1. Use body or body-strong there.
• Text selection is the one cool tone: a pale blue under ink text.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. A painter's box: slate, verdant, amber, crimson, mauve and cerulean, brighter in dark. None of them is ember, so data never competes with links. 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 Workshop is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

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

Instrument Sans is a calm, slightly warm grotesque that whispers at 400 with tight tracking, so one family sets every heading, button and paragraph. Red Hat Mono sits on a 0.6em advance and stays light at 12px, so eyebrows and labels read as quiet metadata, not a terminal.

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	52px	1.08	-0.026em	400	The hero headline, desktop
text-display-lg	44px	1.1	-0.023em	400	The hero headline, tablet
text-display-md	36px	1.2	-0.02em	400	Section headlines, the hero on phones
text-display-sm	26px	1.25	-0.012em	400	Section headlines on phones, big numbers
text-title-lg	22px	1.3	-0.005em	400	Page titles in the app
text-title-md	18px	1.4	0	500	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.5	0	400	Running text
text-body-sm	14px	1.5	0.01em	400	Interface copy, table cells
text-caption	13px	1.45	0.01em	400	Metadata, helper text
text-caption-uppercase	12px	1.6	0.04em	500	Eyebrows above headings
text-button	14px	1	0.01em	400	Buttons
text-nav-link	14px	1.45	0.01em	400	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Two weights: 400 for headings, body and buttons, 500 for small titles, labels and names. Tracking tightens as size grows, from +0.01em at 14px to -0.026em at 52px. Mono caps at 12px carry eyebrows, table heads and stat labels.

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).
• A 4px base unit. Controls are 32 to 44px tall, gaps are 8px and card padding is 24px.
• Sections sit 80px apart on parchment. Space separates them, never a rule.
• Hero text and section heads sit left on the content column. The logo caption and the closing panel stay centred.
• Content column 80rem with 16px and 24px gutters.

Shape and depth

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

Buttons, tab tracks, switches and avatars are round. Cards, fields, tiles, menus and painted stages are cut at 4px; app windows and dialogs at 8px. Resting surfaces are flat under a 10% ink hairline. Menus get a faint soft shadow, floating windows the deep lift shadow and dialogs 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 Workshop
Button	Every size is a pill and icon buttons are 40px circles. Grotesque at 400, sentence case, no shadow: 14px labels, 16px on the large size. Sizes are 32, 40 and 44px tall. Primary is an ink pill, secondary a linen pill, outline a hairline ring, ghost is body text, link is ember text with an underline on hover. Focus is a 2px ember outline and a press sinks 1px.
Badge	A paper tag cut at 3px, not a pill: mono 12px, sentence case, no border. Neutral is linen, accent is ember on the pale ember tint, and status colours sit on their soft tints. The uppercase variant is mono caps.
Card	Bone paper cut at 4px with a 10% ink hairline, flat, with no hover lift. Soft drops the line, strong is linen, outline is see-through and dark is an ink block. Titles are 18px at 500.
Input, Textarea, Select	Paper fields cut at 4px with a 20% ink line. Inputs are 40px tall; textareas start at 96px with relaxed lines. Focus turns the line ember and adds a soft ember halo. An invalid field gets the danger line, and a danger halo on focus. Select menus are paper with linen highlights and mono caps group labels.
Checkbox, RadioGroup, Switch	Checkboxes are paper boxes cut at 2px that fill with ink when checked. Radios are paper circles with a 6px ink dot. Both have a grey line that holds 3:1 on parchment. The switch is a pill track, stone with a line when off and ink when on, with a thumb on a soft shadow. Focus is the 2px ember outline.
Tabs	Default tabs are a linen pill track with a flat paper pill and a hairline for the active tab. Line tabs read like editor file tabs: a hairline row and a 1px ink rule under the active one. Tab labels are 14px at 400.
Accordion	Rows split by hairlines. Questions are 16px at 500 in ink and turn ember on hover. A thin muted chevron turns over when a row opens. Answers are 16px body text.
Dialog, AlertDialog, Sheet	An ink scrim at 45% with no blur. Paper panels with 8px corners, a hairline and the overlay shadow. Side sheets stay square; top and bottom sheets round only their inner edge, and a hairline runs under the sheet title. Titles are 22px at 400. Actions are right-aligned pills, primary last. The close button is a ghost circle.
DropdownMenu, Popover, Select content, Tooltip	Paper menus cut at 4px with a hairline and a soft shadow. Items are cut at 3px with a linen highlight, group labels are mono caps and shortcuts are mono. Tooltips are small flat ink tags with parchment text, inverted in dark.
Table	Rows split by hairlines under a bone head with mono caps labels in muted. Rows tint on hover. Numbers are tabular; set ids and file names in mono.
Alert	Cut at 4px with a hairline. Info is bone with an ink icon; success, warning and danger sit on their soft tints with the icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with body-strong initials on linen. Progress is a 4px ink bar on a stone track, never ember. Skeletons are linen shapes and the spinner is a turning arc in the text colour. Separators are 1px hairlines; Kbd is a small paper keycap in mono with an inset bottom rule. Breadcrumbs are muted with the current page in ink. Pagination uses ghost pills with mono page numbers, and the current page is a paper pill with a hairline. Labels are 14px at 500 in ink, help text is muted and errors are danger text. Toasts are paper cards at the bottom right on a soft shadow, with an ink pill action.

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

• hero-backdrop: switched off, so the hero sits on flat parchment.
• hero, hero-title: text sits left on the column; the headline is 400 in balanced lines and ends in a slow blinking ember caret.
• hero-eyebrow: a linen pill in mono 12px with body-strong text.
• hero-actions: left-aligned, and the outline button becomes a linen pill, so the pair reads ink and linen.
• hero-note: mono 12px metadata.
• hero-visual: a landscape painted in CSS (hazy sky, cream peak, rose cliffs, umber shore, mauve lake, warm horizon light, faint grain), inset to the page gutter, with the window floating on it.
• product-preview-bar: a bone title bar with an inset rule, grey dots and a short title stub.
• section-heading, section-title: heads sit left like a notebook page, and titles whisper at 400 in balanced lines.
• section-eyebrow: ember mono caps that open on a still ember caret, the hero's caret at rest.
• section: no rules between sections; how it works is the one bone band, and soft bands lose their lines.
• logo-cloud, logo: one row of linen tiles cut at 4px, 72px tall, with the wordmark in body colour.
• feature-icon, step-marker: small paper keycaps with a hairline and an inset bottom rule; icons are thin ash lines and step numbers are mono ink.
• stat, stat-value: mono caps labels over 400 figures with tabular numbers.
• testimonial: the quote a size up in ink, the name at 500.
• showcase-visual: each picture sits on its own smaller painting, mirrored on even rows, with the outer card on paper and the lift shadow.
• cta-panel: the same painting at night, with an ember glow under the buttons and a linen second button.
• site-header, site-nav, brand: 56px, ink brand, ink-toned nav centred between the brand and the actions; a hairline fades in once the page scrolls.
• site-footer: on the canvas, not a band, with mono column titles in muted.

Everything else is type, space and the kit.

Signed-in screens

The dashboard is parchment with a bone sidebar, bone cards cut at 4px with no shadow, 22px weight 400 page titles and mono caps table heads. Sign-in is one bone card centred on parchment with paper fields, an ink pill and ember text links, and no painting.

Do and don't

Do

• Set every heading at weight 400 and let tracking tighten with size.
• Make every button a pill and cut everything else at 4px. Windows and dialogs get 8px.
• Keep ember for text and thin marks: links, eyebrows, the focus ring, the carets, an unread dot.
• Put product pictures on a painted stage and float them on the lift shadow.
• Pair one ink pill with one linen pill in an action group, with one primary per view.
• Set eyebrows, table heads, ids, file names, shortcuts and counts in Red Hat Mono.
• Layer bone cards on parchment with the 10% ink hairline before reaching for a shadow.
• Use tabular numbers for stats, prices, tables and counts.

Don't

• Don't use pure white or pure black. Paper #fcfcf9 is the lightest colour and ink #26251e the darkest in light.
• Don't set a heading, title, label or button past weight 500. Only strong text in long prose goes bolder.
• Don't fill anything with ember: no ember buttons, bands, icon fills or big badge backs.
• Don't add gradients, glows or washes outside the three painted stages. The kit is flat.
• Don't round cards, fields, tiles, menus or stages past 4px, and don't make a card a pill.
• Don't tint icons. Icons are thin lines in muted or ink.
• Don't put muted text or ember words on linen. Use body or body-strong there.
• Don't tint shadows cool or give a resting card a shadow.

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.