# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean grotesk or geometric sans |
| **Examples** | Space Grotesk (600/700/800), Chakra Petch (500/600/700), Orbitron (600-900), Cabinet Grotesk, Archivo Black |
| **Weight** | 600-800 (bold, not black — let dither carry visual weight) |
| **Tracking** | -0.02em to 0 (tight, confident; never loose) |
| **Size** | Monumental — `clamp(3rem, 12vw, 10rem)` |
| **Transform** | Uppercase for maximum impact |

**Why these fonts:** Grotesk sans-serifs have a mechanical, industrial quality that complements the dithered imagery. They're clean enough to provide contrast against the textured chaos, but bold enough to hold their own at monumental scale.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean humanist sans or neutral grotesk |
| **Examples** | Plus Jakarta Sans (400-700), Inter (400-500, body only), Satoshi |
| **Weight** | 400-500 |
| **Tracking** | 0 to 0.01em (normal to slightly open for readability) |
| **Size** | Small — `clamp(0.75rem, 1vw, 0.9rem)` |
| **Line Height** | 1.5-1.6 |

**Why small body text:** The contrast between monumental display and small body creates the "type at extremes" principle. Large body text would compete with the display type and flatten the hierarchy.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Monospace |
| **Examples** | JetBrains Mono, Space Mono, Fragment Mono |
| **Weight** | 400-500 |
| **Tracking** | 0.15em-0.2em (wide, technical) |
| **Size** | Tiny — 10-11px |
| **Transform** | UPPERCASE |

**Usage:** Data callouts, coordinates, transaction IDs, timestamps, section numbers, film-strip ticks. These tiny mono labels create the "technical marginalia" that signals precision and craft.

---

## Type Scale

**Ratio:** 1.5x or 1.618x (golden ratio)

```
Display:    clamp(3rem, 12vw, 10rem)    — 1.5x
Headline:   clamp(1.5rem, 4vw, 3.5rem)  — 1.5x
Subhead:    clamp(1rem, 2vw, 1.5rem)    — 1.5x
Body:       clamp(0.75rem, 1vw, 0.9rem) — baseline
Micro:      10-11px                      — 0.67x
```

---

## Font Pairing Logic

**Display + Body:** Grotesk display + humanist body creates tension between mechanical precision and human readability.

**Display + Micro:** Grotesk display + monospace micro creates the "technical authority" pairing — the big type shouts the message, the small mono type provides the data.

**Never mix:** Don't use more than 2 typeface families. Display + body is sufficient. Micro monospace is a system font, not a "third family."

# Color Architecture

## Ground

```css
--color-ground: #0A0A0A; /* Near-black, never pure #000 */
--color-ground-elevated: #111111; /* Slightly lighter for cards/panels */
```

**Why near-black:** Pure #000000 kills depth. The near-black (#0A0A0A to #111111) gives dithered textures somewhere to bleed into and creates subtle depth between layers.

---

## Text

```css
--color-text-primary: #E8E8E8; /* Off-white, never pure #FFF */
--color-text-secondary: #A0A0A0; /* Muted gray for secondary content */
--color-text-muted: #666666; /* For micro labels and metadata */
```

**Why off-white:** Pure #FFFFFF text on near-black is exhausting to read. #E8E8E8 maintains high contrast while reducing eye strain. The slight warmth of off-white also prevents the clinical feeling of pure white.

---

## Accent

```css
--color-accent: #D4A574; /* Warm amber — the signature Dither Mono accent */
/* Alternatives: */
--color-accent-rust: #B85C38;
--color-accent-blood: #8B0000;
```

**Rule:** ONE accent maximum. The accent appears ONLY on:
- Primary CTA buttons
- Active navigation state
- One key data point per section
- Hover state on interactive elements

**Why warm:** The warm accent against the cold B&W ground creates maximum chromatic contrast with minimum color. It draws the eye like a signal flare.

---

## Semantic Colors

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

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

---

## The Color Rule

> **If color appears, it must EARN its place.** One accent maximum. Accent appears ONLY on CTA, active state, or one data point. Everything else is tonal black-to-white.

