Phase 1 · visual smoke test

Style guide

Every primitive renders from /v2/lib/design.ts. No inline hex literals; no icons; no rounded corners; no gradients; no drop shadows. When in doubt, choose the option that would feel correct on the front page of The Information.

Typography

/v2/components/editorial/Typography.tsx·Display, headings, body, captions, data tokens.

display-xl
clamp(56,7vw,96)px · 1.05
Display xl
display-lg
clamp(44,5vw,72)px · 1.08
Display lg
display-md
clamp(36,4vw,56)px · 1.12
Display md
h1
40px · 1.15
Heading h1
h2
32px · 1.20
Heading h2
h3
24px · 1.30
Heading h3
h4
18px · 1.35
Heading h4 — Inter Tight
h5
15px · 1.40
Heading h5 / smallcaps
eyebrow
12px · 1.40
Eyebrow / kicker
body-lg
19px · 1.65
Body large — Newsreader
body
17px · 1.60
Body — Newsreader
body-sm
14px · 1.55
Body small — Inter Tight
caption
12px · 1.45
Caption / metadata
micro
11px · 1.40
Micro / smallcaps
data-xl
64px · 1.00
4,250
data-md
28px · 1.10
4,250
data-sm
13px · 1.40
0.8125rem · tnum

Color

/v2/lib/design.ts·Tokens flow through CSS variables; alpha via Tailwind.

paper

#F7F4EC

paper-deep

#EFEAE0

ink

#1A1714

ink-muted

#4A453E

ink-soft

#7A736A

rule

#D9D2C4

rule-strong

#A39A8A

oxblood

#7A1F2B

oxblood-deep

#5C141E

oxblood-wash

#F0E4E5

success

#2F5D3E

warning

#8A6A1F

Eyebrow

/v2/components/editorial/Eyebrow.tsx·Section kicker, smallcaps, ink-soft.

Section · kicker · live

SectionRule + SectionBreak

/v2/components/editorial/SectionRule.tsx·1px hairline (default) or rule-strong; · · · ornament.

Default rule:

Strong rule:

Section break ornament:

Button

/v2/components/editorial/Button.tsx·primary · secondary · ghost · link; sizes sm/md/lg.

Primary — sizes

Secondary — sizes

Ghost

Link

States — disabled

Input

/v2/components/editorial/Input.tsx·rule (marketing) · boxed (admin only).

Empty

Filled

With hint

Used to position your profile across the engines.

Error

Enter a valid email address.

Disabled

Boxed (admin)

Admin-only ergonomics — uses radius-sm.

Textarea

/v2/components/editorial/Textarea.tsx·Same shape as Input, taller; rule + boxed.

Positioning

65–75 character measure recommended.

Notes (admin)

Blockquote

/v2/components/editorial/Blockquote.tsx·Centered italic 28px, bracketed by 80px hairline rules.

The first time someone Googled me and got a paragraph of fiction back, I understood the new editorial deadline.
— a sitting board member, on AI-driven reputation

PullQuote

/v2/components/editorial/PullQuote.tsx·Sentence pulled from the article, amplified.

DropCap

/v2/components/editorial/DropCap.tsx·Lede paragraph; first letter via ::first-letter, 4 lines tall.

The four engines — ChatGPT, Claude, Perplexity, and Gemini — together author roughly seven of every ten descriptions a board candidate now encounters. They cite the loudest available source. TheCrest exists because the loudest source, by default, is rarely the most accurate.

OrderedList + UnorderedList

/v2/components/editorial/{OrderedList,UnorderedList}.tsx·Old-style figures; hairline bullets — no filled discs.

Ordered

Audit the four engines on a fixed schedule.
File the canonical record (the one true description).
Defend it against drift week over week.
Publish, quietly, only when the record changes.

Unordered

ChatGPT — primary citation surface.
Claude — secondary; longest context window.
Perplexity — fastest to incorporate fresh sources.
Gemini — most volatile description-to-description.

Table

/v2/components/editorial/Table.tsx·Run history shape · smallcaps headers · hairline dividers · no zebra.

Started	Trigger	Status	Score	Δ
2026-05-06 09:14	scheduled	COMPLETE	78	+4
2026-05-05 09:14	scheduled	COMPLETE	74	0
2026-05-04 11:02	manual	REVIEW	74	-2
2026-05-03 09:14	scheduled	COMPLETE	76	+1
2026-05-02 09:14	scheduled	ALERT	75	-3

CodeBlock

/v2/components/editorial/CodeBlock.tsx·JetBrains Mono on paper-deep · 1px rule border · square corners.

sql

-- Append-only audit-run log. No UPDATE, no DELETE.
CREATE OR REPLACE FUNCTION block_mutation()
RETURNS trigger AS $$
BEGIN
  IF TG_OP IN ('UPDATE', 'DELETE') THEN
    RAISE EXCEPTION 'audit_run is append-only';
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER audit_run_append_only
BEFORE UPDATE OR DELETE ON audit_run
FOR EACH ROW EXECUTE FUNCTION block_mutation();

Sparkline

/v2/components/editorial/Sparkline.tsx·1px ink stroke · hairline x-axis · oxblood dot at latest.

Citations · 12 weeks

Visibility · 12 weeks

ScoreBadge

/v2/components/editorial/ScoreBadge.tsx·data-xl or data-md · delta in oxblood (down) or ink (up).

Visibility · today78↑ +4

Citations1,240↓ -12

Mentions312↑ +3

Drift0.02· 0

EngineStatusBar

/v2/components/editorial/EngineStatusBar.tsx·4px ink bar on a rule track; failed renders oxblood at full length.

ChatGPT82.0%

Claude74.0%

Perplexity61.0%

Gemini48.0%

Mistral33.0%

Grokfailed

SectionHeader

/v2/components/editorial/SectionHeader.tsx·Eyebrow + h2 pattern; optional dek.

The four answers

What ChatGPT, Claude, Perplexity, and Gemini say about you

One canonical record, defended weekly. Drift surfaces as a hairline alert; corrections are filed, not announced.

End of styleguide. See /v2/docs/design-system-rules.md for the four refusals at the component level.