Parchment Brutalist Editorial DESIGN.md

---
version: alpha
name: Parchment Brutalist Editorial Mobile
description: A neo-brutalist mobile aesthetic built on warm parchment, hard charcoal outlines, and a single electric chartreuse accent. Italic Fraunces serif acts as editorial display voice against DM Sans uppercase micro-labels with extreme tracking. Every surface is wrapped in a 3px charcoal border and parked over a hard offset shadow, creating a stamped, printed-broadside feel. Dense, opinionated, and structural — closer to a manifesto poster than a soft consumer app.
colors:
  primary: "#D6FF00"
  on-primary: "#111111"
  surface: "#F4EFE6"
  surface-alt: "#FFFFFF"
  on-surface: "#111111"
  on-surface-variant: "#A3A099"
  border: "#111111"
typography:
  display-lg:
    fontFamily: Fraunces
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
  display-md:
    fontFamily: Fraunces
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Fraunces
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Fraunces
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  body-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  label-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
  label-uppercase:
    fontFamily: DM Sans
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.2em
  tab-label:
    fontFamily: DM Sans
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.2em
rounded:
  none: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 20px
  section-gap: 40px
icons:
  set: ph
  default_variant: regular
  active_variant: fill
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    padding: 20px
    shadow: "8px 8px 0px 0px {colors.border}"
  card-flat:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    padding: 20px
    shadow: "4px 4px 0px 0px {colors.border}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    paddingX: 32px
    paddingY: 32px
    typography: "{typography.display-lg}"
    shadow: "8px 8px 0px 0px {colors.border}"
    pressedTransform: "translate(6px, 6px)"
    pressedShadow: "2px 2px 0px 0px {colors.border}"
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    paddingX: 16px
    paddingY: 12px
    typography: "{typography.label-uppercase}"
    shadow: "4px 4px 0px 0px {colors.border}"
  icon-button:
    size: 48px
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    iconSize: 24px
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    paddingX: 12px
    paddingY: 6px
    typography: "{typography.label-uppercase}"
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    paddingX: 12px
    paddingY: 6px
    typography: "{typography.label-uppercase}"
  list-row:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    padding: 20px
    rounded: "{rounded.none}"
  list-row-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    padding: 20px
    rounded: "{rounded.none}"
  list-row-muted:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    padding: 20px
    rounded: "{rounded.none}"
  avatar:
    size: 40px
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
    typography: "{typography.headline-sm}"
  badge-pill:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    height: 40px
    rounded: "{rounded.none}"
    paddingX: 12px
    typography: "{typography.label-md}"
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    height: 72px
    paddingX: 24px
  tab-bar:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    height: 88px
  tab-item-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    accentBar: "4px solid {colors.border} top"
  tab-item-inactive:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 24px
  progress-bar:
    height: 24px
    backgroundColor: "{colors.surface}"
    fillColor: "{colors.primary}"
    borderColor: "{colors.border}"
    borderWidth: 3px
    rounded: "{rounded.none}"
---

# Parchment Brutalist Editorial Mobile

## Overview

**Stamped. Editorial. Defiant.** This aesthetic borrows from broadsides, manifestos, and Swiss-meets-punk poster design. Every element is a hard-edged rectangle with a 3px charcoal outline, parked above a flat charcoal offset shadow — creating the impression of cut-paper layers pressed onto a warm parchment ground.

The voice is dual-register: italic Fraunces serifs deliver the editorial *flourish* (titles, key nouns, slogan-fragments), while DM Sans uppercase micro-labels with wide letter-spacing handle structure (kickers, metadata, button text, tab labels). One — and only one — saturated chartreuse accent fights the otherwise austere parchment-and-ink palette.

This is not a soft, friendly consumer aesthetic. It is dense, opinionated, structural, and slightly aggressive. Whitespace is generous between sections but punishing inside components. Nothing rounds. Nothing fades. Nothing apologizes.

## Colors

The palette is intentionally narrow: parchment ground, charcoal ink, white card surface, one electric accent.

