BetterReviews · Brand Guideline · No. 17

ITemplate 01 · List & Detail

For queues, inboxes, anything chosen one item at a time.

Grid: 360 / 1fr · fixed left rail (the list), fluid right pane (the detail). 1px hairline between.
Reading width: Detail pane content centres at max-width 720px when text-heavy, or fills the pane when chart-heavy.
Density: Compact · row height 56–68px in the list, comfortable inside the detail.
Components: List rows · status chips · primary action pair · reply box / form. Never a card-grid in the detail pane (use single-column flow).
Mobile: Single column. List visible by default. Tapping a row reveals the detail with a back chevron in the top bar.
Found on: Inbox · Reviews · Application queue · Cited-this-week digest.
Inherits: Page header padding tier · 8-pt grid · paper surface. Never a sidebar inside the detail pane (that's two-pane settings; see Template 02).

IITemplate 02 · Two-pane Settings

For configuration, account, and every screen with persistent sub-navigation.

Grid: 240 / 1fr · fixed left sub-nav (grouped by smallcaps labels), fluid panel.
Reading width: Panel content max-width 720px for forms; 1080px for data tables.
Density: Comfortable. Sub-nav rows use compact density (8px vertical).
Components: Form fields (single column) · section dividers · save bar at the bottom · destructive zone at the very end. Never a card-grid; settings is prose-like.
Sub-nav: Grouped sections with smallcaps labels. Active row uses clay-soft background; never a side-stripe.
Mobile: Sub-nav becomes a top dropdown. Panel takes full width.
Found on: Settings workspace · Billing · Team · AI configuration · Integrations · Privacy.
Inherits: Save behaviour: optimistic, with a "Saved" toast bottom-right. Destructive actions confirm in modal with named-button (never "OK / Cancel").

IIITemplate 03 · Dashboard

For the Today page, Analytics, anything that summarises at a glance.

Grid: 12-column, gap-3 default. Common spans: stat tile 3-col, half-card 6-col, full-bleed chart 12-col.
Reading width: Max-width 1480px (wide), centred. Below 1280, span the full viewport with 24px gutters.
Density: Comfortable. Stat cards p-5; charts p-6.
Components: Stat tiles · sparkline · single hero chart · ≤1 "what's new" card · 1 audit grid. No two charts of the same kind side by side.
Rhythm: Section pattern: header → 4-up stats → 1 hero chart → grouped tables. Repeat with different framing only if the page genuinely covers two domains.
Mobile: 4-col stats collapse to 2-col then 1-col. Charts re-flow to full viewport width minus 24px gutter.
Found on: Today · Analytics · Growth Intelligence · Pulse.
Inherits: One H2 per section · tabular numerals on all stats · clay reserved to one hero figure per dashboard.

IVTemplate 04 · Single-column Scroll

For long-form, welcome, onboarding, the Journal.

Grid: Single centred column. Form width 720px, reading width 720px.
Density: Airy · section padding tier climax (clamp 80–168). Long-form earns space.
Type: Body in Fraunces opsz 9, 19/1.65. Headings in Fraunces opsz 96. Drop cap on first paragraph of essays.
Components: Kicker · h1 · dek · byline → body → pull-quote → figure → stat-grid → footnotes → related reads. The Journal anatomy in chapter 16.
Chrome: No sidebar. No top bar inside the column. Brand chrome lives in the page-head only.
Mobile: Padding clamps; otherwise unchanged · this template is the most mobile-native.
Found on: Welcome · Onboarding step pages · Journal articles · Legal · 404.
Inherits: One thing per section. Em-dashes still banned. No mid-page CTAs.

VTemplate 05 · Drenched Hero + Audit Grid

For marketing, landing pages, the one place the brand goes loud.

Surface: Drenched Midnight ink. The only place ink is the page-default ground.
Hero: Kicker (Terracotta smallcaps) → display H1 (Fraunces 900, opsz 144) → dek → optional CTA pill.
Density: Anchor padding tier (clamp 96–200). Editorial pace.
Components: Hero · audit grid (3-up stats) · drenched peacock band · Magritte frame figure · floating CTA pill. Maximum 5 sections total.
One Voice: Terracotta strictly to 10%: kicker · accent words in display · audit-grid unit suffixes. Nothing else.
Mobile: Audit grid stacks 1-up below 600. Hero font scales clamp 48 → 120.
Found on: betterreviews.io landing · Refusal pages · Manifesto · Apply / Cohort pages.
Inherits: Never a feature-grid. Never a logo wall. Never a pricing table.

VIDensity · pinned to surface

Each surface ships at one density by default.

Airy

Marketing surfaces · Drenched hero · Single-column long-form (Journal, Welcome). Section padding tier climax or anchor.

Comfortable

Admin product surfaces · Dashboard · List + Detail (detail pane) · Two-pane Settings (panel side). Section padding tier connect.

Compact

Data tables · Command palette · Settings sub-nav · List pane of List + Detail. Row height 36–48px. Section padding tier chrome.

The Tweaks panel can override density for testing, but the source-of-truth density per surface is the one above. If a new page feels wrong, the density mismatch is the first thing to check.

VIIStack composition · what lives inside what

Recipes, not rules.

A Card may contain

Kicker + title + body + ≤1 action, or
Kicker + hero number + sub-label (stat tile), or
Header row + table rows + footer link (data card)

A Card must not contain

Hero number + chart + sparkline + CTA (three signals minimum, that's a section, not a card)
Two H3 subheads
A second card inside it
A side-stripe accent (border-l > 1px)

A Section may contain

≤1 H2
≤3 paragraphs of supporting prose
≤1 grid OR ≤1 figure OR ≤1 do/don't
Optional footer rule + transition kicker

A Section must not contain

Two H2 headings (split into two sections)
A grid AND a figure AND a do/don't (one device per section)
A nested section

A Page may contain

1 page-head with h1 + lede + optional meta row
3 to 7 sections (anchor / climax / connect / connect / chrome typical)
1 footer with prev/next

A Page must not contain

More than one drenched hero
More than 8 sections (split into a sub-page)
Two pull-quotes in the same flow
A second floating CTA

VIIIBefore-submit checklist

Five questions every screen must pass before it ships.

01

One Voice · ≤ 10% Terracotta.

Squint at the screen. Count clay pixels. If clay covers more than a tenth, reduce.

02

No italics, no em-dashes, no emoji, no exclamation marks.

Run a grep on the new copy: [·!] or font-style:italic. Any hit is a defect.

03

AA contrast on the worst tint.

Body text passes 4.5:1 on paper, paper-2, paper-3, and any tinted callout (clay-soft, ok-bg, warn-bg). The audit script catches this.

04

Hairline before shadow.

Every floating affordance asked: would a 1px rule do the job? If yes, swap the shadow for a hairline.

05

Could it ship from a competitor tomorrow?

Bento grid? Side-stripe card? Gradient mesh? Star widget? Hero metric template? If yes to any, redo.