---
title: "Busy Bee Honey design system"
variant: extended
source: https://www.busybeehoney.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/busybeehoney-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Busy Bee Honey · Design System

> Traceable honey, framed with bold vintage charm

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.busybeehoney.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Busy Bee Honey pairs a deep brown canvas and oversized vintage-inspired lettering with a centered product image. A restrained palette and playful bear-shaped bottle make traceability and product character the visual focus.

## North star

Let oversized vintage lettering and one unmistakable product image carry the page, against calm, high-contrast brand colors.

## Overview

The page opens on a nearly full-bleed dark brown hero, with warm cream lettering and navigation providing crisp contrast. A huge, condensed display headline stretches across the top of the composition, while a centered bear-shaped honey bottle gives the page a playful, product-first focal point. The surrounding colors are drawn from the measured palette: cream and brown establish the brand, with honey yellow, sky blue, brick red and muted taupe appearing in supporting sections or accents. Keep the hero spacious and visually simple; the product label itself brings brighter colors and detail, so avoid adding competing decorative elements. Typography contrasts expressive, irregular display lettering with a compact, readable sans-serif for navigation and body copy. Across the longer page, alternate generous cream-colored canvas areas with more saturated section surfaces, using rounded cards and pill-shaped buttons where they are visible in the measured styles. Treat colors seen only in the product mock-up as image detail, not global UI tokens.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roasted Brown | `#3b2722` | `--color-roasted-brown` | brand | Hero canvas, headings, navigation, footer, and dark button fill. |
| Honey Gold | `#ffca50` | `--color-honey-gold` | accent | Accent sections, card details, borders, and filled CTA backgrounds. |
| Warm Cream | `#f2ebd0` | `--color-warm-cream` | neutral | Main page canvas, large hero headline, and light text on dark surfaces. |
| Hive Blue | `#6aacc2` | `--color-hive-blue` | surface | Colored section or testimonial-card surfaces; also appears on the product packaging. |
| Brick Nectar | `#a0342a` | `--color-brick-nectar` | accent | Accent-section color and contrasting text on honey-yellow CTA buttons. |
| Muted Stone | `#c2bca6` | `--color-muted-stone` | surface | Secondary section surface; a quiet supporting neutral rather than a hero color. |

### Semantic aliases

`--color-canvas` → `#f2ebd0` (Warm Cream) · `--color-surface` → `#6aacc2` (Hive Blue) · `--color-surface-2` → `#3b2722` (Roasted Brown) · `--color-surface-3` → `#c2bca6` (Muted Stone) · `--color-text` → `#3b2722` (Roasted Brown) · `--color-text-muted` → `#f2ebd0` (Warm Cream) · `--color-border` → `#ffca50` (Honey Gold) · `--color-accent` → `#ffca50` (Honey Gold) · `--color-accent-2` → `#6aacc2` (Hive Blue) · `--color-accent-3` → `#a0342a` (Brick Nectar) · `--color-on-accent` → `#a0342a` (Brick Nectar)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3b2722` | `#f2ebd0` | 11.72:1 | AAA |
| `#3b2722` | `#6aacc2` | 5.53:1 | AA |
| `#3b2722` | `#c2bca6` | 7.36:1 | AAA |
| `#f2ebd0` | `#6aacc2` | 2.12:1 | fail |
| `#f2ebd0` | `#3b2722` | 11.72:1 | AAA |
| `#f2ebd0` | `#c2bca6` | 1.59:1 | fail |
| `#ffca50` | `#f2ebd0` | 1.27:1 | fail |
| `#ffca50` | `#6aacc2` | 1.67:1 | fail |
| `#ffca50` | `#3b2722` | 9.22:1 | AAA |
| `#ffca50` | `#c2bca6` | 1.25:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TayBirdie-Regular | `--font-body` | webfont | 400 | Navigation, body copy, and captions. | Nunito Sans |
| TayMakawao-Regular | `--font-display` | webfont | 400 | Display headlines and page headings. | Rye |

