Color
Brand palette, 60-30-10 proportions, and WCAG contrast — click a swatch to copy hex
Color
Five core tokens plus one ESG accent. Click any swatch to copy its hex. Values live in src/app/global.css and map into Fumadocs chrome.
Hierarchy: ~60% Soft Canvas / Surface · ~30% Deep Trust Ink · ~10% Bright Accent.
Type pairing: Plus Jakarta Sans for headlines · Inter / SF Pro for body and tabular data.
Brand color palette
Bonus — Sustainability Emerald
Orange split (Bright vs CTA)
When tokens diverge, keep this assignment:
| Token | Hex | Use |
|---|---|---|
| Primary CTA Orange | #AB3500 | Marquee text fills, path anchor points, other AA structure accents |
| Bright Accent | #FF6B35 | Decorative curve strokes, bezier control handles, fill-slide / button demos |
| On-bright | #5F1900 | Labels on Bright filled buttons |
Filled action buttons elsewhere may stay Bright + On-bright, or use #AB3500 + white where AA requires a darker fill. Do not paint large Bright fills with white labels.
CSS: --brand-orange-bright / --brand-orange-cta in src/app/global.css.
Proportions & accessibility
Visual 60-30-10
~60% Soft Canvas / Surface White, ~30% Deep Trust Ink, ~10% accent (Bright and/or CTA Orange by role).
- ~60% Soft Canvas / Surface
- ~30% Deep Trust Ink
- ~10% Bright Accent
Bright + On-bright (required pairing)
White text on Bright Accent fails WCAG body-text contrast (~2.84:1). Use On-bright #5F1900 on Bright fills — that pairing clears AA at ~4.56:1. For marquee/structure text that sits on Canvas, prefer Primary CTA Orange #AB3500.
WCAG contrast matrix
Ratios use WCAG 2 relative luminance. Badges: AAA ≥ 7:1 · AA ≥ 4.5:1 · FAIL below AA for normal text.
| Pair | Preview | Ratio | WCAG |
|---|---|---|---|
On-bright on Bright Accent #5F1900 → #FF6B35 Required label on filled primary CTAs | Aa | 4.56:1 | AA |
Ink on soft canvas #0F172A → #F7F9FB Body & titles | Aa | 16.92:1 | AAA |
White on Bright Accent #FFFFFF → #FF6B35 Fails WCAG — do not use | Aa | 2.84:1 | FAIL |
Emerald on mint #059669 → #D1FAE5 ESG badge pairing | Aa | 3.32:1 | FAIL |
Marketing gradient
Optional hero treatment — not for dense app chrome.
Marketing / hero gradient — plum → electric orange. Not for dense app chrome.
Gradient circles (atmospheric orbs)
Soft peach/orange radial discs sit behind hero marks and marketing moments. They are atmosphere, not content — the homepage hero uses one under the white S mark and a larger wash behind the receipt path.
Soft peach orb · Bright Accent `#FF6B35` at low alpha
- Light: ~9–28% alpha · Dark: ~14–34% alpha
- Size ≈ 40–70% of hero width · heavy blur · never a hard edge
- Sit behind marks/type — do not compete with copy contrast
Spec
| Rule | Guidance |
|---|---|
| Purpose | Depth / warmth behind a mark or headline — never primary UI |
| Color | Bright Accent #FF6B35 (and soft tints toward CTA Orange #AB3500 if needed) |
| Opacity | Light canvas ~9–28%; dark charcoal ~14–34% at the core, fall to transparent |
| Blur / size | Soft blur; diameter roughly 40–70% of the hero width (or a local chip behind a mark) |
| Stacking | Always pointer-events: none and behind type/marks (z below content) |
Do / don’t
| Do | Don’t |
|---|---|
| Keep text contrast on Soft Canvas / Ink | Obscure body copy or bury CTAs in the glow |
| Use white S marks over a stronger local orb | Drop flat white marks on bare Soft Canvas (fails contrast) |
Honor prefers-reduced-motion (static orb is fine — no pulse) | Animate opacity/size on a loop in product chrome |
| Slightly raise alpha in dark mode | Swap Soft Canvas for plum as the docs dark background |