- `{colors.surface}` — the warm parchment page background. Functions as the "paper" beneath every cut element.
- `{colors.surface-alt}` — pure white. Used for cards, list rows, button frames, and any surface that must read *above* the parchment ground.
- `{colors.on-surface}` — near-black charcoal. Used for all type, all 3px borders, and all hard offset shadows. There is no softer secondary border; everything is the same charcoal.
- `{colors.on-surface-variant}` — warm grey for muted/secondary metadata, completed/locked state copy, and the "/total" half of fraction displays.
- `{colors.primary}` — saturated chartreuse. Reserved exclusively for: the single hero CTA on a screen, the currently-active row in a sequence, the active tab, and progress-bar fill. Never used as a card background, never as body text color, never as decorative wash. Its scarcity is what makes it work.

There is no semantic palette (no separate success/error/warning). When status must be conveyed, the system uses chartreuse for "active/current/positive," parchment with reduced opacity + strikethrough for "completed," and white on charcoal for "primary structural anchor."

## Typography

Two families, deliberately mismatched in mood:

- **Fraunces** (serif, variable optical-size) — does all the *editorial* work. Used for display sizes, headline sizes, lesson/section titles. Italic is load-bearing: italicizing a single word or trailing phrase inside a title is a recurring visual rhythm. Weights stay light-to-regular (300–400); the size is what carries the impact, not the weight.
- **DM Sans** (geometric sans) — does all the *structural* work. Always Bold (700) when uppercased. Always tracked at `0.2em` (`tracking-widest`) for kickers, metadata, tab labels, button text. Lowercase DM Sans Regular (400) handles the rare paragraph of body copy.

Role assignments:

- `{typography.display-md}` — oversized numerals (60–72px Fraunces italic) used for hero stats and counters. The italic is what gives them their stance.
- `{typography.display-lg}` — primary CTA / hero card title. Multi-line is encouraged; italicize the second line for editorial cadence.
- `{typography.headline-md}` / `{typography.headline-sm}` — list-row titles, section anchors, card titles. Always Fraunces.
- `{typography.body-md}` — DM Sans regular for the rare paragraph; the system prefers structured fragments over flowing prose.
- `{typography.label-md}` — DM Sans Bold mixed-case, used inside numeric pill badges (e.g. counter chip values).
- `{typography.label-uppercase}` — the workhorse micro-label. Bold, uppercased, `0.2em` tracking. Used for kickers above titles, metadata under titles, button captions, status pills, "I. / II. / III." section markers.
- `{typography.tab-label}` — even smaller (9px) version of the uppercase label, for the bottom navigation only.

Hard rules: never use Fraunces for short labels, never use DM Sans for display sizes, never lowercase a `label-uppercase` token, never reduce the `0.2em` tracking on uppercase micro-labels — that wide tracking is a load-bearing visual signature.

## Spacing & Layout

Density is **bimodal**: tight inside components, generous between them.

- Inside a card: `{spacing.card-padding}` (20px) on all sides; titles sit 4–6px from kickers; baseline-aligned numerals butt directly against their unit suffix.
- Between sections on a screen: `{spacing.section-gap}` (40px). Sections feel like separate poster panels stacked vertically rather than continuous content.
- Screen gutter: `{spacing.gutter}` (24px) horizontal inset on every screen.
- Vertical rhythm inside a card: kicker → 16–24px → primary content → 24–32px → footer/metadata.

The grid is implicitly single-column, with horizontal flex rows used for pairing a label-stat with an icon, or distributing a title vs. action-button to opposite edges (`justify-between`). Multi-column compositions are not part of the aesthetic.

## Elevation & Depth

There is exactly one elevation primitive: a **hard, charcoal, offset drop shadow** with no blur. Two tiers:

- **Resting card**: `box-shadow: 4px 4px 0px 0px #111111`
- **Hero / actionable surface**: `box-shadow: 8px 8px 0px 0px #111111`
- **Pressed state**: shadow collapses to `2px 2px 0px 0px #111111` and the element translates `(6px, 6px)` down-right, simulating the physical press.

