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

# Yellowbird · Design System

> Sunshine yellow, oversized type, and a mischievous hot-sauce mascot.

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

A high-energy hot sauce storefront built around a saturated yellow canvas, bold black typography, and a hand-drawn mascot. Product cards, food imagery, editorial recipes, and a video-led social gallery keep the long homepage lively while retaining a clear, graphic structure.

## North star

Let the yellow canvas and bold black graphic language lead, then use food imagery and varied content blocks to sustain the pace.

## Overview

The homepage commits to a vivid yellow canvas, using black as the principal ink for navigation, headings, outlines, mascot art, and compact calls to action. White and warm off-white surfaces appear selectively: the recipe feed sits on white, while product cards use a softer cream that distinguishes packaging without weakening the overall yellow identity. Typography supplies much of the personality. Large, rounded display lettering anchors the hero; a grotesque sans handles navigation, headlines, and uppercase buttons; a practical sans supports body copy. The layout alternates expansive, centered brand moments with product cards, testimonial content, a full-bleed video area, and a recipe feed. Food photography and hand-drawn character illustrations add texture to otherwise flat color fields. Dark hairlines define section boundaries and card edges, while generous open areas keep the page energetic rather than cluttered.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Sauce Ink | `#000000` | `--color-sauce-ink` | brand | Primary text, navigation, mascot artwork, card outlines, section hairlines, and dark CTA backgrounds. |
| Bird Yellow | `#ffe845` | `--color-bird-yellow` | brand | Dominant page canvas, announcement and footer bands, hero field, and yellow CTA backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Clean background for the recipe editorial feed, creating a strong break in the yellow page rhythm. |
| Bottle Cream | `#fbfaf2` | `--color-bottle-cream` | surface | Warm product-card surface behind bottle imagery and outlined category cards. |

### Semantic aliases

`--color-canvas` → `#ffe845` (Bird Yellow) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#fbfaf2` (Bottle Cream) · `--color-text` → `#000000` (Sauce Ink) · `--color-border` → `#000000` (Sauce Ink) · `--color-accent` → `#ffe845` (Bird Yellow) · `--color-on-accent` → `#000000` (Sauce Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffe845` | 16.88:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#fbfaf2` | 20.06:1 | AAA |
| `#ffe845` | `#ffffff` | 1.24:1 | fail |
| `#ffe845` | `#fbfaf2` | 1.19:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Pitch Sans | `--font-body` | webfont | 400, 600 | Body copy and uppercase eyebrow labels. | DM Sans |
| ABC Monument Grotesk | `--font-display` | webfont | 400 | Navigation, headings, buttons, links, and captions. | Space Grotesk |
| Gooper | `--font-gooper` | webfont | 400, 700 | Decorative display lettering, especially the oversized brand wordmark. | Fraunces |

- **Pitch Sans:** Use for readable paragraphs and compact, tracked uppercase labels; measured weights are 400 and 600.
- **ABC Monument Grotesk:** Use tight tracking for large headings and uppercase actions; navigation and links retain a clean sans character.
- **Gooper:** Rounded expressive display face; reserve for brand-led moments rather than utility copy.

### Type scale — Augmented Fourth (ratio ≈ 1.416, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 91px | 400 | 1.05 | -0.028em | — | Gooper | Oversized expressive wordmark and brand-led decorative display moments. |
| h1 | 61px | 400 | 1.1 | -0.04em | — | ABC Monument Grotesk | Primary page headline or prominent introductory statement. |
| h2 | 45px | 400 | 0.9 | -0.04em | uppercase | ABC Monument Grotesk | Uppercase section titles and emphatic editorial headings. |
| h3 | 40.5px | 400 | 1.1 | -0.03em | — | ABC Monument Grotesk | Secondary feature and content-feed headings. |
| h4 | 30px | 400 | 0.78 | -0.006em | — | ABC Monument Grotesk | Compact supporting headings and product-category labels. |
| body | 16px | 400 | 1.46 | -0.012em | — | Pitch Sans | Introductory paragraphs and readable explanatory copy. |
| caption | 13.5px | 400 | 1.2 | -0.014em | — | ABC Monument Grotesk | Small recipe labels, attribution, and supporting metadata. |
| button | 45px | 400 | 0.9 | -0.04em | uppercase | ABC Monument Grotesk | Large uppercase primary actions. |
| nav | 30px | 400 | 0.78 | -0.006em | — | ABC Monument Grotesk | Main store navigation and menu labels. |
| link | 27px | 400 | 1.2 | -0.03em | — | ABC Monument Grotesk | Recipe titles and prominent inline links. |
| eyebrow | 16px | 600 | 1.2 | 0.05em | uppercase | Pitch Sans | Small uppercase section markers and labels. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 6, 10, 13, 15, 17, 18, 20, 24, 30, 50, 75 px.
- Section rhythm 50px · element gap 75px · card padding 108px · max content width 1434px.

