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

# Dollar Shave Club · Design System

> Deep blue, bright offers, grooming without the fuss.

**Theme:** dark · **Industry:** ecommerce · **Source:** https://us.dollarshaveclub.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._

A deep-blue storefront pairs oversized uppercase display headlines with bright orange shopping prompts and colorful product imagery. A compact navigation leads into promotional campaigns, category browsing, reviews, product cards, FAQs, and a clean white newsletter footer.

## North star

Use deep blue as the continuous storefront canvas, reserving orange for decisive shopping actions and letting product imagery supply variety.

## Overview

The visual identity is anchored by a saturated deep blue canvas (#142978), repeated across most content sections to make the store feel cohesive and recognizable. Crisp white type provides contrast, while vivid orange (#fe5000) marks key shopping actions and promotional badges. Pale blue section and card surfaces add contrast without disrupting the palette; the white newsletter footer provides a deliberate visual reset. Headlines use DSC Specter in heavy, uppercase display styling, set against Gelica’s more readable, approachable body copy. The layout alternates full-bleed promotional imagery and split campaign panels with centered benefit, review, and subscription sections. Category photography and product imagery are tightly integrated into browsing and shopping cards; video tiles add customer-facing product context. The page is compact and conversion-oriented, with clear paths from campaign messaging to category discovery and bestseller cards. Rounded controls are used sparingly; flat color fields and thin borders do most of the structural work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clubhouse Blue | `#142978` | `--color-clubhouse-blue` | brand | Dominant page canvas and headline/link color on pale product cards; also anchors the promotional and navigation bands. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | High-contrast text on blue sections, header surface, CTA text, and the bright newsletter/footer area. |
| Muted Periwinkle | `#8a94bc` | `--color-muted-periwinkle` | semantic | Secondary button color found in measured controls; use as a restrained supporting accent, not a main section color. |
| Night Indigo | `#1f2f8a` | `--color-night-indigo` | accent | Secondary deep-blue accent in buttons and headings, supporting the primary brand blue. |
| Club Orange | `#fe5000` | `--color-club-orange` | accent | Primary shopping CTA fill and featured label; also appears in sale callouts and product packaging. |
| Graphite Text | `#404040` | `--color-graphite-text` | neutral | Muted text for navigation, footer content, and supporting interface copy on light surfaces. |
| Blue Shadow | `#2c3f86` | `--color-blue-shadow` | brand | Measured section-fill variation within the blue palette; use only as a subtle band distinction. |
| Pale Sky | `#dbebf5` | `--color-pale-sky` | surface | Light-blue product card surface that separates merchandise from the deep-blue storefront. |
| Powder Blue | `#93c0de` | `--color-powder-blue` | surface | Light-blue benefit section and promotional artwork background, creating a cool contrast with navy. |
| Berry Ink | `#82163f` | `--color-berry-ink` | semantic | Minor button-level color measured in the interface; not a defining page color. |
| Soft Gray | `#d9d9d9` | `--color-soft-gray` | surface | Neutral card surface measured in the page; use for quiet card separation rather than large brand bands. |
| Blue Hairline | `#263a83` | `--color-blue-hairline` | brand | Border color for fine interface separations against the deep-blue canvas. |

### Semantic aliases

`--color-canvas` → `#142978` (Clubhouse Blue) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#dbebf5` (Pale Sky) · `--color-surface-3` → `#93c0de` (Powder Blue) · `--color-surface-4` → `#d9d9d9` (Soft Gray) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#404040` (Graphite Text) · `--color-border` → `#263a83` (Blue Hairline) · `--color-accent` → `#142978` (Clubhouse Blue) · `--color-accent-2` → `#1f2f8a` (Night Indigo) · `--color-accent-3` → `#fe5000` (Club Orange) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#142978` | 12.98:1 | AAA |
| `#ffffff` | `#dbebf5` | 1.22:1 | fail |
| `#ffffff` | `#93c0de` | 1.94:1 | fail |
| `#404040` | `#142978` | 1.25:1 | fail |
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#dbebf5` | 8.5:1 | AAA |
| `#404040` | `#93c0de` | 5.35:1 | AA |
| `#142978` | `#ffffff` | 12.98:1 | AAA |
| `#142978` | `#dbebf5` | 10.64:1 | AAA |
| `#142978` | `#93c0de` | 6.7:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gelica | `--font-body` | webfont | 400, 500 | Body copy, descriptions, captions, and navigation text | Lora |
| DSC Specter | `--font-display` | webfont | 800, 900, 400, 700 | Display headings, CTAs, prominent links, and promotional labels | Montserrat |

- **Gelica:** Regular-weight, sentence-case supporting copy with comfortable line spacing; measured family is declared sans-serif despite its display character.
- **DSC Specter:** Heavy weights, uppercase headlines and buttons, with tight or slightly expanded tracking depending on heading level.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 800 | 1 | -0.01em | uppercase | DSC Specter | Primary campaign headline in oversized uppercase display type. |
| h2 | 40px | 800 | 1 | 0.015em | uppercase | DSC Specter | Section titles such as category, reviews, and bestseller headings. |
| h3 | 32px | 800 | 1.2 | 0.019em | uppercase | DSC Specter | Subsection and feature titles, usually bold uppercase. |
| h4 | 20px | 400 | 0.98 | 0 | — | Gelica | Smaller supporting display headings and card titles. |
| body | 16px | 400 | 1.5 | 0 | — | Gelica | Product descriptions, campaign explanations, and FAQ answers. |
| caption | 13px | 400 | 1.5 | 0 | — | Gelica | Compact product details and supporting image labels. |
| button | 16px | 800 | 1 | 0 | uppercase | DSC Specter | Uppercase shopping and subscription actions. |
| nav | 12px | 400 | 1.2 | 0 | — | Gelica | Small, restrained navigation and utility labels. |
| link | 16px | 800 | 1.5 | 0 | uppercase | DSC Specter | Bold uppercase product and category links. |
| eyebrow | 18px | 800 | 1.5 | 0.033em | uppercase | DSC Specter | Uppercase lead-in labels above key headings. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 4, 5, 8, 10, 12, 15, 18, 20, 25, 30, 36, 40, 48, 50, 60 px.
- Section rhythm 36px · element gap 10px · card padding — · max content width 1030px.

The page uses a compact, full-width storefront composition with a measured content max width of 1030px for contained content. Full-bleed campaigns alternate with centered sections and split layouts, including a two-column offer panel and multi-column benefits, category, review, and subscription areas. Section spacing follows a measured 36px rhythm, with compact element gaps. Align headings to the content pattern: centered for browsing and proof sections, left-aligned in campaign splits. A white footer breaks the continuous blue field.

## Shape & elevation

- Radius: button `9999px` · input `4px` · card `4px` · media `4px` · nav `4px` · link `2px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · pill `9999px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.2) 0px 10px 24px 0px`
- Shadow `md-2` (button): `rgba(0, 0, 0, 0.18) 0px 8px 18px 0px`
- Shadow `hairline` (card): `rgb(255, 255, 255) 0px 0px 0px 0px`
- Shadow `md-3` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: broad color fields, pale card surfaces, and thin borders create structure. Measured product cards have subtle corner rounding, while buttons are more rounded in the component data than the screenshot’s prominent rectangular orange CTA suggests. Shadows are occasional button-level details, not a general card treatment. Keep layering for campaign artwork and floating product imagery.

## Imagery

Use product photography, lifestyle grooming images, and campaign artwork as key browsing and promotional content. The hero pairs a pale-blue illustrated/product backdrop with floating offer graphics and product cutouts; the next campaign uses a split layout with product-set artwork. Category tiles use cropped lifestyle photos, while video cards show people using products. Keep photography vivid and integrated with the blue canvas rather than adding decorative illustration beyond offer artwork.

## Components

### Promotional strip

A slim deep-blue announcement band with centered, underlined offer copy and small directional chevrons.

### Main navigation

White header with orange stacked wordmark, compact category links, an orange FEATURED label, and utility icons.

### Campaign CTA

Orange SHOP DEALS button with white uppercase DSC Specter lettering; measured buttons include small-radius variants.

### Split sale feature

Deep-blue text panel beside pale campaign artwork; pairs oversized white uppercase headline, short copy, and shopping links.

### Product card

Pale-blue card surface with blue uppercase product name, product image, price, short benefit copy, and shopping affordance.

### FAQ accordion

Centered question list on the blue canvas with white horizontal rows, dark text, and plus icons.

### Newsletter footer

White footer begins with an offer-led signup prompt, then stacks brand mark, link columns, legal details, and social icons.

### Measured component styles

- **Primary button** (“SHOP MEN”): background #fe5000 · text #ffffff · radius 4px · padding 18px 30px · 800 20px dsc specter · uppercase
- **Secondary button** (“SHOP WOMEN”): background #82163f · text #ffffff · radius 4px · padding 18px 30px · 800 20px dsc specter · uppercase
- **Link** (“THE MEN'S SIGNATURE 6 BLADE RAZOR”): transparent background · text #142978 · radius 0px · padding 0px · 800 16px DSC Specter · uppercase
- **Input** (“US AU CA-EN CA-FR UK”): transparent background · text #404040 · radius 0px · padding 0px · 400 16px DSC Specter
- **Card** (“THE MEN'S SIGNATURE 6 BLADE RAZOR Regula”): background #dbebf5 · text #142978 · radius 4px · padding 0px · 400 16px DSC Specter
- **Navigation item** (“RAZORS & SHAVE WOMEN'S SKIN & BODY HAIR ”): transparent background · text #404040 · radius 0px · padding 0px · 400 16px DSC Specter

## Do

- Keep deep blue as the dominant page canvas.
- Use orange for the primary shopping action and featured offers.
- Set major headings in heavy uppercase display type.
- Use approachable body text for descriptions and answers.
- Give campaign sections strong imagery and clear shopping links.
- Create contrast with pale-blue cards and white surfaces.

## Don't

- Do not make every section a different bright color.
- Do not use orange for long paragraphs or large text blocks.
- Do not replace product imagery with generic abstract decoration.
- Do not center every content block; preserve split-panel alignment.
- Do not add heavy shadows to every card.
- Do not let utility navigation compete with campaign headlines.

## Agent prompt

Build a new ecommerce page in the Dollar Shave Club visual style. Use Clubhouse Blue (#142978) as the dominant canvas, Clean White (#ffffff) for high-contrast text and bright surfaces, and Club Orange (#fe5000) for the primary CTA and promotional labels. Use pale surfaces such as Pale Sky (#dbebf5) and Powder Blue (#93c0de) for product cards or section contrast. Set display headings in heavy uppercase DSC Specter-style typography, with readable Gelica-style body copy. Use a compact storefront header, clear split campaign layouts, product photography, and direct shopping links. Keep cards and borders restrained, with mostly flat surfaces and subtle rounding. Preserve a clear browsing sequence from offer to categories, products, FAQs, and a distinct white footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed pale-blue campaign artwork within the deep-blue page, with a centered message and product cutouts. | sale promotion, primary shop link | centered uppercase heading, orange CTA, floating offer badges |
| 2 | feature-split | Two-column full-bleed feature: left-aligned offer copy on blue, product-set artwork on a pale background. | shop by audience, campaign links | oversized white headline, split color field, product-set artwork |
| 3 | feature-grid | Centered heading above three evenly distributed benefit columns. | benefit scan, trust signals | three-column grid, small line icons, centered labels |
| 4 | category-nav | Centered section heading followed by a horizontal row of five image-led category tiles. | category discovery, carousel navigation | cropped lifestyle photos, small uppercase labels, carousel controls |
| 5 | testimonials | Centered review heading and intro above three compact testimonial columns. | social proof, review reading | star ratings, uppercase quote titles, small body copy |
| 6 | how-it-works | Centered section heading above three evenly spaced illustrated steps. | explain subscription, step-by-step scan | circular images, short uppercase step titles, centered copy |
| 7 | video | Centered title above a four-column row of portrait-oriented video tiles. | watch product demos, browse related products | video thumbnails, play icons, product labels |
| 8 | product-grid | Centered heading above a horizontally browsable grid of product cards. | product discovery, quick shopping | pale-blue cards, product images, price and benefit copy |
| 9 | faq | Centered heading above a single-column list of full-width accordion rows. | accordion answers, subscription support | white rows, plus icons, fine separators |
| 10 | feature-split | Two columns with a large grooming-product photograph beside left-aligned headline and copy. | brand education, shop all products | large lifestyle still life, stacked display heading, orange CTA |
| 11 | footer | White footer with a signup lead-in, brand mark, multi-column links, legal row, and social and locale controls. | newsletter signup, footer navigation | white surface, orange wordmark, compact link columns |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-card-background: 243,243,243;
--color-foreground: 64,64,64;
--color-secondary-foreground: 18,18,18;
--color-background-contrast: 191,191,191;
--color-shadow: 18,18,18;
--color-button: 254,80,0;
--color-button-text: 255,255,255;
--secondary-button-background-color: transparent;
--color-secondary-button-border: 18,18,18;
--color-secondary-button-text: 64,64,64;
--color-link: 64,64,64;
--color-badge-foreground: 64,64,64;
--color-badge-background: 255,255,255;
--color-badge-border: 64,64,64;
--card-background-color: 243,243,243;
--card-text-color: 64,64,64;
--card-background-account-color: 243,243,243;
--card-text-account-color: 0,0,0;
--payment-terms-background-color: rgb(255 255 255);
--swiper-background-opacity: .7;
--swiper-background-active-opacity: 1;
--swiper-arrow-background-color: rgb(64 64 64);
--swiper-arrow-text-color: rgb(255 255 255);
--swiper-arrow-background-active-color: rgb(64 64 64);
--swiper-pagination-color: rgb(64 64 64);
--swiper-pagination-active-color: rgb(64 64 64);
--font-body-family: "Gelica", sans-serif;
--font-heading-family: "DSC Specter", Helvetica, Arial, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-cta-weight: 800;
--font-heading-style: normal;
--font-heading-weight: 800;
--font-heading-weight-womens: 600;
--font-heading-family-womens: Gelica, sans-serif;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
```

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