Boutique: Mode-Shopping-App-Designsystem
App · Hell · Luxus · Serifen · E-CommerceBoutique
Randlose Fotos, eine Bodoni-Serife und Schwarz auf Weiß, wie ein Schaufenster.
Boutique funktioniert wie ein Schaufenster auf dem Smartphone: Produktfotos laufen randlos, Bodoni Moda gibt Namen und Geschichten die Stimme eines Modemagazins, und die Oberfläche tritt in Schwarz, Weiß und warmen Neutraltönen zurück. Preise bleiben leise, im Schnitt des Fließtexts statt fett.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn deinem Projekt verwenden
Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.
Dieses Projekt verwendet das Designsystem Boutique. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/boutique.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles 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)
Dunkles 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)
Schriften
- Überschriften
- Bodoni Moda · 500
- Fließtext
- Jost · 400
- Monospace
- JetBrains Mono
Schriftgrößen
- display · 48/1 · -0.01emZwölf Boxkämpfer jagen Viktor
- h1 · 32/1.05Zwölf Boxkämpfer jagen Viktor
- h2 · 24/1.15Zwölf Boxkämpfer jagen Viktor
- h3 · 17/1.3 · 0.04emZwölf Boxkämpfer jagen Viktor
- body · 15/1.55 · 0.01emZwölf Boxkämpfer jagen Viktor
- small · 12/1.4 · 0.1emZwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 0pxmd 2pxlg 4pxxl 8px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 60px, 5 Einträge, icons only; bag badge
- Bildschirmrand
- 16px
- Navigation
- bottom tab bar; edge-to-edge product photos
- Ziffern
- proportional; prices in body weight
Ideal für
- Mode- und Bekleidungsshops
- Luxus- und Designer-Wiederverkauf
- Beauty- und Schmuck-Shopping
- Marken-Drops und Lookbooks
Dos and Don’ts
- Gib Produktfotos die volle Breite des Screens.
- Setze Markennamen und Labels in kleinen Versalien mit weiter Laufweite.
- Mach Preise nicht fett oder farbig, außer Sale-Preise.
- Überdecke das Raster nicht mit Sale-Badges und Stickern.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader