Design tokens
Every number in the system, in two portable files. tokens.css is drop-in CSS custom properties; tokens.json follows the W3C design tokens spec for Style Dictionary, Figma sync, or whatever the build team prefers. Both files are the same data — the JSON is the source of truth.
Color
| Token | Value | Role | |
|---|---|---|---|
| color.primary.terracotta | #C8553D | Actions, signage, bold brand | |
| color.primary.aptos-pink | #E5A5A0 | Signage, packaging, CTA support | |
| color.primary.honey-gold | #E8A53A | Mascot body, honey cues, type accent | |
| color.primary.mustard | #D9A441 | Label backgrounds | |
| color.neutral.sand-cream | #F2E6CF | Primary background, packaging base | |
| color.neutral.off-white | #FAF3E2 | High-contrast surface, paper trim | |
| color.neutral.warm-charcoal | #2B2A28 | Type, line work — never pure black | |
| color.supporting.sage | #8FA68E | Foliage and scene green | |
| color.supporting.deep-sage | #3D7A3D | Clover leaf shadow tone | |
| color.supporting.coastal-teal | #3D5A6C | Surfboards, sea accents, type detail | |
| color.supporting.terracotta-shadow | #A04530 | Hover / pressed state | |
| color.supporting.clover-leaf-alt | #4A8A4A | Mark: alternate clover leaf | |
| color.supporting.clover-center | #2D5A2D | Mark: center knot | |
| color.interface.border | #D3C9B5 | Rules and dividers (charcoal 14% over sand cream) |
Typography
| Token | Value | Notes |
|---|---|---|
| typography.fontFamily.display | Recoleta → Cormorant Garamond → Playfair Display → Georgia | Wordmark, headlines, the B’s |
| typography.fontFamily.body | Inter → Söhne → system sans | Body copy, UI, captions |
| typography.fontFamily.accent | Caveat → Patrick Hand → Marker Felt | Mascot voice, short taglines only |
| typography.size.* | 96 / 64 / 40 / 20 / 16 / 14 / 12 px | display-xl · display-l · heading-m · body-l/m/s · label |
| typography.letterSpacing.wordmark | 0.18em | BENSON · BEES · APTOS, all-caps, never below 12px |
Spacing, shape, shadow, motion
| Group | Values | Notes |
|---|---|---|
| spacing | 4 · 8 · 16 · 24 · 40 · 64 · 96 | 8pt scale: xs through 3xl |
| radius | 8px · 6px · pill · leaf | Cards, chips, buttons; leaf 60/60/40/40 is clover-only |
| border | 1px | One weight. That’s it. |
| shadow.soft | 0 6px 12px rgba(43,42,40,.12) | Cards, pills |
| shadow.warm | 0 12px 24px rgba(200,85,61,.18) | Hover lift, hero elements |
| motion.duration | 200 / 400 / 700 / 6000ms | fast · normal · slow · story (full logo reveal) |
| motion.easing | out-cubic · in-back · in-out-back · out-bounce · out-elastic | reveals · collapses · B rotation · bee landing · clover pop |
What the CSS file looks like
/* Benson's Bees — design tokens v1.0.0 */ :root{ --color-primary-terracotta:#C8553D; --color-neutral-sand-cream:#F2E6CF; --bg:var(--color-neutral-sand-cream); --font-display:"Recoleta","Cormorant Garamond","Playfair Display",Georgia,serif; --space-l:24px; --shadow-warm:0 12px 24px rgba(200,85,61,.18); /* …the complete set lives in tokens.css */ }
The four standing rules: every color slightly muted (if it pops neon, desaturate 10%); never pure black; terracotta sparingly, hover goes to terracotta-shadow; exactly two shadows exist.