Every shadowed element is also wrapped in a 3px charcoal border. The shadow + border combination is what sells the cut-paper-stacked-on-parchment illusion. Soft shadows, glow effects, blur, and tonal-only elevation are forbidden — they would dissolve the brutalist contract.

Surfaces that don't get a shadow (list rows inside a multi-row card, header bar) still get the 3px border. Borders are non-negotiable.

## Shapes

**Everything is a sharp-cornered rectangle.** `{rounded.none}` (0px) is the universal radius for cards, buttons, inputs, chips, badges, list rows, avatars, icon buttons, and the tab bar. There is no soft-corner tier.

The single exception: `{rounded.full}` exists in the token set only for the rare case where a circular dot or pip is needed (e.g., a status indicator inside a chartreuse cell). It is never used on interactive controls.

This zero-radius rule is the primary visual contract of the system; relaxing it on any component would immediately break the aesthetic.

## Components

### card

```html
<section class="border-3 border-charcoal bg-white shadow-brutal-sm p-6">
  <h3 class="uppercase tracking-[0.2em] text-[10px] font-bold mb-4 flex items-center gap-2">
    <iconify-icon icon="ph:[icon-name]"></iconify-icon>
    [Section kicker]
  </h3>
  <p class="font-serif text-2xl leading-tight">[Card body content]</p>
</section>
```

### button-primary (hero CTA card-button)

```html
<button class="brutal-btn w-full text-left bg-chartreuse border-3 border-charcoal p-8 shadow-brutal cursor-pointer group block transition-all">
  <div class="uppercase tracking-[0.2em] text-[10px] font-bold mb-6 border-3 border-charcoal inline-block px-3 py-1.5 bg-white">
    [Kicker label]
  </div>
  <h1 class="font-serif text-5xl leading-[1.05] mb-4 tracking-tight">
    [Primary title]<br>
    <i class="opacity-80">[Italic fragment]</i>
  </h1>
  <div class="flex items-center justify-between mt-8">
    <p class="text-sm font-bold uppercase tracking-widest">[Metadata · Subcategory]</p>
    <div class="w-12 h-12 border-3 border-charcoal bg-white flex items-center justify-center group-active:bg-charcoal group-active:text-white transition-colors">
      <iconify-icon icon="ph:arrow-right-bold" class="text-2xl"></iconify-icon>
    </div>
  </div>
</button>
```

The press behavior (`translate(6px, 6px)` + shadow shrink) is part of the component's identity and is provided by the `.brutal-btn` utility.

### button-secondary

```html
<button class="border-3 border-charcoal bg-white px-4 py-3 shadow-brutal-sm uppercase tracking-[0.2em] text-[10px] font-bold flex items-center gap-2">
  <iconify-icon icon="ph:[icon-name]"></iconify-icon>
  [Action label]
</button>
```

### icon-button

```html
<div class="w-12 h-12 border-3 border-charcoal bg-white flex items-center justify-center">
  <iconify-icon icon="ph:[icon-name]-bold" class="size-6"></iconify-icon>
</div>
```

### chip / chip-active

```html
<span class="border-3 border-charcoal bg-white px-3 py-1.5 uppercase tracking-[0.2em] text-[10px] font-bold">
  [Label]
</span>

<span class="border-3 border-charcoal bg-chartreuse px-3 py-1.5 uppercase tracking-[0.2em] text-[10px] font-bold">
  [Active label]
</span>
```

### badge-pill (compound stat counter)

The stat counter is a horizontally-segmented row, not a single pill. Each cell is divided by a 3px border.

```html
<div class="flex border-3 border-charcoal bg-white h-10">
  <div class="flex items-center gap-1.5 px-3 border-r-3 border-charcoal">
    <iconify-icon icon="ph:[icon-name]" class="text-lg"></iconify-icon>
    <span class="font-bold text-sm pt-0.5">[Value]</span>
  </div>
  <div class="flex items-center gap-1.5 px-3">
    <iconify-icon icon="ph:[icon-name]" class="text-lg"></iconify-icon>
    <span class="font-bold text-sm pt-0.5">[Value]</span>
  </div>
</div>
```

