Honeycomb Credit
Colors
The Honeycomb brand palette — every color available for design and development. For the narrative version with usage ratios, contrast pairings, and do/don't guidance, see the brand guide .
No Tailwind defaults. The framework's built-in palettes (red, orange, indigo, etc.) are not part of this design system. If you reach for a color, it must be one of the seven families below or one of the semantic tokens at the bottom.
Primary families
The four anchor palettes — Honey (primary), Lavender (secondary), Stone (warm neutrals), Grey (cool neutrals).
Brand Primary / Honey
Brand Secondary / Lavender
Stone Neutrals / Stone
Grey Neutrals / Grey
Secondary families
Supporting palettes for accent, illustration, and data visualization.
Grass
Sky
Sea
Semantic tokens
Role-based names that resolve to brand colors. Reach for these first in product code — the theme can be re-skinned without renaming every reference. Each maps to a CSS variable inapp/globals.css and a Tailwind utility like bg-primary or text-foreground.
Developer reference
Every family above is available as a Tailwind utility prefix — bg-honey-2, text-stone-9, border-grass-3, etc. Resolved values live in --color-{family}-{stop} CSS variables. Click any swatch above to copy the hex.