- **TayBirdie-Regular:** Regular weight; compact supporting text, with uppercase navigation and measured letter spacing kept neutral.
- **TayMakawao-Regular:** Regular weight with expressive, high-contrast vintage forms; use large, tightly set headlines rather than bold weight.

### Type scale — Custom (ratio ≈ 1.762, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 238px | 400 | 1 | 0 | — | TayMakawao-Regular | Oversized hero statement and prominent decorative display text. |
| h1 | 209px | 400 | 0.8 | -0.01em | — | TayMakawao-Regular | Primary page headline, prominently set across the hero. |
| h2 | 135px | 400 | 0.82 | 0 | — | TayMakawao-Regular | Major section headlines in the long homepage. |
| h3 | 90px | 400 | 0.82 | 0 | — | TayMakawao-Regular | Subsection or feature headlines. |
| h4 | 28px | 400 | 1 | 0 | — | TayMakawao-Regular | Compact display headings for cards and supporting blocks. |
| body | 14px | 400 | 1.5 | 0 | — | TayBirdie-Regular | Product storytelling, descriptions, and supporting paragraphs. |
| caption | 12px | 400 | 1 | 0 | — | TayBirdie-Regular | Small labels and short supporting annotations. |
| nav | 14px | 400 | 1 | 0 | — | TayBirdie-Regular | Compact primary navigation links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 16, 20, 24, 28, 32, 35, 36, 40, 48, 52, 80 px.
- Section rhythm 48px · element gap 8px · card padding 40px · max content width —.

The hero spans the viewport, with navigation along the top, a centered brand mark, and an oversized headline aligned across the page. The product image sits centrally beneath the headline and overlaps its visual area, creating a single composed focal point. Keep the first screen sparse rather than dividing it into columns or adding cards. The measured data reports no maximum page width, so use broad, edge-reaching compositions where the screenshot supports them. Across the page, alternate spacious cream canvas with colored sections; use comfortable separation and rounded cards without inventing unmeasured dimensions.

## Shape & elevation

