---
version: alpha
name: "Drunk Elephant"
description: "Token-first design system for Drunk Elephant — a clinical skincare brand using Brown typeface, near-black charcoal on white, and product-driven candy color through packaging photography."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f7f7"       # light off-white for secondary panel surfaces
  surface-sky: "#e5f5fc"   # pale sky blue — footer background and logo zone

  # Text / ink
  ink: "#45474a"            # brand charcoal — all primary text, borders, UI strokes
  ink-strong: "#000000"    # true black — input underlines, high-contrast moments
  ink-muted: "#696969"     # medium gray — secondary labels, helper text

  # Brand accent — drawn from the iconic product palette
  primary: "#3dac8e"        # brand teal/mint — signature product color across the line
  on-primary: "#ffffff"
  primary-container: "#bffcf3"  # pale mint container — CSS var --histogram-color; badge tints

  # Interaction states
  primary-hover: "#2e8a71"  # darkened teal on hover
  focus-ring: "#3b82f6"     # was rgba(59,130,246,.5) -- CSS --pr-ring-color; converted opaque

  # Semantic
  success: "#32ae88"        # teal-adjacent success — product brand register
  warning: "#f59e0b"
  error: "#ef4444"

  # Borders
  border: "#45474a"         # brand charcoal — 1px solid on buttons, dividers, selects
  border-soft: "#d1d1d1"   # light gray — low-emphasis dividers, inputs
  border-input: "#000000"  # bottom-border input underline style

  # Shadow tints
  shadow-soft: "#c7c5c7"   # warm silver — used in product callout glows

typography:
  display-hero:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 145px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  display:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.98px
  heading-section:
    fontFamily: "Brown, BrownBold, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 57px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Brown, BrownBold, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.84
    letterSpacing: 0px
  body-large:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.96px
  body:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  nav-link:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
  button-ui:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.7px
  label-caps:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.7px
  editorial-serif:
    fontFamily: "Sentinel, SentinelSemiBold, Georgia, 'Times New Roman', serif"
    fontSize: 24px
    fontWeight: 375
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Brown, BrownRegular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  caption-caps:
    fontFamily: "Brown, BrownBold, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 20px
  xl: 50px
  2xl: 80px
  3xl: 100px

rounded:
  none: 0px
  xs: 2px
  sm: 3px
  md: 5px
  circle: 9999px   # used for circular elements (video controls, social icons) — 50% equivalent

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-strong}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  card-tinted:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-input}"
    padding: 8px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-caps}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
  badge-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.caption-caps}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.nav-link}"
    padding: 16px 20px
---

# Drunk Elephant Design System

## Overview

Drunk Elephant occupies a specific and confident register in the skincare market: laboratory-rigor delivered through an almost aggressively cheerful product palette. The website itself is a study in restraint — pure white (`{colors.background}`) with charcoal (`{colors.ink}`) text and zero chromatic indulgence in the chrome. Every ounce of color energy is offloaded to the product photography, where mint-green tubes, canary-yellow serums, and bubblegum-coral exfoliants create a candy-counter visual feast against the neutral stage the site provides. This is a deliberate typographic and surface strategy: the site says "we don't need to dress up, our products do it for us."

The typeface is Brown — a mid-century-adjacent grotesque with slightly warmer curves than Helvetica and a lower x-height that lends it an almost hand-drawn softness at small sizes. The brand uses it in two weights (Regular at 400 and Bold at 700) plus a proprietary Sentinel serif for occasional editorial counterpoint — Sentinel appears in menu-level and micro-label contexts, bridging pharmaceutical credibility with a touch of magazine warmth. Display sizes run at negative tracking (–1.98px at 66px) to achieve the tight, confident poster quality common to premium beauty brands, while body text relaxes to 0px tracking. All-uppercase `letter-spacing: 0.7px` labels identify CTAs, category headers, and product type markers throughout.

The layout is architecturally simple: white canvas, 5px cards and product image wrappers, a footer zone that switches to a signature pale sky (`{colors.surface-sky}`) to close the page warmly. The brand's product photography carries the visual identity — mint teal, acidic yellow, bubble-pink, and bright green packaging against white or sky-blue surfaces. The rare teal accent (`{colors.primary}`) that leaks into the chrome signals the brand's most iconic product color and provides a breath of chromatic confirmation that the site and products share the same soul.

