# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean grotesk — mechanical, technical, authoritative |
| **Examples** | Space Grotesk (600/700), Archivo (500/600/700), Cabinet Grotesk (500/600), Suisse Int'l (if licensed) |
| **Weight** | 600-700 (bold enough to anchor, not so heavy it dominates) |
| **Tracking** | -0.01em to 0.02em (tight to neutral — technical, not loose) |
| **Size** | `clamp(2rem, 4vw, 3.5rem)` — confident but not monumental |
| **Transform** | Uppercase for section titles; sentence case for hero headlines |

**Why grotesk:** The mechanical, engineered quality of grotesk sans-serifs matches the "field manual" register. They feel like they were specified by a draftsman, not designed by a marketer. Space Grotesk's slightly technical character is ideal.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Neutral sans — readable, invisible, functional |
| **Examples** | Inter (400/500), IBM Plex Sans (400/500), Söhne (if licensed) |
| **Weight** | 400-500 |
| **Tracking** | 0 to 0.01em (normal) |
| **Size** | 14-15px (small — this is a technical document, not a blog) |
| **Line Height** | 1.6-1.7 (generous for readability on textured ground) |

**Why small body:** Technical documents use small body text. The 14-15px range signals "this is reference material" not "this is a marketing page." The slightly smaller size also creates contrast with the mono labels.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Monospace — the voice of data, coordinates, IDs |
| **Examples** | JetBrains Mono (400/500), Space Mono (400/700), IBM Plex Mono (400/500) |
| **Weight** | 400-500 |
| **Tracking** | 0.12em-0.18em (wide, technical) |
| **Size** | 10-11px (tiny — these are stamps, not text) |
| **Transform** | UPPERCASE |

**Usage:** Sector codes (`SECTOR 04-A`), coordinates (`LAT: 47.6062° N`), transaction IDs (`TXN-2026-0847`), timestamps (`03:42 UTC`), scale references, ruler ticks. These tiny mono labels are the "technical marginalia" that defines the style.

---

## Type Scale

**Ratio:** 1.4x (technical, not golden — engineered, not organic)

```
Display:    clamp(2rem, 4vw, 3.5rem)    — 1.4x
Headline:   clamp(1.25rem, 2.5vw, 2rem) — 1.4x
Subhead:    clamp(0.95rem, 1.5vw, 1.25rem) — 1.4x
Body:       14-15px                      — baseline
Micro:      10-11px                       — 0.7x
```

---

## Font Pairing Logic

**Display + Body:** Grotesk display + neutral sans body. The display provides authority; the body provides readability. Both are sans — this is not a serif style.

**Display + Micro:** Grotesk display + monospace micro. This is the signature pairing. The grotesk speaks the message; the mono provides the data. The contrast between proportional and monospaced type creates the "technical document" feel.

**Never mix:** Don't use serif fonts anywhere. This is a sans + mono system. Adding serif breaks the technical register immediately.

# Color Architecture

## Ground

```css
--color-ground: #C8D5C0;       /* Pale sage — primary ground */
--color-ground-alt: #F5F0E8;   /* Cream — alternative ground */
--color-ground-elevated: #B8C5B0; /* Slightly darker sage for cards/panels */
```

