Electric Cobalt
#2f59f8Primary action fills, active nav links, icon accents, link underlines. The only chromatic button color in the system — cobalt against the warm bone canvas makes every CTA feel switched on
SuperMush
supermush.com
Website preview
The design language
SuperMush runs on a sun-drenched DTC wellness playbook: a warm bone canvas, electric cobalt as the singular action color, and a tri-color accent system (cobalt, ember orange, volt lime) that shouts without cluttering. Layout breathes between quiet white product grids and explosive full-bleed lifestyle photography, with colored bands — a lime promo bar up top, an orange retailer strip in the middle — acting as visual exclamation points. Typography is geometric and confident, leaning on tight line-heights at large sizes so headlines feel like stickers slapped onto the page rather than typed paragraphs. Components are flat and pill-shaped; the 50px button radius and near-total absence of shadows produce a tactile, high-energy feel that mirrors the packaging itself, and the orange product body color is allowed to bleed into the brand skin (retailer bar, sale flags) without ever crossing into button territory.
Color palette
brand
Ember Orange
#ff632aOrange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
accent
Volt Lime
#eaff00Promotional and urgency surfaces: top sale bar, Subscribe & Save tags, sale-bubble accents on product cards. Reads as a highlighter against the warm canvas — use sparingly, never as a section background
neutral
Obsidian
#000000Primary text, hairline borders, logo, icon strokes. The structural backbone — used aggressively for borders and dividers rather than reserving it for text alone
Bone
#f5f4f1Page canvas and quiet section backgrounds. Warm off-white that gives the system its sunlit feel; never pure white at the page level
Paper
#ffffffElevated card surfaces, input fields, and any element that needs to sit forward of the bone canvas. Always a surface, never a text color
Concrete
#eeeeeeSoft borders, dividers, and secondary surface fills. Quieter than Obsidian when a hairline needs to recede
Ash
#707170Muted helper text, secondary metadata, star-rating inactive state, and low-emphasis form labels
Graphite
#171717Slightly softened near-black for headings and dark UI surfaces where pure Obsidian feels too aggressive; button hover states on dark
Mist
#e3e3e3Faint borders and disabled input outlines — one step lighter than Concrete for tertiary edges
Pebble
#d9d9d9Disabled button background, out-of-stock product card state. The only neutral allowed to function as an action fill, and only for disabled
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 500 · 1.04The quick brown fox jumps
text-43
43px · 500 · 1.04The quick brown fox jumps
heading-lg
40px · 500 · 1.15The quick brown fox jumps
text-36
36px · 500 · 1The quick brown fox jumps
text-34
34px · 500 · 1.15The quick brown fox jumps
heading
32px · 500 · 1.21The quick brown fox jumps
subheading
20px · 500 · 1.25The quick brown fox jumps
body-lg
18px · 700 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Founders Grotesk
- Weights
- 400, 500, 700
- Sizes
- 12, 14, 16, 17, 18, 20, 32, 34, 36, 40, 43, 48
- Line height
- 1.00–1.67 depending on size
- Fallback
- Inter, Söhne, or Aktiv Grotesk
Primary typeface for body, headings, and product copy. Used across nearly every context — body, nav, hero, card, button, footer, heading. The geometric grotesque carries the brand voice: tight line-heights at large sizes (1.04–1.17 above 32px) make headlines feel like block letters slapped on the page rather than flowing paragraphs.
Additional typeface
GT Planar
- Weights
- 400, 500, 700
- Sizes
- 10, 11, 13, 14, 16, 18, 20
- Line height
- 1.00–1.60
- Fallback
- Inter, Untitled Sans, or Suisse Int'l
Secondary typeface for fine print, sale tags, form labels, and dense UI metadata in the 10–14px range. A quieter geometric companion to Founders Grotesk — use it wherever a label needs to whisper instead of speak.
Additional typeface
Font Awesome 5 Pro
- Weights
- 300
- Sizes
- 18px
- Line height
- 1
Font Awesome 5 Pro — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 16-24px
- Element gap
- 8-16px
Border radius
nav
4pxtags
4pxcards
16pximages
8pxbuttons
50pxSpacing scale
2px3px4px5px6px8px10px12px14px15px16px20px22px24px28px30px32px36px40px41px45px48px50px56px62px64px74px80px81px90px105px113px120px231pxGuidelines
Do
- Use 50px border-radius for every interactive button, input, and pill-shaped tag — the pill is the signature
- Reserve #2f59f8 exclusively for primary action fills, active nav states, icon accents, and link underlines
- Anchor large headlines at 40–48px with tight 1.04–1.17 line-height so they read as block stickers, not paragraphs
- Place product photography full-bleed at section boundaries, never inset in a card next to text
- Use GT Planar at 10–14px for fine print, sale tags, and metadata; reserve Founders Grotesk for body and headings
- Anchor every section to either Bone canvas (#f5f4f1) or Paper (#ffffff) — avoid introducing a third neutral surface
- Let the Volt Lime bar appear at most once per scroll depth as a highlighter, not a background
Don’t
- Never use #ff632a as a button fill or CTA background — Ember Orange belongs to the product and the retailer band only
- Never apply drop shadows for elevation — communicate depth through background color steps (Bone → Paper → Volt → Ember)
- Never set body copy below 14px; use 12px only for legal/footnote metadata in GT Planar
- Never use more than three colors in a single section — the system runs on restrained tri-color punctuation, not rainbow surfaces
- Never break the 50px radius on primary action buttons — ghost variants stay pill-shaped too
- Never use system fonts or fall back to Helvetica/Arial — always Founders Grotesk or GT Planar
- Never stack two full-bleed photo sections back-to-back; always interleave a white or colored band between them
Components
Primary Pill Button
Main CTA across the site (Shop Gummies, Add to Cart, Learn More)Filled Electric Cobalt (#2f59f8), white text, 50px border-radius, 16px vertical / 24px horizontal padding, Founders Grotesk 500 at 16px. Sits on Bone canvas and reads as a pill sticker.
Ghost Outline Button
Secondary action paired with primary (Shop All, Learn More outline)1.5px Obsidian border, transparent fill, Obsidian text, 50px radius, 16/24px padding. Same typography as primary — the distinction is fill, not size.
Product Card
Grid card for each gummy SKU on the Daily Essentials sectionPaper (#ffffff) background, 16px radius, 16px padding. Product image at top with 8px radius corners. Star rating (Ash #707170, Founders Grotesk 12px). Product name at 16px weight 500 Obsidian. Subtitle at 14px Ash. Price at 16px weight 700 with struck-through compare-at price in Ash. Add to cart button is the Primary Pill Button at full card width.
Top Promo Banner
Sticky announcement bar above the navFull-bleed Volt Lime (#eaff00) band, Obsidian text, Founders Grotesk 500 at 14px centered. Height ~40px. The only full-bleed colored element above the fold.
Save Badge
Inline tag on product cards and nav (Save 40%, Subscribe & Save 40%)Volt Lime (#eaff00) background, Obsidian text, Founders Grotesk 500 at 12px, 4px radius, 4px vertical / 8px horizontal padding. Sits inline next to nav items or above product card titles.
Main Navigation
Top-level site navBone canvas, 4px bottom border in Obsidian. Logo left (SUPER MUSH in bold Founders Grotesk 700, 20px, Obsidian). Nav links center: SHOP, SCIENCE, BUNDLE & SAVE, each Founders Grotesk 500 at 14px Obsidian with 20px horizontal padding. Right cluster: Primary Pill Button (Shop All), account icon, cart icon with count. Height ~64px.
Hero Section
Full-bleed opening on home and category pagesFull-bleed lifestyle photo (beach, fitness, social). Headline at 48px Founders Grotesk 700, white text, left-aligned, anchored mid-left. Subtext at 16px white, 1.5 line-height, max-width 400px. Two-button row: Primary Pill Button + Ghost Outline Button (white border, white text for the ghost variant on dark photo).
Testimonial Card
Social proof in the 'Loved by 700k+ athletes' carouselPaper background, 16px radius, 24px padding. 5-star rating in Electric Cobalt at the top. Quote at 16px Founders Grotesk 400 Obsidian. Author name at 14px weight 500, 'Verified Buyer' tag in Founders Grotesk 12px Ash. Product image thumbnail 8px radius in the corner.
Retailer Strip
'Find us at' social-proof band between product grid and featuresFull-bleed Ember Orange (#ff632a) band, ~80px tall. Label 'Find us at' in Founders Grotesk 500 14px Obsidian left-aligned. Retailer logos (Target, Sprouts, Urban Outfitters) centered and right-aligned in Obsidian or Paper depending on logo. No border, no radius — a flat colored band.
Trust Bar
Inline reassurance row above the final photo CTABone canvas, single row, three items separated by 32px gaps. Each item: Electric Cobalt checkmark icon + label in Founders Grotesk 500 14px Obsidian (Free Shipping for orders $60+, 30-Day Easy Returns, Organic & 3rd Party Tested). Centered horizontally.
Star Rating
5-star display on product cards and testimonialsFive stars in Electric Cobalt (#2f59f8), 12px each, 2px gap. Review count beside in Founders Grotesk 12px Ash. Active state: Electric Cobalt; inactive (if used): Concrete (#eeeeee).
Accordion Section
Movement / Recovery / Clarity expandable list in the feature areaBone canvas section. Each row: 1px Obsidian bottom border, 48px row height. Title at 24px Founders Grotesk 500 Obsidian left-aligned. Plus/minus toggle icon in Electric Cobalt right-aligned. Expanded body text at 16px Ash, 1.5 line-height, 24px top padding.
Photo CTA Banner
Closing full-bleed lifestyle image with overlay textFull-bleed photo, dark gradient overlay (transparent to rgba(0,0,0,0.45)) for legibility. Headline at 48px Founders Grotesk 700 white, centered. Primary Pill Button centered below. Used as the page closer — energy stays high, not quiet.
Footer
Site footerBone canvas, 1px Obsidian top border. Multi-column link grid (Shop, Science, Support, Company) at Founders Grotesk 400 14px Obsidian. Section headers at 14px weight 700. Newsletter signup row at top with ghost email input (1.5px Obsidian border, 50px radius, Paper fill) and Primary Pill Button submit.
Surfaces & elevation
Level 0
Bone Canvas
#f5f4f1Default page background — warm off-white that softens the otherwise high-contrast system.
Level 1
Paper Card
#ffffffProduct cards, testimonial cards, and any content block that needs to sit forward of the canvas.
Level 2
Volt Bar
#eaff00Promotional top banner and sale-bubble accents — the loudest non-action surface.
Level 3
Ember Band
#ff632aRetailer strip and product-accent fills — the orange product color as a brand band.
Elevation is communicated through background color steps, never shadows. Cards sit on Paper above a Bone canvas; the retailer band sits on Ember above Paper; the promo bar sits on Volt above Paper. The absence of drop shadows is deliberate — the system is flat and sticker-like, not skeuomorphic.
Layout & imagery
Layout
Full-bleed hero photo with left-anchored text, then max-width 1200px centered content for the product grid and feature sections. The 4-column product grid is the structural unit. Sections alternate between quiet white (Bone canvas + Paper cards), full-bleed photo, and flat colored bands (Volt promo bar, Ember retailer strip) — the colored bands are the rhythm, not just decoration. Navigation is a single sticky top bar with no sidebar or mega-menu. Generous vertical breathing room (64px section gaps) keeps the high-energy palette from feeling cramped.
Imagery
Full-bleed lifestyle photography is the brand's loudest element — candid, sun-drenched, high-key moments of people in motion (beach, training, social, recovery). Treatment is warm-toned with no heavy color grading; skin and product packaging do the color work. Product photography is isolated on white, tightly cropped, and warm-lit to match the orange packaging. The imagery is decorative atmosphere first, explanatory content second — text overlay is always white on a dark gradient rather than placed beside the image. Image-heavy overall: photos occupy roughly 40% of total viewport space across the home flow, alternating with white product grids.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #f5f4f1 - surface/card: #ffffff - border: #eeeeee (soft) or #000000 (structural) - accent (promotional/tag): #eaff00 - primary action: #2f59f8 (filled action) - product/brand band: #ff632a (Ember Orange — never a button) **Example Component Prompts** 1. Build a hero: full-bleed beach photo, left-aligned 48px Founders Grotesk 700 white headline, 16px white subtext max-width 400px, then a row with a primary pill button (#2f59f8 fill, white text, 50px radius, 16/24px padding) and a ghost outline button (1.5px white border, white text, same radius). 2. Create a Primary Action Button: #2f59f8 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. Build the top promo bar: full-bleed #eaff00 band, ~40px tall, centered 14px Founders Grotesk 500 Obsidian text. No shadow, no border, sits flush above the nav. 4. Build a testimonial card: Paper background, 16px radius, 24px padding. Cobalt 5-star row, 16px Obsidian quote, 14px weight 500 author name, 12px Ash 'Verified Buyer' label, product image thumbnail 8px radius in corner. 5. Build the retailer strip: full-bleed #ff632a band ~80px tall, 'Find us at' in 14px Founders Grotesk 500 Obsidian left-aligned, retailer logos (Target, Sprouts, Urban Outfitters) spread across the remaining width in Obsidian or Paper.
Color Punctuation Rules
The system uses exactly three chromatic colors and assigns each a single job: #2f59f8 = action, #ff632a = product personality, #eaff00 = urgency. They never swap roles, never mix in a single component, and never appear as gradient stops. A button is always one of those three or a neutral; a background is always one of the three or a neutral. The flat, non-gradient discipline is what keeps the high-chroma palette from tipping into noise.
Radius System
Radii follow a strict hierarchy: 4px for tags, nav chips, and inline UI; 8px for product images and thumbnails; 16px for cards; 50px (pill) for every button, input, and pill-shaped element. There are no values between 8 and 16, and no values between 16 and 50 — the gap is intentional and creates a 'sticker' language at the button level.
Similar brands
OLIPOP
Same tri-color accent punctuation on a warm off-white canvas, pill-shaped CTAs, and lifestyle photography that does the brand shouting
Liquid Death
Bold full-bleed lifestyle imagery, a single vivid action color, and flat sticker-like components with no decorative shadows
Magic Spoon
Playful wellness DTC with bright accent colors used sparingly, large geometric type, and product-forward 4-column grids
MUSH
Direct same-category competitor sharing the mushroom-gummy product card aesthetic, warm canvas, and lifestyle-led hero
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
