What is Etsy's primary brand color?

Etsy's brand color is Etsy Orange — #f1641e, a saturated red-orange that has been the brand's only chromatic voltage since the 2016 wordmark refresh. It is used scarcely: the wordmark itself, the primary Sign-in pill in the top nav, the heart-favorite fill state on product tiles, seasonal hero banners (Mother's Day, Cyber Week), and the chat-icon active state in the messages drawer. Pressed state drops one notch to #d44e0d. Every other surface in the system is monochrome white-on-near-black, so the orange functions as the page's single voltage rather than a decorative tone.

What typography does Etsy use, and what should I use if Graphik isn't available?

Etsy runs two families. The wordmark is set in Guru, a custom Cooper-style display serif licensed only to Etsy — it never appears outside the logo. Every other typographic role uses Graphik Webfont at weights 400, 500, and 600, with display sizes at 28 to 32px, headings at 18 to 22px, and body at 14 to 16px. If Graphik is unavailable, Inter is the closest open-source substitute at body sizes; for the wordmark itself there is no direct substitute — Cooper BT Light, Recoleta, or Cheee can echo the silhouette but the brand specifically forbids replacing the serif logo with any system equivalent.

How does Etsy's border-radius system work?

Etsy uses a two-radius vocabulary plus pill. Most components — product tiles, seller cards, text inputs, secondary buttons, the search bar's outer frame — sit at 8px (rounded.md). Modal cards and large editorial tiles step up to 12px (rounded.lg). The primary Sign-in pill in the top nav, circular avatars, and the heart-favorite chip go fully pill (9999px). There is no sharp-cornered interactive element anywhere on the buyer surface, and the spec deliberately keeps a tight three-value scale rather than the eight-step ramps common in design-token starters.

How does Etsy separate the buyer and seller design surfaces?

The buyer experience runs the white canvas, orange voltage, and Graphik chrome described in this spec. The seller-facing chrome — "Sell on Etsy", the seller dashboard signup flow, Etsy Plus marketing — flips to a warm-cream

Can I use this DESIGN.md to build my own React marketplace?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce Etsy's particular restraint rather than a generic retail theme. The single Etsy Orange accent, the 8px card radius, the two-palette buyer/seller split, the 28 to 32px display tier and modest body sizes all encode as tokens the AI can map to Tailwind classes or CSS variables. Reference values directly when you want one specific number — {colors.primary} resolves to #f1641e, {rounded.md} to 8px, {spacing.section} to 64px.

What's missing from this DESIGN.md spec?

Several things, documented in the Known Gaps section: Etsy's live site returned an access-restricted page during automated extraction, so this spec was composed from the brand's published style references and visual analysis of the wordmark surface; mobile screenshots were not captured, so the responsive section synthesizes Etsy's known mobile patterns; hover states are intentionally undocumented per system policy; authenticated chrome (favorites, cart, conversations) is out of scope; the native mobile-app screens are not represented; and form-validation states beyond focused are not documented.

Etsy Design System

Etsy's marketplace design system as a DESIGN.md file.

About Etsy DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source etsy.com

Marketplaces
E-commerce & Retail

Etsy's public design system is built around two ideas the rest of the marketplace category has steadily abandoned: a hand-drawn serif wordmark and a single chromatic voltage. The wordmark sits in a custom Cooper-style serif called Guru, with its characteristic flared "E" and rounded terminals — a typographic ancestor of the brand's craft-fair origins. Every other surface in the system runs Graphik Webfont at workmanlike weights of 400, 500, and 600, with display headlines sitting at 28 to 32px rather than the 48-plus most modern e-commerce brands use. The canvas is true white ("#ffffff"), text is near-black "#222222" ink, and one saturated Etsy Orange ("#f1641e") carries the wordmark, the primary Sign-in pill, the heart-favorite fill, and the seasonal banner ribbon — nothing else.

This page packages the system into a single DESIGN.md file built on the Google Labs open specification. Inside: 19 color tokens grouped into brand, surface, hairline, text, semantic, and seller-side buckets; 11 Graphik Webfont typography roles plus the Guru wordmark token, mapped from 32px display down to 11px badge; six border-radius values where 8px ("rounded.md") does the heavy lifting and 9999px appears only on the Sign-in pill and circular avatars; an eight-step 8px-based spacing scale; and 22 components covering buttons, product tiles, seller cards, the search bar, the top nav, gift-card surfaces, and the warm-cream seller ribbon. Each component declares its background, text color, typography, radius, and padding by reference — every value resolves back to a quoted hex or pixel literal.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent reproduces Etsy's particular marketplace voice — the orange-on-white restraint, the 8px card radius, the buyer/seller two-palette split, the modest 32px display tier — rather than a generic retail theme. Reference the tokens directly in Tailwind config or CSS variables when you want one specific value. The system rewards study because Etsy commits to a constraint most peers hedge on: the marketplace chrome is a frame for handmade objects, never a competitor with them.

What makes it distinct

Single-accent voltageEtsy Orange (#f1641e) reserved for the wordmark, the Sign-in pill, the heart-favorite fill, and seasonal banners; never decorative
Two-typeface splitGuru custom serif lives only inside the wordmark; every other role uses Graphik Webfont at weights 400 to 600
Soft 8px card geometryproduct tiles, seller cards, and inputs share one radius; the Sign-in CTA goes pill (9999px) for contrast
Warm-cream secondary surface#fdf6e8 band fills carry seller-program ribbons and gift-card lockups, scoped never to bleed onto product grids
Etsy Brown #a66523 is the seller-side voiceappears in the Sell on Etsy CTA and Etsy Plus chrome, almost never in the buyer experience

Live at etsy.com

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

etsy.com

Explore Etsy

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.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Etsy design system FAQ

Common questions about Etsy'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.

Etsy — official site

The handmade and vintage marketplace whose buyer-facing surfaces this DESIGN.md captures.

The DESIGN.md specification

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

Use Etsy in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→