What is Drunk Elephant's primary brand color?

Drunk Elephant's structural ink is warm charcoal #45474a — not pure black. It appears 1,332 times across 664 text and 664 border uses, making it the dominant color on the page. There is no chromatic brand accent in the marketing chrome at scale. Two pop colors exist — electric lime (#e6fe52) and soft lavender (#f6dcff) — but each appears exactly once as a single promotional tile fill. The brand's visual identity comes from the charcoal warmth and the typographic lowercase treatment, not from a repeated accent hue. The electric lime and lavender are art-direction moments, not structural brand colors.

What typefaces does Drunk Elephant use, and what should I use as substitutes?

Drunk Elephant runs two families. BrownRegular and BrownBold are the primary voices — Brown is Lineto's licensed geometric sans. BrownBold appears at display sizes (24–66px) with aggressive negative letter-spacing (-0.72px to -1.98px) and lowercase text-transform. BrownRegular handles body (12–16px) and navigation (14px) in a mix of capitalize and normal transforms. SentinelSemiBold is the serif accent — a slab from Hoefler & Co, appearing at 14px weight 375 in editorial callout cards ('The Drunk Difference'). Open-source substitutes: for Brown, use Inter at the same weights and tracking; for Sentinel, use Playfair Display or Source Serif 4 in semibold at 14px.

Why does Drunk Elephant use lowercase for branded headings?

BrownBold with text-transform lowercase appears at the display tier: the hero h2 ('welcome to Drunk Elephant'), the promotional badge ('biocompatible'), and the product-editorial callout cards. The design decision signals approachability and familiarity — the brand is talking with the customer, not presenting credentials at them. This directly inverts the beauty-brand uppercase convention used by Fenty Beauty, Charlotte Tilbury, and most prestige skincare. The lowercase treatment is paired with negative letter-spacing (-0.72px at 24px, -1.2px at 39px), which keeps the light-weight lowercase from reading as casual or unintentional — the tight tracking gives it editorial authority while the lowercase retains warmth.

How should the electric lime and lavender accent colors be used?

The two pop accents — electric lime (#e6fe52, classified as brand-layer) and soft lavender (#f6dcff, classified as brand-layer) — each appear exactly once in the captured marketing surface. The lime appears as a single promotional product tile fill; the lavender appears as another single tile fill. The pattern is 'pop scarcity': sparse deployment of saturated or unusual colors against a predominantly white-and-charcoal canvas creates visual surprise without chromatic noise. Replicating this correctly means using at most one or two pop-accent fills per page band, never as recurring nav elements, button fills, or heading colors. The accents lose their impact if repeated more than twice per scroll depth.

Can I use this DESIGN.md to build my own skincare product page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Drunk Elephant's specific moves: warm charcoal (#45474a) ink instead of pure black, BrownBold lowercase display with negative tracking, sparse pop-accent tiles at electric lime or lavender, SentinelSemiBold serif callout cards, and 5px card rounding. Token references resolve cleanly — {colors.ink} for structural text and borders, {colors.accent-lime} for the single pop-accent tile, {typography.display-lg} for the lowercase display heading. The system depends on high-quality product photography for its visual richness — the charcoal-and-white chrome is spare, and the product images carry all the warmth and color.

Drunk Elephant Design System

Drunk Elephant's marketing-site design system as a DESIGN.md file.

About Drunk Elephant DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source drunkelephant.com

E-commerce & Retail
Healthcare & Wellness

Drunk Elephant's marketing site is built around a typographic commitment almost no beauty brand makes: the primary display heading is lowercase. The hero overlay reads "welcome to Drunk Elephant" in BrownBold at 39px, with intentional extra whitespace and a lowercase w. Below the hero, the product grid runs in warm charcoal (#45474a) — not the pure black that Fenty Beauty or NARS use — against a flat white canvas. The effect is warmer, less authoritative, more like a brand talking to you than at you. Where The Ordinary uses clinical monochrome to signal no-nonsense formulation integrity, Drunk Elephant uses the lowercase + charcoal combination to signal approachable expertise — the brand knows the science but doesn't want to intimidate with it.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 12 color tokens anchored on warm charcoal (#45474a) as the dominant structural ink, pure white (#ffffff) as canvas, and two pop accents — electric lime (#e6fe52) and soft lavender (#f6dcff) — each appearing exactly once in the captured page as single product-tile fills. Fourteen typography tokens span two families: BrownRegular and BrownBold (the dominant voice) with negative letter-spacing at display sizes, and SentinelSemiBold (a serif) at 14px weight 375 for editorial callout cards. Corner rounding centers on 5px for interactive surfaces and 3px for smaller chips. 15 components cover the lowercase hero heading, the pop-accent promotional tile, the charcoal product-card grid, and the electric-lime footer newsletter band.

Feed this file to Claude or Cursor and it reproduces Drunk Elephant's specific moves: warm charcoal ink instead of pure black, lowercase BrownBold display headings with tight negative tracking, pop-accent tiles at electric lime or soft lavender deployed sparingly, and SentinelSemiBold serif callouts as an editorial counterpoint. The system is worth studying for its accent discipline: two pop colors are declared but each appears only once in the captured marketing surface, giving the page visual surprise without chromatic noise. The art-direction move — "pop scarcity" — is the pattern worth borrowing.

What makes it distinct

Warm charcoal as structural ink#45474a (not pure black) carries 1,332 element-uses across text and borders, giving the page warmth without a chromatic accent
Lowercase branded headingsBrownBold display headings use text-transform lowercase ('welcome to drunk elephant'), a direct inversion of the beauty-brand uppercase convention
Pop accent tileselectric lime (#e6fe52) and soft lavender (#f6dcff) appear as single-tile accent fills, isolated against the white grid; the accents are sparse by design
SentinelSemiBold serif accenteditorial callout cards use a slab serif at 14px weight 375, the only departure from the Brown-only system
5px as the dominant radiusproduct thumbnails, chips, and interactive surfaces use 5px; the system skips anything above 10px

Live at drunkelephant.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

drunkelephant.com

Explore Drunk Elephant

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Drunk Elephant design system FAQ

Common questions about Drunk Elephant's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Drunk Elephant — official site

Drunk Elephant's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.