Files

Mike Swanson 7515af3309 acg-website: remove Paper/Ledger skin, set Bold as default

- CSS: Bold tokens now at :root (bone/near-black palette, signal orange)
- JS: skin switcher cycles Bold/Midnight/Verdigris (default: bold)
- HTML: all 7 pages default to bold skin
- Docs: README + DESIGN.md rewritten for Bold design language
- Deployment: live at ww9.azcomputerguru.com (IX hosting, grey-cloud DNS)

Paper/Sonoran Ledger skin dropped per user direction. Single-page ledger
version in root retained as archived reference pattern.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2026-06-16 20:30:10 -07:00

3.2 KiB

Raw Blame History

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.

3.2 KiB Raw Blame History