Design System
Token reference + base component showcase. Every value derives from docs/brand-kit.md.
Gold is accent-only — never large backgrounds, never small body text on light. Teal-300 is decorative (gradients, contours on dark) — not body text.
--color-teal #006D77 Primary — CTAs, links, active states
--color-teal-700 #005159 Hover/pressed teal
--color-teal-300 #3a9aa3 Lighter blend — gradients, contour mid-tones (dark)
--color-gold #D4AF37 Accent — arc, stats, dividers. Never large bg.
--color-gold-soft #E6C868 Warm gold highlight
--color-midnight #1E2A38 Dark sections, heading text on light
--color-midnight-900 #151E29 Deepest dark — footer, hero base
--color-midnight-800 #192430 Elevated dark surface — portfolio cards
--color-slate #5C6B73 Body text, secondary labels
--color-ivory #F4F1EB Light section bg, card fills
--color-ivory-200 #ECE9E0 Subtle alt bg, borders on light
--color-white #FFFFFF Cleanest bg, text on dark
H1 — Hero headline
H2 — Section title
H3 — Card heading
Lead — Hero subhead / intro
Body — Running text
Small — Secondary
Eyebrow — Section label
--space-1 (4px) --space-2 (8px) --space-3 (12px) --space-4 (16px) --space-6 (24px) --space-8 (32px) --space-12 (48px) --space-16 (64px) --space-24 (96px) --radius 10px — Cards, buttons
--radius-lg 16px — Scanner card, modal
--radius-pill 100px — Tags, tool chips, mobile CTA
--easecubic-bezier(.2, .7, .2, 1)--duration-fast180ms--duration-base300ms--duration-slow500msPurposeful, not decorative. One orchestrated hero moment; scroll reveals 12–16 px rise; hover micro-interactions. Always respect prefers-reduced-motion.
We build the agents and automations that do the repetitive work — so your team doesn't.
Professional, creative websites built with AI — like this one.