---
title: "SuperMush design system"
variant: extended
source: https://supermush.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/supermush-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SuperMush · Design System

> Everyday wellness, with playful energy.

**Theme:** light · **Industry:** health · **Source:** https://supermush.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SuperMush pairs science-led supplement messaging with vivid, playful product photography and a clear retail journey. Its warm neutral canvas, electric blue calls to action, and fluorescent announcement accents balance an approachable wellness mood with strong product focus.

## North star

Keep the storefront grounded in warm neutrals, and use vivid product imagery and blue shopping actions to create the energy.

## Overview

The page is built on a warm off-white canvas (#f5f4f1), interrupted by clean white product areas and a black footer that gives the long storefront a decisive close. Electric blue (#2f59f8) marks the main shopping actions and occasional borders; fluorescent yellow (#eaff00) is reserved for the top offer strip and product badges. Black typography anchors the interface, while coral tones mostly echo the packaging and photography rather than define the interface palette. Founders Grotesk supplies the prominent, compact-feeling headings and body copy; GT Planar handles uppercase navigation, small labels, and buttons. The page moves from a full-bleed lifestyle hero into a dense product grid, then alternates feature imagery, ingredient cards, proof points, testimonials, and a final lifestyle CTA. Consistent left alignment and repeated card patterns keep the long page easy to scan. Rounded blue CTAs contrast with mostly flat, lightly outlined cards, while generously open section bands prevent the retail density from feeling cluttered.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Blue | `#2f59f8` | `--color-electric-blue` | brand | Primary Shop All and add-to-cart actions, occasional links, and prominent card borders. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product section surfaces, inverse text on blue or dark imagery, and parts of the header. |
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Logo, navigation, headings, product details, body copy, and the inverse footer surface. |
| Warm Canvas | `#f5f4f1` | `--color-warm-canvas` | surface | Main page canvas and the softly warm background connecting most content sections. |
| Neon Citron | `#eaff00` | `--color-neon-citron` | accent | Announcement strip, savings badges, and small promotional highlights. |
| Charcoal Fade | `#252424` | `--color-charcoal-fade` | semantic | Measured only as a gradient stop; supports dark image-overlay treatment rather than core interface surfaces. |
| Hot Tangerine | `#ff4500` | `--color-hot-tangerine` | accent | New Product badges; small promotional marker, not a dominant page surface. |
| Bright Coral | `#ff632a` | `--color-bright-coral` | accent | Small accent text and detail; its stronger presence is echoed by warm product packaging imagery. |
| Pale Divider | `#eeeeee` | `--color-pale-divider` | neutral | Subtle measured border tone; use only for understated separators where a visible hairline is needed. |
| Muted Gray | `#747474` | `--color-muted-gray` | neutral | Minor muted text detail; secondary to the dominant black typography. |

### Semantic aliases

`--color-canvas` → `#f5f4f1` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#000000` (Soft Ink) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-border` → `#2f59f8` (Electric Blue) · `--color-accent` → `#2f59f8` (Electric Blue) · `--color-accent-2` → `#ff632a` (Bright Coral) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f5f4f1` | 19.09:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#f5f4f1` | 1.1:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#2f59f8` | `#f5f4f1` | 4.89:1 | AA |
| `#2f59f8` | `#ffffff` | 5.38:1 | AA |
| `#2f59f8` | `#000000` | 3.91:1 | AA-large |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.85) 33%, rgba(0, 0, 0, 0) 58%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-body` | webfont | 500, 400, 700 | Headings, body copy, product titles, and larger editorial links. | Barlow |
| GT Planar | `--font-gt-planar` | webfont | 400, 500, 700 | Uppercase navigation, small captions, promotional labels, and button text. | Space Grotesk |

- **Founders Grotesk:** Use measured medium-weight display headings and compact, readable body copy; casing is generally natural rather than all caps.
- **GT Planar:** Use regular to bold weights for utility labels; navigation is uppercase, while buttons and captions remain restrained.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.04 | 0 | — | Founders Grotesk | Hero headline and the primary statement on a page. |
| h2 | 43px | 500 | 1.04 | 0 | — | Founders Grotesk | Major section headings such as Daily Essentials. |
| h3 | 40px | 500 | 1.05 | 0 | — | Founders Grotesk | Subsection titles and prominent feature statements. |
| h4 | 36px | 500 | 1 | 0 | — | Founders Grotesk | Smaller editorial or card-level headings. |
| body | 14px | 500 | 1.4 | 0 | — | Founders Grotesk | Product descriptions, supporting copy, and section text. |
| caption | 11px | 400 | 1 | 0 | — | GT Planar | Small product badges, fine print, and compact labels. |
| button | 16px | 400 | 1 | 0 | — | GT Planar | Shopping and secondary action labels. |
| nav | 14px | 400 | 1.29 | 0 | uppercase | GT Planar | Uppercase header navigation and compact utility links. |
| link | 20px | 500 | 1 | 0 | — | Founders Grotesk | Larger clickable product names and editorial links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 22, 28, 48, 80 px.
- Section rhythm 48px · element gap 16px · card padding 28px · max content width 1344px.

Use a wide, centered storefront with a measured maximum content width of 1344px. Keep the announcement and header as narrow horizontal bands, followed by a full-bleed hero. Product merchandising uses a five-column measured grid, while supporting content shifts between two-, three-, and four-column arrangements. Headings generally align left; the final lifestyle CTA centers its message. Preserve a comfortable rhythm with measured 48px section gaps and 16px element gaps, using broad open bands between dense retail modules.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `4px` · media `4px` · badge `4px` · nav `4px` · xs `4px` · sm `8px` · md `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no measured shadow system. Product and media cards use restrained, measured 4px corner radii; many content blocks sit directly on the canvas. Use crisp section boundaries and occasional blue borders for emphasis. The dark image gradient is an overlay for contrast, while the black footer creates the clearest surface shift.

