# DESIGN.md — "Bold" (default)

The locked design language for the ACG site. Premium brutalist: confident authority
without arrogance. Anton poster headlines, signal orange accents, grayscale documentary
photos, refined 1px borders. Direct, transparent, inked precision.

## Color strategy: High-contrast refined brutalist
Sharp contrasts, near-neutral palette with signal orange as the ONLY accent color.

- **Light:** bone `#F4EDE1`, surface `#FBF7F0`, surface-2 `#EAE2D4`,
  ink `#16120F`, ink-2 `#46403A`, ink-3 `#5C544B` (AA on bone ~5:1).
- **Dark:** near-black `#0C0A09`, surface `#16120F`, surface-2 `#1E1814`,
  ink `#F4EDE1`, ink-2 `#C9C1B5`, ink-3 `#9A9082`.
- **Accent:** signal orange `#E24A12` (light) / `#FF5A1F` (dark) — fills, CTA,
  underlines, marks. Orange TEXT: `#C23A0A` (light, AA) / `#FF8A4D` (dark, AA).
- Accent is restrained, authoritative. Never decorative gradients or tints.

## Theme
Both light and dark are first-class. Light = crisp professional confidence. Dark =
refined premium authority. System preference honored, set before first paint (no FOUC).

## Typography
- Display: **Anton** 400 (headlines, tier names, brand lockup, pricing numerals).
  Uppercase for h1/h2/tier names. Sentence-case for functional labels (service names,
  FAQ questions) to avoid condensed-caps smear at UI sizes.
- Body: **Hanken Grotesk** 400/500/700 (paragraphs, UI labels, functional copy).
- Mono: **JetBrains Mono** tabular-nums for money, calculator, endpoint counts.
- Hierarchy via size + case + weight. Large poster numerals lean into Anton's authority.

## Layout & rhythm
- 24px baseline. NO ledger rulings (dropped from the paper aesthetic).
- Hard 1px ink borders on major sections, header, rate cards, calculator shell.
- Vary spacing per page. Premium softening: extra breathing room on tiers/calc panels.
- Radius: 2px on buttons/cards/inputs (refined, not zero-radius industrial).
- Rate cards use ink background with 1px gap dividers (frame + inner grid unified).

## Photography
Grayscale documentary photos (scoped to .hero__frame / .story__img / .page-head--img /
.office-figure only). `filter: grayscale(1) contrast(1.08)` matches the high-contrast
palette. Future logos/badges/UI images stay color.

## Motion
- Reveal on scroll (opacity + small translate), ease-out only, respects reduced-motion.
- Never animate layout properties.

## Alternate skins (header switcher)
- **Midnight Concierge** — cool dark-premium slate aesthetic
- **Verdigris Gate** — oxidized-copper green/plaster, Fraunces serif, cool color photos

## House laws (impeccable)
- **No em dashes** anywhere in copy. Use commas, colons, semicolons, periods, parentheses.
- **No side-stripe accent borders** (no border-left/right > 1px as a colored accent).
  Use full borders, leading numerals/marks, background tints, or nothing.
- No gradient text, no decorative glassmorphism, no hero-metric template, no AI slop.

## Multipage specifics
- Shared sticky header (brand + nav + theme toggle + skin switcher + mobile menu) and footer on every page.
- Active nav state per page (`aria-current="page"`).
- Pages: Home, Services, Pricing, Calculator, About, Contact. Each has its own
  opening rhythm so the set never feels templated.