Newsprint

Newsprint is a quality broadsheet on cream paper, where every column earns its space and the only colour is the action that matters. One serif, Newsreader, sets every word. Structure comes from black rules and grey hairlines, every corner is square, and nothing casts a shadow. Dark mode is the night edition: charcoal paper, cream ink, the same yellow.

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: black ink on cream paper (#fdfcf3). Dark is the night edition on charcoal (#1c1b1a) with cream ink, not an inversion.
Type	Newsreader for every word: headlines at 400 with -0.02em, labels, buttons and table heads in tracked capitals. IBM Plex Mono for code, keys and ids only.
Colour	Black ink and warm greys, one signal yellow (#ffc500) for the primary action, green, amber and red for status only.
Shape	Square: 0 on controls, cards, menus and dialogs. 8px only on picture frames, plates, the CTA panel and the dark card. Circles for avatars, radios and status dots.
Depth	Flat. No shadows: rules and tone do the work. Floating layers carry a 1px black border; a 1px ink ring thickens a focused field to 2px.
Signature	A masthead with a black foot rule and piped capitals nav, a folio line over a 72px regular headline, black column rules, and a charcoal broadcast card with a yellow foot rule.

Principles

1. One serif for every word. Newsreader sets headlines, body, buttons, labels and tables.
2. One yellow button per view, on the action that matters.
3. Draw structure with rules: 1px black for structure, grey hairlines inside, 3px black for emphasis.
4. Keep corners square. 8px belongs to pictures and the broadcast card.
5. Depth is tone and rules, never a shadow, a glow or a gradient.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#fdfcf3	#1c1b1a	The page floor
surface-soft	#fdfbe4	#2a2929	Section bands, sidebars, table heads
surface-card (--muted)	#f1f0ea	#353331	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e7e6df	#423f3c	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#282726	Menus, selects, toasts: always opaque
card	#ffffff	#232221	The card fill
surface-dark	#2a2929	#0f0f0e	The inverted panel
hairline (--border)	#d9d9d9	#403e3b	Every border and divider
ink (--foreground)	#000000	#f6f3e8	Headings and primary text
body-strong	#141414	#e9e5d9	Emphasised body text
body	#262626	#d5d0c4	Running text
muted (--muted-foreground)	#666666	#b0ab9f	Secondary text, captions
muted-soft	#8a8a8a	#807b73	Placeholders, disabled text, icons at rest
primary	#ffc500	#ffc500	The action colour
accent (--accent-fill)	#000000	#f6f3e8	The saturated accent: links, the accent badge
accent-soft	#e9e8e0	#3b3936	The tint an accent label sits on
danger (--destructive)	#b3261e	#f0846e	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #1f6b3a, #8a5a00 and #b3261e in light, #86c99a, #e2b05a and #f0846e in dark.

Newsprint's own variables, read by the landing hooks and the kit: --rule (#000000 light, #cfc9bb dark), --signal (#ffc500 light, #ffc500 dark), --on-signal (#000000 light, #000000 dark), --halftone (rgb(0 0 0 / 0.1) light, rgb(246 243 232 / 0.08) dark).

How colour is used

• Signal yellow (bg-primary, #ffc500) fills the primary button and the app tile. It is never text, an icon, a link, a badge or a progress bar.
• Black ink draws the structure and fills the reversed secondary button, the accent badge, checked controls and the current page.
• Surfaces step by tone: cream page, white bg-card for working surfaces, margin cream bg-surface-soft for featured blocks, grey bg-surface-card and bg-surface-strong below.
• Green, amber and red mark status only, on their -soft tints with a border at 30% and a 3px left rule.
• Selection is reversed: an ink ground with paper text.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series: ink, yellow, blue, coral, grey and green (cream, yellow, sky, coral, grey and green at night). They live in charts, avatars and status dots, never in the interface chrome. 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 Newsprint is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

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

Newsreader is a screen-first news serif with a large x-height and an optical size axis, so one family sets crisp 72px headlines and sturdy 13px capital labels. IBM Plex Mono has small slab serifs that sit well beside it, and is kept for code, keys and ids.

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.02	-0.02em	400	The hero headline, desktop
text-display-lg	56px	1.04	-0.02em	400	The hero headline, tablet
text-display-md	40px	1.08	-0.02em	400	Section headlines, the hero on phones
text-display-sm	32px	1.12	-0.02em	400	Section headlines on phones, big numbers
text-title-lg	24px	1.2	-0.02em	400	Page titles in the app
text-title-md	20px	1.25	-0.02em	400	Card titles
text-title-sm	16px	1.3	0	600	Small headings, table titles
text-body-lg	18px	1.45	0	400	Lead paragraphs
text-body-md	16px	1.5	0	400	Running text
text-body-sm	14px	1.45	0.005em	400	Interface copy, table cells
text-caption	13px	1.35	0.01em	400	Metadata, helper text
text-caption-uppercase	13px	1.2	0.075em	400	Eyebrows above headings
text-button	13px	1	0.07em	600	Buttons
text-nav-link	14px	1.2	0.06em	400	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Headlines are Newsreader 400 from 20 to 72px with -0.02em tracking, never bold. Body runs 14 to 18px at 400. Buttons, labels, eyebrows, nav, tabs and table heads are 12 to 14px capitals with 0.06em to 0.075em tracking, and numbers use tabular figures.

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: 8px element gaps, 16px card padding in the app, rules instead of extra air.
• Headlines, section heads and body copy are left-aligned. Only the logo strip and the closing card are centred.
• Content stays in the 80rem column; the hero deck stops at 40rem.

Shape and depth

Token	Value	Where
rounded-xs	0	Not used by the kit
rounded-sm	0	Tabs, the landing page
rounded-md	0	The landing page
rounded-lg	0	The landing page
rounded-xl	8px	Card, the landing page
rounded-pill	9999px	The landing page
rounded-full	9999px	Avatar, RadioGroup

Radius is 0 on every control, card, menu, dialog and tab. 8px appears only on the product frame, the showcase plates, the CTA panel and the dark card; circles are for avatars, radios and status dots. Lines are always solid: grey hairlines for edges and rows, 1px black for structure, 3px black for emphasis. No shadows: floating layers get a 1px black border and a focused field a 1px ink ring.

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 Newsprint
Button	Square, Newsreader 13px at 600 in capitals with 0.07em tracking. Primary is signal yellow with black text, a deeper yellow on hover (brighter at night) and a 1px ink ring when pressed; secondary is reversed ink with paper text; outline is a 1px ink line that inverts to an ink fill on hover; ghost is body text with a faint ink wash; danger is red with a contrasting label; link is sentence case ink at 400 with an underline and no side padding. Sizes are 32, 40 and 48px tall. Focus is a 2px ink outline at a 2px offset.
Badge	Square, a 1px border, 12px capitals at 500 with 0.06em tracking. Neutral is transparent with an ink border; accent is reversed ink with paper text; success, warning and danger sit on their soft tints with a status border at 30%. Never yellow.
Card	Square with no shadow. Default is white with a hairline; soft is margin cream with a hairline; strong is grey with no border; outline is a 1px ink box on transparent; dark is the charcoal broadcast card with cream text and 8px corners. Titles are 20px regular serif.
Input, Textarea, Select	40px white fields, square, with a 1px grey line that turns ink on hover, 14px serif text and an italic grey placeholder. Focus is an ink border plus a 1px ink ring, so the frame thickens to 2px. Select content is white with a 1px ink border, a grey highlight and an ink check.
Checkbox, RadioGroup, Switch	Checkboxes are 16px squares with a 1px ink border that fill ink with a paper check, or show an ink bar when indeterminate. The radio is the one round control, with an 8px ink dot. The switch is square too: a 36 by 20px ink-bordered track whose square thumb slides right as the track turns ink.
Tabs	No track and no pill, in both variants. Triggers are 13px muted capitals at 500 on a 1px ink rule; the active tab turns ink with a 3px ink underline laid over the rule.
Accordion	Rows split by hairlines under a 1px ink top rule. Triggers are 16px serif at 600 with an ink chevron that flips when open and an underline on hover. Answers are 16px body text.
Dialog, AlertDialog, Sheet	A charcoal overlay at 60% in both themes. Panels are opaque, square and shadowless with a 1px ink border and 24px regular serif titles; footers set outline before primary, and a destructive confirm uses danger. The close button is a 32px ink cross. Sheets are cream with an ink rule on the inner edge.
DropdownMenu, Popover, Select content, Tooltip	White by day and dark grey at night, with a 1px ink border, square, no shadow. Items are 32px, 14px serif, highlighted in grey; labels are 11px grey capitals and shortcuts are IBM Plex Mono. Tooltips are reversed: charcoal with 13px cream serif.
Table	14px serif rows split by hairlines, with tabular figures. Heads are 12px muted capitals over a 1px ink rule. Hover is grey, a selected row takes the accent tint, the footer is margin cream under an ink rule, and the caption is italic. Right-align number columns.
Alert	Square, a 1px border plus a 3px left rule, 14px text with a 600 title. Info is margin cream with an ink left rule; success, warning and danger sit on soft tints with a status border at 30% and the full status colour on the left rule.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with ink serif initials on grey. Progress is a 4px square ink bar, never yellow. Skeletons pulse in grey and spinners are spinning arcs in the current colour. Separators are 1px hairlines. Kbd is IBM Plex Mono 12px on white with a grey border. Breadcrumbs are 12px capitals split by grey chevrons; the current page in pagination is reversed ink. Labels are 12px capitals at 500, descriptions 13px muted, errors red. Toasts are white with a 1px ink border and a 3px left rule in the status colour.

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

• site-header: an opaque cream masthead with a 1px black foot rule and no blur.
• brand and brand-mark: a 700 serif capitals wordmark beside a square ink nameplate with a paper initial.
• site-nav: ink serif capitals split by black pipes, with a thin underline on hover and on the current page.
• hero-backdrop: bare paper. No wash, no grid, no dots.
• hero-eyebrow: a folio line in 13px ink capitals that runs the full column between two black rules.
• hero-title, hero-actions: the lead story, left-aligned: a 72px regular headline with balanced lines, then the buttons.
• hero-subtitle: a near-black deck that stops at 40rem.
• hero-note: a grey capitals dateline.
• product-preview and hero-visual: a 1px black frame with 8px corners and no shadow; product-preview-bar is margin cream over a black rule with square window dots.
• section: no bands and no borders; a 1px black rule across the content column sits between two sections (not above the logo strip).
• section-heading and section-eyebrow: heads sit flush left; eyebrows are ink capitals.
• logo-cloud and logo: a centred row of 24px serif names between two grey rules, split by hairline pipes.
• feature-grid, feature-card and feature-icon: an editorial grid with a black rule on top, grey rules between cells only, no card fills and boxed ink pictograms.
• showcase-visual: a margin cream plate with a faint halftone dot screen, framed in black at 8px.
• step and step-marker: each step opens on a black rule with a 44px regular serif numeral. No circles, no connector line.
• stat-grid, stat and stat-value: a 3px black rule on top and a 1px rule below, 56px left-aligned numerals over grey capitals labels.
• testimonial: pull quotes in 22px italic serif under a black rule, no card, with a 32px gutter between columns.
• faq: an ink top rule and questions set as 20px regular headlines that underline on hover with an ink chevron.
• cta-panel: the charcoal broadcast card in both themes, 8px corners, no wash, and a 4px signal yellow rule along its foot.
• site-footer: the colophon, a full-width thick-thin black rule (3px, a 3px gap, 1px) on cream, signed with a larger wordmark.

Everything else is type, space and the kit.

Signed-in screens

The dashboard is the back office of the same paper: a margin cream sidebar split by a hairline, the yellow app tile, the active item on grey, 24px regular page titles, white hairline cards and tables with capitals heads over a black rule.

Sign-in is one white square card on bare cream: a 24px regular title, capitals labels, white inputs that turn black on focus, a full-width yellow button and outline provider buttons.

Do and don't

Do

• Set every word in Newsreader: headlines at 400 with -0.02em, labels, buttons and table heads in capitals with 0.06em to 0.075em tracking.
• Keep one yellow button per view, on the action that matters: sign up, save, send, pay.
• Draw structure with rules: 1px black for the header, section dividers, grid tops and table heads; grey hairlines inside grids and lists.
• Left-align headlines, section heads and body text. Centre only the logo strip and the closing broadcast card.
• Keep corners square. Use 8px only on picture frames, plates, the CTA panel and the dark card.
• Put menus, popovers, dialogs, sheets and toasts on an opaque surface with a 1px black border and no shadow.
• Use margin cream (bg-surface-soft) for featured blocks and sidebars, white bg-card for working surfaces, and the charcoal dark card for the one block that must stand apart.
• Check both editions: the day paper (cream) and the night edition (charcoal), including the charcoal CTA card on each.

Don't

• Don't add a shadow, a glow or a gradient. Depth is tone and rules.
• Don't use yellow for text, icons, links, eyebrows, badges, progress bars or highlights. It is 1.5:1 on cream, and every extra use weakens the one signal.
• Don't set body copy, labels or buttons in a sans or in the mono. IBM Plex Mono is for code, keys and ids.
• Don't bold headlines. 600 is for small titles and buttons, 700 only for the wordmark.
• Don't round buttons, inputs, cards, badges, tabs or dialogs, and don't turn buttons into pills.
• Don't use dashed or dotted lines. The halftone plate is the only dot pattern.
• Don't set two yellow buttons side by side. Pair yellow with a black secondary or an outline.
• Don't add a second accent hue. The chart colours live in charts, avatars and status dots only.

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.