52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
# 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.
|