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

# Drunk Elephant · Design System

> Bright skincare, clean layouts, playful colour.

**Theme:** light · **Industry:** beauty · **Source:** https://www.drunkelephant.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 bright skincare storefront pairs restrained typography and generous white space with vivid product imagery. A high-contrast lime footer and pastel campaign photography bring personality to an otherwise quiet, editorial layout.

## North star

Keep the interface quiet and spacious so colourful skincare photography leads, reserving the vivid lime for the footer.

## Overview

The page uses a nearly white canvas and dark charcoal text to keep attention on skincare packaging and campaign photography. Most sections stay visually quiet; pastel blue, pink, lavender, and mint appear chiefly in product imagery rather than as interface colours. The vivid lime footer is the page’s clearest chromatic brand statement, forming a strong closing band beneath the white content. Brown is the primary sans-serif voice: large, clean headings and readable product descriptions sit alongside compact uppercase labels and purchase actions. Sentinel SemiBold adds a secondary display character. Layout shifts between broad hero compositions, a compact bestseller product grid, paired editorial panels, a promotional split, and an image-led social gallery. Section spacing and simple alignment give each block room to breathe. Borders define actions and product controls; cards remain light and unshadowed, so imagery provides most of the depth and texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fafafa` | `--color-gallery-white` | surface | Near-white page canvas, product-card surfaces, and pale neutral space around imagery. |
| Soft Charcoal | `#45474a` | `--color-soft-charcoal` | neutral | Primary headings, product copy, links, and thin outlines on buttons. |
| Citrus Flash | `#e6fe52` | `--color-citrus-flash` | brand | Full-width footer navigation and legal-information bands; the page’s standout interface colour. |
| Mist Blue | `#e5f5fc` | `--color-mist-blue` | accent | Minor footer-associated pale accent; product photography supplies more prominent blue tones. |
| True Black | `#000000` | `--color-true-black` | neutral | Measured on a button element; use sparingly and do not treat it as the main text colour. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery White) · `--color-text` → `#45474a` (Soft Charcoal) · `--color-text-muted` → `#fafafa` (Gallery White) · `--color-border` → `#45474a` (Soft Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#45474a` | `#fafafa` | 8.93:1 | AAA |

### Gradients

- `linear-gradient(rgb(250, 250, 250), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BrownRegular | `--font-body` | webfont | 400, 700 | Primary body copy, product names, links, and several heading styles. | Inter |
| BrownBold | `--font-display` | webfont | 700, 400 | Bold headings, uppercase eyebrow labels, and compact purchase buttons. | Inter |
| SentinelSemiBold | `--font-sentinelsemibold` | webfont | 375 | Secondary display and editorial emphasis where a more distinctive heading voice appears. | Lora |
| Brown | `--font-brown` | webfont | 400 | Large section headings and prominent button text. | Inter |

- **BrownRegular:** Regular weight dominates; use clean, unembellished sans-serif forms and restrained tracking.
- **BrownBold:** Use weight contrast rather than decorative styling; button and eyebrow text is uppercase.
- **SentinelSemiBold:** Reserve for selective emphasis; measured as a semibold webfont.
- **Brown:** Use clean sans-serif forms; prominent headings are large and mostly untracked.

### Type scale — Major Third (ratio ≈ 1.27, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 66px | 400 | 1 | -0.03em | — | BrownRegular | Oversized campaign or hero heading treatment. |
| h1 | 57px | 400 | 1 | 0 | — | BrownBold | Primary page or section headline. |
| h2 | 45px | 400 | 1 | 0 | — | Brown | Major section headings such as Bestsellers. |
| h3 | 34.5px | 400 | 1.2 | 0 | — | BrownRegular | Editorial panel and feature headings. |
| h4 | 24px | 400 | 1 | -0.03em | — | BrownRegular | Smaller promotional or product grouping headings. |
| body | 20px | 400 | 1.2 | 0 | — | BrownRegular | Campaign descriptions and product information. |
| caption | 12px | 400 | 1.4 | 0 | capitalize | BrownRegular | Compact supporting labels and metadata. |
| button | 45px | 400 | 1 | 0 | — | Brown | Prominent action label styling. |
| link | 16px | 400 | 1.2 | 0 | — | BrownRegular | Product names and inline navigation links. |
| eyebrow | 12px | 700 | 1.2 | 0.05em | uppercase | BrownBold | Small uppercase category and section labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 6, 7, 8, 10, 12, 15, 20, 40, 50, 57, 60 px.
- Section rhythm 50px · element gap 10px · card padding 10px · max content width 1400px.

The page alternates wide campaign compositions with contained shopping and editorial modules. The measured maximum content width is 1400px; sections range from a three-column hero to a six-column product area, paired feature panels, and a dense image-led social strip. Headings align to their section’s reading direction, with centered feature copy also present. Comfortable spacing separates major blocks, while product labels and controls are compact. The footer shifts into a broad, multi-column directory and a narrower legal and region-selection row.

## Shape & elevation

- Radius: button `50%` · input `5px` · card `5px` · media `5px` · badge `3px` · xs `3px` · sm `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Product and editorial panels sit on pale backgrounds, and thin charcoal borders make buttons legible without heavy framing. Subtle rounded corners appear on cards and media, while strong visual separation comes from spacing, photography, and the lime footer band rather than layered effects.

## Imagery

Photography carries the colour and character: pastel-packaged jars and bottles are shown against pale blue, soft neutral, or clean white settings. The hero pairs a large product scene with a smaller campaign image and copy. Product cards use cutout-style pack shots, while promotional panels mix lifestyle imagery and product arrangements. The social gallery shows people holding products in a consistent horizontal strip. Video appears in campaign and promotional sections; there is no dominant illustrated interface.

## Components

### Announcement strip

A narrow charcoal top bar carries centered shipping information in small light text, with simple carousel controls at the edges.

### Campaign hero

A broad, media-led opening combines product photography, campaign copy, carousel labels, and an outlined SHOP NOW action.

### Bestseller cards

Product cards pair compact uppercase category badges, pack photography, product and price details, reviews, and outlined ADD TO BAG actions.

### Editorial feature panels

Two adjacent panels mix a short brand story and a product-focused MVP feature with concise copy and simple outlined links.

### Promotion split

A text-led offer sits beside campaign imagery, with supporting terms and a small outlined SHOP NOW control.

### Social gallery

A horizontal feed of customer photos and creator handles adds human context and product-in-use imagery.

### Lime footer

A vivid lime directory groups shopping and brand links into columns, followed by social icons, region selection, and legal links.

### Measured component styles

- **Primary button** (“SHOP NOW”): background #ffffff · text #45474a · border 1px solid #45474a · radius 0px · padding 11px 40px · 700 12px BrownBold · uppercase
- **Secondary button** (“ADD TO BAG”): transparent background · text #45474a · border 1px solid #45474a · radius 0px · padding 7px 0px 8px 0px · 700 12px BrownBold · uppercase
- **Link** (“CLEANSER Beste™ No. 9 Jelly Cleanser $18”): transparent background · text #45474a · radius 0px · padding 0px · 400 16px BrownRegular
- **Input** (“United States Canada United Kingdom Japa”): background #f3ffa9 · text #45474a · radius 4.99996px · padding 4px 10px · 400 12px BrownRegular
- **Card** (“CLEANSER”): background #fafafa · text #45474a · radius 4.99996px · padding 10px · 400 16px BrownRegular
- **Badge** (“CLEANSER”): background #fdfdfd · text #45474a · radius 3px · padding 8px 10px · 400 12px BrownRegular · uppercase

## Do

- Use near-white space as the default interface canvas.
- Let packaging and campaign photography provide most colour.
- Keep text and outlines in Soft Charcoal.
- Reserve Citrus Flash for a strong footer or similarly contained brand band.
- Use thin outlined actions with compact uppercase labels where appropriate.
- Separate content into generous, clearly defined modules.

## Don't

- Do not turn pastel product-photo colours into dominant interface fills.
- Do not add heavy shadows or layered card effects.
- Do not crowd product imagery with decorative framing.
- Do not use the lime accent as a full-page background.
- Do not replace the quiet hierarchy with oversized blocks of dense copy.
- Do not make every section use the same grid or alignment.

## Agent prompt

Build a new Drunk Elephant-style beauty storefront page with a restrained, bright visual system. Use Gallery White (#fafafa) as the quiet canvas and Soft Charcoal (#45474a) for readable copy, links, and fine button outlines. Keep Citrus Flash (#e6fe52) concentrated in a contained brand band such as the footer; Mist Blue (#e5f5fc) should remain a minor supporting accent, not a dominant interface fill. Set clean sans-serif typography with clear weight contrast, compact uppercase labels, and generous breathing room. Organize content into varied modules—campaign hero, product grid, editorial split, promotion, and gallery—rather than repeating one template. Let pastel product photography bring colour and texture. Keep surfaces mostly flat, use light borders instead of shadows, and make shopping actions easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Three-column campaign composition with a large product image, central copy and action, and a secondary image. | campaign carousel, shop now action | pastel product photography, outlined CTA, compact carousel labels |
| 2 | product-grid | A six-column measured product area displays a row of compact product cards beneath a section heading. | browse products, add to bag, review ratings | category badges, product cutouts, outlined purchase buttons |
| 3 | feature-grid | Two adjacent editorial feature panels, with centered section headings and compact copy or product imagery. | learn more, shop all skin care | paired panels, outlined links, editorial photography |
| 4 | feature-split | Promotional text and terms sit beside a campaign video or image in a two-column arrangement. | shop promotion, review terms | split layout, outlined CTA, campaign media |
| 5 | gallery | A wide, dense horizontal strip of customer images with creator handles beneath. | browse social posts, discover product use | image thumbnails, social handles, repeated gallery cards |
| 6 | newsletter | A three-part footer lead-in combines brand imagery, a central email signup, and a featured product image. | email signup, subscribe, featured product | split image and form, minimal form controls, brand mark |
| 7 | category-nav | A full-width lime band organizes shopping and brand links into six measured columns. | browse by category, explore brand links | Citrus Flash background, multi-column link lists, compact labels |
| 8 | footer | A lime footer continuation places social links and legal information alongside a region selector. | select region, view legal information, open social channels | social icons, region control, compact legal links |

## Source CSS custom properties (selected)

```css
--histogram-color: #bffcf3;
--animate-duration: 1s;
--swiper-theme-color: #007aff;
```

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