Files

Mike Swanson c5d4d3527c sync: auto-sync from GURU-5070 at 2026-06-14 20:04:14

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-14 20:04:14

2026-06-14 20:05:02 -07:00

2.6 KiB

Raw Blame History

DESIGN.md — "Sonoran Ledger" (multipage)

The locked design language for the ACG site. A trusted local bookkeeper's ledger, rendered for the web: warm paper, precise rules, mono numerals. Pricing, the calculator, and the concierge story are treated as a transparent, permanent record.

Color strategy: Committed (warm paper carries the surface), one accent as "ink"

Use OKLCH; neutrals tinted toward the brand hue (~30 hue). Never pure #000/#fff.

Light: paper #F7F3EB, surface #EDE6D9, surface-2 #E4DACA, ink #2A2521, ink-2 #5A5148, ink-3 #6D6456 (AA on cream).
Dark: paper #1C1814, surface #2A2520, surface-2 #322B24, ink #E8DFCE, ink-2 #C4B8A3, ink-3 #9A8C77.
Accent (the "ink"): amber #F2922E (light) / #F2A24E (dark) for fills, underlines, marks, the single primary CTA. Orange TEXT on light must use #BD5A00 (AA); on dark #F4A85C.
Accent is ≤ ~10% of any view. It marks active data, never fills big blocks.

Theme

Both light and dark are first-class. Scene: a Tucson business owner reading at a sunlit desk by day, or late at night deciding on a provider. Warm in both. System preference is honored and remembered, set before first paint (no flash).

Typography

Display: Barlow Condensed 600/700 (headlines, tier names, the "since 2001" lockup).
Body: Lexend 300/400/500 (body capped 65–75ch).
Mono: JetBrains Mono, tabular-nums, for ALL money, the calculator, endpoint counts, eyebrows, and ledger micro-labels.
Scale steps keep ≥1.25 contrast; hierarchy via scale + weight.

Layout & rhythm

Strict 24px baseline. Faint continuous ledger rulings align to body line-height.
Vary spacing per page; do not repeat one padding everywhere. Avoid identical card grids. Cards only where they are the right affordance (pricing tiers).
Radius 0–2px only. Sharp = precise, manual, honest.

Motion

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

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 + 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.

2.6 KiB Raw Blame History Unescape Escape