**Key Characteristics:**
- Brown (Regular + Bold) as the exclusive grotesque — warm mid-century energy, not cold Swiss minimalism
- Sentinel serif as editorial counterpoint — pharmaceutical authority in nav and micro-label zones
- Pure white (`{colors.background}`) as the sole canvas — no warm paper, no off-white drift
- Brand charcoal (`{colors.ink}`) as both primary text and border color — unified neutral system
- Pale sky blue (`{colors.surface-sky}`) footer — the single chromatic zone in the chrome
- Product photography delivers 100% of the brand's color identity — chrome stays deliberately neutral
- Sharp `{rounded.none}` corners on buttons and most containers — near-pharmaceutical precision
- Bottom-border-only inputs (underline style) — keeps forms minimal and editorial
- All-uppercase button labels with `0.7px` letter-spacing — clarity without shouting
- Uppercase + tracked `{typography.nav-link}` links at `2px` spacing — refined navigation rhythm
- Minimal shadows (one soft glow on floating product callouts) — essentially shadow-free
- Ticker/marquee animations and 1s slide keyframes signal the brand's energetic, product-forward tone

## Colors

### Primary
- **Pure White** (`{colors.background}`): The page canvas. Every section opens on white. Never drifts warm.
- **Brand Charcoal** (`{colors.ink}`): Primary text, nav links, button fills, 1px borders, dividers, selects. A slightly warm dark gray — less harsh than true black, more precise than mid-gray.
- **Off-White Panel** (`{colors.surface}`): Secondary surface for product panels, alternate-row backgrounds, hover states on ghost CTAs.

### Brand Accent
- **Mint Teal** (`{colors.primary}`): The brand's most iconic product color, appearing as the site's single chromatic accent. Used for interactive highlights, success states, and occasional decorative border moments (visible in product tile borders). Its container (`{colors.primary-container}`) tints badges and callout chips.

### Footer Surface
- **Sky Blue** (`{colors.surface-sky}`): The footer's full-bleed background. Not used anywhere in the page body — a deliberate closing gesture that echoes the brand's most airy product photography tone.

### Text States
- **Primary Ink** (`{colors.ink}`): All headings, body text, active UI labels, button text on light surfaces.
- **Strong Black** (`{colors.ink-strong}`): Input underline borders and maximum-contrast moments.
- **Muted Gray** (`{colors.ink-muted}`): Helper text, inactive labels, secondary metadata.

### Borders
- **Border Charcoal** (`{colors.border}`): 1px solid borders on buttons, product cards, selects, dropdown panels. Matches `{colors.ink}` — a unified charcoal system.
- **Border Soft** (`{colors.border-soft}`): Low-emphasis 1px dividers on modals and tertiary UI.
- **Input Underline** (`{colors.border-input}`): Bottom-only black border on form inputs — the underline input style.

### Shadow
- **Shadow Silver** (`{colors.shadow-soft}`): The system's single shadow color, warm silver-gray. Used in product callout glows (`rgb(199,197,199) -3px -3px 5px -2px` and a 12px ambient variant). Otherwise the surface is flat.

## Typography

### Font Family
- **Primary Grotesque**: `Brown` (`BrownRegular`, `BrownBold`) — self-hosted WOFF/WOFF2/OTF. A proprietary typeface by Lineto with softer curves than Helvetica, used for every display, body, and UI text role.
- **Editorial Serif**: `Sentinel` (`SentinelSemiBold`, `SentinelMedium`) — self-hosted WOFF. Appears in nav, micro-label, and editorial contexts; brings a pharmaceutical-meets-magazine authority.
- **Icon Fonts**: `icomoon`, `FontAwesome` — for UI icons; not part of the typographic system.
- **Fallback stack**: `'Helvetica Neue', Helvetica, Arial, sans-serif` for grotesque; `Georgia, 'Times New Roman', serif` for Sentinel

*Note: Brown is a proprietary Lineto typeface. For external implementations, `Aktiv Grotesk` or `Neue Haas Grotesk Display` are closest optical matches; `DM Sans` or `Plus Jakarta Sans` work as accessible web-safe alternatives.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign headlines, landing page anchors at near-viewport scale |
| `display` | Primary section headlines; large product callouts |
| `heading-section` | Section titles; bold subheadings for content zones |
| `heading-sub` | Card titles; ingredient callout heads; sub-panel headings |
| `body-large` | Intro paragraphs; lead copy beneath display headlines |
| `body` | Standard reading copy, nav links (non-tracked), modal content |
| `nav-link` | Top navigation text — uppercase with 2px letter-spacing |
| `button-ui` | All CTA labels; form submit labels — uppercase, weight 700, 0.7px tracking |
| `label-caps` | Product type markers, category badges, "SOLD OUT" states |
| `editorial-serif` | Sentinel accent labels; pharmaceutical/editorial callout moments |
| `caption` | Price sub-labels, legal copy, form helper messages |
| `caption-caps` | Uppercase badge labels, status chips, "NEW" markers |

