Boutique: Fashion Shopping App Design System

App · Light · Luxury · Serif · E-commerce

Boutique

Edge-to-edge photos, a Bodoni serif and black on white, like a shop window.

Boutique works like a shop window on a phone: product photos run edge to edge, Bodoni Moda gives names and stories a fashion-magazine voice, and the interface steps back into black, white and warm neutrals. Prices stay quiet, in the body weight rather than bold.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Boutique design system. Its spec is at https://codexdesign.io/design-systems/boutique.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#FFFFFFoklch(1 0 0)
foreground#111111oklch(0.178 0 0)
card#F7F4F0oklch(0.968 0.006 75.407)
card-foreground#111111oklch(0.178 0 0)
popover#F7F4F0oklch(0.968 0.006 75.407)
popover-foreground#111111oklch(0.178 0 0)
primary#111111oklch(0.178 0 0)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#EFEAE4oklch(0.939 0.01 72.659)
secondary-foreground#111111oklch(0.178 0 0)
muted#F3F0ECoklch(0.956 0.006 75.406)
muted-foreground#615C57oklch(0.478 0.01 67.58)
accent#EEE9E3oklch(0.936 0.01 72.659)
accent-foreground#111111oklch(0.178 0 0)
destructive#A3261Doklch(0.472 0.163 28.986)
border#E2DDD6oklch(0.9 0.011 76.593)
input#D1CBC2oklch(0.844 0.014 78.252)
ring#111111oklch(0.178 0 0)
chart-1#111111oklch(0.178 0 0)
chart-2#B79E84oklch(0.715 0.047 68.066)
chart-3#7A6555oklch(0.523 0.036 59.165)
chart-4#5E6B5Coklch(0.512 0.028 141.437)
chart-5#A3261Doklch(0.472 0.163 28.986)

Dark theme

background#0F0F0Foklch(0.168 0 0)
foreground#F2EEE9oklch(0.951 0.008 73.743)
card#181716oklch(0.205 0.003 67.686)
card-foreground#F2EEE9oklch(0.951 0.008 73.743)
popover#181716oklch(0.205 0.003 67.686)
popover-foreground#F2EEE9oklch(0.951 0.008 73.743)
primary#F2EEE9oklch(0.951 0.008 73.743)
primary-foreground#0F0F0Foklch(0.168 0 0)
secondary#22201Eoklch(0.245 0.005 67.6)
secondary-foreground#F2EEE9oklch(0.951 0.008 73.743)
muted#1C1B19oklch(0.222 0.004 84.588)
muted-foreground#A09A93oklch(0.689 0.012 71.844)
accent#262422oklch(0.262 0.005 67.618)
accent-foreground#F2EEE9oklch(0.951 0.008 73.743)
destructive#F07167oklch(0.697 0.159 26.504)
border#2E2C29oklch(0.294 0.006 78.234)
input#383532oklch(0.331 0.007 67.593)
ring#F2EEE9oklch(0.951 0.008 73.743)
chart-1#F2EEE9oklch(0.951 0.008 73.743)
chart-2#C4A68Aoklch(0.745 0.052 64.916)
chart-3#9C8574oklch(0.633 0.038 58.478)
chart-4#9DAA9Aoklch(0.723 0.027 139.828)
chart-5#F07167oklch(0.697 0.159 26.504)

Fonts

Headings: Bodoni Moda · 500
Body: Jost · 400
Monospace: JetBrains Mono

Type scale

display · 48/1 · -0.01emThe quick brown fox
h1 · 32/1.05The quick brown fox
h2 · 24/1.15The quick brown fox
h3 · 17/1.3 · 0.04emThe quick brown fox
body · 15/1.55 · 0.01emThe quick brown fox
small · 12/1.4 · 0.1emThe quick brown fox

Radius, spacing and shadow

Corner radiussm 0pxmd 2pxlg 4pxxl 8px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Touch targets: 48px
Tab bar: 60px, 5 items, icons only; bag badge
Screen padding: 16px
Navigation: bottom tab bar; edge-to-edge product photos
Numerals: proportional; prices in body weight

Boutique: Fashion Shopping App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps