The Quiet Achiever
Design system
A reusable set of brand tokens, primitives, production sections, and Tailwind UI blocks for building new TQA pages without starting from scratch.
01 Tokens
Brand foundations
Ember
ember / #D54A2F
Primary CTAs, active states, emphasis.
Deep ember
ember-deep / #8A2A1C
Hover states and deeper accents.
Sunrise
sunrise / #E5A402
Highlights, stars, small moments of warmth.
Ink
ink / #2B2B52
Dark panels, secondary CTAs, structured modules.
Paper
paper / #F5F0D3
Site background and warm surfaces.
Paper soft
paper-soft / #FAF6E1
Alternating sections and subtle cards.
Charcoal
charcoal / #1E1E1E
Headings and high-contrast text.
02 Type
Typography
font-display
Literata
Hero headlines, section titles, editorial statements.
font-sans
Basier Circle
Navigation, buttons, labels, compact interface copy.
font-reading
Atkinson Hyperlegible
Long paragraphs, testimonials, article-style copy.
font-mono
System mono
Eyebrows, metadata, component labels, utility notes.
03 Primitives
Reusable building blocks
| Container | Page gutters and max-widths. Use wide for hero/showcase canvases. |
|---|---|
| Button | Primary, secondary, ghost, cream, and ink CTA styles. |
| Eyebrow | Small uppercase label for page sections. |
| SectionLabel | Numbered component label for internal libraries, not production homepage labels. |
| PainterPlaceholder | Branded placeholder art for cards, course tiles, and missing imagery. |
04 Sections
Production page sections
c1
Navigation
navigation
c2
Hero — portrait split
hero-portrait-split
c3
Segmenter
segmenter
c4
Thesis band
thesis-band
c5
Social proof strip
social-proof-strip
c6
Sound familiar
sound-familiar
c7
Coaching summary
coaching-summary
c8
Toni block
toni-block
c9
Book block
book-block
c10
Latest writing
latest-writing
c11
Start here
start-here
c12
School block
school-block
c13
Playbooks band
playbooks-band
c14
Newsletter band
newsletter-band
c15
Elsewhere strip
elsewhere-strip
c16
Footer
footer-rev
c17
Toni bubble (floating)
toni-bubble
Alternate hero components are available by slug: hero-editorial, hero-magazine, hero-masthead.
05 Tailwind UI
Reusable component kits
179
Marketing blocks
364
Application UI blocks
114
Ecommerce blocks
Tailwind blocks now run from c18 to c674. Use /visual-library to browse, or preview any individual block at /preview/cXXX.
06 Workflow
How to build with it
- 1. Pick a patternBrowse /visual-library or /design-system for the closest section.
- 2. Use TQA primitivesStart with Container, Button, type classes, and brand color tokens.
- 3. Adapt, do not inventKeep copy, spacing, colors, CTAs, and analytics behavior consistent.