Monochrome + Single Accent / Signal Line

# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean, precise sans-serif — typography-led, the voice of the page |
| **Examples** | Geist, Outfit, Cabinet Grotesk |
| **Weight** | 500-700 (weight does hierarchy — never color) |
| **Tracking** | -0.02em to 0em (tight, engineered, confident) |
| **Size** | `clamp(2rem, 5vw, 4.5rem)` — large, structural, monumental |
| **Transform** | Sentence case; uppercase reserved for micro labels |

**Why heavy sans:** In a monochrome system the type IS the hierarchy. There is no color to distinguish elements, so weight, size, and spacing carry the entire information structure. The display type must be strong enough to hold the page without relying on a single chromatic crutch.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display, regular weight |
| **Examples** | Geist Regular, Outfit Regular, Cabinet Grotesk Regular |
| **Weight** | 400-450 (regular — readable, neutral) |
| **Tracking** | 0em-0.01em (standard) |
| **Size** | `clamp(0.9375rem, 1vw, 1.0625rem)` — 15-17px |
| **Line Height** | 1.5-1.6 (dense but comfortable, data-forward) |

**Why regular weight:** Body text recedes into the grayscale field. It is the neutral substrate against which the accent — and the display type — signal. Density is high enough to feel precise and technical, never airy or decorative.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Monospace — technical annotations, data, metadata |
| **Examples** | Geist Mono, JetBrains Mono, IBM Plex Mono |
| **Weight** | 400 |
| **Tracking** | 0.05em-0.1em (spaced, tabular) |
| **Size** | 11-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, data points, timestamps, technical details. The mono voice is the style's signature — "ZINC-950", "ACCENT 01", "SIGNAL: ACTIVE". It separates the machine voice (data) from the human voice (editorial) within the same grayscale field.

---

## Type Scale

```
Display:  clamp(2rem, 5vw, 4.5rem)    — large, weight-driven
Body:     clamp(0.9375rem, 1vw, 1.0625rem)  — 15-17px, regular
Micro:    11-12px                      — monospace annotations
```

The scale is wide — 11px to 72px. Contrast comes from extreme size and weight jumps, not color. The hierarchy reads instantly in grayscale: monumental display, quiet body, technical micro. Each step is a deliberate value change in the zinc scale.

---

## Font Pairing Logic

**Family + mono approach:** One primary sans (Geist, Outfit, or Cabinet Grotesk) for display and body, paired with a monospace (Geist Mono, JetBrains Mono) for labels and data. The sans/mono pairing is the only type duality — it mirrors the style's core duality of neutral base vs surgical accent.

**The accent in type:** The single accent color appears in type only for the most important action — primary CTA text, active nav state, or a key data point. One word per viewport maximum. Bold, not colored, is the default emphasis; accent type is the exception that must be earned.

**Never:** Multiple typefaces (three voices compete in monochrome — two is the limit), decorative fonts (this is engineered, not playful), or colored body text (breaks value-based hierarchy, violates the ≤15% accent rule).

# Color Architecture

## Ground

The ground is a full grayscale spectrum — zinc-950 through zinc-50. There is no color in the base; hierarchy comes entirely from value, not hue.

```css
--color-ground-dark: #09090B;    /* zinc-950 — near-black */
--color-ground-mid: #27272A;     /* zinc-800 — panels, borders */
--color-ground-light: #FAFAFA;   /* zinc-50 — off-white, never pure #FFFFFF */
```

**Why zinc over pure black:** #000000 is dead — it eats contrast and feels digital. A slightly lifted zinc-950 (#09090B) keeps deep black presence while letting light values breathe. The light ground is zinc-50, not #FFFFFF, so text and accents hold a hair of separation.

---

## Grayscale Base

```css
--mono-950: #09090B;   /* Ground, deep bg   */
--mono-800: #27272A;   /* Raised surfaces   */
--mono-600: #52525B;   /* Borders, dividers */
--mono-400: #A1A1AA;   /* Disabled, muted   */
--mono-200: #E4E4E7;   /* Hairlines         */
--mono-50:  #FAFAFA;   /* Light ground      */
```

