# AI Guide — Brutalist Mono

- **Slug:** `brutalist-mono`
- **Category:** Agency · Landing
- **Vibe:** brutalist-mono, loud, print-inspired
- **Format:** desktop landing page (single column below 900px)
- **Reference implementation:** `reference.html` (same directory, self-contained)
- **Audience:** coding agents reproducing this design in any stack

## Mission

An agency landing that refuses to look like an agency landing. Raw monospace
everywhere, 3px rules, offset hard shadows, one yellow block, and headlines that
shout. It is a print poster translated to the web — and it must never, ever soften.

## Mood & voice

- Loud, confident, a little funny. "We build *unboring* web stuff." — the word
  "unboring" in the yellow box is the whole pitch.
- Voice: short, uppercase-heavy, no corporate filler. "No templates. No 'hmm, let me
  check the brand guidelines.' No stock-photo hero sections."
- Everything is honest: index numbers on projects, plain stats (87 projects, 6-week
  average launch).

## Color tokens

| Token | Hex | Use |
| --- | --- | --- |
| bg | `#f2efe9` | page background (warm off-white) |
| ink | `#111111` | all rules, text, shadows |
| ink-2 | `#333333` | body copy, nav |
| muted | `#6b6456` | eyebrows, meta, index numbers |
| yellow | `#ffdd00` | the ONLY accent: CTA, hero box, footer box, project hover |
| white | `#ffffff` | fact-card fills, marquee background |

No other colors exist on the page. If a palette has more than two hues plus ink, it
is not this reference.

## Typography

Face: **monospace only** (`ui-monospace / SF Mono / Cascadia Mono / IBM Plex Mono /
Menlo / Consolas`). There is no serif and no grotesk anywhere.

| Style | Size | Weight | Notes |
| --- | --- | --- | --- |
| wordmark | 17 | 800 | −0.03em · sup muted |
| nav | 12 | 700 | +0.06em · uppercase |
| CTA buttons | 11–12 | 800 | +0.08em · uppercase |
| eyebrow | 12 | 700 | +0.14em · uppercase · muted |
| h1 | `clamp(46px, 7.2vw, 92px)` | 800 | −0.055em · uppercase · line-height 0.92 |
| hero body | 14 | 400 | 1.6 · ink-2 · max 44ch |
| fact value | 22 | 800 | −0.04em |
| work h2 | 26 | 800 | −0.04em · uppercase |
| project name | `clamp(20px, 3vw, 32px)` | 800 | −0.04em · uppercase |
| tags / year | 10–12 | 700 | +0.1em · uppercase |
| footer h2 | `clamp(34px, 5.5vw, 64px)` | 800 | −0.05em · uppercase |

## Spacing & shape

- Gutter 26px; max-width 1180px. Top bar 66px tall with a **3px ink bottom rule**.
- The signature is the **hard offset shadow**: buttons `5px 5px 0 ink`, CTA `4px 4px 0`,
  facts `5px 5px 0`, h1 box `6px 6px 0`, footer box `5px 5px 0`. On hover, buttons
  translate +2px and the shadow shrinks to 2px — the button appears to press down.
- All borders: 2px ink (buttons, facts, project rows, tags) or 3px (topbar, marquee,
  footer). Radius: **zero everywhere**. Rounded corners are the enemy.
- Fact cards: white fill, 2px ink border, padding 14, stacked with 12px gap.

## Layout rules

1. **Top bar:** wordmark `NOVA*STUDIO`, nav (Work / Process / Studio / Contact), and a
   yellow CTA "Start a project" pushed right with 4px shadow.
2. **Hero:** two columns `1.35fr 0.65fr`, aligned bottom. Left: eyebrow with a 34×10
   ink bar, h1 in three lines with "unboring" in the yellow box, body, two buttons.
   Right: three stacked fact cards (Shipped since 2019 · Projects 87 and counting ·
   Avg. launch 6 weeks).
3. **Marquee:** full-bleed strip between 3px rules, white bg, monospace uppercase
   items separated by "◆", scrolling infinitely (`translateX(-50%)` of a doubled
   track, 22s linear). Purely decorative.
4. **Work:** "Selected work" head, then project rows — `64px | 1.4fr | 0.8fr | 0.6fr |
   auto` grid: index, name, tags, year, arrow. Rows separated by 2px rules (closing
   rule after the last). **Hover: entire row turns yellow.**
5. **Footer:** 3px top rule. Left: "Let's talk. Say hi." with "Say hi." in the yellow
   box + meta line. Right: socials row (Instagram / X / Are.na), underlined email, and
   coordinates meta. Right column text-align right.

## Copy (exact)

- Wordmark: **NOVA*STUDIO** · Eyebrow: **Independent web studio · Est. 2019**
- H1: **We build / unboring / web stuff.**
- Body: **No templates. No “hmm, let me check the brand guidelines.” No stock-photo
  hero sections. We design and build sites that have a point of view — and we do it
  fast, loud, and on budget.**
- CTAs: **See the work** (yellow) · **Read the process**
- Facts: **Shipped since — 2019** · **Projects — 87 and counting** · **Avg. launch —
  6 weeks**
- Work head: **Selected work — 2023 — 2026**
- Projects: **01 Field Notes Supply · E-commerce, Editorial · 2026** ·
  **02 Meridian Transit · Civic, Wayfinding · 2025** ·
  **03 Kindred Records · Music, Identity · 2024** ·
  **04 Loop Health · Product, Mobile · 2023**
- Footer: **Let’s talk. / Say hi.** · **New business · newbiz@novastudio.work** ·
  socials · **Brooklyn, NY · 40.7128° N, 73.9960° W**

## Interaction

- Buttons and CTA: press-down hover (translate +2px, shadow 2px).
- Project rows: yellow fill on hover; arrow stays.
- Nav links: underline on hover (2px, offset 4px).
- Marquee: continuous scroll, `prefers-reduced-motion` should pause it.

## Responsive behavior

- ≤900px: hero stacks (facts below text), project grid becomes `40px 1fr auto` with
  tags wrapping to their own row, year hidden, nav hidden.
- The h1 and footer h2 use `clamp()` — they scale, they never shrink to boring.

## Do / Don't

- DO use mono for literally everything. A non-mono font in this design is a bug.
- DO keep radius at zero and borders at 2–3px. No rounded cards, no pill buttons.
- DO keep the hard shadows — they are the texture.
- DON'T add images, gradients, glass, or grain. The yellow box + mono type carry it.
- DON'T use the yellow on more than: CTA, hero box, footer box, hover fills.
- DON'T center the hero; it's a left-aligned poster column.

## Reproduction checklist

- [ ] 100% monospace; zero border-radius; ink `#111111` rules 2–3px
- [ ] Yellow `#ffdd00` appears only in the listed places
- [ ] Hard offset shadows (5px default) with press-down hover
- [ ] Marquee animates; project rows yellow on hover
- [ ] H1 `clamp()` uppercase −0.055em with yellow "unboring" box
- [ ] Stacks cleanly ≤900px

## Stack notes

- **HTML/CSS:** `reference.html` is fully self-contained (no external assets, no
  fonts to load — the mono stack is system-native).
- **React:** components Topbar / Hero / Marquee / WorkRow / Footer; marquee = two
  rendered copies of the track inside a flex row animated by keyframes.
- **React Native:** shadows via `elevation`/`boxShadow` won't be offset the same way —
  use two absolutely-positioned Views (one offset ink) to fake the hard shadow.
- **Tailwind:** `font-mono`, `rounded-none`, `shadow-[5px_5px_0_#111]`, `hover:-translate-x/y`.