At a glance
22tokens
9type steps
1radius steps
4pxspacing base
Etsy, in one page
Etsy's iOS app is a warm, handcrafted marketplace built on a soft cream canvas (#FAF5EF) that signals "handmade, not mass-produced" the moment it loads. Where most commerce apps go stark white, Etsy chooses a gentle paper-warm tone — the digital equivalent of a craft fair under string lights. Product photography is the hero: every listing leads with a large, color-rich maker photo, and the cream surround makes those photos feel like prints on a gallery wall rather than SKUs in a database. The interface is unhurried, tactile, and personal.
The accent system is a single confident burnt orange. Etsy Orange (#F1641E) owns the primary CTA ("Add to cart", "Buy it now"), the active tab indicator, sale badges, and the favorite-heart active state. The favorite heart is the emotional core of the app — Etsy is a wishlist-driven, browse-and-save experience — and it bounces and fills orange the moment you tap it. Beyond orange and the warm cream, the palette is restrained: white cards floating on cream, #F1F1F1 grouped fills, #E1DDD5 warm hairline dividers, near-black text. The warmth is the brand; the orange is the verb.
Typography is a friendly, slightly editorial sans (Etsy uses Graphik in production; substitute "Inter"). The hierarchy is approachable and shopping-forward: 12-28pt with weights at 400 / 500 / 700. The most expressive type moment is the listing detail — the item title at 22pt over a tall maker photo, with the price in confident 24pt bold and the review stars right beneath. Shop names and maker copy lean warm and human; metadata recedes into a soft gray.
Key Characteristics:
- Warm-cream canvas (
#FAF5EF) — handmade, paper-warm, not stark white - Etsy Orange (
#F1641E) as the single accent — primary action, active tab, sale, favorites - Favorite-heart — the emotional core; bounces and fills orange on tap
- Handmade product card — large maker photo, title, price, review stars, "Bestseller" tag
- Shop banner header — a maker's storefront banner + avatar + shop name
- Listing image gallery dots — full-bleed photo carousel with paged dots
- Bottom tab bar (Home / Search / You / Favorites / Cart) with orange active state
- Haptics on favorite-heart tap, add-to-cart, and gallery paging
Do's and don'ts
Do
- Use the warm cream canvas (
#FAF5EF) — it is the handmade brand signature - Float white product cards on the cream with a soft warm-tinted shadow
- Reserve Etsy Orange (
#F1641E) for the primary action, active tab, sale, and favorites - Make the favorite heart bounce and fill orange on tap — it is the emotional core
- Lead every product card and the listing detail with a large, color-rich maker photo
- Use near-black stars (
#222222) for reviews — Etsy stars are not gold - Keep CTAs full-pill and friendly, never sharp-cornered
- Show "Bestseller" / "Etsy's Pick" as an orange-tint pill for social proof
- Keep shop names and maker copy in medium weight — warm, human, never shouty
Don't
- Don't replace the cream with stark white — the warmth is the differentiator
- Don't use orange for body text or decoration — it is structural only
- Don't render review stars in gold/yellow — Etsy uses near-black stars
- Don't use cold neutral-gray shadows — card shadows are warm-tinted brown
- Don't add a second accent color — the single orange + warm cream is the identity
- Don't square the CTA corners — Etsy buttons are full-pill and friendly
- Don't use thin font weights — stay at 400 / 500 / 700
- Don't shrink product photos — the maker photography is the hero
- Don't skip the heart bounce — the tactile favorite is core to the experience
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Etsy design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Etsy Orange: #f1641e
- Orange Pressed: #d5571a
- Orange Tint: #fdede4
- Canvas Cream: #faf5ef
- Card White: #ffffff
- Surface: #f1f1f1
- Divider: #e1ddd5
- Surface Pressed: #efeae2
- Text Primary: #222222
- Text Secondary: #595959
Type:
- families: Graphik, Inter, Substitute, Fallback Stack
- scale: 11, 13, 14, 15, 16, 20, 22, 24, 28
- weights: 400, 500, 700
Shape:
- radius: 12
- elevation: Float white product cards on the cream with a soft warm-tinted shadow | 2. White product cards float on the cream with a soft warm-tinted (brown) shadow
Spacing: 4, 8, 14, 16
Rules:
- Use the warm cream canvas (`#FAF5EF`) — it is the handmade brand signature
- Float white product cards on the cream with a soft warm-tinted shadow
- Reserve Etsy Orange (`#F1641E`) for the primary action, active tab, sale, and favorites
- Make the favorite heart bounce and fill orange on tap — it is the emotional core
- Lead every product card and the listing detail with a large, color-rich maker photo
- Use near-black stars (`#222222`) for reviews — Etsy stars are not gold
Avoid:
- Don't replace the cream with stark white — the warmth is the differentiator
- Don't use orange for body text or decoration — it is structural only
- Don't render review stars in gold/yellow — Etsy uses near-black stars
- Don't use cold neutral-gray shadows — card shadows are warm-tinted brown
- Don't add a second accent color — the single orange + warm cream is the identity
- Don't square the CTA corners — Etsy buttons are full-pill and friendly
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Etsy Orange (
#F1641E): Primary CTA, "Add to cart", active tab indicator, sale badge, favorite-heart active. - Orange Pressed (
#D5571A): Active/pressed state for orange CTAs and the heart on tap. - Orange Tint (
#FDEDE4): Soft orange wash behind sale callouts and selected chips.
Canvas & Surface
- Canvas Cream (
#FAF5EF): Primary warm canvas — the handmade paper tone. - Card White (
#FFFFFF): Product cards, sheets, and elevated surfaces floating on cream. - Surface (
#F1F1F1): Grouped fills, search-field background, segmented controls. - Divider (
#E1DDD5): Warm hairline dividers between rows and sections. - Surface Pressed (
#EFEAE2): Pressed state on cream list rows and tappable cards.
Text
- Text Primary (
#222222): Item titles, prices, headlines, primary UI text. - Text Secondary (
#595959): Shop names, metadata, descriptions, captions. - Text Tertiary (
#8A8A8A): Disabled labels, placeholders, very low-emphasis hints.
Semantic
- Favorite Active (
#F1641E): Filled favorite heart. - Favorite Idle (
#FFFFFFw/rgba(0,0,0,0.45)backing): Unsaved heart over photos. - Star Filled (
#222222): Review star glyphs (Etsy uses near-black stars, not gold). - Sale Red (
#A61A12): "On sale" / discount price strike accent (deep brick, used sparingly). - Success Green (
#258635): "In your cart", order-confirmed states. - Error Red (
#A61A12): Form validation, checkout failure.
Dark Mode (Limited Use)
Etsy's iOS app is warm-light-first. A dark variant exists for system-dark contexts; the canvas goes warm-dark and Etsy Orange stays identical — it reads well on both.
- Dark Canvas (
#1A1714) - Dark Card (
#241F1B) - Dark Text Primary (
#F2EDE6) - Dark Text Secondary (
#A8A096) - Orange (
#F1641E) — unchanged across themes
Type scaleRead the full spec
Font Family
- Primary:
Graphik(proprietary) — friendly, slightly editorial grotesque - Substitute:
Inter— closest free face for the warm grotesque tone - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Non-Latin: System fallback per-script — Etsy ships globally
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title (Large) | Inter | 28pt | 700 | 1.15 | -0.4pt | Home / Favorites large nav title |
| Listing Title | Inter | 22pt | 700 | 1.25 | -0.2pt | Item name on listing detail |
| Section Header | Inter | 20pt | 700 | 1.2 | -0.2pt | "You may also like", "From this shop" |
| Price (Hero) | Inter | 24pt | 700 | 1.1 | -0.3pt | The listing price on detail |
| Card Title | Inter | 15pt | 500 | 1.35 | 0pt | Product title in grid card (2-line clamp) |
| Card Price | Inter | 16pt | 700 | 1.2 | -0.1pt | Price on a grid card |
| Body | Inter | 15pt | 400 | 1.5 | 0pt | Item description, shop story |
| Shop Name | Inter | 14pt | 500 | 1.3 | 0pt | Maker / shop name on card + detail |
| Button (Primary) | Inter | 16pt | 700 | 1.0 | 0pt | Orange "Add to cart", "Buy it now" |
| Meta / Count | Inter | 13pt | 400 | 1.3 | 0pt | "1,284 sales", "Free shipping" |
| Badge | Inter | 11pt | 700 | 1.0 | 0.3pt | "BESTSELLER", "ETSY'S PICK" |
| Tab Label | Inter | 11pt | 500 | 1.0 | 0.2pt | Bottom tab bar labels |
| Review Count | Inter | 13pt | 500 | 1.2 | 0pt | "(1,284)" beside the stars |
Principles
- Weights concentrated at 400 / 500 / 700: regular, medium, bold — medium does the warm mid-emphasis work
- Editorial, human tone: shop names and maker copy in medium weight, never shouty
- Price is confident, not loud: 24pt bold near-black, the stars sit immediately beneath
- Negative tracking only on titles: -0.4pt max; body sits at 0pt for readability
- Orange is never body text — orange is structural (action, active, sale, favorite) only
Components and layoutRead the full spec
Buttons
Primary CTA ("Add to cart" / "Buy it now")
- Background:
#F1641E - Text:
#FFFFFF - Padding: 16pt vertical, 28pt horizontal
- Corner radius: 999pt (full pill — Etsy's CTAs are rounded and friendly)
- Font: Inter 16pt weight 700
- Pressed: background
#D5571A, scale 0.98, with.impactOccurred(.medium)haptic - Disabled: background
#E1DDD5, text#8A8A8A
Secondary Button ("Add to a list" / "Message seller")
- Background:
#FFFFFF - Text:
#222222 - Border: 1.5pt solid
#222222 - Padding: 14pt vertical, 24pt horizontal
- Corner radius: 999pt
- Font: Inter 15pt weight 700
- Pressed: background
#F1F1F1
Favorite Heart
- Size: 24pt glyph, 44pt hit area
- Idle (over photo): white outline heart on
rgba(0,0,0,0.45)circular backing (36pt) - Active: solid
#F1641E - Tap: scale 1.0 → 1.25 → 1.0 over 300ms spring bounce + success haptic, fill animates
Text Button ("See all 240 items")
- Font: Inter 15pt weight 700
- Color:
#222222 - Underline on press only, 44pt hit area
Cards & Containers
Handmade Product Card (Grid)
- Background:
#FFFFFF, corner radius 12pt - Photo: full-width, aspect 1:1, maker image with 12pt top corner radius
- Favorite heart top-right over photo (24pt, idle white)
- "Bestseller" tag top-left over photo (orange-tint pill) when applicable
- Structure: photo → title (15pt w500, 2-line clamp) → price (16pt w700) + optional strike → stars + "(1,284)" → shop name (14pt w500
#595959) → "Free shipping" meta - Grid: 2-column, 12pt gutter, 16pt row gap
- Tap: card scale 0.98 + light haptic
Listing Detail Hero
- Full-bleed maker photo, aspect ~4:5, top of the screen
- Gallery dots bottom-center over the photo (6pt, active
#FFFFFF) - Floating circular 36pt back, share, favorite buttons on
rgba(0,0,0,0.45) - Photo-count pill bottom-right: "1 / 12" on
rgba(0,0,0,0.5) - Below photo: title 22pt w700, price 24pt w700, stars + review count, shop row
Shop Banner Header
- Banner strip: full-width maker banner image, ~120pt tall, 12pt bottom corners
- Shop avatar: 64pt circle, white 3pt ring, overlapping the banner bottom edge
- Shop name 20pt w700 + "1,284 sales · ★ 4.9" 13pt
#595959below - "Follow shop" pill (secondary outline) trailing
Review Card
- Background:
#FFFFFF, divider#E1DDD5bottom - Reviewer avatar 36pt circle + name 14pt w500 + date 13pt
#595959 - Star row (16pt near-black stars) + review body 15pt w400 (4-line clamp + "Read more")
- Optional reviewer photo thumbnails (56pt, 8pt radius)
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
rgba(250,245,239,0.97)with.regularMaterialblur (warm) - Tabs: Home, Search, You, Favorites, Cart
- Icon size: 24pt
- Active:
#F1641Eicon + label (orange is the active indicator) - Inactive:
#595959 - Labels: Inter 11pt w500, always shown
- Active icon: filled SF Symbol; inactive: outlined
- Cart shows a count badge (orange dot) when non-empty
- Hairline top border
#E1DDD5
Top Nav (Home)
- Height: 52pt + safe area
- Etsy wordmark left (orange, ~64pt), notification + cart icons right
- Search bar pinned below: full-width,
#FFFFFFfill, 1pt#E1DDD5border, 999pt radius - Compact + warm-blurred on scroll
Listing Sticky Bar
- Appears on scroll: 56pt, cream with blur, bottom-anchored
- Price (16pt w700) left + full-width-ish orange "Add to cart" CTA right
Input Fields
Search Bar
- Background:
#FFFFFF - Height: 48pt
- Corner radius: 999pt (full pill)
- Border: 1pt
#E1DDD5 - Leading SF Symbol
magnifyingglass18pt#595959 - Placeholder: "Search for anything", 15pt w400
#595959 - Focus: border
#2222221.5pt, trailing "Cancel" text button appears
Filter Chip
- Background:
#FFFFFFdefault /#FDEDE4selected (with#F1641E1.5pt border) - Text:
#222222(both states) - Padding: 8pt vertical, 16pt horizontal
- Corner radius: 999pt
- Border: 1pt
#E1DDD5default - Font: Inter 14pt weight 500
- Examples: "Free shipping", "On sale", "Ready to ship", "Under $25"
Distinctive Components
Favorite Heart (the emotional core)
- Outline heart idle, solid
#F1641Eactive - Bounce: 1.0 → 1.25 → 1.0 spring (damping 0.5) over 300ms on tap, success haptic
- Over photos: sits on a 36pt
rgba(0,0,0,0.45)circular backing for contrast - Appears on every product card, the listing hero, and search results — the save-driven heart of the app
Handmade Warmth (the cream canvas)
- The
#FAF5EFcanvas with white cards is the brand's signature surface treatment - White cards cast a soft, warm-tinted shadow so they feel like prints lifted off paper
- Never replace the cream with stark white — the warmth is the differentiator
Listing Image Gallery
- Full-bleed paged photo carousel, 1:1 / 4:5 maker photos
- Paged dots bottom-center (6pt, inactive
rgba(255,255,255,0.5), active#FFFFFF) - Swipe pages with snap + light haptic at each photo
"Bestseller" / "Etsy's Pick" Tag
- Orange-tint pill:
#FDEDE4background,#F1641Etext, 11pt w700 uppercase - Padding: 4pt vertical, 10pt horizontal, 999pt radius
- Top-left over the product photo — social-proof at a glance
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 2-col grid with tighter gutters; card text clamps sooner |
| iPhone 13/14/15 | 390pt | Standard 2-col product grid, full 1:1 photos |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Larger photos, listing hero grows to 4:5 full-bleed |
| iPad | 768pt+ | 3-4 column product grid, listing detail in a split layout |
Dynamic Type
- Listing title, price, body: full scale
- Card title: scales with a 2-line clamp before truncation
- Badge text, tab labels, gallery photo-count pill: fixed
- Review star size: fixed (geometric unit)
Orientation
- Home / Search / Favorites: portrait-locked
- Listing image gallery: rotates to landscape for full-screen photo viewing
- Cart / checkout: portrait-locked
Touch Targets
- Primary CTA: 48pt+ tall
- Favorite heart: 44pt effective hit (over a 36pt backing on photos)
- Gallery floating controls: 44pt hit area
- Tab bar icons: 24pt glyph, 44pt effective hit
- Product card: entire card tappable
Safe Area Handling
- Top: wordmark nav + search bar respect the safe area / Dynamic Island
- Bottom: tab bar floats above the home indicator with warm blur
- Sides: 16pt content insets; listing hero photo bleeds full-width
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-etsy {--page-bg: #faf5ef;
--page-bg-gradient: none;
--text-color: #222222;
--heading-color: #222222;
--link-color: #b3430c;
--link-hover-color: #833109;
--border-color: #d3cfca;
--card-bg: #faf5ef;
--card-shadow: 0 1px 2px rgba(34,34,34,0.06);
--card-hover-shadow: 0 6px 18px rgba(34,34,34,0.12);
--header-bg: #222222;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #faf5ef;
--footer-text-color: #6e6c6a;
--button-bg: #f1641e;
--button-text-color: #000000;
--button-hover-bg: #cf4d0d;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #ede8e3;
--button-secondary-text-color: #222222;
--button-secondary-hover-bg: #e0dcd6;
--button-secondary-border: 1px solid #d3cfca;
--prompt-bg: #efeae5;
--prompt-text-color: #222222;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/finance/etsy/DESIGN.md· 19.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.