### list-row (sequence with state)

A sequence renders as a single `border-3` container with internal `border-b-3` dividers. State is conveyed by the row's fill color:

```html
<section class="border-3 border-charcoal bg-white shadow-brutal-sm">
  <!-- Header strip -->
  <div class="bg-charcoal text-white p-3 px-5 border-b-3 border-charcoal flex justify-between items-center">
    <h3 class="uppercase tracking-[0.2em] text-[10px] font-bold">[Group kicker]</h3>
    <span class="font-serif italic text-sm">[Group title]</span>
  </div>

  <!-- Completed -->
  <div class="p-5 border-b-3 border-charcoal flex justify-between items-center bg-parchment opacity-70">
    <div>
      <div class="text-[10px] font-bold uppercase tracking-widest mb-1 text-muted">[I. Marker]</div>
      <div class="font-serif text-xl line-through decoration-2">[Item title]</div>
    </div>
    <iconify-icon icon="ph:check-square-fill" class="text-3xl"></iconify-icon>
  </div>

  <!-- Active -->
  <div class="p-5 border-b-3 border-charcoal flex justify-between items-center bg-chartreuse relative overflow-hidden">
    <div class="absolute inset-0 opacity-10" style="background-image: repeating-linear-gradient(45deg, #000 0, #000 2px, transparent 2px, transparent 8px);"></div>
    <div class="relative z-10">
      <div class="text-[10px] font-bold uppercase tracking-widest mb-1">[II. Marker]</div>
      <div class="font-serif text-xl italic">[Active item title]</div>
    </div>
    <iconify-icon icon="ph:caret-circle-right-fill" class="text-3xl relative z-10"></iconify-icon>
  </div>

  <!-- Locked / future -->
  <div class="p-5 flex justify-between items-center bg-white text-muted">
    <div>
      <div class="text-[10px] font-bold uppercase tracking-widest mb-1">[III. Marker]</div>
      <div class="font-serif text-xl">[Item title]</div>
    </div>
    <iconify-icon icon="ph:[icon-name]" class="text-3xl"></iconify-icon>
  </div>
</section>
```

### avatar (initials square)

```html
<div class="w-10 h-10 border-3 border-charcoal flex items-center justify-center font-serif text-xl bg-white">
  [XX]
</div>
```

### top-app-bar

```html
<header class="flex justify-between items-center px-6 py-5 border-b-3 border-charcoal bg-parchment">
  <div class="flex items-center gap-3">
    <div class="w-10 h-10 border-3 border-charcoal flex items-center justify-center font-serif text-xl bg-white">[XX]</div>
    <div class="flex flex-col">
      <span class="text-[10px] font-bold uppercase tracking-widest leading-none">[Kicker]</span>
      <span class="font-serif italic leading-tight">[Subject]</span>
    </div>
  </div>
  <!-- compound stat counter on right -->
</header>
```

### tab-bar

```html
<nav class="absolute bottom-0 w-full bg-white border-t-3 border-charcoal flex h-[88px]">
  <a href="#" class="flex-1 flex flex-col items-center justify-center gap-1 border-r-3 border-charcoal bg-chartreuse relative">
    <div class="absolute top-0 w-full h-1 bg-charcoal"></div>
    <iconify-icon icon="ph:[icon-name]-fill" class="size-6"></iconify-icon>
    <span class="text-[9px] font-bold uppercase tracking-widest">[Active]</span>
  </a>
  <a href="#" class="flex-1 flex flex-col items-center justify-center gap-1 border-r-3 border-charcoal text-muted">
    <iconify-icon icon="ph:[icon-name]" class="size-6"></iconify-icon>
    <span class="text-[9px] font-bold uppercase tracking-widest">[Label]</span>
  </a>
  <!-- 2-3 more inactive tabs, last one drops border-r-3 -->
</nav>
```

The active tab is identified by: chartreuse fill + a 4px-tall charcoal bar pinned to the top edge of the cell (the "stamp registration mark"). Inactive tabs are white-filled with muted-grey icon + label.