**These carry all structure.** Hierarchy, grouping, separation, and emphasis are expressed through the grayscale ramp. If two elements differ in importance, they differ in lightness or weight — never because one is tinted and the other is not. Value does the work; color stays quiet.

---

## One Surgical Accent

```css
--accent-electric-blue: #3B82F6;  /* Signal — default recommendation */
--accent-emerald:       #10B981;  /* Financial / positive data        */
--accent-signal-orange: #F97316;  /* Urgency, warnings, high energy    */
--accent-hot-pink:      #EC4899;  /* Distinctive, brand-forward         */
```

**Choose exactly one.** Electric blue reads most neutral for developer tools and premium SaaS. Emerald suits fintech and positive/negative data states. Signal orange is for products where action urgency matters. Hot pink is the most assertive — use it when the brand wants to feel loud, not reserved.

**Rule: the accent is a beacon, not a palette.**
- Accent on ≤15% of total surface area
- Use it in three places only: CTA, active state, key data point
- Everything else stays grayscale

**Why the 15% budget:** an accent is only loud because the field around it is silent. The instant coverage grows, the accent becomes a theme color and the restraint statement collapses. The accent earns attention precisely because the eye scans gray and meets color rarely.

---

## Accent Usage

| Surface | Treatment |
|---------|-----------|
| Primary CTA | Accent-filled, dark, and white on only the one button |
| Active nav / selected state | Accent underline or sliver — never a filled block |
| Key data point | Accent value, grayscale label — number carries the emphasis |
| Links (if unneeded) | Grayscale; accent only on hover |
| Focus ring | Accent (accessibility-forward) |

**Never:** accent-bordered containers, accent headers, accent-on-accent, or accent used to "decorate." If a detail is decorative, it stays gray.

---

## Text

```css
--color-text-on-dark: rgba(250, 250, 250, 0.92);  /* Near-white, high contrast */
--color-text-on-light: rgba(9, 9, 11, 0.92);      /* Near-black, high contrast */
--color-text-muted: rgba(250, 250, 250, 0.55);    /* Muted, for labels on dark */
--color-text-muted-light: rgba(9, 9, 11, 0.55);   /* Muted, for labels on light */
```

**Why high-contrast tokens:** unlike dreamlike or translucent styles, this system is crafted around legibility — contrast is the thesis. Use 92% opacity text, not 85%. De-emphasize through the grayscale ramp (muted gray labels), not through transparency alone.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Multiple accent colors | ONE surgical accent, ≤15% of surface |
| Colorful / saturated palettes | Full grayscale base, accent reserved |
| Gradient backgrounds | Flat grayscale surfaces |
| Rainbow or brand-multicolor effects | Monochrome with a single signal color |
| Pure #000000 ground | zinc-950 (#09090B) |
| Pure #FFFFFF surfaces | zinc-50 (#FAFAFA) |
| Accent applied as decoration | Accent for CTA, active states, key data only |

# Motion Principles

## Philosophy

Motion in Monochrome Single Accent is **precise, minimal, and surgical** — like the style's single-accent color strategy. Nothing drifts randomly, nothing bounces, nothing wanders. Every animation has one job: announce a state change, or guide the eye along the accent-led pathway. Durations stay short enough to feel responsive, disciplined enough to never draw attention to themselves. In a neutral base, color is the strongest signal in the system — and motion serves that signal and nothing else.

---

## Accent as Signal

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Primary CTA | Accent revealed via opacity + translateY on hover | 150-200ms | `ease-out` |
| Active nav state | Accent underline/dot fades in | 180ms | `ease-out` |
| Key data point | Accent value crossfades between states | 200ms | `ease-in-out` |
| State indicator | Accent fills 0→100% | 220ms | `ease-out` |

**The rule:** in a grayscale page, color is the single strongest signal. The accent should only *appear* — it marks a change, then returns to gray. When it's visible, something is active; when it leaves, the system is neutral. Motion applies the same restraint as color.

---

## Hover Reveals