**Why pale sage or cream:** These colors mimic uncoated paper stock — the kind used in field manuals, geological surveys, and technical reports. Pure white (#FFFFFF) is too digital, too screen-like. The sage/cream immediately signals "this is a printed document." Sage (#C8D5C0) is the primary; cream (#F5F0E8) is the alternative for warmer brands.

---

## Ink

```css
--color-ink-primary: #2A2A2A;   /* Dark ink — never pure black */
--color-ink-secondary: #555555; /* Muted gray for secondary content */
--color-ink-muted: #888888;     /* For micro labels and metadata */
```

**Why #2A2A2A not #000000:** Pure black on sage creates harsh contrast that feels digital. Dark ink (#2A2A2A) mimics printed ink on uncoated stock — slightly absorbed, slightly soft. This is the ink color of a real field manual, not a screen.

---

## Accent

```css
--color-accent: #3D6B4F;        /* Forest green — primary accent */
--color-accent-alt: #8B6F47;    /* Antique brown — alternative */
--color-accent-rust: #A0563A;   /* Survey orange — for data highlights */
```

**Rule:** ONE accent maximum per page. The accent appears ONLY on:
- Primary CTA buttons (filled or outlined)
- Active navigation state
- One key data point per section (a highlighted coordinate, a flagged measurement)
- Hover state on interactive elements

**Why these colors:** Forest green and antique brown are the colors of field equipment — surveyor's flags, leather notebook covers, brass instruments. They feel earned, not designed. Survey orange (#A0563A) is for data highlights only — it's the color of a flagged measurement on a contour map.

---

## Semantic Colors

```css
--color-success: #4A6741; /* Muted forest green */
--color-error: #8B3A3A;   /* Muted brick red */
--color-warning: #8B7340; /* Muted amber */
```

**All semantic colors are desaturated** to maintain the printed-document feel. They communicate meaning through position and context, not saturation.

---

## The Color Rule

> **If color appears, it must look like it was printed, not displayed.** One accent maximum. Accent appears ONLY on CTA, active state, or one data point. Everything else is sage ground + dark ink.

---

## Gradient Policy

**No gradients.** The style is built on flat paper surfaces. If depth is needed, it comes from:
- Paper grain texture (SVG noise overlay)
- Hairline borders (1px solid, darker sage)
- Layered panels (slightly darker sage for elevation)

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure white (#FFFFFF) ground | Pale sage #C8D5C0 or cream #F5F0E8 |
| Pure black (#000000) ink | Dark ink #2A2A2A |
| Bright, saturated accents | Forest green #3D6B4F or antique brown #8B6F47 |
| Multiple accent colors | ONE accent, used surgically |
| Gradient backgrounds | Flat sage/cream or contour line patterns |
| Neon or vibrant data colors | Desaturated, earthy tones |
| Blue/purple SaaS palette | Earth tones only — green, brown, rust |

# Motion Principles

## Philosophy

Motion in Print Tech Paper is **absent by design**. This is a printed page — static by nature. The page should feel like it was already there when you arrived, like a document that exists independent of your viewing. Any motion undermines the print illusion. When motion is absolutely necessary (entrance reveals), it is minimal, slow, and invisible — the viewer should not notice it happened.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Page background | Instant (no animation) | 0ms | — | 0ms |
| Section content | Opacity fade-in | 600ms | `ease-out` | On scroll-into-view |
| Contour line illustrations | SVG stroke draw-in (optional) | 1200ms | `ease-in-out` | 200ms after section visible |
| Mono labels | Instant (no animation) | 0ms | — | 0ms |
| CTA button | Instant (no animation) | 0ms | — | 0ms |

**Key principle:** Entrance animations are optional and minimal. If in doubt, omit them. A static page is more faithful to the style than an animated one.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Parallax | **None.** Printed pages don't have parallax. |
| Text reveals | **None.** Text is just there. |
| Illustration reveals | Optional stroke draw-in on contour lines (1200ms, once, on first view) |
| Section transitions | **None.** Sections are separated by whitespace and hairline rules. |

**Scroll-linked effects are banned.** The page should not respond to scroll position with visual changes. This is the most static style in the system.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Ink color → accent color (200ms) | — |
| CTA buttons | Border → accent color, slight ink shift | Scale 0.98 (tactile press) |
| Data callouts | No hover state — they're labels, not interactive | — |
| Cards/Panels | No hover state — they're document elements | — |
| Links in body | Underline appears (instant) | — |

**Hover states are minimal.** Only interactive elements (nav, CTA, links) respond. Data callouts, labels, and illustrations are static — they're document content, not UI.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrance animations collapse to instant (0ms)
- No stroke draw-in on illustrations
- Hover states use instant color change (no transition)

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| ❌ Never animate | Why |
|-----------------|-----|
| Parallax on scroll | Printed pages don't move |
| Staggered element reveals | Too dynamic — breaks the static document feel |
| Bounce or spring easing | Playful — wrong register entirely |
| Color transitions on hover (except nav/CTA) | Document elements don't change color |
| Marquee or scrolling text | This is a static page, not a display |
| Scale transforms on cards | Cards are document panels, not interactive tiles |
| Any motion on data labels | Labels are stamped, not animated |

# Layout Grammar

## Grid System

**Strict 12-column grid with technical margins.**

This is the most rigid grid system in the style library. Content aligns to a 12-column grid with consistent gutters. The grid is visible — not as decoration, but as infrastructure. Ruler ticks and coordinate labels mark the grid edges, making the structure part of the design.

```
[1][2][3][4][5][6][7][8][9][10][11][12]
 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   Content aligned to grid
   with technical margins on all sides
 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 [ruler ticks along edges]
```

**Technical margins:** The page has consistent outer margins (clamp(1.5rem, 4vw, 3rem)) that contain ruler tick marks and coordinate labels. These margins are structural — they're where the technical marginalia lives.

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | `min-h-[80dvh]` (not full viewport — this is a document, not a splash) |
| Background | Pale sage ground with topographic contour SVG illustration |
| Headline position | Left-aligned, vertically centered |
| Headline size | `clamp(2rem, 4vw, 3.5rem)` — confident, not monumental |
| Data callouts | Positioned at corners: top-left coordinate, top-right timestamp, bottom-left sector code |
| CTA | Below headline, left-aligned, outlined with accent color |
| Topographic illustration | Full-bleed background or right-side panel |

**Never centered hero.** Left-aligned content with data callouts at corners is the structural signature. The corners are where the technical marginalia lives.

---

## Section Spacing

```css
--section-padding-y: clamp(3rem, 8vh, 6rem);
--component-gap: clamp(1.5rem, 3vw, 3rem);
--content-max-width: min(1100px, calc(100vw - clamp(2rem, 6vw, 4rem)));
--body-max-width: 680px;
```

**Spacing is moderate.** Not as monumental as Dither Mono, but generous enough to feel like a printed document. Sections are separated by hairline rules (1px solid, darker sage) and whitespace.

---

## Layout Patterns

### Pattern 1: Technical 3-Column Grid
```
┌──────────┬──────────┬──────────┐
│ SECTOR   │ SECTOR   │ SECTOR   │
│ 04-A     │ 04-B     │ 04-C     │
│          │          │          │
│ Title    │ Title    │ Title    │
│ Body     │ Body     │ Body     │
│ Data     │ Data     │ Data     │
└──────────┴──────────┴──────────┘
```

### Pattern 2: Asymmetric Split with Contour Illustration
```
┌─────────────────────┬──────────┐
│ Headline            │ [contour  │
│ Body text           │  line     │
│ Data callout        │  illus.]  │
│ CTA                 │           │
└─────────────────────┴──────────┘
```

### Pattern 3: Full-Width Data Strip
```
┌─────────────────────────────────────────┐
│ TXN-2026-0847 | SEISMIC READ: 4.2M      │
│ | LAST UPDATE: 03:42 UTC | SECTOR 04-A  │
└─────────────────────────────────────────┘
```

### Pattern 4: Document Footer with Ruler Ticks
```
┌─────────────────────────────────────────┐
│ |||  ||||  |||||  ||||  |||  ||  |  ||| │
│ TERRAFORM          © 2026          v2.4 │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full 12-column grid, 3-column feature sections, corner data callouts |
| **Tablet (768px)** | 6-column grid, 2-column features, data callouts stack |
| **Mobile (375px)** | Single column, data callouts inline, ruler ticks simplified |

**Fluid typography via `clamp()`** keeps the technical document feel at all sizes. The grid simplifies on mobile but never disappears — the structure is the style.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Centered hero layout | Left-aligned with corner data callouts |
| Card-grid with rounded corners | Sharp-cornered panels with hairline borders |
| Full-bleed photography | Topographic line illustrations only |
| Floating elements over images | Grid-aligned content on sage ground |
| Asymmetric/experimental layouts | Strict grid — this is a technical document |
| Rounded corners (border-radius > 2px) | Sharp corners (0-2px max) — printed pages don't round |
| Whitespace without marginalia | Fill margins with ruler ticks, coordinates, sector codes |

# Texture & Surface

## Primary Texture: Paper Grain

**The defining element.** The ground must look like uncoated paper stock — slightly textured, slightly absorbent. A subtle SVG noise overlay creates the paper grain that separates this from a flat digital background.

### Implementation

```css
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,..."); /* feTurbulence noise */
  mix-blend-mode: multiply;
}
```

**Parameters:**
- Opacity: 0.05-0.08 (subtle — should be felt, not seen)
- Blend mode: `multiply` (darkens the sage ground slightly)
- Position: `fixed` (covers entire viewport, doesn't scroll)
- No animation — paper grain is static

---

## Secondary Texture: Topographic Contour Lines

Line-based illustrations that serve as both decoration and information. Topographic contour lines, technical diagrams, cross-sections, schematics. These are the ONLY form of illustration — photography is banned.

### Contour Line Implementation

```jsx
<svg viewBox="0 0 800 600" className="contour-illustration">
  {/* Contour paths with slight wobble */}
  <path d="M 0 300 Q 200 280 400 310 T 800 290"
        stroke="#3D6B4F" strokeWidth="0.5" fill="none" opacity="0.3" />
  <path d="M 0 320 Q 200 300 400 330 T 800 310"
        stroke="#3D6B4F" strokeWidth="0.5" fill="none" opacity="0.25" />
  {/* Repeat with varying offsets */}
</svg>
```

**Parameters:**
- Stroke: 0.5px (hairline — technical, not decorative)
- Color: Accent color at 20-35% opacity
- Wobble: Slight irregularity in paths (not perfectly smooth — mimics pen plotting)
- Density: 8-15 contour lines per illustration area

---

## Tertiary Texture: Ruler Ticks and Coordinate Marks

```css
.ruler-ticks {
  /* Repeating linear gradient for tick marks */
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 19px,
    #555 19px,
    #555 20px  /* 1px tick every 20px */
  );
  height: 8px;
  opacity: 0.4;
}
```

**Usage:** Along section edges, as section dividers, in margins. Ruler ticks create the "measured document" feel — every space is quantified.

---

## Image Processing Rules

**NEVER use photography.** All visual elements must be line-based:

| Visual Type | Effect | When to Use |
|-------------|--------|-------------|
| Topographic contour lines | Terrain/measurement illustration | Hero backgrounds, section dividers |
| Technical diagrams | Schematic/cross-section | Feature illustrations |
| Wireframe/schematic | Structural diagram | Data visualizations |
| Halftone dot patterns | Tonal texture on data viz | Background fills, chart areas |
| Coordinate grids | Reference grid | Behind illustrations, in margins |

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Pale sage (#C8D5C0) + paper grain overlay |
| Cards/Panels | Slightly darker sage (#B8C5B0) with 1px border (#A8B5A0) |
| Buttons | Outlined with accent color, fill on hover |
| Navigation | Transparent, ink color text, accent on hover/active |
| Dividers | 1px hairline (#A8B5A0) or ruler tick pattern |
| Data strips | Slightly darker sage panel with mono text |

**No glossy, no glassmorphism, no shadows.** Surfaces feel like printed paper — flat, matte, slightly textured. Elevation comes from slightly darker sage, not from drop shadows.

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Raw stock photography | Topographic line illustrations only |
| Gradient backgrounds | Flat sage ground + paper grain |
| Glassmorphic cards | Flat sage panels with hairline borders |
| 3D renders or illustrations | 2D line drawings, schematics, wireframes |
| Drop shadows | Hairline borders for separation |
| Smooth vector graphics | Slightly wobbly, pen-plotted line quality |
| Colorful data visualizations | Halftone or contour-line data viz in accent color |

# Vocabulary Bank

## Primary Terms (must appear in prompt to unlock the style)

| Term | Why It Matters |
|------|---------------|
| `pale sage ground` | The specific background color (#C8D5C0) — not white, not dark |
| `topographic contour lines` | The primary illustration method — line-based, not photographic |
| `mono data callouts` | The technical marginalia that defines the "field manual" feel |
| `transaction-ID chips` | The reference-number aesthetic — every element has an ID |
| `technical marginalia` | The density of labels, coordinates, and reference numbers |
| `paper grain` | The texture that separates this from a flat digital background |

---

## Secondary Terms (refine and tune the output)

| Term | Effect |
|------|--------|
| `field manual` | Sets the document type — technical, printed, referenced |
| `sector code` | Section identifiers like `SECTOR 04-A` |
| `coordinate labels` | Geographic references like `LAT: 47.6062° N` |
| `ruler ticks` | Measurement marks along edges and dividers |
| `scale bar` | Reference scale on illustrations |
| `uncoated stock` | The paper quality — slightly absorbent, matte |
| `dark ink` | #2A2A2A — never pure black, mimics printed ink |
| `halftone dots` | Tonal texture on data visualizations |
| `cross-section diagram` | Technical illustration type |
| `wireframe schematic` | Structural line illustration |
| `surveyor's flag` | The accent color placement — surgical, flagged |
| `pen-plotted wobble` | The slight imprecision in contour lines |

---

## Context Terms (set the mood and emotional register)

| Term | Mood |
|------|------|
| `field manual` | Technical, referenced, authoritative |
| `geological survey` | Scientific, measured, grounded |
| `technical report` | Documented, precise, cataloged |
| `anachronistic future` | A future that already happened — retro-technical |
| `methodical` | Ordered, systematic, careful |
| `documented` | Every element has a reference number |
| `printed` | Physical, paper, not screen |
| `cataloged` | Indexed, filed, organized |

---

## Banned Terms (if these appear, the style has broken)

| Term | Why It Breaks the Style |
|------|------------------------|
| `photography` / `photo` | Line illustration only — photos break the print illusion |
| `gradient` | Flat paper surfaces only — no color transitions |
| `glassmorphism` | Frosted glass is digital — this is printed |
| `white background` | Must be sage #C8D5C0 or cream #F5F0E8, never #FFFFFF |
| `pure black` | Ink is #2A2A2A, never #000000 |
| `neon` / `vibrant` | Earth tones only — forest green, antique brown |
| `modern` / `sleek` | This is retro-technical, not modern SaaS |
| `3D render` | 2D line drawings only |
| `dark mode` | This is a light, paper-based style |
| `bounce` / `spring` | Motion is minimal to nonexistent |
| `purple` / `blue` (as accents) | Earth tones only — green, brown, rust |
| `Inter as display` | Grotesk for display (Space Grotesk, Archivo) |

---

## Prompt-Ready Phrases

Copy-paste these directly into prompts:

```
"pale sage ground (#C8D5C0) with paper grain texture"
"topographic contour line illustrations, not photography"
"monospace data callouts at 10px, tracking 0.15em"
"transaction-ID chips on every section (SECTOR 04-A)"
"dark ink (#2A2A2A), never pure black"
"ruler ticks along section edges"
"field manual aesthetic — printed, referenced, technical"
"one forest green accent (#3D6B4F) on CTA only"
"strict 12-column grid with technical margins"
"no gradients, no photos, no glassmorphism"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Technical products & developer tools** | The field-manual aesthetic signals precision and documentation. Engineers trust pages that look like documentation, not marketing. |
| **Data platforms & analytics** | Mono data callouts and coordinate labels match the data-forward register. The sage ground is easier on the eyes than white for long data sessions. |
| **Scientific & research tools** | The geological-survey aesthetic maps directly to scientific communication. Contour lines, scale bars, and reference numbers feel native. |
| **Documentation sites** | This style literally looks like printed documentation. It's the aesthetic of technical manuals, API docs, and reference material. |
| **Architecture & engineering firms** | Technical drawings, cross-sections, and schematics are the visual language of these disciplines. The style speaks their tongue. |
| **Environmental & climate tech** | Topographic contour lines and earth-tone palette (sage, forest green, brown) align with environmental and geological themes. |
| **Surveying & mapping products** | The field-manual aesthetic is literally what surveyors use. Coordinate labels, scale bars, and sector codes are native vocabulary. |

## Brand Personality Match

This style reinforces brands that are:
- **Technical** — data-driven, precise, methodical
- **Authoritative** — confident through documentation, not slogans
- **Crafted** — care about details, references, and precision
- **Grounded** — earthy, practical, not flashy
- **Documented** — everything has a reference number

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Consumer-facing products** | Too technical and document-like for general consumers who expect friendly, colorful interfaces. |
| **E-commerce** | No photography means no product images. The sage ground and line illustrations don't support shopping. |
| **Creative agencies & portfolios** | Too rigid and technical. Creative work needs visual expression, not field-manual restraint. |
| **Playful or lifestyle brands** | Wrong emotional register entirely. No warmth, no fun, no personality expression. |
| **Healthcare for general consumers** | Too clinical and technical for audiences seeking comfort and trust. |
| **Entertainment & media** | The document aesthetic kills the energy that entertainment brands need. |
| **Mobile-first products** | The dense marginalia and strict grid are hard to maintain on small screens. |

## How to Decide

Ask: **"Does my brand want to feel like a geological survey field manual?"**

If yes → Print Tech Paper.
If no → Consider Swiss Mono Precision (cleaner), Dither Mono (darker, more dramatic), or Data-as-Texture (more cinematic).

# Reference Gallery

## Live Sites

### Geological Survey & Technical Documentation
- **What works:** Pale paper grounds, topographic contour illustrations, monospace data callouts, coordinate labels, sector codes
- **Search:** Government geological survey sites, NASA technical report archives, USGS field manuals

### Awwwards — Technical/Document Aesthetic
- **What works:** Strict grid layouts with technical marginalia, paper grain textures, line-based illustration, mono labels
- **Search:** Awwwards "technical" + "editorial" filter, "print-inspired" tag

### Isometric & Topographic Design
- **What works:** Contour line illustrations as both decoration and data, coordinate systems, scale references
- **Search:** Dribbble "topographic" + "contour lines" + "technical illustration"

## Key Visual References

### Topographic Contour Lines
- **Style:** Hand-drawn or pen-plotted quality, slight wobble in paths, 0.5px stroke, accent color at 20-35% opacity
- **Density:** 8-15 contour lines per illustration area, varying spacing to imply terrain
- **Color:** Forest green (#3D6B4F) or antique brown (#8B6F47) at low opacity

### Transaction-ID Chips
- **Format:** `TXN-2026-0847`, `SECTOR 04-A`, `LAT: 47.6062° N`
- **Font:** JetBrains Mono 400, 10-11px, tracking 0.15em, uppercase
- **Placement:** Section corners, data strips, illustration margins

### Ruler Tick Patterns
- **Style:** 1px ticks every 20px along section edges and dividers
- **Color:** Muted gray (#555555) at 40% opacity
- **Usage:** Section dividers, margin decoration, scale references

### Paper Grain Texture
- **Method:** SVG feTurbulence noise, opacity 0.06, mix-blend-mode: multiply
- **Feel:** Uncoated stock — slightly textured, matte, absorbent
- **Contrast:** Subtle enough to be felt, not seen

## Typography Reference
- **Space Grotesk 600/700** at `clamp(2rem, 4vw, 3.5rem)` — display headlines
- **Inter 400/500** at 14-15px — body text
- **JetBrains Mono 400** at 10-11px, tracking 0.15em, uppercase — data labels

## Screenshot Notes

> When capturing references for this style, look for:
> - The quality of the paper grain (subtle, not heavy)
> - The density of technical marginalia (labels, coordinates, ticks)
> - The line quality of contour illustrations (slight wobble, not smooth vector)
> - The sage/cream ground color (never pure white)
> - The single earth-tone accent and where it appears
> - The strict grid alignment with technical margins
> - How static the page feels (minimal to no motion)