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

# BEHAVE · Design System

> Candy-bright color, bold type, and a playful edge

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.eatbehave.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._

BEHAVE pairs a pastel lavender shopping canvas with electric blue typography and vivid lime calls to action. Product cards, lifestyle photography, and oversized candy imagery give the low-sugar candy store a playful, high-contrast personality.

## North star

Keep the lavender canvas and electric-blue structure consistent, then use lime and vivid candy imagery as deliberate bursts of contrast.

## Overview

The visual system is led by Gallery Lavender (#efe5ff), which carries most of the page and keeps the busy product content readable. Electric Blue (#061fff) anchors navigation, headings, text, outlines, and product-card actions; Acid Lime (#d3ff56) supplies the strongest CTA contrast and occasional highlighted text. Pink surfaces (#ffe7ff) distinguish product cards, while Lilac Footer (#ceb3ff) gives the closing area a separate field. The first viewport introduces a black hero media area: treat its black background and candy packaging as campaign imagery, not as the core site palette. Good Sans is used throughout, with uppercase, tightly tracked headings and compact uppercase navigation and labels. Large headlines sit beside product images; below, centered copy, a horizontal product carousel, four-column nutrition facts, a full-bleed lifestyle image, and a flavor strip create varied but consistent beats. Comfortable spacing and rounded, blue-outlined cards balance the energetic color and imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Blue | `#061fff` | `--color-electric-blue` | brand | Primary ink for navigation, headings, body copy, product-card outlines, and blue-filled purchase buttons. |
| Gallery Lavender | `#efe5ff` | `--color-gallery-lavender` | surface | Main page canvas, carrying the introductory copy, product area, nutrition facts, and section transitions. |
| Acid Lime | `#d3ff56` | `--color-acid-lime` | accent | High-contrast CTA fill and selective highlighted text; pair with Electric Blue for button labels. |
| Candy Blush | `#ffe7ff` | `--color-candy-blush` | surface | Soft pink product-card and section surface that separates merchandise from the lavender canvas. |
| Lilac Footer | `#ceb3ff` | `--color-lilac-footer` | surface | Footer surface behind the oversized blue wordmark and compact utility links. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Small instances of light navigation or text; not the main page background. |

### Semantic aliases

`--color-canvas` → `#efe5ff` (Gallery Lavender) · `--color-surface` → `#ffe7ff` (Candy Blush) · `--color-surface-2` → `#ceb3ff` (Lilac Footer) · `--color-text` → `#061fff` (Electric Blue) · `--color-border` → `#061fff` (Electric Blue) · `--color-accent` → `#061fff` (Electric Blue) · `--color-accent-2` → `#ceb3ff` (Lilac Footer) · `--color-on-accent` → `#d3ff56` (Acid Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#061fff` | `#efe5ff` | 6.54:1 | AA |
| `#061fff` | `#ffe7ff` | 6.85:1 | AA |
| `#061fff` | `#ceb3ff` | 4.35:1 | AA-large |
| `#061fff` | `#efe5ff` | 6.54:1 | AA |
| `#061fff` | `#ffe7ff` | 6.85:1 | AA |
| `#061fff` | `#ceb3ff` | 4.35:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Good Sans | `--font-body` | webfont | 500, 400, 700 | Site-wide display, headings, navigation, product labels, buttons, and compact uppercase copy. | Montserrat |

- **Good Sans:** Use bold for oversized display moments and medium weights for most interface text; headings, nav, and labels are frequently uppercase with tight negative tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.439, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86.5px | 700 | 1 | -0.02em | — | Good Sans | Oversized campaign headline in the hero. |
| h1 | 72px | 500 | 1.2 | -0.02em | uppercase | Good Sans | Primary uppercase headline treatment. |
| h2 | 56px | 500 | 1.2 | -0.02em | uppercase | Good Sans | Section headings and prominent product messaging. |
| h3 | 53px | 400 | 1.51 | -0.02em | — | Good Sans | Large introductory copy and supporting statements. |
| h4 | 32px | 500 | 1.1 | -0.02em | uppercase | Good Sans | Compact uppercase card or subsection headings. |
| body | 14px | 500 | 1.1 | -0.02em | uppercase | Good Sans | Short uppercase product and nutrition labels. |
| caption | 12px | 500 | 1.1 | -0.02em | uppercase | Good Sans | Small uppercase pack details and footnotes. |
| button | 24px | 500 | 2.5 | -0.05em | uppercase | Good Sans | Large uppercase shopping and promotional actions. |
| nav | 12px | 500 | 1.1 | -0.02em | uppercase | Good Sans | Compact uppercase header navigation. |
| link | 14px | 500 | 1.1 | -0.02em | uppercase | Good Sans | Uppercase promotional links and flavor links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 10, 20, 25, 30, 40, 50, 100 px.
- Section rhythm 50px · element gap 20px · card padding — · max content width 1000px.

A centered storefront header sits above broad, mostly full-width sections on a comfortable-density page. The measured content max width is 1000px, with single-column promotional and editorial blocks, a two-column product area, four-column nutrition facts, and a twelve-item flavor strip. The hero pairs left-aligned copy with right-side product imagery; following copy is centered. Use measured section and element gaps as rhythm references, while allowing campaign images to run full bleed. Keep the product carousel visibly horizontal rather than compressing its cards into a dense grid.

## Shape & elevation

- Radius: button `7px` · input `7px` · card `20px` · xs `7px` · sm `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: no measured shadows or gradients define its depth. Separate product cards with Electric Blue outlines and rounded corners, then use surface-color changes and imagery for hierarchy. Buttons rely on strong contrasting fills rather than shadow. Keep borders crisp and layering simple; let overlapping campaign photography provide the few dramatic depth effects.

## Imagery

Treat product and lifestyle imagery as vivid campaign content: oversized candy packaging, gummy close-ups, and people holding the product. The hero uses a dark, full-width image field, contrasting with the pastel shopping sections; this dark treatment belongs to the media composition rather than the measured core palette. Product cards combine pack graphics and candy photography, while the flavor strip uses small repeated candy cutouts. Preserve image-rich layouts and avoid generic decorative illustrations.

## Components

### Announcement and navigation

A narrow Electric Blue announcement band with lime promotional text sits above a lavender navigation bar. Keep the links compact and uppercase, with the wordmark centered.

### Campaign hero

A full-width dark media panel pairs a large lime uppercase headline and lime CTA on the left with oversized candy packaging imagery on the right.

### Product carousel cards

Use Candy Blush card surfaces, Electric Blue outlines, and rounded corners. Show product imagery, concise pack information, and compact blue purchase actions with lime text.

### Nutrition facts strip

Present four evenly spaced headline metrics in Electric Blue on the lavender canvas, with short uppercase labels and a small footnote below.

### Flavor selector

Center a strong uppercase heading above a horizontal row of colorful candy cutouts; use a lightly framed pink panel against lavender.

### Lifestyle promotion

Use full-bleed lifestyle photography with white headline and supporting text over the image; keep the copy block clearly separated from the people and product.

### Footer

Set a large Electric Blue wordmark and compact link columns on the Lilac Footer surface, with a small email signup field and legal links.

### Measured component styles

- **Primary button** (“ADD TO CART $30/30 MINI PACKS”): background #061fff · text #d3ff56 · radius 6.95px · padding 0px 20px · 400 16px Good Sans · uppercase
- **Secondary button** (“SHOP BEARS”): background #d3ff56 · text #061fff · radius 6.95px · padding 0px 100px · 500 24px Good Sans · uppercase
- **Link** (“☠️ TRY OUR LIMITED EDITION HALLOWEEN PAC”): transparent background · text #d3ff56 · radius 0px · padding 0px · 500 14px Good Sans · uppercase
- **Input**: background #dfceff · text #061fff · border 2px solid #061fff · radius 6.95px · padding 10px 48px 10px 10px · 500 14px Good Sans
- **Card** (“SWEET AND SOUR BEARS THE HALLOWEEN PACK ”): background #ffe7ff · text #061fff · border 2px solid #061fff · radius 20px · padding 0px · 400 18px Good Sans
- **Navigation item** (“SHOP SHOP ALL THE HALLOWEEN PACK THE EVE”): transparent background · text #061fff · radius 0px · padding 0px · 500 18px Good Sans · uppercase

## Do

- Use Gallery Lavender as the primary shopping canvas.
- Set navigation, headings, and outlines in Electric Blue.
- Reserve Acid Lime for clear CTAs and selected emphasis.
- Use uppercase, tightly tracked Good Sans for interface labels.
- Let product photography and candy cutouts bring vivid color.
- Keep product cards rounded and sharply outlined.
- Alternate centered copy with full-bleed campaign imagery.

## Don't

- Do not replace the lavender canvas with plain white.
- Do not use lime as a large, continuous page background.
- Do not add shadows or gradients as default elevation.
- Do not make product cards borderless or visually muted.
- Do not crowd the layout with dense, narrow columns.
- Do not treat campaign-image colors as core brand tokens.

## Agent prompt

Build a new BEHAVE-style candy storefront page with a playful, high-contrast visual system. Use Gallery Lavender (#efe5ff) for the primary canvas, Electric Blue (#061fff) for navigation, headings, body text, and crisp outlines, and Acid Lime (#d3ff56) for prominent CTAs. Use Candy Blush (#ffe7ff) on product cards and Lilac Footer (#ceb3ff) in the footer; keep Paper White (#ffffff) to small text details. Set Good Sans throughout, favoring uppercase, tightly tracked interface labels and bold campaign headlines. Create clear section changes through spacing, color fields, and full-bleed imagery rather than shadows. Feature vivid candy packaging and lifestyle photography, with horizontal product cards, a nutrition metrics strip, and a compact flavor gallery. Keep the layout open, rounded, image-led, and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with left-aligned headline and CTA beside right-side product photography. | Prominent shop CTA | Dark media field, Lime headline, Lime button |
| 2 | other | Centered, single-column introductory copy on the lavender canvas. | Brand positioning | Centered heading, Emoji accents |
| 3 | product-grid | Horizontal two-column product area with multiple cards and carousel controls. | Product browsing, Add to cart, Sold-out state | Rounded outlined cards, Candy imagery, Blue purchase bars |
| 4 | stats | Four evenly distributed metric columns followed by a centered footnote. | Quick nutrition scan | Large blue numerals, Uppercase labels |
| 5 | feature-split | Full-bleed lifestyle image with a left-positioned text overlay. | Audience reassurance | Lifestyle photography, White overlay copy |
| 6 | category-nav | Centered framed panel with a heading above a horizontal strip of flavor imagery. | Flavor discovery | Outlined pink panel, Candy cutout row |
| 7 | testimonials | Full-bleed, image-led review area with centered quote card and carousel controls. | Social proof, Review carousel | Bright green campaign image, Lime quote card, Arrow controls |
| 8 | footer | Broad footer field with large wordmark, compact link columns, and email signup. | Email signup, Utility navigation | Lilac surface, Oversized blue logo, Compact legal links |

## Source CSS custom properties (selected)

```css
--s-border-s: 6.95px;
--s-border-l: 20px;
--junipOutlineColor: #637381;
--junipPrimaryColor: #061FFF;
--junipButtonColor: #061FFF;
--junipButtonOutlineColor: #061FFF80;
--junipStarColor: #061FFF;
--junipButtonTextColor: #fff;
--junipBorderColor: rgba(0, 0, 0, 0.08);
```

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