```css
.grayscale-element {
  transition: border-color 180ms ease, transform 180ms ease;
}
.grayscale-element .accent-indicator {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.grayscale-element:hover .accent-indicator {
  opacity: 1;
  transform: translateY(0);
}
```

**Purpose:** Grayscale elements stay neutral until hover, then reveal a surgical accent — a dot, underline, or small mark. The reveal uses a quick translate+opacity transition so the grayscale field is never polluted at rest. Hover is the moment the beacon switches on.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero display | Opacity 0→1 + translateY(8px)→0 | 400ms | `ease-out` | 0ms |
| Body text | Opacity 0→1 | 300ms | `ease-out` | 80ms |
| Cards / panels | Opacity 0→1 + translateY(12px)→0 | 350ms | `ease-out` | 160ms |
| Accent element | Opacity 0→1 + accent color fill | 300ms | `ease-out` | 240ms |

**Key:** All durations stay under 400ms. Entrances are quick, clean reveals — content snaps into place without drama. The accent enters exactly once per viewport and is never re-animated; everything else arrives in grayscale.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Primary button | Fills with accent; label → zinc-950 (180ms) | Press scale(0.98) (100ms) |
| Cards / panels | Border zinc → gray, lift translateY(-2px) (180ms) | Press translateY(0) (100ms) |
| Links | Accent underline fades in (160ms) | — |
| Data points | Accent value shifts (160ms) | — |

**Precision over polish:** Hovers are 150-180ms — fast enough to feel responsive, slow enough to feel engineered. Only one accent response exists per interaction; secondary elements respond with grayscale value changes only.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Entrance animations: instant opacity (no translate)
- Hover reveals: instant accent (no transition)
- State changes: instant fills

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

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Bounce or spring physics | Too energetic — this is disciplined, not playful |
| Continuous drift / ambient motion | Distracts — the gray field must stay calm |
| Staggered multi-element reveals | The accent enters once; rest is one quiet point |
| Color / gradient transitions | Violates the single-accent rule |
| Autoplaying carousels | The user controls pace through scroll and click |
| Heavy parallax layers | Breaks the precise, grid-based composition |
| Micro-interaction spams | Every animation must be earned by the accent or states |

# Layout Grammar

## Grid System

**Visible, structured grid.** Unlike free-floating styles, this system is built on a disciplined grid — restraint applies to structure as much as color. Internally:

- Content column: 12-col grid, max-width 1200px
- Vertical rhythm: 8px baseline, consistent section heights
- Alignment: strict left-edge and baseline alignment — nothing floats
- Visual pathways: accent elements placed on grid intersections so the eye traces a line through the composition

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | 90-100vh — `min-h-[90dvh]` |
| Background | Flat grayscale (zinc-950) with subtle grain |
| Text position | Left-aligned, baseline-anchored — never centered |
| Headline size | `clamp(2.5rem, 6vw, 5rem)` — large, weight-driven |
| Accent usage | One element max — the CTA (or one key data figure) |

```
┌─────────────────────────────────────────┐
│                                         │
│  MONOCHROME SIGNAL                      │
│  One accent. Full restraint.            │
│  The beacon through neutrality.         │
│                                         │
│  [Get started — accent-filled button]   │
│  [grain: subtle, uniform]               │
└─────────────────────────────────────────┘
```

