Boutique: sistema de diseño de app de compras de moda
App · Light · Luxury · Serif · E-commerceBoutique
Fotos de borde a borde, una serif Bodoni y negro sobre blanco, como un escaparate.
Boutique funciona como un escaparate en el móvil: las fotos de producto van de borde a borde, Bodoni Moda da a los nombres y a las historias una voz de revista de moda, y la interfaz se retira hacia el negro, el blanco y los neutros cálidos. Los precios se mantienen discretos, con el grosor del cuerpo de texto y sin negrita.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/es/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
Best for
- Tiendas de moda y ropa
- Reventa de lujo y de diseñador
- Compras de belleza y joyería
- Lanzamientos de marca y lookbooks
Do's and don'ts
- Da a las fotos de producto todo el ancho de la pantalla.
- Pon los nombres de marca y las etiquetas en mayúsculas pequeñas con mucho espaciado entre letras.
- No pongas los precios en negrita ni en color, salvo los precios rebajados.
- No cubras la cuadrícula con insignias de rebajas ni pegatinas.