Terminal

Terminal is a spec sheet printed on black. Headlines are a condensed serif at one weight, labels and numbers are mono, and running text is a plain sans. Pure grey panels step up one shade at a time and 1px hairlines do the separating, so nothing casts a shadow. One acid lime marks the thing that acts.

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 on a #0a0a0a canvas. Light keeps the same greys, rules and type on #f4f4f4 paper, with lime text walked down to olive.
Type	Instrument Serif 400 for headings, big figures and quotes. JetBrains Mono for buttons, labels, badges, tabs, nav links and small numbers. Geist for running text.
Colour	Pure greys with no tint and one acid lime (#c5f04a) for the main action, focus, live status and key figures. Amber and red mean status, nothing else.
Shape	Square: 2px badges and checkboxes, 3px buttons, 4px inputs and cards, 6px frames. Pills only on the hero chip, radios and status dots.
Depth	Flat. A 1px hairline over one fill step (#0a0a0a page, #131313 card, #1a1a1a strong). Only overlays cast a shadow.
Signature	A ruled 64px grid behind the hero, lime "/ 01" index labels over every section, and a feature table drawn in 1px rules.

Principles

1. Serif for what you read big, mono for what you scan, sans for what you read long.
2. Separate with a 1px line over one fill step. Never with a shadow.
3. Lime marks the thing that acts. A few per screen, no more.
4. Corners stop at 6px. Pills only for the hero chip, radios and status dots.
5. Every neutral is a pure grey.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f4f4f4	#0a0a0a	The page floor
surface-soft	#fafafa	#111111	Section bands, sidebars, table heads
surface-card (--muted)	#ffffff	#131313	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ebebeb	#1a1a1a	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#131313	Menus, selects, toasts: always opaque
card	#ffffff	#131313	The card fill
surface-dark	#0a0a0a	#000000	The inverted panel
hairline (--border)	#e2e2e2	#1f1f1f	Every border and divider
ink (--foreground)	#131313	#ededed	Headings and primary text
body-strong	#303030	#d4d4d4	Emphasised body text
body	#515151	#a2a2a2	Running text
muted (--muted-foreground)	#666666	#8a8a8a	Secondary text, captions
muted-soft	#8a8a8a	#656565	Placeholders, disabled text, icons at rest
primary	#c5f04a	#c5f04a	The action colour
accent (--accent-fill)	#587000	#c5f04a	The saturated accent: links, the accent badge
accent-soft	#eef5d3	#1e2414	The tint an accent label sits on
danger (--destructive)	#a83030	#ff5c5c	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #4c6a12, #7d5a00 and #a83030 in light, #c5f04a, #f5a524 and #ff5c5c in dark.

Terminal's own variables, read by the landing hooks and the kit: --grid-line (rgb(0 0 0 / 0.07) light, rgb(255 255 255 / 0.08) dark), --wash (rgb(197 240 74 / 0.16) light, rgb(197 240 74 / 0.08) dark), --signal (#8fb02e light, #c5f04a dark), --signal-glow (rgb(143 176 46 / 0.4) light, rgb(197 240 74 / 0.45) dark).

How colour is used

• Lime is the primary button fill in both modes, always with a near-black label.
• Lime text, icons and small fills (links, index numbers, checks, switches, progress) go through text-accent and bg-accent: lime in dark, olive (#587000) in light.
• Greys do everything else: #ededed ink, #d4d4d4 strong body, #a2a2a2 body, #8a8a8a muted, #1f1f1f hairlines and #2a2a2a control lines.
• Amber and red mark warnings and errors only, as soft fills with status text. Success shares the lime.
• Selected text is a lime block with a near-black label.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series: lime, sky, amber, rose, violet and grey in dark, and the same order walked down for light (#779227, #2a8cbc, #8a5a12, #c94f7c, #7454b0, #515151). Series 6 is the body grey for "Other", and neighbours stay apart under deuteranopia and protanopia. 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 Terminal is drawn in dark first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Instrument Serif (font-display): headings and display type (weights 400, with italics).
• Geist (font-body): running text and interface copy.
• JetBrains Mono (font-mono): code, ids and tabular labels.

Instrument Serif is condensed and high in contrast, so headlines look set, not typed, and its italic carries the lime phrase. Geist keeps running text neutral and crisp, and JetBrains Mono gives every label, button and number the engineered 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	76px	1	-0.025em	400	The hero headline, desktop
text-display-lg	64px	1.03	-0.022em	400	The hero headline, tablet
text-display-md	52px	1.06	-0.02em	400	Section headlines, the hero on phones
text-display-sm	40px	1.1	-0.015em	400	Section headlines on phones, big numbers
text-title-lg	28px	1.2	-0.01em	400	Page titles in the app
text-title-md	22px	1.3	-0.007em	400	Card titles
text-title-sm	18px	1.35	-0.005em	400	Small headings, table titles
text-body-lg	18px	1.55	-0.009em	400	Lead paragraphs
text-body-md	16px	1.6	-0.011em	400	Running text
text-body-sm	14px	1.55	-0.006em	400	Interface copy, table cells
text-caption	13px	1.45	0	400	Metadata, helper text
text-caption-uppercase	12px	1.4	0.1em	500	Eyebrows above headings
text-button	13px	1	0.01em	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. Headings are Instrument Serif at 400 only, from 76px in the hero down to 18px titles. Size and space carry the hierarchy, never weight. Mono labels run 11 to 13px, in capitals on 0.1em for eyebrows and table heads. Big numbers are serif; small numbers are mono with tabular figures.

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).
• Steps are 4, 8, 12, 16, 24, 32 and 48px, with 112px between sections.
• Generous vertically, tight horizontally. Controls are 32, 40 and 48px tall; table rows are 44px.
• Cards pad 24px. Landing cells and the sign-in card pad 32px.
• Section headings sit left, under a full-width hairline that opens every section.

Shape and depth

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

Radii are 2px on badges, checkboxes, kbd and avatars, 3px on buttons and menu items, 4px on inputs, cards and menus, 5px on alerts and 6px on the product frame, stat grid and CTA panel. Dialog trays alone reach 8px. Borders are 1px: the hairline for structure, the stronger input line for controls and frames, dashed for list rows. Only overlays take shadow-overlay, and shadow-ring is a 1px ring-coloured line for a selected box.

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 Terminal
Button	Mono 13px at 500, sentence case, 3px corners, a 1px border on every variant and no shadow. Primary is lime with a near-black label and presses 1px down. Secondary is the strong grey with an input line; outline is transparent with a grey line and a muted label that turns ink on hover; ghost takes a 6% ink wash; danger is a soft red tint with red text, never a solid block. Sizes are 32, 40 and 48px. Focus is a 2px ring outline 2px off the edge, so it shows around the lime.
Badge	A square mono chip, never a pill: 2px corners, 20px tall, 11px capitals on 0.08em. Neutral is the strong grey with muted text; accent, success, warning and danger are soft fills with status text.
Card	4px corners and no shadow in any tone. Default is #131313 on the #0a0a0a page with a 1px hairline; soft, strong, outline and dark step the fill. Titles are the 22px serif at 400, descriptions muted Geist, and footers sit under a dashed rule.
Input, Textarea, Select	40px tall, 4px corners, a 1px input line, filled #1a1a1a in dark and white in light, so a field sits one step up from its card. Focus turns the line to the ring colour with a flat 3px band, no blur. The mono option sets JetBrains Mono for ids, keys and hosts. Select content is solid with an accent check on the chosen item.
Checkbox, RadioGroup, Switch	Checkboxes are 16px squares with 2px corners. Radios stay round, so they never read as checkboxes. The switch is square too, with 3px track corners. Off boxes, rings and tracks take the muted-soft line so they stay visible on a card. On states take the accent fill: lime with a near-black mark in dark, olive with white in light.
Tabs	Default tabs sit in a strong grey track; triggers are mono 12px and the active one is the card fill with an input line. Line tabs mark the active trigger with a 2px accent underline.
Accordion	Rows split by hairlines, no box around them. Geist 16px triggers at 500 that underline on hover, and a muted chevron that flips when open.
Dialog, AlertDialog, Sheet	A tray holding a card. A 4px band of the strong grey rings the solid card, so the tray's outer corners land at 8px, with the overlay shadow under both. The card has a hairline and 4px corners, and the footer is its own strip under a 4px band of the tray grey. Titles are the serif at 400. The scrim is dark at 40% (75% in dark) with a 2px blur. Sheets are square with an input line on the open edge, 24px padding and mono nav links.
DropdownMenu, Popover, Select content, Tooltip	A solid surface, a 1px input line, 4px corners and the overlay shadow. Items are 32px Geist rows that highlight to the strong grey; labels and shortcuts are mono 11px and checks are the accent. Tooltips are mono 11px on the same surface with 3px corners, not inverted, with no arrow.
Table	A strong grey header band with mono 11px capital heads, hairline rows 44px tall and Geist cells with tabular figures. Set number cells in font-mono and right-align them. Selected rows take the accent tint.
Alert	5px corners, no border, no shadow. Info sits on the strong grey; success, warning and danger are soft fills with the icon and title in the status colour and the description in body text.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are square with 2px corners and mono initials. Progress is a 4px bar with square ends and an accent fill. Skeletons pulse on the strong grey, and the spinner ticks round in eight hard steps. Separators are 1px hairlines. Kbd is flat mono 11px on an input line. Breadcrumbs are mono with slashes, so a trail reads like a path, and pagination is mono in 40px squares with the current page on the card fill inside an input line. Labels are mono 12px and help text is Geist 13px. Toasts are solid with an input line and show status 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. Terminal styles these:

• hero-backdrop: a ruled 64px grid centred on the page axis that fades out before the fold. No wash.
• hero-eyebrow: the only pill on the page, a mono capital status chip led by a 6px lime dot that breathes.
• hero-title and section-title: the serif set in balanced lines; a phrase wrapped in <em> turns lime italic.
• hero-note: mono 12px.
• hero-actions and cta-panel: the primary button takes a soft lime glow on hover.
• hero-visual: a faint lime haze behind the product frame.
• product-preview: flat, on the stronger input line. product-preview-bar sits on the canvas with square window dots.
• section: a full-width hairline opens every section after the logo strip, and the stock bottom borders go so rules never double.
• section-heading: left aligned, and it restarts the showcase row count.
• section-eyebrow: muted mono capitals led by a lime index, "/ 01" over a section and "02.1" over a showcase row.
• section logos: the label is mono capitals between two hairlines.
• feature-grid and feature-card: one ruled table on the card fill, cells split by 1px rules with 32px inside each cell.
• feature-icon: a 6px square tile on the input line with a lime glyph. Its line lights up when the card is hovered.
• showcase-visual: a drafting stage with a 32px grid fading from the top right corner, where a lime wash sits. The row's points sit on dashed rules.
• step and step-marker: ruled columns with mono "01" indexes and the first rule in the accent. The connector line goes.
• stat-value: lime serif figures with tabular numbers, over mono capital labels.
• testimonial: quotes set in the 22px serif.
• faq: dashed rows under a solid top rule, with serif questions.
• cta-panel: the stronger line, with the hero grid repeated inside the black panel.
• site-header: starts the section count. site-nav links are mono, and the header's own primary button is ink with a canvas label, so lime stays in the hero.
• brand-mark: a 2px square with a mono letter.
• site-footer: flat canvas, not a tinted band, with mono capital column heads.

Everything else is type, space and the kit.

Signed-in screens

The dashboard keeps the black canvas, with a sidebar on the soft fill behind a hairline and the active row stepped up to the card fill. Page titles are the 28px serif, cards are #131313 with hairlines, tables use mono heads and numbers, and lime is saved for the primary action, focus and live status.

Sign-in is one card on the soft page: 4px corners, 32px padding, a centred serif title, mono labels, a full-width lime button and outline provider buttons.

Do and don't

Do

• Set every heading in Instrument Serif at 400 and let size carry the hierarchy.
• Put every button, badge, label, table head, tab and nav link in JetBrains Mono.
• Separate surfaces with a 1px hairline over one fill step: #0a0a0a page, #131313 card, #1f1f1f line.
• Keep lime for the main action, focus, the live dot, index numbers and big figures. Count them: a few per screen.
• Wrap one phrase of a headline in <em> for the lime italic, at most once per heading.
• Use dashed input-line rules for list rows and solid hairlines for structure.
• Set ids, counts, dates and money in font-mono tabular-nums.
• Check light mode: lime text turns olive through text-accent, and only the primary button keeps the lime fill.

Don't

• Don't add a shadow to anything that sits on the page. Only overlays get shadow-overlay.
• Don't round past 6px, or put a pill on buttons, badges, cards or switches.
• Don't add a second accent hue. Sky, rose and violet are chart series; amber and red are status.
• Don't bold the serif or put font-semibold on a heading.
• Don't set lime text on a light surface. Use text-accent, which is olive in light.
• Don't put a gradient on a surface that holds content. Grids and the 8% wash are backdrop only.
• Don't set running text in mono, or the serif below 18px.
• Don't tint the greys warm or cool. Every neutral is a pure grey.

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.