**The hero is the typographic statement.** One accent element — the CTA — is the only color on the entire first viewport. Everything else is zinc-950, zinc-50, and the type ramp.

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 10vh, 8rem);
--content-max-width: 1200px;
--grid-gutter: clamp(1rem, 2.5vw, 2.5rem);
--baseline: 8px;
```

**Spacing is regular and predictable.** Uniform rhythm communicates precision. White space is the second accent — it separates, groups, and breathes without ever adding color.

---

## Layout Patterns

### Pattern 1: Full-Width Data Band
```
┌─────────────────────────────────────────┐
│  Section label (mono, uppercase)        │
│                                         │
│  12-col grid                            │
│  ┌───────┬───────┬───────┬───────┐      │
│  │ data  │ data  │ data  │ data  │      │
│  │ value │ value │ value │ value │      │
│  │ [key] │ [key] │ [key] │ [key] │      │
│  └───────┴───────┴───────┴───────┘      │
│  (one accent value per band max)        │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Content + Accent Rail
```
┌──────────────────┬──────────────────────┐
│  Headline        │  [Accent key data]   │
│  Body text       │  12,847              │
│  Link (gray)     │  (label in mono)     │
│                  │                      │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Alternating Rows (Visual Pathway)
```
┌─────────────────────────────────────────┐
│  Row 1 — grayscale content block        │
│  Row 2 — [accent CTA] positioned on     │
│           grid intersection             │
│  Row 3 — grayscale content block        │
│  Row 4 — [accent CTA] positioned on     │
│           the same grid column           │
└─────────────────────────────────────────┘
```

**The accent column is the pathway.** Repeating the accent position from section to section creates a visible line the eye follows down the page — a path through neutrality.

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full 12-col grid, accent pathway visible, side-by-side splits |
| **Tablet (768px)** | 8-col grid, splits stack, accent rail moves inline |
| **Mobile (375px)** | Single column, baseline rhythm preserved, accent budget unchanged |

**On mobile:** The accent budget (≤15% of surface) is preserved — one accent CTA per viewport, not one per section. Hierarchy shifts to size and weight because the wide-field contrast of desktop is reduced.

---

## Layout Don'ts

| Don't | Do Instead |
|-------|------------|
| Floating, asymmetric placement | Strict grid alignment — nothing floats |
| Multiple accent elements per section | One accent element per section, three per page max |
| Centered hero text | Left-aligned, baseline-anchored |
| Decorative background blocks | Flat grayscale surfaces |
| Bento/gradient panels | Uniform gray panels, hairline borders (zinc-200/600) |
| Accent as border on containers | Accent only on CTA, active state, key data |
| Dense, uneven spacing | Consistent 8px-baseline rhythm |

# Texture & Surface

## Primary Texture: Clean, Flat Surfaces

The texture language is **clean**. Normally the ethos of this style — texture scores 2/6 on the axis, the lowest tier alongside color restraint. There are no competing textures, no busy patterns, no decorative materials. Surfaces are engineered, flat, and precise. Everything is defined by value contrast (zinc-950 through zinc-50) and 1px edges, not by texture.

## Texture Don'ts

| Don't | Why |
|-------|-----|
| Gradients | Value steps should be flat, not blended |
| Multiple grain layers | No competing textures — the field stays flat |
| Decorative patterns | The accent is the only decoration, used sparingly |
| Heavy shadows | Hierarchy comes from value contrast, not shadow |
| Texture-heavy material | Restores design statement is neutrality — the texture must stay quiet |

---

## Subtle Grain

```css
.grain-surface {
  background-image: url("/noise.svg");
  background-size: 160px 160px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}