---

## Gradient Policy

**No gradients.** The style is built on tonal contrast, not color transitions. If depth is needed, it comes from:
- Dither patterns (not gradients)
- Layered transparency (opacity stacking)
- Vignette effects (radial darkening)

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure #000000 background | #0A0A0A to #111111 |
| Pure #FFFFFF text | #E8E8E8 to #F5F5F5 |
| Purple, indigo, blue accents | Warm amber or rust |
| Multiple accent colors | ONE accent, used surgically |
| Gradient backgrounds | Dither or solid near-black |
| Neon or saturated accents | Desaturated, warm tones |

# Motion Principles

## Philosophy

Motion in Dither Mono is **gravity, not elasticity**. Everything moves with weight and deliberation. No bounce, no spring, no playful overshoot. The style is authoritative — motion reinforces that authority through slow, controlled reveals.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Background dither layer | Opacity fade-in | 1200ms | `ease-out` | 0ms |
| Display headline | Opacity + translateY(20px) → 0 | 1000ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 200ms |
| Body text blocks | Opacity fade-in | 800ms | `ease-out` | 400ms |
| Micro labels | Opacity fade-in | 600ms | `ease-out` | 600ms |
| Wordmark | Scale 0.95 → 1 + opacity | 1400ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 300ms |
| CTA button | Border draw-in (SVG stroke) | 800ms | `ease-in-out` | 800ms |

**Key easing:** `cubic-bezier(0.22, 1, 0.36, 1)` — smooth deceleration, no bounce. This is the signature easing for the style.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Parallax on images | Subtle — 10-20% of scroll distance |
| Text reveals | Clip-path or mask reveal (not fade) |
| Dither grain animation | Subtle shifting noise pattern (24fps jitter) |
| Section transitions | Crossfade with 200ms overlap |

**Scroll-linked effects are minimal.** The style doesn't need scroll choreography — the dithered imagery and monumental type carry the experience.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Opacity 1.0 → 0.6 (300ms) | — |
| CTA buttons | Border color → accent color + slight scale (1.02) | Scale 0.98 (tactile press) |
| Image cards | Subtle brightness increase (1.0 → 1.05) | — |
| Wordmark | None — it's static and monumental | — |

**No color changes on hover.** Opacity shifts only. Color changes would break the monochrome discipline.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrance animations collapse to instant opacity changes
- No parallax
- No grain animation
- Dither layers render static
- Hover states use instant opacity 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 |
|-----------------|-----|
| Bounce or spring easing | Feels cheap, breaks authority |
| Color transitions | Breaks monochrome discipline |
| Rotation or skew | Too playful for this style |
| Every element fading in | Motion must be purposeful, not decorative |
| Marquee text strips | Lazy filler — this style doesn't need movement for movement's sake |

# Layout Grammar

## Grid System

**12-column grid with intentional asymmetry.**

Content lives in columns 1-5 (left) or 8-12 (right). Columns 6-7 are **negative space** — the style breathes here. This asymmetric split is the signature layout move.

```
[1][2][3][4][5][6][7][8][9][10][11][12]
 ██████████████          ████████████████
   Content                  Content
   (left)                   (right)
                  ↑
          Negative space
          (columns 6-7)
```

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` (NOT `h-screen`) |
| Background | Dithered image, full-bleed |
| Headline position | Left-aligned, vertically centered or bottom-aligned |
| Headline size | `clamp(3rem, 12vw, 10rem)` — monumental |
| Supporting text | Right-aligned, bottom-third of viewport |
| CTA | Below headline, left-aligned |
| Wordmark | Overlapping bottom edge, 30-50vw, bleeding off |

**Never centered hero.** The asymmetric placement (headline left, supporting content right-low) is the style's structural signature.

---

## Section Spacing

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

**Macro whitespace is not empty — it's structural.** Large gaps between sections create the "monumental space" feeling. Don't compress.

---

## Layout Patterns

### Pattern 1: Asymmetric Split
```
─────────────────────┬─────────────────┐
│                     │                 │
│  MONUMENTAL         │  Small mono     │
│  HEADLINE           │  label + data   │
│  (left, large)      │  (right, small) │
│                     │                 │
└─────────────────────┴─────────────────┘
```

### Pattern 2: Full-Bleed Image + Overlay Text
```
┌─────────────────────────────────────────┐
│  [Dithered image, full-bleed]           │
│                                         │
│  HEADLINE (bottom-left, large)          │
│  Subtext (bottom-left, small)           │
│                              [CTA]      │
└─────────────────────────────────────────┘
```

### Pattern 3: Wordmark Bleed
```
┌─────────────────────────────────────────┐
│  Content above...                       │
│                                         │
│                                         │
│                              KESTREL    │
└─────────────────────────────────────────┘
                              ↑
                    Overlaps bottom edge
                    30-50vw, bleeds off right
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full asymmetric split, monumental type |
| **Tablet (768px)** | Stacked vertically, type scales down via clamp |
| **Mobile (375px)** | Single column, wordmark moves to center, type still large but viewport-relative |

