Sunglow
#ffe845Brand canvas — the dominant page background across all sections, hero, footer, and announcement bar; also fills product category tags and sticker burst shapes
Yellowbird®
yellowbirdfoods.comWebsite preview
The design language
Yellowbird is a high-volume, two-color world: a single vivid yellow floods every section while black does all the structural and typographic work. The page reads like a hand-drawn condiment billboard — flat surfaces, thick hairline borders instead of shadows, generous breathing room, and a custom chunky display face that turns the wordmark into the hero. There is no gradient depth, no glassmorphism, no card-on-card layering; spatial separation comes from color swaps (yellow band → cream card → black button) and generous padding. Interactive elements stay minimal and confident: most surfaces are borderless on the yellow canvas, product cards use a 30px radius and a solid black stroke, and the one true CTA is a heavy black pill-shaped button with white text. The blue (#007aff) appears only as a ghost-button border for secondary actions, making it feel borrowed rather than owned.
Color palette
brand
accent
Cool Link Blue
#007affGhost/outlined secondary action border — a borrowed utility color for low-emphasis links, never used for filled buttons or primary navigation
neutral
Sauce Bottle Black
#000000Primary text, all borders and hairlines, product card strokes, mascot linework, and the filled primary action button background — does the heavy structural and typographic lifting
Pure White
#ffffffHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Buttermilk
#fbfaf2Alternate card surface for quieter product tiles — an off-white that reads as warm cream against the saturated yellow canvas
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
91px · 400 · 1.05 · -2.55px trackingThe quick brown fox jumps
heading-lg
61px · 400 · 0.9 · -0.67px trackingThe quick brown fox jumps
text-45
45px · 400 · 0.9The quick brown fox jumps
heading
41px · 400 · 1.1 · -0.45px trackingThe quick brown fox jumps
text-30
30px · 400 · 0.78The quick brown fox jumps
subheading
27px · 400 · 1.2 · -0.57px trackingThe quick brown fox jumps
body
18px · 400 · 1.3 · -0.18px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.3 · -0.18px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Gooper
- Weights
- 400, 700
- Sizes
- 91px
- Line height
- 1.05
- Letter spacing
- -0.0280em
- Fallback
- Bagel Fat One, Fraunces 900, or Bowlby One
Signature wordmark display — the massive 'Yellowbird' logotype and any oversized display headings; a custom bubbly, ultra-chunky display face that functions as the brand's icon. Tight tracking (-0.028em) keeps the rounded forms from feeling wobbly at 91px
Additional typeface
ABC Monument Grotesk
- Weights
- 400
- Sizes
- 14px, 18px, 27px, 30px, 41px, 45px, 61px
- Line height
- 0.87, 0.90, 1.00, 1.10, 1.20, 1.30, 1.67
- Letter spacing
- -0.0400em, -0.0300em, -0.0140em, -0.0110em, -0.0070em, -0.0060em
- Fallback
- Inter, GT America, Söhne, or General Sans
Primary workhorse — nav links, body copy, product names, section headings, button text, footer, and hero subhead. The single weight (400) carries all roles from 14px caption to 61px hero subhead, unified by negative tracking that tightens as size grows (-0.04em at 14px to -0.011em at 61px)
Additional typeface
Pitch Sans
- Weights
- 400, 600
- Sizes
- 16px, 18px, 27px
- Line height
- 0.84, 1.00, 1.20, 1.30, 1.46
- Letter spacing
- -0.0310em, -0.0120em, -0.0110em, 0.0500em
- Fallback
- Söhne, Inter, or Untitled Sans
Secondary utility — used for badges, tags, micro-labels, and supporting metadata where a slightly more compact feel is needed. Weight 600 for badge text adds the only weight contrast in the system
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 20px
Border radius
tags
6pxcards
30pximages
30pxbuttons
14pxstickers
36pxSpacing scale
3px4px6px8px10px13px14px15px16px17px18px20px24px25px27px30px32px40px50px60px65px75px80px83px86px210pxGuidelines
Do
- Use #ffe845 as the full-bleed canvas for every full-width section — hero, product grids, testimonials, and footer should all sit on yellow, never on white or gray
- Set body and heading copy in Monument Grotesk weight 400 only; the system has no bold weight for this face, so hierarchy comes from size and tracking, not weight
- Use 30px border-radius on all product cards and images; 14px on primary buttons; 6px on category badges — these three radii define the shape language
- Separate sections by color swap (yellow band → cream card → yellow band), not by shadows or dividers — the design is deliberately flat
- Use the Gooper 91px display face only for the wordmark and equivalent brand statements; never for product names, body, or UI text
- Size all CTAs in Monument Grotesk 18px all caps with -0.011em tracking — consistency in button typography is a signature
- Apply the starburst sticker pattern to exactly one callout per viewport — it loses impact as a repeated motif
Don’t
- Never introduce a new chromatic color beyond the yellow/black/white/cream/blue set — the system's power is its two-color discipline
- Never add drop shadows, inner glows, or blur effects to cards or buttons — separation comes from solid black strokes, not elevation
- Never use the blue (#007aff) as a filled button background or for navigation; it is a ghost-border utility color only
- Never use a font weight heavier than 400 for Monument Grotesk; the face doesn't ship bold, and faking bold breaks the geometric evenness
- Never place body copy on white over the yellow canvas without a card surface — floating text on white feels broken; always commit to cream or pure white as a card surface
- Never use positive letter-spacing on body or display text — the only positive tracking (0.05em) is reserved for Pitch Sans testimonial attributions
- Never reduce the wordmark below 61px or substitute a standard display face for Gooper; the bubbly custom face is the brand's most recognizable element
Components
Announcement Bar
Slim site-wide utility bar above the navFull-width #000000 background, ~36px tall, centered white text in Monument Grotesk 14px. Used for shipping promos and trust signals. No padding beyond vertical centering.
Primary Navigation Header
Main site nav anchored to the top of every page#ffe845 background, full-bleed. Left-aligned nav links (SHOP, ABOUT, FIND US) and right-aligned utility links (SEARCH, LOG IN, CART) in Monument Grotesk 18px, #000000, all caps, letter-spacing -0.011em. The bird-mark logo sits centered as a small inline icon. No background, no border — nav floats on the yellow canvas.
Hero Wordmark Block
Above-the-fold brand statement replacing a typical headline+subhead+CTAFull-bleed #ffe845 section. Centered Gooper 91px 'Yellowbird' wordmark in #000000 with the spiky-bird mascot illustration overlapping the top of the letters. No subtitle, no CTA — the wordmark IS the hero. Vertical padding ~80px above and below.
Hero Subhead Paragraph
Long-form intro text under the hero wordmarkMonument Grotesk 45px, weight 400, line-height 1.0, letter-spacing -0.014em, #000000, centered, max-width ~900px. Black text on yellow — no background card. This is the largest running text in the system.
Product Card
Primary commerce tile for sauce SKUs in the featured gridWhite (#ffffff) or cream (#fbfaf2) background, 1.5–2px solid #000000 border, 30px border-radius. ~24px internal padding. Product image centered, category badge overlaid at top-center, product name in Monument Grotesk 18–27px below. No shadow — separation comes from the black stroke against the yellow page.
Product Category Badge
Label tag overlaid on product cards (CLASSIC, ORGANIC, SMALL BATCH)#ffe845 fill with 1.5px #000000 border, 6px border-radius, ~15px vertical and ~18px horizontal padding. Pitch Sans 16px weight 600, #000000, all caps. Sits at the top-center of the product card, slightly overlapping the card edge.
Primary Action Button
The single filled CTA — used for SHOP ALL and checkout actions#000000 fill, #ffffff text, 14px border-radius, ~15px vertical and ~18px horizontal padding. Monument Grotesk 18px weight 400, all caps, letter-spacing -0.011em. No border, no shadow, no hover lift — sits flat like a sticker on the yellow canvas.
Ghost Secondary Action
Outlined secondary button for lower-emphasis linksTransparent fill, 1.5px #007aff border, 10px border-radius, ~10px vertical and ~18px horizontal padding. Monument Grotesk 18px, #007aff text. The only place blue enters the system — treats blue as borrowed utility, not brand.
Starburst Sticker
Decorative seal/burst shape for callouts and trust signals#ffe845 fill with #000000 stroke, 36px border-radius, hand-drawn jagged edge approximation. Monument Grotesk 18px, weight 400, #000000, all caps, slightly rotated (~5°). Used sparingly as a visual exclamation point — never more than one per viewport.
Testimonial Quote Block
Full-width customer quote band#ffe845 background, no card. Monument Grotesk 45px italic-feel weight 400, #000000, centered, with opening/closing curly quotes rendered extra-large. Attribution in Pitch Sans 16px, letter-spacing 0.05em (the only positive tracking in the system), all caps, #000000. Carousel arrow controls sit at the left/right edges in #000000.
Section Divider
Horizontal separator between content bandsThin 1px #000000 hairline spanning the full content width. Used sparingly — most section separation comes from color swap, not a visible line.
Starburst Mascot Mark
Small brand icon used in nav center and testimonial accent#000000 linework illustration of a spiky-feathered cartoon bird face, ~40px tall in nav, larger in testimonial accent. No fill, no color — pure black ink on yellow.
Surfaces & elevation
Level 1
Sunglow Canvas
#ffe845Full-bleed page background for every section including hero, product grid, testimonial band, and footer
Level 2
Cream Card
#fbfaf2Alternate product tile background for lower-prominence SKUs
Level 3
White Card
#ffffffPrimary product card surface sitting on the yellow canvas
Level 4
Black Button
#000000Primary action surface — the single filled CTA pattern
The design intentionally avoids shadows. Spatial separation is achieved exclusively through: (1) color contrast — yellow surfaces against black-bordered white cards, (2) thick solid 1.5–2px black strokes on all elevated elements, and (3) generous padding. There is no z-axis hierarchy — the system is deliberately flat, reading more like screen-printed packaging than a typical depth-using SaaS UI. Adding even a subtle shadow would break the printed-poster feel that defines the brand.
Layout & imagery
Layout
Full-bleed yellow canvas with no max-width constraint on background color. Content is max-width ~1280px centered. The hero is a centered wordmark + mascot stack with a large subhead paragraph below, followed by a 3-column product card grid (3 visible products per row at desktop). Sections are separated by color swap rather than by dividers or shadow changes — the rhythm reads as yellow → yellow-band-with-cream-cards → yellow → yellow. Navigation is a single full-bleed horizontal bar at the top, no sticky behavior implied, no sidebar. The product grid uses uniform card sizing with equal gutters. Below the grid, a centered SHOP ALL button acts as the section closer. A testimonial band follows at full viewport width with side-edge carousel arrows, then the footer. Vertical rhythm is generous: ~80px between major sections, ~24px between cards and internal card elements.
Imagery
Product photography is tight, centered, and isolated on pure white card backgrounds — bottles are shot straight-on with no lifestyle context, no hands, no food pairings. The hero wordmark is paired with a hand-drawn black-line cartoon bird mascot (spiky feathers, expressive eyes, no color fill) that functions as a secondary brand asset. A hand-drawn starburst sticker shape with jagged edges appears as a decorative seal. No full-bleed photography, no video, no abstract gradients — imagery is limited to: (1) clean white-background product shots, (2) black-line mascot illustrations, and (3) the hand-drawn starburst. Iconography is entirely custom and line-art based, rendered in solid black on yellow.
Design notes
Agent Guide
**Quick Color Reference** - Canvas: #ffe845 - Text: #000000 - Card surface: #ffffff - Alternate card: #fbfaf2 - Border/stroke: #000000 - primary action: #ffe845 (filled action) - Secondary action: #007aff (outlined ghost border only) **3-5 Example Component Prompts** 1. **Product Card**: White (#ffffff) background, 1.5px solid #000000 border, 30px border-radius, 24px padding. Centered sauce bottle product image. Category badge overlaid at top-center: #ffe845 fill, 1.5px #000000 border, 6px radius, Pitch Sans 16px weight 600, all caps, #000000. Product name below in Monument Grotesk 27px, #000000, letter-spacing -0.011em. 2. Create a Primary Action Button: #ffe845 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. **Hero Subhead Paragraph**: Full-bleed #ffe845 background, no card. Monument Grotesk 45px, weight 400, line-height 1.0, letter-spacing -0.014em, #000000, centered, max-width 900px. ~80px vertical padding above and below. 4. **Starburst Sticker**: #ffe845 fill, 1.5px #000000 stroke, 36px border-radius with hand-drawn jagged edge, rotated ~5°. Monument Grotesk 18px, weight 400, #000000, all caps, centered inside. Place at top-right of viewport as a single decorative callout. 5. **Testimonial Quote Section**: Full-bleed #ffe845 background. Monument Grotesk 45px, weight 400, #000000, centered, with oversized curly quotes. Attribution in Pitch Sans 16px, letter-spacing 0.05em, all caps, #000000, below the quote. Carousel arrow controls in #000000 at the far left and right edges.
Similar brands
HEATONIST
Same saturated yellow-and-black hot-sauce brand palette with thick custom display typography and flat card-based product grids
Cholula
Bold condiment branding with a single dominant brand color, custom display wordmark, and flat illustration-driven mascot identity
Omsom
High-contrast packaging-forward food brand using thick black strokes, saturated canvas colors, and a flat no-shadow component language
Fly By Jing
Premium condiment brand with playful illustrated mascot, oversized custom display type, and a two-color identity system
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