### progress-bar

```html
<div class="h-6 border-3 border-charcoal bg-parchment w-full relative">
  <div class="absolute top-0 left-0 h-full bg-chartreuse border-r-3 border-charcoal w-[60%] flex items-center justify-end px-2">
    <span class="text-[10px] font-bold">[Value]%</span>
  </div>
</div>
```

The fill terminates with its own 3px right border, and the percentage label is pinned to the right edge of the fill itself — not centered in the track.

## Iconography

- **Set**: `ph` (Phosphor) via Iconify. Phosphor's geometric, slightly-rounded terminals match the system's hard rectangles without feeling sterile.
- **Default variant**: regular (line) for inactive / neutral contexts.
- **Active variant**: `-fill` for the currently-selected tab and the active row in a sequence. `-bold` is acceptable for directional cues inside primary CTAs (arrows, carets) where extra weight is warranted.
- **Sizing**: `size-5` (20px) inline with body type, `size-6` (24px) standard chrome, `size-8` (32px) for end-of-row status icons inside list rows. Icons inside icon-buttons are `size-6` centered in a 48×48 frame.
- Icons sit *next to* their label with a `gap-1.5`–`gap-2` separator; never absorb the label visually.

## Illustration & Imagery

**Style / Technique**: high-contrast hand-cut paper / linocut / woodblock-print aesthetic. Bold positive/negative shape relationships in pure black-and-cream, like Matisse cut-outs filtered through Constructivist poster sensibility. Slightly imperfect, hand-cut edges (not vector-clean) are essential — the irregularity is what makes it feel printed rather than digital.

**Palette**: strictly two tones per illustration — `{colors.on-surface}` (charcoal/black) and `{colors.surface}` (parchment/cream). No color, no greys, no gradients. The chartreuse accent never enters illustrations — that color belongs exclusively to UI chrome. When an illustration is displayed in a "completed/inactive" context, apply CSS `grayscale` (which is a no-op on already-monochrome art but normalizes any photograph fallback).

**Edge treatment**: organic, slightly-wobbly hand-cut paper edges. Not vector-perfect, not pixel-aliased, not stroked. Edges read as cut with scissors or carved with a gouge.

**Shading & light**: none. Pure flat black against pure flat cream. No tonal steps, no gradients, no texture inside shapes — only the natural slight grain of "paper."

**Composition & framing**: bold, abstract, geometric. Subjects are abstracted into shape relationships rather than literal depictions — angular forms, fragmented architecture, gestural marks, broken letterforms, radiating lines. Subject bleeds beyond the frame; never centered with a polite halo of negative space. Negative space inside the illustration is itself a primary shape.

**Background within the illustration**: either solid charcoal or solid parchment — the "background" is just whichever of the two tones is dominant. There is no separate scene background.

**Container styling**: image sits inside a parent card with a 3px charcoal border and a 4px or 8px hard offset shadow. The image area is a fixed-height region (typically `h-48`) capped at the top of the card, with a 3px charcoal border-bottom dividing it from the card's text region below. No internal padding around the image — it bleeds edge-to-edge inside its frame. A `chip` overlay pinned `top-4 left-4` (white, 3px border, uppercase kicker) labels the image's category.

**CSS treatment on the `<img>` element**: `class="w-full h-full object-cover"`. Apply `grayscale` by default on the parent wrapper to enforce the two-tone contract even if the source asset has color; optionally `group-hover:grayscale-0 transition-all duration-500` for an editorial reveal on interaction. No blur, no opacity reduction, no blend modes.

**Box-shadow on the image or its frame**: none directly on the `<img>`. The shadow lives on the parent card (`shadow-brutal-sm` = `4px 4px 0px 0px #111111`).

**Aspect ratio rule**: the image region is a fixed-height band (192px / `h-48`) inside the card, with the image cropped via `object-cover`. Do not preserve source aspect ratio at the cost of card geometry — the card's rectangular silhouette is more important than the image's full composition.