- Radius: button `9999px` · card `40px` · xs `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The measured styles report no shadows, so keep the composition predominantly flat. Use strong color blocks, pill-shaped CTA buttons, and rounded cards rather than drop shadows to distinguish interface elements. The hero's layering comes from the headline and product image occupying overlapping visual space, not from simulated depth or ornamental borders.

## Imagery

The hero uses a crisp, isolated product photograph of a bear-shaped honey bottle, centered and large enough to overlap the headline area. Its amber contents, blue cap, and illustrated label supply detail against the simple dark field. Keep product photography cleanly cut out or on a restrained background; the package's bright colors belong to the photographed product, not the core interface palette.

## Components

### Hero navigation

Compact cream links sit across the top of the dark hero, with the Busy Bee mark centered and navigation groups arranged on either side.

### Oversized hero headline

A wide, warm-cream display headline dominates the hero, using the expressive TayMakawao-Regular face and a tight line treatment.

### Centered product image

A large, isolated bear-shaped honey bottle is centered beneath and partly over the hero headline.

### Pill CTA

Use a fully rounded button; measured examples include honey-yellow with brick text or dark brown with cream text.

### Rounded feature card

Measured cards use a 40px radius, generous internal padding, and either dark brown or sky-blue fills.

### Text link

Product and content links use dark brown text without a filled background; keep them distinct from pill-shaped CTAs.

### Measured component styles

- **Primary button** (“LEARN MORE”): background #ffca50 · text #a0342a · border 2px solid #ffca50 · radius 500px · padding 24px · 400 16px Times New Roman
- **Secondary button** (“Learn more”): transparent background · text #3b2722 · border 2px solid #3b2722 · radius 1000px · padding 24px 40px · 400 13.3333px Arial
- **Link** (“SEE MORE PRODUCTS”): transparent background · text #3b2722 · radius 0px · padding 0px · 400 16px Times New Roman
- **Card** (“NOT ALL HONEY IS CREATED EQUAL. THIS BRA”): background #3b2722 · text #3b2722 · radius 40px · padding 32px 48px · 400 16px Times New Roman
- **Navigation item** (“Trace your honey Products LIVE HIVE Abou”): transparent background · text #f2ebd0 · radius 0px · padding 0px · 400 14px TayBirdie-Regular

## Do

- Use Roasted Brown #3b2722 as the defining dark hero field.
- Set primary display headlines in warm cream against dark surfaces.
- Give one product image a clear, central focal position.
- Use expressive display type for headings and compact sans-serif for utility text.
- Reserve Honey Gold #ffca50 and Hive Blue #6aacc2 for accents and section surfaces.
- Keep interface depth flat and let color blocks define sections.

## Don't

- Don't add gradients or shadows absent from the measured styles.
- Don't let product-label colors become global interface colors.
- Don't crowd the hero with extra cards or competing imagery.
- Don't replace the expressive display face with generic bold sans-serif headings.
- Don't introduce new palette colors or unmeasured spacing values.
- Don't use rectangular controls where the measured buttons are pill-shaped.

## Agent prompt

Build a new Busy Bee Honey page that follows the homepage's product-led, vintage editorial style. Use Roasted Brown #3b2722 for strong dark fields and Warm Cream #f2ebd0 for high-contrast text and light canvas. Set oversized headings in an expressive vintage display face, with a restrained sans-serif for navigation and body copy. Anchor the composition with a clean, centered product photograph; treat label colors as image detail, not global UI colors. Use Honey Gold #ffca50, Hive Blue #6aacc2, Brick Nectar #a0342a, and Muted Stone #c2bca6 selectively for accents and section surfaces. Keep sections spacious, layouts broad, cards rounded, and CTA buttons pill-shaped. Avoid shadows, gradients, extra ornament, invented palette values, and overly dense layouts.

## Source CSS custom properties (selected)

```css
--background: #F2EBD0;
--foreground: #3B2722;
--buttons-border-radius: 500px;
--box-border-radius: 40px;
--border-radius-desktop-large-radius-vw: 3vw;
--border-radius-tab-large-radius-vw: 10vw;
--border-radius-hero: 0px;
--space-on-top: 5rem;
--loader-bar-color: #f2ebd0;
--desktop-display-1-font-family: TayMakawao-Regular,sans-serif;
--desktop-display-1-font-size: 258px;
--desktop-display-1-font-weight: 400;
--desktop-display-1-font-style: normal;
--desktop-h1-font-family: TayMakawao-Regular,sans-serif;
--desktop-h1-font-size: 135px;
--desktop-h1-font-weight: 400;
--desktop-h1-font-style: normal;
--desktop-h2-font-family: TayMakawao-Regular,sans-serif;
--desktop-h2-font-size: 90px;
--desktop-h2-font-weight: 400;
--desktop-h2-font-style: normal;
--desktop-h3-font-family: TayMakawao-Regular,sans-serif;
--desktop-h3-font-size: 72px;
--desktop-h3-font-weight: 400;
--desktop-h3-font-style: normal;
--desktop-h4-font-family: TayMakawao-Regular,sans-serif;
--desktop-h4-font-size: 56px;
--desktop-h4-font-weight: 400;
--desktop-h4-font-style: normal;
--desktop-h5-font-family: TayMakawao-Regular,sans-serif;
--desktop-h5-font-size: 48px;
--desktop-h5-font-weight: 400;
--desktop-h5-font-style: normal;
--desktop-h6-font-family: TayMakawao-Regular,sans-serif;
--desktop-h6-font-size: 40px;
--desktop-h6-font-weight: 400;
--desktop-h6-font-style: normal;
--desktop-h7-font-family: TayMakawao-Regular,sans-serif;
--desktop-h7-font-size: 32px;
--desktop-h7-font-weight: 400;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/busybeehoney-com