Mike Swanson
7515af3309
- 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>
61 lines
3.2 KiB
Markdown
61 lines
3.2 KiB
Markdown
# 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.
|