**Anti-references**: NOT photorealistic, NOT 3D, NOT claymation, NOT soft watercolor, NOT pastel, NOT cartoon mascots, NOT colorful flat-vector illustration, NOT glossy gradients, NOT line-only sketches, NOT isometric.

**Style recipe prompt**:

> *Bold black-and-cream hand-cut paper collage of [SUBJECT], in the style of mid-century linocut and Constructivist poster art. Two tones only — pure charcoal black and warm parchment cream — with slightly irregular hand-cut edges. Abstract, geometric, fragmented composition; angular shapes and bold negative-space relationships rather than literal depiction. Subject bleeds to the edges of the frame. No outlines, no shading, no gradients, no color. NOT photoreal, NOT 3D, NOT cartoon, NOT pastel, NOT soft.*

## Hierarchy & Emphasis

Visual weight is allocated by **size and color saturation**, not by font weight. Fraunces stays at 400; what makes a title *loud* is its 48–72px size and its italic stance, not bolding.

- **Loudest tier**: the single chartreuse hero block on a screen. There is at most one. It commands a full multi-line Fraunces display title and a hard offset shadow.
- **Structural tier**: white cards with charcoal borders + smaller offset shadows. Section anchors and curriculum/sequence containers.
- **Whisper tier**: uppercase DM Sans micro-labels at `0.2em` tracking — kickers, metadata, "I./II./III." markers. They are small, but their wide tracking gives them a poster-like authority disproportionate to their size.
- **Muted tier**: `{colors.on-surface-variant}` warm-grey type for completed/locked items, denominators in fractions ("/ 5"), and inactive tab labels.

Active state is *always* chartreuse fill + charcoal type — never an outline change, never a font-weight change, never a checkmark alone.

## Distinctive Details

1. **The decorative corner notch**: a small charcoal-filled square (`w-4 h-4`) tucked into the top-right corner of select cards, with internal 3px borders, suggesting a punched registration mark or printer's crop tag. Use sparingly — once or twice per screen — as a structural flourish.
2. **Diagonal hazard-stripe overlays**: on active rows, a low-opacity (10%) repeating diagonal stripe pattern at 45° peeks through the chartreuse fill (`background-image: repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 8px)`). It signals "this is the live one" with a subtle industrial-warning texture.
3. **Italicizing the trailing fragment**: in any multi-word Fraunces title, italicizing the final word or trailing clause is a recurring rhythm (`Berlin Brutalism & <i>The Imperative Form</i>`). It mimics editorial pull-quote convention and is cheap to apply consistently.
4. **The press-translate**: every primary actionable card physically shifts down-right `(6px, 6px)` on `:active`, with its shadow collapsing from 8px to 2px. The element appears to depress into the page.

## Do's and Don'ts

### Do
- Wrap every surface in a 3px charcoal border. No exceptions.
- Use the hard offset shadow (`Npx Npx 0px 0px #111111`) — never a soft blurred shadow.
- Reserve chartreuse for exactly one hero block, the active row, the active tab, and progress fill. Nothing else.
- Mix italic Fraunces and uppercase tracked DM Sans in the same component — that contrast is the voice.
- Keep all corners at 0px radius.
- Italicize the trailing fragment of multi-word Fraunces titles.
- Translate-down-right on `:active` for primary actionable surfaces.

### Don't
- Don't round any corner. Not buttons, not avatars, not chips, not the tab bar.
- Don't use chartreuse as a card background outside the single hero CTA pattern.
- Don't introduce a soft, blurred, or colored shadow.
- Don't reduce the `0.2em` tracking on uppercase micro-labels — that wide tracking is load-bearing.
- Don't use Fraunces for short labels or DM Sans for display sizes.
- Don't lowercase a `label-uppercase` token.
- Don't add semantic colors (red error, green success). Status is conveyed by chartreuse-vs-parchment-vs-strikethrough.
- Don't render illustrations in color, with gradients, or in a 3D/photoreal style — the two-tone hand-cut contract is non-negotiable.
- Don't introduce a third typeface or a softer secondary border color.
- Don't pad the inside of cards generously — interior density is part of the brutalist contract; let air live *between* cards instead.