```preset-meta
{
"name": "pin-and-paper",
"label": "Pin & Paper",
"fingerprint": {
"surface": "yellow-paper-with-grain",
"shadow": "hard-offset-ink-zero-blur",
"border": "hairline-ink",
"voice": "field-notebook-handwritten",
"motion": "quiet-considered",
"density": "populated-card-grid"
},
"match_signals": [
{ "kind": "hairline_border", "weight": 0.3 },
{ "kind": "shadow_zero_blur", "weight": 0.25 },
{ "kind": "low_saturation", "weight": 0.1 }
],
"best_for": ["qualitative research", "founder reflections", "longform brand stories", "hand-crafted decks", "literary brands"],
"avoid_for": ["digital-native polished", "rigorously data-driven", "corporate fintech", "high-energy launches"],
"chromeFonts": {
"googleFontsHref": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Caveat:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap",
"display": "Space Grotesk",
"body": "Space Grotesk",
"script": "Caveat",
"mono": "DM Mono"
},
"palette": {
"primary": { "value": "#1F3A8A", "constraint": "deep desaturated ink — reads near-black on paper; carries every text fill, border, divider, pin illustration, and hard offset shadow" },
"accent": { "value": "#C2342B", "constraint": "single vivid warm — used in at most two spots (the rotated rubber stamp + the negative pill); never as body text, card fill, or chip" },
"secondary": { "value": "#C9A66B", "constraint": "muted earthy third tone (kraft / olive / orange from the source palette); structurally optional, used only when a scene needs a rare third tone" },
"canvas": { "value": "#EFE56A", "lock": "anchor", "constraint": "warm saturated legal-pad yellow — the page ground; brand DNA tints it via color-mix() in §B, never replaces it, so the paper register survives every brand palette" },
"surface": { "value": "#F8F1D6", "lock": "anchor", "constraint": "off-white cream — the pinned-card fill; brand DNA tints via color-mix() in §B, never replaces" },
"ink": { "alias": "primary" }
}
}
```
> `chromeFonts` makes the doc chrome render in the preset's native fonts; brand fonts still apply to §6 components.
## §A Director's intent
Field notebook pinned to a corkboard, not a polished deck. Every surface is **yellow legal-pad paper** with a non-optional fractal-noise grain — without the texture the system collapses into flat cartoon-yellow. Cards are **cream paper pinned to the page** with a 1.5px hairline ink border, 4px micro-radius, and a hard ink-blue offset shadow (5–8px, zero blur). The shadow is the only depth language.
Three editorial voices, each in its own face: **Space Grotesk 700** carries every printed headline (negative letter-spacing, mixed case); **Caveat** carries every handwritten moment — marginal notes, step numerals, "me" voice annotations; **DM Mono uppercase** carries every archival tag — top-chrome lockup, footer meta, date strips. Switching a voice's face collapses the register.
**Brand DNA drives the chrome color, preset drives the structure.** `--brand-primary` maps to the ink-blue role (text, borders, dividers, pin illustrations, hard offset shadow). `--brand-accent` maps to the cinnabar-red stamp role (used in exactly two places: the rotated rubber stamp and the negative pill). The yellow paper base is a **technical signature anchor** — without it the layered radial gradients, grain overlay, and cream-on-yellow card contrast all fail; declared once in §B as `--anchor-paper-yellow` / `--anchor-cream` so brand DNA can tint via `color-mix()` without losing the paper reading.
Motion is **quiet and considered** — short fades, no overshoot, no bounce. The hand-pinned aesthetic doesn't want kinetic theatrics; the camera holds and the eye reads. Ambient pin rotations drift on `sine.inOut` like paper settling.
**Density philosophy: populated, not sparse.** Pin & Paper reads as authoritative when 3–6 cards are pinned across the page, each carrying a heading + body + marginal note. A scene with one centered headline and otherwise empty space reads as broken.
## §B Decoration tokens (merge into design.html `:root`)
Pin & Paper declares **structural** tokens here (hairline border, hard offset shadow, micro-radius, pin/paper anchors). The brand-aware contract: ink-blue surfaces flow from `var(--brand-primary)`; the cinnabar-red stamp flows from `var(--brand-accent)`. The two paper-anchor hexes below are §8.2 exceptions — declared because the yellow-paper + cream-card contrast is the preset's structural signature, not a palette choice; brand DNA tints these anchors via `color-mix()` so the warm-paper register survives every brand palette.
```css
/* §8.2 exception: paper-anchor tokens. The yellow legal-pad surface and the
cream card fill are the structural signature — without them the layered
radial gradients, grain overlay, and cream-on-yellow card contrast all
fail. Brand DNA tints these via color-mix() so the paper register survives
every brand palette (dark / muted / pastel). Declared once here, never
scattered into component CSS. */
--anchor-paper-yellow: #efe56a; /* saturated cadmium yellow — the page */
--anchor-cream: #f8f1d6; /* off-white ivory — the cards */
/* Paper surfaces — brand-tinted from the anchor so they shift with the site
without losing the warm-paper reading. */
--surface-paper: color-mix(in srgb, var(--brand-primary) 6%, var(--anchor-paper-yellow));
--surface-paper-2: color-mix(
in srgb,
var(--brand-primary) 4%,
color-mix(in srgb, var(--anchor-paper-yellow) 70%, white)
);
--surface-paper-3: color-mix(
in srgb,
var(--brand-primary) 8%,
color-mix(in srgb, var(--anchor-paper-yellow) 85%, black 8%)
);
--surface-cream: color-mix(in srgb, var(--brand-primary) 4%, var(--anchor-cream));
/* The signature hard offset shadow — solid ink, zero blur. Three sizes for
compact / standard / hero cards. Color flows from brand-primary. */
--shadow-pin-compact: 4px 5px 0 0 var(--brand-primary);
--shadow-pin-standard: 5px 6px 0 0 var(--brand-primary);
--shadow-pin-hero: 8px 9px 0 0 var(--brand-primary);
/* Hairline + dashed borders */
--border-hairline: 1.5px solid var(--brand-primary);
--border-dashed: 1.5px dashed color-mix(in srgb, var(--brand-primary) 45%, transparent);
--border-stamp: 3px solid var(--brand-accent);
/* Micro-radius — the printed-corner signal. Larger values collapse into UI. */
--radius-card: 4px;
--radius-pill: 999px;
/* Edge / card padding */
--pad-edge: 64px;
--pad-top: 110px;
--pad-bottom: 90px;
--card-pad: 28px;
--card-pad-lg: 36px 28px 28px;
/* Grid gaps */
--gap-card-sm: 22px;
--gap-card-md: 28px;
--gap-card-lg: 32px;
/* Off-axis tilts — the pinned-askew signal. Used on alternate cards, pins,
scribbles, stamp. Never apply more than one tilt to a single element. */
--tilt-pin: -10deg;
--tilt-pin-alt: 14deg;
--tilt-card-askew: 0.9deg;
--tilt-scribble: -2deg;
--tilt-stamp: -4deg;
/* Paper-grain overlay — fractal noise data-URI, multiply blend. Non-optional
on every scene. The blend mode flips to screen on ink-blue surfaces. */
--paper-grain: url("data:image/svg+xml;utf8,");
```
## §D Font pairing fallback (if brand fonts not on Google Fonts)
Pin & Paper depends on the three-voice editorial pairing (printed display / handwritten / archival). Fallbacks below are only used if the brand-derived face fails to load.
- **display**: `'Space Grotesk'` · `'Inter Tight'` · `'Manrope'` wght 700
- **body**: `'Space Grotesk'` · `'Inter'` · `'IBM Plex Sans'` wght 400
- **mono**: `'DM Mono'` · `'JetBrains Mono'` · `'IBM Plex Mono'` wght 500
The handwritten layer (Caveat) is non-substitutable — if Caveat fails to load it falls through to `cursive`, which varies by OS. Component CSS forces Caveat directly; brand DNA does not override it.
## §T Type-role atlas (Phase 4b reads this to size text correctly)
The atlas is the **sole authoring source** for non-component text. If a scene needs a `number-hero` numeral that isn't covered by §6 components, the worker reads role `number-hero` here and writes inline CSS from these values. Do NOT invent ad-hoc sizes — the three-voice editorial rhythm (print headline / handwritten scribble / mono archival tag) collapses if sizes drift.
```type-roles
[
{
"id": "display-cover",
"family": "display",
"purpose": "cover hero — Space Grotesk 700 mixed case, ink-blue on yellow paper",
"px_min": 96, "px_max": 196, "weight": 700, "leading": "1.08", "tracking": "-0.04em", "case": "mixed",
"sample_html": "