Brand system · v2.0 · August 2026
A rebuild of the v0.1 chart measured off borednbuzzed.com. Same logo, same five type families, a brighter core yellow, and a palette that is a system rather than a list of colors that happened to appear on the site.
New core yellow
#FFE01A
was #FFDE59 · +37% chroma
01 — What changed
SIX FIXES, NOT A REBRAND
02 — Color
THE PALETTE
Three brand colours, one accent, four semantic states. Yellow, ink and cream do almost all the work; everything else exists to say something the brand colours cannot.
Primary
BUZZ YELLOW
#FFE01A · yellow-500
Ink
VOID
#0F0F0E · ink-950
Ground
CREAM
#FFFDF8 · unchanged
Yellow ramp
yellow-500 is the brand. The rest exist so yellow can be a tint, a border, or readable text without inventing a new hue.
Ink ramp
Warm neutrals, tuned to sit on cream. Replaces every ad-hoc grey and every cream/.3 opacity in the current build.
Body text
ink-950 for headings, ink-700 for paragraphs, ink-600 for secondary. Never lighter than ink-500 on cream.
Lines & fills
ink-200 hairlines, ink-100 fills, ink-050 alternating sections. ink-300 for disabled edges.
Dark surfaces
ink-950 page, ink-900 cards, ink-800 raised. Text is cream, secondary is ink-300.
Accent
One hue, shipped as a light-ground and dark-ground pair. Use the pair, not a single hex — that is what broke the old green.
Semantic
{{ c.name }}
{{ c.hex }} on cream
{{ c.dark }} on void
{{ c.use }}
Migration
03 — Type
FIVE FACES, FIVE LANES
All five families stay. Each now owns exactly one job, and none of them may be used outside it. That single rule removes most of what reads as dated: the site currently sets the same nav label in three different faces on three different pages.
Luckiest Guy — Display
36–96px · tracking .02em · never below 20px
COME BORED. GET BUZZED.
Hero headlines, section headers, prices. That is the whole list. It is a poster face — the moment it sets a product name at 14px it stops being loud and starts being illegible.
Anton — Labels
11–18px · uppercase · tracking .12–.18em
NAV · EYEBROWS · CATEGORY CHIPS
The workhorse for small uppercase. Always tracked out — Anton set tight at 11px closes up and turns into a smear.
Bebas Neue — Utility headings
20–32px · tracking .06em
YOUR CART · FILTERS · CHECKOUT
Titles inside chrome: drawers, modals, panels, table headers. Anywhere Luckiest Guy would be too much personality for a functional surface.
DM Sans — Everything else
12–20px · 300/400/500/600/700
Body copy, buttons, form fields, product metadata, legal text, prices in tables.
Body copy never goes below 14px. The 9px and 10px labels in the current build move to 11px minimum at weight 600.
Italiana — Editorial only
24–48px · one per page, maximum
Pull quotes and blog openers. Nothing on the shop.
The one soft voice in a loud system. It earns its place by being rare.
Scale
04 — Foundations
SPACE, SHAPE, MOTION
Spacing · 4px base
Radius
Twelve radii in the current build collapse to five. Larger and rounder than before — it is most of the "modern" read.
Elevation
The old system had no shadows at all, so nothing on cream had depth. Three warm levels, tinted ink rather than black.
Motion
Carried over unchanged — the four easing curves were the strongest part of v0.1.
smooth · cubic-bezier(.16,1,.3,1) · 250ms
snap · cubic-bezier(.87,0,.13,1) · 180ms
cinematic · cubic-bezier(.76,0,.24,1) · 600ms
spring · cubic-bezier(.34,1.56,.64,1) · 400ms
05 — Components
THE KIT
Buttons
DM Sans 600, not Luckiest Guy. Buttons repeat all over a page and display type at button size is the single loudest dated signal on the current site. Minimum height 44px.
Same shapes on void. Yellow stays primary.
Badges
One badge per card, maximum. If a product is both new and on sale, sale wins.
Price & discount
Price is the one place Luckiest Guy is allowed under 20px — at 22px, in ink, not yellow. Yellow prices on dark cards were the worst contrast offender in the audit.
Standard
$45
Discounted
$32
$45
Save 29%On void
$32
$45
Product card
Cream card on cream ground, separated by a hairline and elevation rather than a colour flip. Product name in DM Sans 600, not display type — names run long and Luckiest Guy cannot wrap.
Changed from v0.1: dark cards on a cream page, 14px Luckiest Guy product names, 9px metadata at 45% opacity, and yellow prices are all retired. The card now passes AA at every text size.
Section headers
Three variants. Alternate them down a page so a long shop route does not read as one uninterrupted list.
Navigation
Void bar, 72px, cream labels in Anton. The active item is yellow with a yellow underline; hover is yellow text only.
Drawer rules
Section labels move from 10px cream/.3 to 11px ink-500 at weight 600. That opacity was 2.9:1 and unreadable on phones in daylight.
Rows are 48px tall, hit target inclusive of padding. The old 44px row with 12px gaps left a 40px tap area.
Chevrons are ink-500, not 40% cream. Drawer slides on cinematic at 600ms.
Forms
16px input text — anything smaller triggers zoom on iOS. Focus ring is ink-950, two pixels, offset two.
Enter a valid email address.
Promo banner
One at a time, dismissible, 12px DM Sans 600. Yellow for offers, void for notices, kush for store status.
06 — Usage
RULES THAT KEEP IT MODERN
Do
Start every page on cream. Dark is a section, not a default.
Use yellow for one thing per view — the primary action or the section that matters.
Pick the accent pair that matches the ground. kush-600 on cream, kush-400 on void.
Keep body copy at 14px and up, labels at 11px and up.
Let whitespace do the separating before a border does.
Don't
Set Luckiest Guy below 20px, except a price at 22px+.
Express a colour as an opacity of cream. Use the ink ramp.
Put yellow text on cream, or kush-600 on void. Both fail.
Add a hue. The system is yellow, ink, kush, and four semantics.
Stack more than one badge on a card.