```

**When to use:** Grain is optional — use it sparingly to warm an otherwise clinical grayscale field. Opacity 0.04, barely perceptible. Dead nothing.

**When to skip:** For pure data surfaces, keep it perfectly flat. Restraint says: the cleanest default is best.

---

## Paper / Surface Whites

| Surface | Specification |
|---------|--------------|
| **Background zinc** | zinc-950 base, flat, may wear subtle grain |
| **Foreground surfaces** | zinc-50 / zinc-100 — crisp, flat, untextured |
| **Borders** | 1px zinc-300 lines, sharp |
| **Hover echo** | Slight zinc shift — no gradient, no glow |
| **Elevation** | Two-tone base — white card on gray field |

**The accent decides**: value-only contrast. Depth comes from a light/dark pairing, not from texture.

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `accent color` | The single saturated color — the only chromatic element in the composition |
| `color restraint` | Refusing color except one point — restraint as the design statement |
| `grayscale` | Full zinc-950 through zinc-50 spectrum — value does the work, not color |
| `chromatic pop` | The moment the accent appears — instant visual beacon |
| `surgical accent` | Accent used precisely, on ≤15% of surface area — CTAs, active states, key data |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `grayscale ramp` | The full value ladder from near-black to white — hierarchy source |
| `value-based hierarchy` | Order from light/dark contrast, never from hue |
| `signal color` | The accent exists to signal — clickable, active, important |
| `monochrome` | One-hue system; the entire composition in neutral tones |
| `negative space` | Emptiness as structure — restraint, breathing room, focus |
| `beacon` | The accent as a light through neutrality — one point of color anywhere |
| `accent-as-path` | Color carves the visual route through an otherwise neutral layout |
| `state accent` | Accent on hover/active/transition states to draw attention to change |
| `inactive neutrals` | Unselected, idle elements rendered in quiet grays |

---

## Context Terms

| Term | Mood |
|------|------|
| `restraint` | Deliberate minimalism — fewer colors, more meaning |
| `precision` | Exact spacing, weight, and placement; nothing accidental |
| `surgical` | Precisely placed color with a job to do |
| `signal` | A beacon through neutrality — the accent is a message |
| `neutral` | The grayscale field all content lives on |
| `contrast first` | Hierarchy first from value, color second |
| `scarcity` | Color is scarce — so it reads as important |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `multiple accents` | One accent max — a second color destroys the beacon |
| `colorful palette` | The system is grayscale; color is the exception, not the field |
| `gradient backgrounds` | Smooth color transitions conflict with flat value control |
| `rainbow effects` | Multi-hue gradients shout; this style whispers |
| `pastel palette` | A white base + tinted colors — goes against strict value hierarchy |
| `primary/secondary button colors` | There is only ONE accent for every interaction |
| `color-coded data` | Legend removals; the single accent plus value must handle it |
| `saturated backgrounds` | Accent is reserved for foreground signals, never the surface |
| `decorative color` | Color only when it communicates a signal — never decoration |
| `glassmorphism` | Translucent blur competes with crisp value-led surfaces |

---

## Prompt-Ready Phrases

```
"value-based hierarchy — light/dark contrast, not hue (accent is the only color)"
"grayscale ramp from zinc-950 to zinc-50 as the full palette"
"one surgical accent color on ≤15% of surface area — CTA, active state, key data point"
"accent as beacon and pathway — a single color guiding attention through neutrality"
"weight and size do hierarchy — not color"
"monospace (mono) for technical details; clean sans-serif for display"
"accent revealed on hover for state feedback"
"grid-based structural layout — no ornaments, no competing textures"
"clean to subtle grain; no competing texture"
"user flow around one colored element — everything else in neutral gray"
"restraint as design statement — the absence of color reads as confidence"
"no more than one saturated color on the page"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Developer tools** | The surgical accent maps directly to code, status, and state — a beacon through neutral surfaces |
| **Data products** | Value-based hierarchy (zinc-950 through zinc-50) lets data speak without chromatic noise |
| **Premium SaaS** | Restraint reads as confidence; the single accent becomes the brand signal |
| **Fintech** | Grayscale + one accent suggests seriousness, precision, and control over complexity |
| **Technical documentation** | Typography-led hierarchy and mono type for technical details serve dense content |
| **Architecture/industrial brands** | Disciplined restraint matches engineered, material-driven identities |
| **Portfolios (typography-led)** | Weight and size do the hierarchy — the work itself carries the color |

## Brand Personality Match

This style reinforces brands that are:
- **Restrained** — discipline over decoration, saying more with less
- **Precise** — surgical, deliberate, engineered
- **Focused** — one message, one accent, no competing signals
- **Confident** — willing to let 85% of the surface be quiet
- **Typography-led** — hierarchy from type weight and scale, not color

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Consumer e-commerce** | Product photography needs a colorful, image-friendly system — grayscale suppresses merchandise |
| **Entertainment/playful brands** | The restraint reads as cold or sterile against playful personality |
| **Children/education (young)** | High-contrast neutrality is the opposite of warm, inviting energy |
| **Brands with strong multi-color identities** | Forcing one accent fights the existing palette — see the Multiple Accents ban |
| **Gradient-heavy or vibrant aesthetics** | Gradient backgrounds and rainbow effects are explicitly banned in this style's vocabulary |
| **Content-first editorial (image-led)** | A monochrome base flattens photography-heavy layouts; needs typography to lead |
| **Social-first consumer brands** | The surgical restraint underperforms in scroll-stop, color-saturated feeds |