## Imagery

Use candid, full-bleed lifestyle photography for the hero and final CTA, with product packaging clearly visible and people shown in active, everyday contexts. Product cards use isolated package photography with ingredient cues. Supporting ingredient tiles, athlete portraits, and customer review images add variety. Images are rectangular and closely cropped; dark gradient overlays help white hero copy remain legible. Packaging colors are vivid but belong to photography, not the core UI palette.

## Components

### Announcement strip

A full-width fluorescent yellow offer band with small, centered uppercase promotion text.

### Store header

White horizontal header with black logo and navigation, a blue pill-shaped Shop All action, and compact account and cart icons.

### Lifestyle hero

Full-bleed product-in-use image with left-aligned white headline and copy, blue primary CTA, and white outlined secondary CTA.

### Product cards

Dense product grid with bright package images, fluorescent savings and orange new-product badges, product names, pricing, and blue cart actions.

### Feature and ingredient panels

Alternating image-led editorial modules and compact ingredient cards, using clear labels and short explanatory copy.

### Proof carousels

Athlete testimonial cards and customer review imagery provide social proof within structured, horizontally browsable rows.

### Newsletter footer

Black footer groups shop, science, about, community, and contact links, with a white rounded email input and large brand mark.

### Measured component styles

- **Primary button** (“Shop All”): background #2f59f8 · text #ffffff · border 1px solid #2f59f8 · radius 3.35544e+07px · padding 10px 20px · 400 16px GT Planar
- **Secondary button** (“Shop Gummies”): transparent background · text #ffffff · border 1px solid #ffffff · radius 3.35544e+07px · padding 10px 20px · 400 16px GT Planar
- **Link** (“Daily Shilajit Gummies”): transparent background · text #000000 · radius 0px · padding 0px · 500 20px Founders Grotesk
- **Input**: background #ffffff · text #707170 · radius 3.35544e+07px · padding 12px 32px 12px 16px · 400 16px Founders Grotesk
- **Card** (“Designed to work with your body Clinical”): background #f5f1f2 · text #000000 · radius 4px · padding 28px · 400 16px Founders Grotesk
- **Badge** (“Subscribe & Save 20%”): background #eaff00 · text #000000 · radius 4px · padding 4px 12px · 400 11px GT Planar
- **Navigation item** (“FREE FORIA EVERYDAY BODY WASH WITH $70+ ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Founders Grotesk

## Do

- Use Warm Canvas (#f5f4f1) as the principal page ground.
- Reserve Electric Blue (#2f59f8) for high-priority shopping actions.
- Use Neon Citron (#eaff00) for compact promotional emphasis.
- Pair product packaging photography with clear product names and prices.
- Keep primary headlines and section titles left aligned unless the block is a closing CTA.
- Use Founders Grotesk for editorial hierarchy and GT Planar for utility labels.
- Create contrast over full-bleed imagery with a dark overlay and light text.

## Don't

- Do not turn packaging coral or ingredient colors into broad interface backgrounds.
- Do not make every section a card or add unmeasured shadows.
- Do not use fluorescent yellow for large text-heavy content areas.
- Do not compete with the product imagery using multiple simultaneous accent colors.
- Do not flatten the entire page into one uninterrupted product grid.
- Do not use oversized navigation that crowds the logo and shopping controls.

## Agent prompt

Build a new SuperMush-style storefront page with a warm, confident wellness-retail feel. Use Warm Canvas (#f5f4f1) as the main ground, Clean White (#ffffff) for bright product surfaces, and Soft Ink (#000000) for core text. Keep Electric Blue (#2f59f8) for primary shopping actions, Neon Citron (#eaff00) for small promotions, and Hot Tangerine (#ff4500) only for new-item markers. Set editorial headings and product copy in a Founders Grotesk-like sans; use a GT Planar-like face for uppercase navigation and compact labels. Pair a full-bleed lifestyle hero with clear CTAs, then build scannable product merchandising and varied proof or ingredient modules. Favor open, flat layouts, restrained card corners, and image-led storytelling; finish with a black footer and newsletter form. Keep the interface palette distinct from colorful package photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-column hero with left-aligned copy over lifestyle product imagery. | Primary and secondary CTAs, Image-led product introduction | Dark image overlay, White headline, Blue filled and white outlined buttons |
| 2 | product-grid | Left-aligned section heading above a dense five-column product carousel or grid. | Product browsing, Subscription savings, Add-to-cart actions | Bright pack photography, Sale and new-product badges, Blue purchase buttons |
| 3 | feature-split | Two-column split between movement and recovery copy and lifestyle media. | Tabbed benefit content, Learn more link | Text-led benefit list, Large rectangular image, Overlay caption |
| 4 | category-nav | Four ingredient image tiles followed by a compact clinical-information card. | Ingredient discovery, Explore ingredients | Four-column tile row, Image cards, Short category labels |
| 5 | feature-grid | Three-column benefit area with full-bleed media treatment. | Benefit scanning, Explore science action | Short benefit statements, Editorial image panels, Bright horizontal highlight band |
| 6 | testimonials | Four-column row with a lead statement and athlete portrait cards. | Social proof, Horizontal testimonial browsing | Portrait-led cards, Quote overlays, Blue top border accent |
| 7 | reviews | Four-column customer review and product-image carousel. | Customer review browsing, Review rating display | Star ratings, Compact quote cards, User and package photography |
| 8 | cta | Centered headline and button over a full-bleed lifestyle image. | Single primary shopping action | Full-width photography, Centered white copy, Blue CTA |
| 9 | footer | Black four-column footer with grouped links, newsletter signup, social icons, and brand mark. | Explore site categories, Newsletter signup, Social links | Black background, White text, Rounded email field, Large logo |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--tw-ring-color: #EAFF00;
--focus-outline-color: #EAFF00;
--kl-reviews-color-light-gray: #e9e9eb;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/supermush-com