### Principles
- Brown at weight 400 is the reading voice; weight 700 is reserved for buttons, labels, and section emphasis. The system rarely needs more than these two weights in a single viewport.
- Negative letter-spacing at display scale (–1.98px at 66px, –0.96px at 45px) locks headlines into confident poster-blocks — a common premium beauty typographic signal.
- All-uppercase with positive tracking (`0.7px`) is reserved for button labels and category markers. Navigation links use `2px` letter-spacing uppercase. Body text and headings stay sentence case.
- Sentinel appears as an editorial counterpoint — never as the primary voice, only as an accent at small sizes (10–24px) to signal clinical seriousness or magazine authority.
- Brown's warmth at body sizes (16px) keeps clinical content approachable — this is skincare, not a pharmaceutical insert.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with 10px as the dominant inner-component unit).

Drunk Elephant uses a collapsed lower range (4px, 8px, 10px, 12px) for tight intra-component spacing and a wide upper range (20px, 50px, 80px) for section breathing room. The 20px step appears constantly — it is the workhorse gap between grid items, inside product cards, and in nav padding. Section breaks jump to 50px and 80px, giving editorial pages an open, unhurried rhythm.

### Grid & Container
- Max content width: approximately 1440px
- Product grid: 3–4 columns at desktop, 2 at tablet, 1 at mobile
- Hero: full-bleed photography or white canvas with overlaid headline + product imagery
- Footer: full-bleed sky blue (`{colors.surface-sky}`) with stacked link columns and combination mark logo
- Content breakpoints (from dembrandt data): 1800px, 1550px, 1441px, 1440px, 1366px, 1280px, 1200px, 1025px, 1024px, 992px, 897px, 768px, 767px, 640px, 580px, 480px, 425px, 380px

### Whitespace Philosophy
- White space is the page's dominant visual material — photography provides the color, space provides the context
- Tight card grids (10–20px gutters) keep the product catalog dense; section breaks (50–80px) provide editorial pacing
- The footer sky-blue zone is the page's only full-bleed chromatic zone, serving as a visual landing pad after the white editorial journey above

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, body text, product grid, the default |
| Hairline (Level 1) | `1px solid {colors.border}` or `1px solid {colors.border-soft}` | Product card frames, button outlines, input separators |
| Soft Glow (Level 2, rare) | `rgb(199,197,199) -3px -3px 5px -2px` | Product photography callout; specialty promotional card |
| Ambient Glow (Level 3, exceptional) | `rgb(199,197,199) 0px 0px 12px 2px` | Featured product highlight; floating promotional badge |
| Dialog Overlay (Level 4) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Modal/dialog panels — the game-wheel overlay uses this |
| Focus Ring | `{colors.focus-ring}` 3px outline | Accessible keyboard focus on interactive elements |

**Shadow Philosophy**: Drunk Elephant's depth system is near-flat. The dominant separation device is the 1px charcoal border (`{colors.border}`) — graphic, printed-catalog quality. Shadows appear in exactly three situations: a soft silver glow on featured product callouts, an ambient spread on a floating badge, and a dark overlay for modal panels. This approach reflects the brand's pharmaceutical clarity: precise lines rather than atmospheric depth. The product photography introduces all the natural shadow and three-dimensional presence the page needs; the chrome steps back.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, most cards, product containers, modals — the default |
| `xs` | 2px | Close/dismiss buttons, toast-style chips, small interactive elements |
| `sm` | 3px | Badge backgrounds, small tag containers, product indicators |
| `md` | 5px | Image containers, select dropdowns, secondary UI panels |
| `circle` | 9999px | Video control buttons, social media icon links, circular indicators |

Drunk Elephant uses `{rounded.none}` for almost everything interactive — buttons, cards, form inputs, modal containers. The occasional `5px` on image wrappers and dropdowns is the only departure of scale. Circular elements (video controls, carousels, scroll-to-top) use `50%`. The system consciously avoids mid-range pill radii — no rounded-pill CTAs, no bubbly button shapes despite the brand's playful product aesthetic. The sharpness reinforces clinical credibility.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Charcoal (`{colors.ink}`) fill, white text, sharp `{rounded.none}` corners, uppercase Brown 700 with 0.7px tracking, 12px 24px padding. The workhorse CTA. Hover deepens to `{colors.ink-strong}` true black.
- **`button-secondary`** — White fill, charcoal text, 1px solid `{colors.border}` border, same sharp corners and typography. Used for secondary actions alongside a primary black button.
- **`button-ghost`** — Transparent, charcoal text, no border. Navigation-level and quiet tertiary actions; underline on hover via `text-decoration`.