A spacious, long-form storefront arranged as full-width horizontal bands, with a narrow announcement strip and a bordered navigation bar above the hero. The measured page maximum width is 1434px; content shifts between centered single-column statements, three product cards, a multi-column recipe feed, and a tiled social gallery. The rhythm is intentionally varied: large graphic pauses are followed by denser product and media sections. Use the measured spacing scale and section gaps, keeping card and image groupings clearly separated rather than adding a uniform grid everywhere.

## Shape & elevation

- Radius: button `50%` · card `30px` · media `30px` · xs `6px` · sm `10px` · md `30px` · lg `36px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease-in-out` on interactive elements.

The visual language is mostly flat: strong yellow fields, black typography, and thin black section dividers do the structural work instead of shadows. Cards and media rely on measured black outlines and rounded corners, with the cream product surfaces visibly distinct from the canvas. Layer small illustrated labels and mascot graphics over content sparingly.

## Imagery

Pair crisp bottle photography and colorful prepared-food images with hand-drawn black mascot illustrations. Product shots sit inside warm cream cards; editorial food photography is framed as recipe content on white. A prominent media band uses video with a dark surround and rounded frame, while the social gallery uses a row of varied lifestyle and product images. Keep imagery vivid and relatively natural, not heavily filtered.

## Components

### Store navigation

Yellow horizontal bar with black, oversized grotesque links, centered mascot mark, and black divider rules.

### Hero wordmark

Large black display lettering and hand-drawn mascot artwork dominate the yellow hero field; a small irregular label carries the brand claim.

### Product category cards

Three bottle-led cards use a warm cream surface, black outlines, rounded corners, and compact yellow category labels.

### Shop CTA

Black rectangular action with yellow uppercase text, shown between product content and subsequent sections.

### Testimonial panel

Centered oversized quote on yellow, supported by a small uppercase attribution, carousel arrows, and pagination dots.

### Recipe cards

White editorial section with food photography, black rounded outlines, small category captions, and prominent recipe titles.

### Newsletter footer

Yellow footer combines an email field with black underline, compact link columns, mascot artwork, and small legal links.

### Measured component styles

- **Primary button** (“CLASSIC”): background #ffe845 · text #000000 · border 3px solid #000000 · radius 14px · padding 20px 15px · 400 45px ABC Monument Grotesk · uppercase
- **Secondary button** (“SHOP ALL”): background #000000 · text #ffe845 · border 3px solid #000000 · radius 0px · padding 16px 24px · 400 27px ABC Monument Grotesk · uppercase
- **Link** (“Plum Reaper Deviled Eggs”): transparent background · text #000000 · radius 0px · padding 0px · 400 27px ABC Monument Grotesk
- **Input**: transparent background · text #000000 · radius 0px · padding 15px 32px 15px 0px · 400 18px ABC Monument Grotesk
- **Card** (“READ MORE”): transparent background · text #000000 · border 3px solid #000000 · radius 30px · padding 0px 0px 432.7px 0px · 400 18px ABC Monument Grotesk
- **Navigation item** (“SHOP SHOP ABOUT ABOUT FIND US FIND US”): transparent background · text #000000 · radius 0px · padding 0px · 400 30px ABC Monument Grotesk

## Do

