Yellowbird®. A single yellow plane under a black sun, every letter drawn with a fat marker.
- Commerce
- Light theme
- 5 colors
- 3 typefaces
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.

Yellowbird® design system
Brand1
Brand canvas — the dominant page background across all sections, hero, footer, and announcement bar; also fills product category tags and sticker burst shapes
Accent1
Ghost/outlined secondary action border — a borrowed utility color for low-emphasis links, never used for filled buttons or primary navigation
Neutrals3
Primary text, all borders and hairlines, product card strokes, mascot linework, and the filled primary action button background — does the heavy structural and typographic lifting
Alternate card surface for quieter product tiles — an off-white that reads as warm cream against the saturated yellow canvas
Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Sauce Bottle Black on Sunglow
16.88 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