**Fluid typography via `clamp()` is essential.** The monumental scale must work on all viewports without hard breakpoints.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Centered hero layout | Asymmetric split — headline left or right |
| Card-grid feature sections | Full-bleed sections with text overlay |
| Zigzag image+text alternation | Vary the pattern — don't alternate predictably |
| Equal 3-column grids | Asymmetric bento or split layouts |
| Rounded corners on cards | Sharp corners (border-radius: 0-4px max) |
| Floating badges over hero media | Text directly on dithered background |

# Texture & Surface

## Primary Texture: Bitmap Dither

**The defining element.** Images are rendered through bitmap dithering — converting continuous-tone photographs into patterns of dots that simulate tonal range using only black and white (or limited colors).

### Dither Methods

| Method | Visual Character | Usage |
|--------|-----------------|-------|
| **Floyd-Steinberg** | Organic, error-diffusion pattern | Primary method — most natural look |
| **Ordered (Bayer matrix)** | Regular, grid-like dot pattern | For technical/data imagery |
| **Halftone** | Varying-size dots, print-like | For editorial/illustration feel |
| **1-bit threshold** | Pure black/white, no gray | Maximum contrast, most aggressive |

### Implementation

```css
/* SVG filter for dither effect */
<svg style="position: absolute; width: 0; height: 0;">
  <filter id="dither">
    <feColorMatrix type="saturate" values="0"/>
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0 1"/>
      <feFuncG type="discrete" tableValues="0 1"/>
      <feFuncB type="discrete" tableValues="0 1"/>
    </feComponentTransfer>
  </filter>
</svg>

/* Apply to images */
.dithered-image {
  filter: url(#dither);
}
```

