Quill

Quill is a technical manual printed on warm graph paper. One deep blue carries the action, the links and every display headline, set in a whisper-weight serif. Labels, buttons and keys are mono keycaps with a darker bottom edge. On wide screens a drafting frame of hairline rules and dashed rails, pinned by small diamond nodes, holds the page.

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 warm paper (#f4f4f2) with white sheets. Dark is a graphite editor theme (#1f2227 page, #282c33 sheets) with the blue lifted to #74ade8.
Type	IBM Plex Serif 300 for display and 400 for titles, IBM Plex Sans for running text, IBM Plex Mono 400 and 500 for every label, button, key and number.
Colour	Graphite ink, one deep blue (#1348dc) for action, links and headlines, and an ice wash (#e6effe) for highlights. Charts and statuses are the only other hues.
Shape	2px on controls, cards, badges and keys, 4px on floating panels, 6px only on picture frames. Round only for avatars, radio dots and status dots.
Depth	Flat sheets with 1px lines. Buttons and keys carry a 2px darker bottom edge; one real drop shadow lifts the product picture, the CTA panel and the featured plan.
Signature	A drafting frame: full-width rules, dashed rails down the column and hollow diamond nodes where they cross, over blue graph paper in the hero.

Principles

1. One blue does everything: the primary fill, links, eyebrows, display headlines and focus. Never add a second brand colour.
2. Display type is light. The serif runs at 300 for display and 400 for titles, never heavier.
3. Every label is mono: buttons, badges, nav links, eyebrows, table heads, keys, ids and numbers.
4. Corners stay sharp: 2px on what you touch, 4px on what floats, 6px only on picture frames.
5. Depth is a keycap edge, not a shadow. The one drop shadow belongs to the product picture.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f4f4f2	#1f2227	The page floor
surface-soft	#eeeeeb	#24272d	Section bands, sidebars, table heads
surface-card (--muted)	#eaeae6	#2c3038	Tinted fills: inactive tabs, hover rows, code
surface-strong	#dfdfdb	#363b45	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#2f343e	Menus, selects, toasts: always opaque
card	#ffffff	#282c33	The card fill
surface-dark	#282c33	#16181c	The inverted panel
hairline (--border)	#dcdcd8	#3b414d	Every border and divider
ink (--foreground)	#242629	#dce0e5	Headings and primary text
body-strong	#3a3d43	#c8ccd4	Emphasised body text
body	#464b57	#b4b9c2	Running text
muted (--muted-foreground)	#5d636f	#a9afbc	Secondary text, captions
muted-soft	#7e8294	#878a98	Placeholders, disabled text, icons at rest
primary	#1348dc	#2862e6	The action colour
accent (--accent-fill)	#1348dc	#74ade8	The saturated accent: links, the accent badge
accent-soft	#e6effe	#1f2b44	The tint an accent label sits on
danger (--destructive)	#b81e1b	#e5737c	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #1f7038, #955301 and #b81e1b in light, #a1c181, #dec184 and #e5737c in dark.

Quill's own variables, read by the landing hooks and the kit: --grid-line (rgb(19 72 220 / 0.04) light, rgb(116 173 232 / 0.04) dark), --grid-line-strong (rgb(19 72 220 / 0.08) light, rgb(116 173 232 / 0.08) dark).

How colour is used

• bg-primary (#1348dc) fills the main action and deepens to #0f3dc2 on hover.
• text-accent colours links, eyebrows, display headlines, stat figures, feature icons and step numbers. In dark it lifts to #74ade8 so type stays readable on graphite.
• The ice wash (bg-accent-soft, #e6effe) marks highlighted menu items, the current nav item, selected rows, the info alert and the graph-paper stages.
• Text steps from ink (#242629) through body (#464b57) to muted (#5d636f). Lines are #dcdcd8; fields, keys and nodes take the firmer #cccfd3.
• Green, amber and red mark status only, as soft tints with a coloured icon.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series lead with the deep blue, then ochre, teal, violet, moss and rose. In dark they turn into editor syntax colours: the lifted blue, tan, cyan, orchid, green and coral. 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 Quill is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• IBM Plex Serif (font-display): headings and display type (weights 300, 400).
• IBM Plex Sans (font-body): running text and interface copy (with italics).
• IBM Plex Mono (font-mono): code, ids and tabular labels (weights 400, 500).

One superfamily: the serif, sans and mono share a skeleton, so the page reads as one voice in three registers. The serif at 300 gives the light printed headline, and the mono sets every label and key like an annotation in a manual.

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	60px	1.06	-0.02em	300	The hero headline, desktop
text-display-lg	52px	1.08	-0.02em	300	The hero headline, tablet
text-display-md	36px	1.12	-0.02em	300	Section headlines, the hero on phones
text-display-sm	28px	1.2	-0.015em	300	Section headlines on phones, big numbers
text-title-lg	24px	1.3	-0.01em	400	Page titles in the app
text-title-md	18px	1.35	-0.005em	400	Card titles
text-title-sm	16px	1.4	0	500	Small headings, table titles
text-body-lg	17px	1.6	0.02em	400	Lead paragraphs
text-body-md	15px	1.6	0.015em	400	Running text
text-body-sm	14px	1.55	0.01em	400	Interface copy, table cells
text-caption	13px	1.45	0.01em	400	Metadata, helper text
text-caption-uppercase	12px	1.4	0.06em	500	Eyebrows above headings
text-button	13px	1	0	500	Buttons
text-nav-link	13px	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. Display steps are Plex Serif 300 from 28 to 60px at -0.02em; titles are 400 at 18 and 24px, and title-sm is a 16px sans label at

500. Body is Plex Sans at 14 to 17px with +0.01 to +0.02em. Labels, buttons and nav links are 12 to 13px mono; mono capitals carry +0.05 to +0.06em.

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).
• Spacing steps are 4, 8, 12, 16, 24, 32 and 48px, with 80px between sections.
• Density is compact: controls keep a 6px inner gap and cards pad 24px.
• The column is 80rem. From 1312px the rails, nodes and ruler ticks frame it; below that only the full-width rules stay.

Shape and depth

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

Radii are 2px on controls, cards, badges, tags and keys, 4px on dialogs, popovers, menus and toasts, and 6px on the product preview, showcase stages, the stat grid and the CTA panel. Lines are 1px: solid for rules, edges, rows and fields, dashed only for the frame's rails, grid dividers, step connectors and outline cards. Buttons, keys and chips carry an inset 2px darker bottom edge. The lift shadow sits only under the product picture, the CTA panel and the featured plan; floating panels take 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 Quill
Button	A keycap: 2px corners, a 13px Plex Mono 500 label in sentence case and a 6px icon gap. Primary is the deep blue with a white label and a darker bottom edge; secondary is a white key with a firm edge; both sink 1px and lose the edge when pressed. Outline is a drawn hairline, ghost takes the ice wash on hover, danger is red with the key edge, and link is blue sans text with a soft underline. Sizes are 32, 40 and 44px tall. Focus is a square 2px blue outline, 2px off the edge.
Badge	A 2px tag, 20px tall, with a 1px border and a 12px mono label that keeps lower case. Neutral is grey, accent is the ice wash with blue text, and success, warning and danger are soft tints with a status border. The uppercase option gives the eyebrow look.
Card	A white 2px sheet with a hairline on the paper, never a drop shadow. Soft and strong step the tone, outline is a dashed slot and dark is the graphite editor inset. Padding is 16, 24 or 32px; titles are the 18px serif at 400.
Input, Textarea, Select	40px white fields (textareas start at 80px) with 2px corners and the firmer #cccfd3 line. Focus turns the line blue with a 3px soft halo; invalid turns it red, with a red halo when focused. Select content floats on a 4px panel with the overlay shadow; the highlighted item takes the ice wash with deep blue text and the chosen one shows a blue check.
Checkbox, RadioGroup, Switch	Checkboxes are 16px squares with 2px corners that fill blue with a white tick. Radios are the round exception with a 6px blue dot. The switch is a square toggle: a grey track with a firm edge and a small keycap thumb, blue when on. All three take the 2px blue focus outline.
Tabs	Default tabs sit in a grey tray, and the active tab is a white key pressed into it. Line tabs are editor tabs: mono labels over a hairline, with a 2px blue underline on the active one.
Accordion	Items split by solid hairlines. Triggers are 16px sans 500 in ink that turn blue on hover, with a chevron that turns over in 200ms.
Dialog, AlertDialog, Sheet	4px panels with a hairline and the overlay shadow over a graphite scrim at half, no blur. Titles are the 24px serif; the footer is a paper strip with a top hairline and buttons on the right. Sheets hang square from their edge.
DropdownMenu, Popover, Select content, Tooltip	4px panels with a hairline and the overlay shadow. Items highlight to the ice wash with deep blue text, labels are mono capitals and shortcuts are wide-set mono. Tooltips are graphite editor hints in 13px mono with no arrow, in both themes.
Table	A ruled sheet: a soft header row with mono capital heads, hairline rows that tint on hover and the ice wash on selected rows. Figures are tabular; set ids and numbers in font-mono and right-align the numbers.
Alert	A 2px panel with a 1px border and a 16px icon. Info is the ice wash with a blue icon and a deep blue title; success, warning and danger are soft tints with a status border. No side bar and no shadow.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with a hairline ring and mono initials. Progress is a 6px bar with a blue fill on a grey track. Skeletons pulse grey and spinners are a thin arc. Separators are always solid 1px hairlines. Kbd is the signature keycap: 11px mono with a firm edge and a darker bottom edge, and a translucent chip inside a primary button. Breadcrumbs read as a mono file path split by slashes. Pagination is a row of 32px mono keys with the current page in blue. Labels are 14px sans 500, field help is 13px muted. Toasts float on 4px panels, show the status in the icon and carry mono keycap 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. Quill styles these:

• section: a solid rule across the top of every band; from 1312px, dashed rails run down both column edges and a hollow 7px diamond node pins each crossing.
• site-header: translucent paper with its hairline, solid rails inside the band and two diamond nodes on its bottom rule.
• site-nav: the current page sits on the ice wash in deep blue with a 2px blue line along its foot.
• brand-mark: a stamped drawing number, a transparent square in a 1.5px blue frame with a 1px inner frame and the initial in the serif.
• hero-backdrop: graph paper inside the column, an 8px minor grid under a 40px major grid in faint blue, in place of the accent wash.
• hero: from 1312px, ruler ticks hang outside both rails (short every 8px, long every 40px) and fade out down the first 30rem.
• hero-eyebrow: a 2px white keycap chip in 12px mono with the darker bottom edge; a linked chip turns its edge blue on hover.
• hero-title and section-title: the light serif in the one blue, like the CTA panel's title.
• hero-actions: the outline button becomes a white keycap with a firm edge, so a blue key sits next to a white one over the grid.
• hero-note: 13px mono, like a platform line in a manual.
• hero-visual: an ice-blue band with a 16px grid, opened by a full-width rule, with solid sides and diamond nodes on its top corners from 1312px.
• product-preview: keeps its white sheet and hairline and takes the lift shadow; product-preview-bar turns its dots into rose, amber and green lights.
• section-eyebrow: mono capitals led by a hollow 7px diamond in their own colour, on every section and showcase row.
• logo-cloud and logo: one band between two solid rules, cells split by dashed rules, wordmarks in the muted serif.
• feature-grid and feature-card: no boxes, just open columns on dashed dividers with solid row rules, closed top and bottom.
• feature-icon and step-marker: 2px white keycaps with a firm edge, the darker bottom edge and a blue glyph; step numbers are mono.
• step: the connector between numbers turns dashed.
• showcase-visual: the same ice-blue graph-paper stage as the hero.
• stat-value and stat: figures in the blue light serif with tabular numbers, labels in mono capitals.
• testimonial: quotes set in the 17px serif in ink.
• cta-panel and cta-band: the graphite panel takes a 16px grid in the lifted blue and a pale blue title; from 1312px the band carries the rails as dashed sides.
• site-footer: plain paper instead of the soft band, opened by its rule with two diamond nodes.

Everything else is type, space and the kit.

Signed-in screens

The dashboard sits on the paper with a soft sidebar split by a hairline; page titles are the 24px serif in ink, cards are white 2px sheets, tables are ruled with mono heads and tabular numbers, and statuses are 2px mono tags.

Sign-in is one white 2px sheet with a hairline and no shadow: the title in the 24px serif, 40px fields with a blue focus halo, a full-width blue keycap and blue links with soft underlines.

Do and don't

Do

• Set every hero and section headline in the display face at 300 in text-accent. The hooks do it on the landing page; do the same on any marketing page you add.
• Keep one blue: primary fills the action, accent colours links, eyebrows, headlines and focus. Nothing else is saturated except charts and statuses.
• Put every label in font-mono: buttons, badges, nav links, eyebrows, table heads, keys, ids and numbers in tables.
• Use 2px corners on controls and cards (rounded-md), 4px on floating panels (rounded-lg) and 6px only on picture frames (rounded-xl).
• Separate regions with one 1px solid rule; use a dashed rule only for column dividers inside a grid and for Card tone="outline".
• Show shortcuts with Kbd, also inside a primary button (Save <Kbd>S</Kbd>). It is the design's key motif.
• Put a product picture on the graph-paper stage (bg-accent-soft with the grid) and give it shadow-lift, the only drop shadow.
• Check every new screen in light and dark: dark is its own editor theme, and the blue changes from #1348dc to #74ade8 for type.

Don't

• Don't set the serif above 400, and don't set a display step below 28px. Under 28px use a title step at 400.
• Don't add a second brand colour, a gradient, a glow or a backdrop blur beyond the header's.
• Don't put a drop shadow on a card, the header, a badge or text. Depth is the keycap edge (shadow-inset) or shadow-overlay for things that float.
• Don't round past 6px. rounded-full is for avatars, radio dots and status dots only, never a pill button or badge.
• Don't set paragraphs in mono or in blue. Running text is IBM Plex Sans in text-body or text-muted.
• Don't draw dashed rules for section edges, table rows or separators. Dashes are the frame's language.
• Don't lay the graph paper behind long text. It belongs to the hero, the product stages and the closing panel.
• Don't paste shadcn's hover:bg-accent hover:text-accent-foreground as is: here bg-accent is the blue fill. Use hover:bg-accent-soft hover:text-accent.

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.