## How to Decide

Ask: **"Can my brand's most important action or idea be carried by a single color on a grayscale stage?"**

If yes → Monochrome + Single Accent / Signal Line.
If no → Consider Swiss Mono Precision (if you want typographic precision with more structural play), Quiet Editorial (if you want restraint with warmer, softer textures), or Obsidian Precision (if you want dark, premium, and dramatic instead of neutral).

# Reference Gallery

## Live Sites

### Apple (apple.com)
- **What works:** Near-monochrome product pages where a single accent appears only in CTAs and key moments; hierarchy from typography and value contrast, not color
- **URL:** apple.com
- **Study:** How much surface area stays grayscale, and how rarely — and deliberately — color appears

### Muji (muji.com / muji.com/global)
- **What works:** Restrained neutral base, typography-led hierarchy, product photography on quiet grayscale surfaces
- **URL:** muji.com
- **Study:** Restraint as brand philosophy — the grayscale base is the identity, not a fallback

### Braun (braun.com)
- **What works:** Dieter Rams' design legacy translated to digital — disciplined grids, monochrome surfaces, a single functional accent for interaction
- **URL:** braun.com
- **Study:** How functional accents (buttons, active states) are the only colored elements

### Vitsoe (vitsoe.com)
- **What works:** Rams-designed shelving sold through a monochrome, typography-led site; color appears only where action is needed
- **URL:** vitsoe.com
- **Study:** Value-based hierarchy — grayscale layers separate content without any hue

### Architecture Firms (e.g., Snøhetta, snøhetta.com)
- **What works:** Editorial layouts on white/black with one accent reserved for nav, contact, and current projects
- **URL:** snohetta.com
- **Study:** Texture-free photography on grayscale backgrounds; typography carries the brand voice

### Stripe (stripe.com)
- **What works:** Grayscale-neutral developer-facing surfaces with one vivid accent reserved for CTAs and brand moments
- **URL:** stripe.com
- **Study:** How a single saturated accent creates the "path" through dense, technical content

### Dieter Rams-inspired one-pagers (search: "Dieter Rams" site on awwwards.com)
- **What works:** Obsessive grid discipline, grayscale systems, one signal color for interaction states
- **URL:** awwwards.com (search "Dieter Rams" or "minimal monochrome" trends)
- **Study:** Grids as structure; accent density kept at or below 15% of surface area

## Key Visual References

### Color References
- **Grayscale base** — zinc-950 (#09090B) through zinc-50 (#FAFAFA), full value ladder
- **One accent, chosen once** — electric blue, emerald, signal orange, or hot pink; never more than one
- **Accent budget** — ≤15% of surface area, reserved for CTAs, active states, key data points
- **Hover as reveal** — grayscale elements reveal the accent on interaction; color appears only on intent

### Typography References
- **Clean sans-serif** — Geist, Outfit, or Cabinet Grotesk; weight and size do hierarchy, not color
- **Mono for technical details** — mono faces for code, data, labels; reinforces precision
- **High contrast** — large value gaps between type layers; the page reads in grayscale before color loads

### Motion References
- **Precise, minimal** — short durations, no flourish
- **Accent-led state changes** — the accent color marks hover, active, and transition states
- **Restraint in motion** — if motion competes with the accent, cut the motion

### Layout References
- **Structured, grid-based** — consistent columns; the grid is the composition
- **Accent creates pathways** — the single color routes the eye from CTA to CTA through the grayscale

## Screenshot Notes

> When capturing references for this style, look for:
> - The accent (must be exactly ONE color, used on ≤15% of surface area)
> - The base (must be full grayscale — zinc-950 through zinc-50 — no tinted hues)
> - The hierarchy (must come from value contrast and type weight, not color)
> - The typography (must be clean sans-serif with mono for technical details)
> - The motion (must be precise and minimal, accent-led, never playful)
> - The texture (must be clean to subtle grain — no competing textures)
> - The mood (must feel restrained, surgical, confident — a beacon through neutrality)