- Keep Bird Yellow (#ffe845) as the dominant canvas.
- Use Sauce Ink (#000000) for strong text and outlines.
- Reserve white and cream for clearly defined content surfaces.
- Pair expressive display lettering with practical sans-serif copy.
- Use hand-drawn mascot art as a recurring brand accent.
- Alternate broad color fields with compact image-led grids.

## Don't

- Do not soften the palette with unmeasured colors.
- Do not use shadows to replace the black outline system.
- Do not make every section the same grid or density.
- Do not use decorative display type for long paragraphs.
- Do not crowd the large yellow areas with unnecessary elements.
- Do not treat product photography as generic background texture.

## Agent prompt

Build a new Yellowbird-style storefront page with a bold, playful food-brand identity. Use Bird Yellow (#ffe845) as the main canvas and Sauce Ink (#000000) for typography, mascot art, borders, and prominent actions. Use Gallery White (#ffffff) for a distinct editorial content band and Bottle Cream (#fbfaf2) for product cards. Pair rounded expressive display lettering for brand moments with a clean grotesque for navigation, headings, and uppercase buttons, plus readable sans-serif body copy. Structure the page as varied horizontal bands: brand-led hero, product cards, editorial or testimonial content, and image-rich media. Favor hand-drawn mascot illustrations and vivid, natural food photography. Keep surfaces flat, define cards with black outlines, and use generous open space between content groups.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width yellow hero beneath the announcement and navigation, with centered mascot and oversized wordmark artwork. | Immediate brand recognition | Oversized display wordmark, Hand-drawn mascot, Small claim label, Black divider |
| 2 | other | Centered single-column statement on the continuous yellow canvas. | Brand value proposition | Centered body copy, Open yellow space |
| 3 | product-grid | Three evenly grouped bottle cards with a centered shop action below. | Browse product ranges, Shop all action | Cream card surfaces, Black card outlines, Bottle photography, Yellow category labels |
| 4 | testimonials | Centered testimonial content across a yellow panel with carousel controls. | Social proof, Carousel navigation | Large quote, Small attribution, Arrow controls, Pagination dots |
| 5 | video | Full-bleed yellow media band containing a large framed video area. | Watch brand content | Video-led panel, Dark media surround, Rounded frame, Now playing label |
| 6 | feature-split | Two-column yellow section with illustration on one side and centered text and link on the other. | Explore brand story | Mascot illustration, Supporting statement, Compact CTA |
| 7 | content-feed | White editorial band with a centered heading and a row of image-led recipe cards. | Discover recipes, Read more links | Food photography, Black card outlines, Recipe captions, Centered title |
| 8 | gallery | Yellow gallery band with a horizontal row of image tiles and centered social handle. | Follow social account | Lifestyle imagery, Product imagery, Horizontal image row, Small uppercase label |
| 9 | footer | Yellow footer with newsletter area and illustration beside several compact link columns. | Newsletter signup, Store and company navigation | Underlined email field, Link columns, Mascot artwork, Legal links |

## Source CSS custom properties (selected)

```css
--oke-text-fontFamily: ABC Monument Grotesk;
--duration-short: 100ms;
--duration-default: 200ms;
--duration-medium: 300ms;
--duration-long: 500ms;
--duration-extra-long: 600ms;
--duration-extended: 3s;
--ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0;
--oke-starRating-spaceBelow: 0;
--oke-button-backgroundColor: #000;
--oke-button-backgroundColorHover: #000;
--oke-button-backgroundColorActive: #ffe845;
--oke-button-textColor: #fff;
--oke-button-textColorHover: #fff;
--oke-button-textColorActive: #000;
--oke-button-borderColor: #000;
--oke-button-borderColorHover: #000;
--oke-button-borderColorActive: #000;
--oke-button-borderRadius: 12px;
--oke-button-borderWidth: 0;
--oke-button-fontWeight: 700;
--oke-button-fontSize: 16px;
--oke-button-fontFamily: inherit;
--oke-border-color: #000;
--oke-border-width: 2px;
--oke-text-primaryColor: #000;
--oke-text-secondaryColor: #000;
--oke-text-small: 16px;
--oke-text-regular: 16px;
--oke-text-large: 20px;
--oke-avatar-backgroundColor: #ffe845;
--oke-avatar-placeholderTextColor: #000;
--oke-highlightColor: #000;
--oke-shadingColor: #d6d6d6;
--oke-attributeBar-shadingColor: #000;
--oke-attributeBar-borderColor: undefined;
--oke-attributeBar-backgroundColor: #ececec;
```

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