### Cards
Product cards use `{colors.background}` with `{rounded.none}` and a 1px `{colors.border}` frame — or frameless with spacing alone separating tiles. Tinted variant (`{components.card-tinted}`) uses `{colors.surface}` for alternate-row panel backgrounds. Product photography sits flush to the card top. No shadow — the 1px border does all the work.

### Inputs
Form inputs use bottom-border-only style: `border-bottom: 1px solid {colors.border-input}` (true black), no visible top/side/right border, `{rounded.none}` radius, 8px 0px padding. Focus state keeps the same underline, no ring. The underline approach keeps checkout and signup forms spare and editorial rather than boxed and form-like.

### Badges / Tags
- **Mint container badge** (`{components.badge}`): Pale mint `{colors.primary-container}` fill, charcoal text, 12px Brown Bold, uppercase, 0.6px tracking, 3px radius. Ingredient callouts, "NEW", product feature tags.
- **Dark badge** (`{components.badge-dark}`): Charcoal fill, white text, same typography. Used for "SOLD OUT", high-contrast status markers.

### Navigation
- Top bar: white background, 1px charcoal bottom border, uppercase Brown Regular links at 16px with 2px letter-spacing. Sticky on scroll.
- Logo: wordmark SVG, left-aligned in nav header, centered in footer combination mark.
- Mobile: hamburger collapse, full-width overlay menu.
- Transition: 0.2s ease on color and background-color for all interactive states.

## Do's and Don'ts

### Do
- Use Brown (Regular and Bold) for every typographic role — the typeface is the brand's neutral voice
- Keep buttons sharp (`{rounded.none}`) — no rounded corners on any primary interactive element
- Apply uppercase with `0.7px` letter-spacing to all button labels and category markers
- Use `{colors.ink}` charcoal for both text and border — the unified neutral color system is intentional
- Reserve `{colors.primary}` teal for accent moments only — product highlights, not chrome decoration
- Trust product photography to carry the brand's color energy — keep the chrome clean and spare
- Use bottom-border-only inputs for forms — the underline style is the brand's editorial register
- Apply the pale sky footer (`{colors.surface-sky}`) only in the footer zone — not as a body section background
- Use `{typography.nav-link}` uppercase tracking on navigation links — sentence case links break the brand register
- Add `{typography.editorial-serif}` Sentinel as an accent typeface in pharmaceutical/clinical callout zones only

### Don't
- Don't introduce rounded pill buttons — the brand's precision comes from sharp-cornered CTAs
- Don't use chromatic accent colors on UI chrome (buttons, borders, backgrounds) — color lives in products
- Don't apply gradients to surfaces — the single fade (off-white to white) in the data is functional, not decorative
- Don't substitute mid-gray backgrounds for sections — `{colors.surface}` is the deepest departure from white
- Don't use Sentinel as a headline typeface — it's a micro-accent, not a display voice
- Don't break the uppercase button convention — sentence-case CTAs undermine the brand's precision register
- Don't add mid-range radii (8–20px) on cards or buttons — the system is binary (none / circle)
- Don't scatter `{colors.primary}` teal across decorative elements — its restraint is what gives it stamp quality
- Don't use true black (`{colors.ink-strong}`) for general text — brand charcoal (`{colors.ink}`) is warmer and correct
- Don't apply drop shadows to product cards — the 1px border is the system's separation device

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <380px | Single column, display scale reduces sharply |
| Mobile | 380–640px | Single column, 1-up product grid, compact nav |
| Tablet Small | 640–768px | 2-column grid, sub-nav visible |
| Tablet | 768–1025px | 2–3 column grid, hero two-up |
| Desktop | 1025–1440px | 3–4 column product grid, full sticky nav |
| Large Desktop | >1440px | 1440px+ container, editorial hero layout, full-width ticker |

### Touch Targets
- Buttons: minimum 44px tap height; 12px 24px padding on desktop, adapts to 10px 20px on mobile
- Nav links: 44px minimum row height in mobile overlay menu
- Product cards: full card area is the tap target to product detail page
- Circular video/carousel controls: 44×44px minimum with `{rounded.circle}` radius

### Collapsing Strategy
- **Nav**: Full horizontal link bar (uppercase tracked) collapses to hamburger below 768px; full-overlay menu on open
- **Display type**: 145px hero → 57px → 45px progressive step-down; tracks viewport width with font-size breakpoints
- **Product grid**: 4-col → 3-col → 2-col → 1-col progressively; card borders and 20px gutters maintained
- **Footer**: Multi-column link grid stacks to 2-col then 1-col; sky blue full-bleed maintains at all sizes
- **Section spacing**: 80px desktop → 50px tablet → 20px mobile; preserves editorial pace at reduced scale