**Alternative:** Pre-process images with dithering tools (Ditherlicious, Photoshop's bitmap mode, custom scripts) and serve as static assets for better performance.

---

## Secondary Texture: Film Grain

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

**Parameters:**
- Opacity: 0.03-0.06 (subtle — should be felt, not seen)
- Blend mode: `overlay` or `soft-light`
- Position: `fixed` (covers entire viewport, doesn't scroll)
- Animation: Optional subtle jitter at 24fps for "film" feel

---

## Tertiary Texture: Vignette

```css
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
}
```

**Purpose:** Darkens edges to draw focus to the center and enhance the "emerging from darkness" feeling.

---

## Image Processing Rules

**NEVER use raw, unprocessed photography.** Every image must pass through at least one processing step:

| Processing | Effect | When to Use |
|-----------|--------|-------------|
| Dither (Floyd-Steinberg) | Dot-pattern tonal simulation | Primary images, portraits |
| Halftone | Print-style dot pattern | Editorial illustrations |
| Heavy grain + desaturation | Aged film look | Background textures |
| 1-bit threshold | Pure B&W, high contrast | Icons, small graphics |
| ASCII rendering | Character-based image | Technical/data decoration |

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Near-black (#0A0A0A) + optional grain overlay |
| Cards/Panels | Near-black-elevated (#111) with 1px border (#222) |
| Buttons | Transparent with 1px border, fill on hover |
| Navigation | Transparent, opacity-based hover |
| Dividers | 1px hairline (#222 or #333) |

**No glossy, no glassmorphism, no gradients.** Surfaces feel like paper, film, or concrete — never digital-smooth.

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Raw stock photography | Process every image (dither, grain, halftone) |
| Gradient backgrounds | Dither patterns or solid near-black |
| Glassmorphic cards | Flat surfaces with hairline borders |
| Smooth 3D renders | Dithered or grain-processed imagery |
| Colorful overlays | Monochrome processing only |
| Heavy drop shadows | Subtle vignette or no shadow at all |

# Vocabulary Bank

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

| Term | Why It Matters |
|------|---------------|
| `bitmap dither` | The core visual technique — without this, it's just a dark site |
| `monumental display type` | Defines the typography scale — giant headlines are non-negotiable |
| `stark studio dark` | Sets the lighting/atmosphere — dark, controlled, dramatic |
| `near-black ground` | The specific background color (#0A0A0A, not #000) |
| `processed imagery` | Rules that images must be dithered/grained, never raw |
| `clean sans body` | The typography contrast — clean type against textured images |

---

## Secondary Terms (refine and tune the output)

| Term | Effect |
|------|--------|
| `Floyd-Steinberg` | Specific dither algorithm — organic, error-diffusion pattern |
| `wordmark overlap` | The brand name bleeds off the bottom edge |
| `tonal range` | B&W with full tonal spectrum, not just two tones |
| `film grain` | Subtle noise overlay for analog warmth |
| `asymmetric composition` | Content split left/right, never centered |
| `macro whitespace` | Generous spacing between sections |
| `typographic extremes` | Giant display + tiny mono, nothing in between |
| `dissolving edges` | Left edge fades to black, right catches light |
| `darkroom emergence` | Images appear to develop from darkness |
| `hairline border` | 1px structural lines (#222 or #333) |
| `L-corner brackets` | Framing device at content corners |
| `checkerboard accent` | Small geometric pattern as decorative element |
| `wireframe globe` | Technical line-art as decorative motif |

---

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

| Term | Mood |
|------|------|
| `brutalist editorial` | Raw, authoritative, print-inspired |
| `newspaper on obsidian` | Informational weight + dark luxury |
| `monochromatic tension` | The energy of B&W contrast |
| `authoritative` | Confident, commanding, serious |
| `restrained` | Nothing excessive, everything considered |
| `informational weight` | Content feels substantial and important |
| `darkroom` | Photographic, developing, emerging |
| `ink on paper` | Print quality, physical, tactile |

---

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

| Term | Why It Breaks the Style |
|------|------------------------|
| `gradient` | The style is built on tonal contrast, not color transitions |
| `glassmorphism` | Frosted glass is the opposite of raw dither |
| `colorful` / `vibrant` | Monochrome is non-negotiable |
| `playful` / `fun` | This style is authoritative, not friendly |
| `rounded` / `soft` | Sharp corners, hard edges |
| `SaaS` / `modern` | Too generic — this is editorial, not tech-default |
| `purple` / `blue` | Warm accent only (amber, rust, blood) |
| `bounce` / `spring` | Motion is gravity, not elasticity |
| `centered hero` | Asymmetric layout is structural |
| `Inter` (as display) | Grotesk or geometric for display, not Inter |

---

## Prompt-Ready Phrases

Copy-paste these directly into prompts:

```
"brutalist-editorial B&W landing page"
"bitmap dither processing on all imagery"
"monumental grotesk display type at 12vw"
"near-black ground (#0A0A0A), off-white text (#E8E8E8)"
"asymmetric split layout, headline left-aligned"
"film grain overlay at opacity 0.04"
"wordmark bleeding off bottom edge at 40vw"
"monospace micro labels at 10px, tracking 0.15em"
"one warm amber accent (#D4A574) on CTA only"
"no gradients, no glassmorphism, no purple"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Analytics platforms & data tools** | The monumental type + mono data labels signal authority and technical precision. Dark ground makes dashboards feel like mission control. |
| **Editorial publications & magazines** | The newspaper-on-obsidian aesthetic is literally editorial. Dithered images feel like printed photography. |
| **Portfolio sites for photographers/filmmakers** | Processed imagery respects the photographer's craft. Dark ground makes images pop. Monumental type frames the work. |
| **Luxury or premium B2B brands** | Restraint = confidence. The absence of color and playful elements signals seriousness and expense. |
| **Music/album/artist sites** | Dark, dramatic, textured. Dithered concert photos feel like gig posters. Monumental type feels like album art. |
| **Cybersecurity products** | The "stark studio dark" + mono data aesthetic feels like a secure terminal. Authority and precision. |
| **Architecture firms** | Monumental scale mirrors architectural ambition. B&W photography is the language of architectural presentation. |

## Brand Personality Match

This style reinforces brands that are:
- **Serious** — not playful or casual
- **Authoritative** — confident, expert, commanding
- **Craft-focused** — care about details, processing, quality
- **Premium** — expensive-feeling, not accessible/cheap
- **Technical** — data-driven, precise, methodical

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Consumer SaaS targeting non-technical users** | Too intimidating. The dark, raw aesthetic signals "this is serious tooling" not "this is easy to use." |
| **E-commerce with many products** | Too dark, too minimal. Product grids need light and breathing room. Dithered product photos look damaged. |
| **Playful consumer brands** | Wrong emotional register entirely. No bounce, no color, no fun. |
| **Dashboards requiring dense information display** | The monumental scale and macro whitespace work against information density. |
| **Sites targeting warm, approachable brand personality** | This style is cold and authoritative by design. |
| **Healthcare/wellness for general consumers** | Too dark and intimidating for audiences seeking comfort and trust. |
| **Children's or family-oriented brands** | Aggressive texture and dark palette are inappropriate. |

## How to Decide

Ask: **"Does my brand want to feel like a broadsheet newspaper printed on obsidian?"**

If yes → Dither Mono.
If no → Consider Obsidian Precision (cleaner), Dark Cinematic Studio (warmer), or Typographic Brutalist (more aggressive).

# Reference Gallery

## Live Sites

### Kestrel v4 (Design Concept)
- **What works:** Monumental wordmark overlapping bottom edge, dithered B&W subject emerging from darkness, right side lit / left dissolving to black, clean sans body against textured imagery
- **URL:** Reference prompt — `referrence/prompts/example_prompt7.md` (Direction 4)

### Awwwards — Brutalist Editorial Winners
- **What works:** Floyd-Steinberg dither on portrait photography, typographic extremes (giant display + tiny mono), asymmetric split layout with negative space columns
- **Search:** Awwwards "brutalist" + "monochrome" filter

### Noomo Agency
- **What works:** Raw typographic statements, broken grid composition, high-contrast B&W with intentional roughness
- **URL:** noomoagency.com

## Key Visual References

### Dither Technique Reference
- **Floyd-Steinberg dither** on portrait photography — organic dot pattern, natural tonal range
- **Ordered dither (Bayer matrix)** on technical/data imagery — regular grid pattern
- **1-bit threshold** on icons and small graphics — pure black/white, maximum contrast

### Layout Reference
- **Asymmetric split:** Content in columns 1-5 and 8-12, columns 6-7 as negative space
- **Wordmark bleed:** Brand name at 30-50vw overlapping bottom edge, extending off-screen right
- **L-corner brackets:** SVG framing devices at content corners (TL, TR, BL, BR)

### Typography Reference
- **Space Grotesk 700** at `clamp(3rem, 12vw, 10rem)` — monumental display
- **JetBrains Mono 400** at 10px, tracking 0.15em, uppercase — micro labels
- **Plus Jakarta Sans 400** at `clamp(0.75rem, 1vw, 0.9rem)` — body text

## Screenshot Notes

> When capturing references for this style, look for:
> - The quality of the dither pattern (Floyd-Steinberg vs ordered vs halftone)
> - The ratio of monumental type to body text
> - How the wordmark is treated (static logo vs monumental bleed)
> - The near-black ground color (not pure black)
> - The single warm accent and where it appears
> - How raw/unprocessed the imagery is (should be ZERO raw images)