Editorial

Overview

Editorial treats the screen like a well-set page. The words are the product; the interface is the typesetting around them. The personality is literate, confident and unhurried — think a serious weekly magazine or a small independent press that happens to ship software. Readers should feel invited to slow down.

The light mode is the canonical one: warm uncoated paper, near-black ink, and a single vermilion used the way a printer would use a second spot colour — for kickers, links, the one call to action, and the occasional drop cap. Dark mode is "reading lamp": a deep warm brown-black with parchment text and a brighter, coral-leaning vermilion.

Hierarchy comes from type scale, rules and whitespace — not from boxes, shadows or colour. If a layout needs a card to make sense, first try a hairline rule and more space.

Colors

• Background (#F6F1E7) — "Uncoated Paper": the page. Warm, slightly yellowed, never white.
• Card (#FBF8F2) — "Proof Sheet": a lighter leaf of paper for inset panels, pull-out boxes and form fields. Popover (#FFFDF8) is lighter still.
• Foreground (#1A1714) — "Press Ink": body and headlines. A warm near-black, never #000.
• Primary (#B83A1B) — "Vermilion": the only chromatic colour. Links, kickers, primary buttons, active nav underline, focus ring. Paper-white text on it is 5.4:1; as text on the paper it is 5.1:1.
• Secondary (#EAE3D5) / Accent (#E9E1D1): tan tints for tags, chips and hover states.
• Muted (#EFE9DD) / Muted foreground (#6B6258) — "Pencil": captions, bylines, datelines, footnotes, placeholders. Passes AA on paper, card and muted.
• Border (#D9CFBD) / Input (#C9BEA9): hairline rules and field outlines — the colour of a pencil rule on newsprint. Heavy section rules use foreground at 2px instead.
• Destructive (#A3172C): a deeper crimson so it never reads as "the brand accent".
• Charts: vermilion, ink, pencil grey, terracotta and a muted sage — printed-infographic restraint, flat fills, no gradients.

Dark mode mirrors the roles: dark-background #14120F, dark-foreground #EDE6D9 parchment, dark-primary #E2643F with ink-dark text on it (5.5:1), dark-muted-foreground #A39888.

Typography

Three families, each with a single job:

• Instrument Serif — display and headlines only. A condensed, high-contrast serif with real editorial voice. It ships in one weight (400) plus italic; hierarchy comes from size, not weight. Use the italic for one or two emphasised words in a headline — that is the signature move of this system.
  • Display 72px / 1.0 / -0.02em — cover stories and landing heroes.
  • Headline-lg 44px / 1.08 — article titles, page titles.
  • Headline-md 28px / 1.2 — section heads, card titles, pull quotes.
• Inter — body and UI. Body-lg 18px / 1.7 for article text set to a 680px measure; body-md 16px / 1.65 for UI prose; body-sm 14px for captions and dense lists. Label-md 14px/500 for buttons and nav.
• IBM Plex Mono — metadata. Label-sm 11px/500, uppercase, +0.08em tracking for kickers, section labels, datelines ("ESSAY · 12 MIN READ"). Mono 13px for code, figures, footnote markers and timestamps.

Use old-style figures in running text where Inter supports them (font-variant-numeric: oldstyle-nums) and tabular figures in tables. Never set body text in the serif, and never set headlines in Inter.

Layout

A 12-column grid at 1080px max with 32px gutters, but reading text always sits in a single 680px measure (about 66–72 characters at body-lg). Pull quotes, figures and asides may break out to the full 1080px or hang in the margin.

The spacing scale is 8px-based with large jumps: 24px between paragraphs and blocks, 48px between sections, 96px between major story chapters. Headlines get more space above than below (2:1). Lists of stories are laid out like a contents page: kicker, headline, dek, byline, separated by hairline rules — not by cards.

Elevation & Depth

This is a flat, printed system. There are no drop shadows on content. Depth is expressed by (1) paper tone — background → card → popover, each a shade lighter; (2) rules — 1px border hairlines between items, 2px foreground rules above section heads; and (3) whitespace. Popovers and dialogs may use a single soft shadow (0 12px 32px -12px #1A171433) because they float above the page; nothing else does.

Shapes

Shapes are square-cut. --radius is 2px (rounded.lg) — just enough to take the edge off buttons and inputs. Cards, images, pull-quote boxes and badges use rounded.none. rounded.full is reserved for author avatars. Images are full-bleed or sit flush in the column with a mono caption beneath; never round photo corners.

Components

• Primary button: vermilion fill, paper text, Inter 14px/500, 40px tall, 2px radius. One per view. Hover darkens ~8%.
• Secondary button: transparent on paper with a 1px ink border and ink text. Hover fills with accent.
• Link button / inline links: vermilion text with a 1px underline offset 3px; underline thickens to 2px on hover.
• Card: proof-sheet fill, 0 radius, 1px border, 24px padding — use for asides and callouts, not for story lists.
• Input: card fill, 1px input border, 44px tall, 2px radius; label above in label-md; helper text in body-sm muted. Focus = 2px vermilion outline.
• Badge / tag: label-sm mono uppercase on secondary tan, square corners.
• Kicker: label-sm mono uppercase in vermilion above every headline.
• Byline: mono 13px in muted-foreground: BY ADA PARK · OCT 1, 2026.
• Pull quote: headline-md Instrument Serif italic, hanging vermilion opening quote mark, 2px ink rule above.
• Drop cap: optional first-letter in Instrument Serif at 4 lines, vermilion.

Do's and Don'ts

• Do set every headline in Instrument Serif at weight 400 and use italic for emphasis.
• Do keep article text to a 680px measure at 18px with 1.7 line height.
• Do put a mono uppercase kicker above headlines and a mono byline below them.
• Do separate items with hairline rules and whitespace instead of cards and shadows.
• Do reserve vermilion for links, kickers and the single primary action.
• Don't use pure white backgrounds or pure black text — always paper and ink.
• Don't introduce a second accent colour or coloured section backgrounds.
• Don't round images, cards or tags; radius above 3px breaks the printed feel.
• Don't use bold serif weights, faux-bold, or set body copy in the serif.
• Don't use flashy motion — fades and gentle 300ms reveals only, never bouncing or glowing.

Motion

Motion language: still (MOTION.md). The type is the show; nothing moves for decoration.

• Durations: 100–150ms for state feedback only (hover underline, press, focus, accordion open).
• Easing: cubic-bezier(0.25, 0.1, 0.25, 1); never springy.
• What animates: link underline draw on hover, accordion height, toast/menu fade.
• What doesn't: scroll reveals, text effects, marquees, backgrounds, parallax. If a page feels static, fix hierarchy and spacing, not motion.
• Respect prefers-reduced-motion: disable everything except opacity.

Agent Prompt

You are designing in the Editorial system: a content-first, magazine-style interface on warm paper (#F6F1E7) with ink text (#1A1714) and one vermilion accent (#B83A1B, #E2643F in dark mode). Set headlines in Instrument Serif at weight 400 (italic for emphasis), body and UI in Inter with long-form text at 18px in a 680px column, and kickers, bylines and metadata in uppercase IBM Plex Mono. Build hierarchy with type scale, hairline rules and generous whitespace rather than cards, shadows or colour fills; radius is near zero (2px on controls, square everywhere else). Motion is quiet — soft fades, text reveals and scroll-linked progress only. Use shadcn/ui primitives restyled flat, and prefer contents-page lists, pull quotes and full-bleed figures over dashboards and bento grids.

Pairs well with

• aceternity/text-generate-effect
• aceternity/tracing-beam
• aceternity/sticky-scroll-reveal
• aceternity/noise-background
• aceternity/infinite-moving-cards
• transitions/shimmer-text
• transitions/tabs-sliding
• oc/pricing-simple