### Image Behavior
- Product photography maintains a square or 3:4 portrait aspect ratio across breakpoints
- Hero photography is full-bleed; reframes rather than simple crop on narrow viewports
- The brand's candy-color packaging reads clearly at small sizes — no art direction simplification needed
- Marquee/ticker animations pause or slow on reduced-motion preference

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure white
- Primary Text: `{colors.ink}` — brand charcoal `#45474a`
- Secondary Text: `{colors.ink-muted}`
- Button Fill: `{colors.ink}` — charcoal black
- Button Text: `{colors.background}` — white
- Brand Accent: `{colors.primary}` — mint teal `#3dac8e`
- Mint Container: `{colors.primary-container}`
- Footer Surface: `{colors.surface-sky}`
- Border: `{colors.border}`
- Input Underline: `{colors.border-input}`
- Default Radius: `{rounded.none}` — 0px

### Example Component Prompts

- "Create a Drunk Elephant-style product hero on pure white (`{colors.background}`). Headline in Brown Regular at 66px, weight 400, line-height 1.0, letter-spacing -1.98px, color `{colors.ink}`. Below: supporting copy in Brown Regular 16px weight 400. Primary CTA: charcoal (`{colors.ink}`) fill, white text, 14px Brown Bold uppercase with 0.7px letter-spacing, 0px radius, 12px 24px padding. Product photography (mint-green or yellow tube) floats right, no background fill."
- "Design a Drunk Elephant product card. White background, 1px solid `{colors.border}` border, 0px radius. Product photo flush to top edge, square aspect ratio. Below: product name in Brown Regular 16px weight 400, price in caption 12px, 'Add to Bag' in charcoal fill, white text, Brown Bold 14px uppercase 0.7px tracking, 12px 24px padding, sharp corners. No shadow."
- "Build a Drunk Elephant email signup form. White background, no visible box border. Input: bottom-border only `1px solid {colors.border-input}`, 0px radius, 8px 0px padding, Brown Regular 16px weight 400, charcoal text. Submit button adjacent: charcoal fill, white text, uppercase Brown Bold 14px with 0.7px tracking, sharp corners, 12px 24px padding. Hover: darkens to `{colors.ink-strong}`."
- "Create a Drunk Elephant badge system. Mint badge: pale mint container (`{colors.primary-container}`) background, charcoal text, 12px Brown Bold uppercase 0.6px tracking, 3px radius, 4px 8px padding — for 'NEW' and ingredient callouts. Dark badge: charcoal fill, white text, same specs — for 'SOLD OUT' states."
- "Design a Drunk Elephant footer section. Full-bleed pale sky blue (`{colors.surface-sky}`) background. Combination mark logo (elephant illustration + 'DRUNK ELEPHANT™' wordmark) centered above a multi-column link grid. Links in Brown Regular 12px weight 400 charcoal, sentence case, 20px column gutters. Legal copy in caption 12px below the grid. No borders, no shadow — color alone defines the zone."
- "Build a Drunk Elephant top navigation bar. White background, 1px solid `{colors.border}` bottom border, sticky. Wordmark SVG left-aligned. Navigation links: Brown Regular 16px, uppercase, letter-spacing 2px, charcoal color — no underline by default, underline appears on hover with 0.2s ease transition. Right: search, account, cart icons at 24px. On scroll: stays white, border provides the visual lock to the page."

### Iteration Guide

1. Start with pure white (`{colors.background}`) — Drunk Elephant never softens the canvas to warm cream or off-white.
2. Brand charcoal (`{colors.ink}`) is the workhorse — use it for text, borders, and button fills. Reserve true black (`{colors.ink-strong}`) for input underlines and maximum-contrast moments only.
3. Sharp `{rounded.none}` corners on everything interactive — buttons, cards, inputs, modal panels. The only round shape in the system is `{rounded.circle}` for video controls and social icons.
4. Button labels are uppercase Brown Bold 14px with 0.7px tracking — no sentence case, no weight 400 CTAs.
5. Product photography is the color system. Keep chrome neutral and spare; let teal tubes, yellow serums, and pink exfoliants supply all chromatic energy.
6. The teal accent (`{colors.primary}`) appears sparingly as an interactive signal and badge tint — never as a button fill or section background.
7. Footer is the only zone that breaks the white canvas — use `{colors.surface-sky}` exclusively there.
8. Shadow-free by default. Separate elements with 1px charcoal borders, not elevation.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Drunk Elephant. Brand names and trademarks belong to their respective owners.