Section wash
180° · #141414 → #0C0C0C · UI backgrounds only
Brand system
TL Media Agency brand guide
Fonts, color, gold transparencies, gradients, radius, and logo rules.
Positioning
Effortless Business Operations & Strategic Management
Dark, quiet, and metallic — not glitter. Gold is metal on ink. Cream text keeps the system warm. The lioness is the only illustration.
Palette
Gold transparencies
| Role | Mix | CSS |
|---|---|---|
| Hairline border | Gold 22% | rgb(201 168 76 / 0.22) |
| Strong border | Gold 40% | rgb(201 168 76 / 0.40) |
| Header glass | Ink 90% | rgb(12 12 12 / 0.90) + blur 12px |
| Outline hover | Gold 10% | rgb(201 168 76 / 0.10) |
| Focus ring | Gold 60% | rgb(201 168 76 / 0.60) |
| Text selection | Gold 40% | color-mix(in oklab, #c9a84c 40%, transparent) |
| Primary glow | Gold 28% | rgba(201, 168, 76, 0.28) |
| Card shadow | Black 35% | rgba(0, 0, 0, 0.35) |
| Disabled | 50% opacity | opacity: 0.50 |
Gradients (rare)
Metal bevel
135° · #D4B96A → #C9A84C · logo facets only, not buttons
Typography
Display
Cormorant Garamond
Weights 500, 600. Headings and wordmark. Tracking +0.02em (hero titles +0.08em). Fallback: Georgia, Times New Roman, serif.
Body
Outfit
Weights 300 (taglines), 400 (body), 500 (nav/buttons), 600 (emphasis). Line-height 1.6. Fallback: system-ui, sans-serif.
Google Fonts: Cormorant+Garamond:wght@500;600 and Outfit:wght@300;400;500;600
Radius & motion
Radius: 8 / 12 / 16 / 24px. Buttons are pills (9999px), height 36 / 44 / 48px. Motion 200ms ease-out. Press scale 0.98. Honor prefers-reduced-motion.