Marker

Marker is warm paper, light black type and one highlighter yellow that marks what matters. Headlines and copy share Inter Tight at light weights, cards are white and square on the warm page, and nothing casts a shadow unless it floats. The yellow is used at full strength and only behind ink: mono capital labels, the active tab, menu hovers, the open question, a stroke across the hero headline and the footer band. Dark is a pure grey product surface where the yellow also carries links and focus.

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 (#f1f1ef) with white cards. Dark is pure grey (#1e1e1e) with cards darker than the page, each with a hairline.
Type	Inter Tight for headlines and copy: a 64px hero at 400, section titles at 300, card titles at 500, tight tracking. DM Mono capitals for labels, badges, column heads and figures.
Colour	Ink (#1b1d1f) on warm greys, one highlighter yellow (#ffdb4d) that always sits behind ink, green and brick red for status only.
Shape	Square: 2px checks and chips, 4px controls, 8px cards and frames, a 10px dialog tray. Badges and marker labels have no radius. No pills.
Depth	Flat. Fill steps and 1px hairlines split surfaces. Only menus, selects, popovers, dialogs, sheets and toasts cast a shadow.
Signature	A highlighter band behind the hero headline (a thick yellow underline in dark), yellow mono labels above every heading and a yellow footer band.

Principles

1. Yellow at full strength and only behind ink. Never tint it, fade it or set text in it on paper.
2. Split surfaces by fill first (a white card on the warm page), by hairline second, by shadow never.
3. Set headlines light: 400 for the hero, 300 for section titles and big numbers. The marker carries emphasis, not weight.
4. Mono is for labels: capitals, figures, ids and keys. Sentences stay in sans.
5. Keep it square: 4px controls, 8px cards, 0px chips and marker squares.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f1f1ef	#1e1e1e	The page floor
surface-soft	#e9e9e6	#1a1a1a	Section bands, sidebars, table heads
surface-card (--muted)	#ffffff	#262626	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e0e0de	#333333	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#181818	Menus, selects, toasts: always opaque
card	#ffffff	#181818	The card fill
surface-dark	#1b1d1f	#111111	The inverted panel
hairline (--border)	#e3e3e0	#3a3a3a	Every border and divider
ink (--foreground)	#1b1d1f	#fafafa	Headings and primary text
body-strong	#2c2f31	#e6e6e6	Emphasised body text
body	#3b3e40	#c2c2c2	Running text
muted (--muted-foreground)	#5b5d60	#a0a0a0	Secondary text, captions
muted-soft	#87898c	#6e6e6e	Placeholders, disabled text, icons at rest
primary	#1b1d1f	#fafafa	The action colour
accent (--accent-fill)	#1b1d1f	#ffdb4d	The saturated accent: links, the accent badge
accent-soft	#ffdb4d	#2c2c2c	The tint an accent label sits on
danger (--destructive)	#a23c3a	#e37770	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #006e3d, #1b1d1f and #a23c3a in light, #3eab6e, #ffdb4d and #e37770 in dark.

Marker's own variables, read by the landing hooks and the kit: --marker (#ffdb4d light, #ffdb4d dark), --marker-ink (#1b1d1f light, #1b1d1f dark), --marker-ink-soft (#3b3e40 light, #3b3e40 dark), --marker-line (rgb(27 29 31 / 0.2) light, rgb(27 29 31 / 0.2) dark), --mark-thickness (0.36em light, 0.08em dark), --mark-offset (-0.3em light, 0.1em dark).

How colour is used

• The MARKER recipe (bg-accent-soft text-accent-foreground dark:bg-accent) fills the active tab, highlighted menu and select items, open sub-menus, the current page, accent badges and the warning toast icon. The open accordion title wears the highlighter band instead.
• text-accent and bg-accent are ink in light and yellow in dark, so links, progress and the showcase checks follow the mode. Never write bg-accent text-accent-foreground: in light that is ink on ink.
• Text steps from ink (#1b1d1f) headings to body (#3b3e40) and muted copy (#5b5d60); #87898c is for placeholders only.
• Green and brick red mark status only, as soft tints with a coloured label. Warning is the yellow with an ink rule.
• Selected text is the highlighter, yellow behind ink. In the footer it inverts to yellow on ink.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six quiet series: dark gold, green, deep teal, violet, rose and grey in light; yellow, green, sky, lilac, rose and grey in dark. They stay apart in greyscale, and none of them outshouts the yellow. 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 Marker is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Inter Tight (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).

Inter Tight is a plain grotesque with a tight default fit, so headlines stay calm at light weights and copy speaks in the same voice, with a real italic for long text. DM Mono is round and open: in capitals it reads as a label, not as code.

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	64px	1.2	-0.025em	400	The hero headline, desktop
text-display-lg	56px	1.15	-0.025em	400	The hero headline, tablet
text-display-md	40px	1.12	-0.03em	300	Section headlines, the hero on phones
text-display-sm	32px	1.15	-0.03em	300	Section headlines on phones, big numbers
text-title-lg	24px	1.25	-0.02em	400	Page titles in the app
text-title-md	18px	1.35	-0.015em	500	Card titles
text-title-sm	16px	1.4	-0.01em	500	Small headings, table titles
text-body-lg	20px	1.45	-0.025em	300	Lead paragraphs
text-body-md	16px	1.55	-0.015em	400	Running text
text-body-sm	14px	1.5	-0.01em	400	Interface copy, table cells
text-caption	13px	1.4	0	400	Metadata, helper text
text-caption-uppercase	12px	1.35	0.04em	400	Eyebrows above headings
text-button	14px	1	0.01em	400	Buttons
text-nav-link	14px	1.3	-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. One voice: a 64px Inter Tight hero at 400 on 1.2, 32 to 40px section titles at 300 with -0.03em, 20px leads at 300 and 14 to 16px body at 400. DM Mono sets the capital labels at 12 to 13px with open tracking. Never use 600 or 700 for a heading.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 56px, 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).
• Spacing steps are 4, 8, 12, 16, 24, 32 and 56px, with 112px between landing sections.
• Marketing is roomy: feature and quote cards pad 32px from small screens up. The app is standard: 40px controls, 40px table heads and 48px rows.
• Sections with cards stay on the warm page; the steps and the FAQ become white bands between hairlines.

Shape and depth

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

Radii are 2px on checkboxes, switches, keys, skeletons and avatars, 3px on menu items and tooltips, 4px on buttons, inputs, tabs and alerts, 8px on cards, popovers and every landing frame, and 10px on the dialog tray. Badges and marker labels are square. Borders are solid and never dashed: 1px hairlines on rows and dark cards, a firmer 1px line on fields, a 6px grey frame on the dialog tray and a 4px ink rule on the warning alert. Only floating layers cast a shadow; a focused field gets a yellow halo.

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 Marker
Button	4px corners, Inter Tight 14px labels in sentence case, no shadow. Primary is ink with a white label (white with ink in dark) and is the one button that never hovers yellow. Secondary is the grey chip, outline is white with a field line, ghost is plain body text; all three hover to the yellow with an ink label. Link buttons underline in ink and hover to the marker. Small, medium and large are 32, 40 and 48px tall. Focus is a 2px ring with a 2px gap, ink in light and yellow in dark.
Badge	A square 24px chip, always in DM Mono capitals. Neutral is grey, accent is the yellow with ink, warning is the yellow with a 1px ink line (grey with a yellow line and label in dark), success and danger are soft tints.
Card	8px corners, white on the warm page with no visible line and no shadow. In dark, cards sit darker than the page and keep a hairline. Soft, strong, outline and dark tones step the fill. Titles are 18px at 500. The default card's line is transparent, so a clickable card can add hover:border-accent-soft dark:hover:border-accent to turn its edge yellow.
Input, Textarea, Select	40px white fields with a firm 1px line and 4px corners; textareas start at 96px. Focus turns the line ink with a 3px yellow halo (a yellow line with a 2px halo in dark). Placeholders are pale grey. Select content is a white 8px panel where the highlighted item is the yellow with ink text and group labels are mono capitals.
Checkbox, RadioGroup, Switch	Checkboxes are 2px squares with a mid-grey line that fill ink with a white tick. Radios are the one round control, with an ink dot. Switches are square tracks with a square thumb: grey off, ink on (white in dark). All three take the 2px focus ring with a 2px gap, and none of them uses the yellow.
Tabs	The default list is a grey track and the active tab is the yellow with ink text and a faint ink edge. Line tabs keep ink text and mark the active tab with a 3px yellow bar.
Accordion	Hairline rows, 16px titles in ink and a grey chevron that turns ink as it flips. The open row's title wears the headline's highlighter: a yellow band behind the lower half of the words (a thick yellow underline in dark).
Dialog, AlertDialog, Sheet	A flat ink scrim with no blur, 40% in light and 60% in dark. Dialogs are trays: 10px corners, a 6px grey frame round a white panel and the overlay shadow, with primary or danger plus outline at the bottom right; the close is a 32px ghost button that hovers yellow. Sheets are square, flush to their edge, with a hairline on the open side and under the header.
DropdownMenu, Popover, Select content, Tooltip	White 8px panels with a hairline and the overlay shadow. Highlighted items and open sub-menus are the yellow with ink text and an ink icon; group labels and shortcuts are mono. Tooltips invert and stay flat: ink with white text (white with ink in dark), 3px corners.
Table	No outer frame. Mono capital column heads 40px tall, hairline rows 48px tall, tabular figures. Hover is a faint ink tint and selected rows are grey. No zebra stripes and no vertical rules.
Alert	4px corners and no shadow. Info is a card panel with a hairline, success and danger are soft tints (the danger title turns red), and warning is the yellow with a 4px ink rule on the left (grey with a yellow rule in dark).
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are square with mono initials on grey. Progress is a square 8px track with an ink fill (yellow in dark). Skeletons pulse on grey and spinners take the colour of the text around them. Separators are 1px hairlines. Kbd is mono on the card fill with a hairline. Breadcrumbs split with a chevron and end on the current page in ink at 500. Page numbers are mono and the current page is the yellow. Labels are 14px at 500 in ink and turn red with their error text when a field is invalid; legends are 16px titles. Toasts are white 8px panels whose status icons sit in small squares: the yellow for warning, soft tints for success and errors, grey for info.

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

• site-header: a plain white bar with the hairline below it, no blur and no tint.
• brand-mark: a square of yellow with a DM Mono letter in ink; in the footer it flips to ink with a yellow letter.
• site-nav: ink links with square corners; hover and the current page run the yellow behind the word.
• hero-backdrop: the accent glow is gone. A band one step darker than the page runs under the lower part of the product window, with a hairline at each edge.
• hero-eyebrow: a marker label, ink DM Mono capitals on a square yellow swipe with only 4px of yellow at each side; a linked one underlines in ink on hover.
• hero-title: weight 400 with balanced lines and a yellow band behind the lower half of each line, which becomes a thick yellow underline in dark.
• hero-note: one short line of DM Mono capitals at 12px.
• product-preview: flat, with no shadow and 8px corners.
• section-eyebrow: the same marker label above every h2 and each showcase h3.
• section-title: weight 300 with balanced lines.
• section logos and site-footer column titles: DM Mono capitals, without the yellow.
• feature-card and testimonial: 24px padding, 32px from small screens up; a hovered feature card turns its edge yellow and nothing moves.
• feature-icon and step-marker: square yellow boxes with ink icons and DM Mono numbers.
• showcase-visual: 8px corners on the stepped grey stage.
• section how-it-works and faq: white bands between hairlines (the darker card tone in dark).
• stat-grid, stat and stat-value: white cells on an 8px hairline grid, with 48px numbers at 300 in tabular figures.
• cta-panel: the dark product surface, flat with 8px corners and no wash; its headline wears a thick yellow underline, so the page opens and closes on the same stroke.
• faq: the hovered and the open question wear the headline's highlighter, the open chevron turns ink, and the email link is underlined.
• site-footer: a yellow band in both themes. Text, lines, links and focus turn ink, links underline on hover, and selected text inverts to yellow on ink.

Everything else is type, space and the kit.

Signed-in screens

The dashboard and settings sit on the warm canvas with a darker sidebar, white cards and white table panels with mono capital column heads; yellow marks only the active tab, accent badges and highlighted menu items.

Sign-in is one white 8px card on a darker warm ground, with 40px fields, an ink focus with a yellow halo and a full-width ink button; in dark it turns pure grey with a white button and a yellow ring.

Do and don't

Do

• Use the yellow only at full strength and only behind ink: the MARKER recipe in the kit, --marker and --marker-ink in CSS.
• Put a mono capital label on yellow above a heading when a block needs a name.
• Split surfaces by fill first (a white card on the warm page), and reach for a hairline second.
• Keep corners square: 4px controls, 8px cards and frames, 0px chips and marker squares.
• Set headlines light: 400 for the hero and app titles, 300 for section titles and big numbers.
• Underline links in ink (light) or yellow (dark), and let hover turn the underline into the marker.
• Set ids, counts, keys and column heads in mono, with tabular-nums on figures that line up.
• Check every screen in light and in dark; the marker labels and the footer look the same in both.

Don't

• Don't tint, darken or fade the yellow: no bg-accent-soft/50, no yellow gradient, no yellow text on the light page.
• Don't add a second accent colour. Green, red and the chart series appear only where there is a status or data.
• Don't cast a shadow on anything that does not float. Only menus, selects, popovers, dialogs, sheets and toasts get shadow-overlay.
• Don't use pills. Switches, tags, avatars and buttons stay square; rounded-full is for radio dots and the spinner.
• Don't set a sentence in mono, and don't set a label in sans capitals when the kit has a mono one.
• Don't use 600 or 700 for headings. Weight carries no emphasis here; the marker does.
• Don't put grey text on the yellow outside the footer's re-pointed tokens; use --marker-ink or --marker-ink-soft.
• Don't paste shadcn's bg-accent text-accent-foreground: in light it is ink on ink. Use the MARKER recipe.

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.