Hero Blue
Primary brand blue — buttons, links, headings, accents.
The Blue Hippo design system
A living reference for the colours, typography and icons that make up the Blue Hippo website. Everything below is pulled directly from the front-end code, so it always matches what’s on the live site. Click any swatch, value or icon to copy or download it.
Website UI & design system created by
01 — Colour
Colour palette
The Blue Hippo palette runs from the signature Hero Blue through to soft pastels, warm accents and a full neutral ramp. Each swatch shows its Figma name, hex value and the SCSS variable used in code — click either token to copy.
Primary
The core Blue Hippo palette. These four carry the brand and lead every page.
Bright Blue
Lighter brand blue — highlights, secondary fills.
Pastel Blue
Soft tint — light backgrounds, outline-light buttons.
Navy
Body text and dark surfaces. The default text colour.
Secondary
Supporting accents used sparingly for energy, contrast and warmth.
Purple
Accent — category colour and decorative highlights.
Vibrant Yellow
High-energy accent — used for emphasis and pops of colour.
Yellow
Warm accent (orange-gold) — category colour and accents.
Cool White
Default page background. Soft off-white.
Tertiary & Functional
Blue shades, neutrals and utility colours that fill out the system — surfaces, borders, dividers and states.
Super Pastel Blue
Faintest blue tint — subtle section backgrounds.
Hero Blue Shade
Hero Blue, darkened — hover/active button states.
Hero Blue Deep
Deeper hero blue — pressed states, strong contrast.
Dark Purple
Deep indigo — dark purple surfaces.
Brown
Warm dark accent paired with the orange/yellow tones.
Text Dark
Muted slate — secondary body text.
Vibrant Green
Fresh accent green.
Accent Green
Success / positive state green.
Silver
Neutral grey — dividers and muted UI.
Black
True black — rarely used; prefer Navy for text.
White
Pure white — cards and light surfaces.
Greys
The neutral ramp used for borders, inputs, disabled states and subtle backgrounds.
Grey 100
Lightest grey — light button fill, subtle fills.
Grey 200
Light grey — borders and dividers.
Grey 300
Soft grey — borders.
Grey 400
Mid-light grey — input borders.
Grey 500
Mid grey — muted text and icons.
Grey 600
Darker grey — placeholder and disabled text.
02 — Type
Typefaces
Two families do the work: the playful GrilledCheese BTN display family for headings and buttons, and DM Sans for body copy. A hand-drawn Lumios Brush accent appears in subtitle pills.
GrilledCheese BTN Toasted
Laundry made easy
Display headings — H1 and H2. The hero voice of the brand.
GrilledCheese BTN Cn Bold
like a chore
The two-tone span inside H1 / H2 — the “highlight” word.
GrilledCheese BTN Wide
Find your nearest store
Sub-headings (H3–H6) and buttons.
GrilledCheese BTN Wide Bold
Open 7 days
Heavier wide display weight for emphasis.
GrilledCheese BTN Wide Blk
Big savings
Black weight — strongest wide display emphasis.
GrilledCheese BTN Cn
Wash · Dry · Fold
Condensed display — tight, space-saving headings.
GrilledCheese BTN Out
Hello there
Outlined display variant — decorative accents.
GrilledCheese BTN Out Wide
Fresh & clean
Wide outlined display variant.
DM Sans Regular
When you visit a Blue Hippo Laundromat, you’ll find spotless facilities, modern machines and a calm, friendly atmosphere.
Body copy — the default for all paragraph text.
DM Sans Medium
Open early. Open late. Always spotless.
Medium-weight body — labels and subtle emphasis.
DM Sans SemiBold
Find a store near you
Strong body emphasis — , links and small labels.
Lumios Brush
so fresh!
Hand-drawn subtitle accents — the .subtitle pill. (Loaded via Adobe Typekit.)
03 — Type
Type scale
Headings and body sizes are fluid — they scale smoothly between the mobile and
desktop bounds shown. Sizes use rem (1rem = 16px).
Headings
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Body & text utilities
The quick brown hippo jumps over the lazy dryer.
The quick brown hippo jumps over the lazy dryer.
The quick brown hippo jumps over the lazy dryer.
The quick brown hippo jumps over the lazy dryer.
The quick brown hippo jumps over the lazy dryer.
04 — Components
Buttons
The button system uses one base .button class plus a colour
modifier. A --sm modifier gives the compact size. These are the
live components — hover to see the blob animation.
05 — Components
Links
Two animated link styles carry inline calls-to-action: a clean underlined
.content-link and an .icon-link with a circular icon badge.
06 — Assets
Icon library
The full set of line icons used across the site. Hover any icon to copy its SVG markup or download the individual file — or grab the whole set as a zip.
Interface & navigation
Controls, arrows, search and chrome used throughout the UI.
Feature & service
The line icons used across service, intro and benefit sections.
Amenities & products
Icons for laundromat amenities, machines and product categories.
Location & contact
Map pins, phone, calendar and store-finder icons.
Social
Social network marks for footer and share links.
Payment & partners
Accepted payment methods and partner/category marks.