Atelier: Luxusmode-Designsystem

Web · Hell · Luxus · Serifen · Minimalistisch · E-Commerce

Atelier

Elfenbein, Tinte und eine edle Serifenschrift, wie das Lookbook eines Modehauses.

Atelier orientiert sich an den Lookbooks von Modehäusern: warm elfenbeinfarbene Seiten, schwarze Tinte, eine kontrastreiche Cormorant-Überschrift und groß laufende Fotografie. Farbe fehlt fast ganz; Bronze ist für Fokuszustände und feine Details reserviert, damit das Produkt die Seite trägt.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

Neu in 2026Planen, ausliefern und messen an einem Ort

Ein ruhiger Workspace für kleine Teams. Jede Zahl, die du brauchst, und nichts, was du nicht brauchst.

Kostenlos startenDemo buchen

Aktive Nutzer12,480

Umsatz$48.2k

Bindungsrate86%

Lade dein Team einGeschäftliche E-Maildu@firma.deRolleBearbeiter ▾Einladung senden

Letzte BestellungenKundeStatusBetragAda ParkBezahlt$1,240Lukas WeberAusstehend$380Mei ChenErstattet$96

In 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 Atelier. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/atelier.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

background#F7F5F2oklch(0.971 0.005 78.298)
foreground#161412oklch(0.193 0.005 67.517)
card#FFFFFFoklch(1 0 0)
card-foreground#161412oklch(0.193 0.005 67.517)
popover#FFFFFFoklch(1 0 0)
popover-foreground#161412oklch(0.193 0.005 67.517)
primary#161412oklch(0.193 0.005 67.517)
primary-foreground#F7F5F2oklch(0.971 0.005 78.298)
secondary#ECE7E1oklch(0.93 0.01 72.658)
secondary-foreground#161412oklch(0.193 0.005 67.517)
muted#EEEAE4oklch(0.938 0.009 78.28)
muted-foreground#6B635Boklch(0.505 0.016 67.45)
accent#E9E3DCoklch(0.919 0.011 71.893)
accent-foreground#161412oklch(0.193 0.005 67.517)
destructive#9E2A2Boklch(0.468 0.152 24.87)
border#DCD5CCoklch(0.876 0.014 74.412)
input#CFC6BBoklch(0.831 0.018 73.045)
ring#7A5F4Boklch(0.507 0.046 57.989)
chart-1#7A5F4Boklch(0.507 0.046 57.989)
chart-2#161412oklch(0.193 0.005 67.517)
chart-3#B79E84oklch(0.715 0.047 68.066)
chart-4#5E6B5Coklch(0.512 0.028 141.437)
chart-5#9E2A2Boklch(0.468 0.152 24.87)

Dunkles Theme

background#121110oklch(0.178 0.003 67.659)
foreground#EFEAE3oklch(0.939 0.011 76.597)
card#1A1817oklch(0.211 0.004 48.54)
card-foreground#EFEAE3oklch(0.939 0.011 76.597)
popover#1A1817oklch(0.211 0.004 48.54)
popover-foreground#EFEAE3oklch(0.939 0.011 76.597)
primary#EFEAE3oklch(0.939 0.011 76.597)
primary-foreground#121110oklch(0.178 0.003 67.659)
secondary#24211Foklch(0.25 0.006 56.109)
secondary-foreground#EFEAE3oklch(0.939 0.011 76.597)
muted#1F1D1Boklch(0.232 0.005 67.584)
muted-foreground#A39A90oklch(0.691 0.018 70.442)
accent#2A2725oklch(0.275 0.006 56.145)
accent-foreground#EFEAE3oklch(0.939 0.011 76.597)
destructive#E07A6Eoklch(0.691 0.129 27.874)
border#33302Doklch(0.311 0.007 67.574)
input#3D3935oklch(0.347 0.009 67.531)
ring#C4A68Aoklch(0.745 0.052 64.916)
chart-1#C4A68Aoklch(0.745 0.052 64.916)
chart-2#EFEAE3oklch(0.939 0.011 76.597)
chart-3#8C7A69oklch(0.591 0.034 65.479)
chart-4#9DAA9Aoklch(0.723 0.027 139.828)
chart-5#E07A6Eoklch(0.691 0.129 27.874)

Schriften

Überschriften: Cormorant Garamond · 500
Fließtext: Jost · 400
Monospace: JetBrains Mono

Schriftgrößen

display · 96/0.95 · -0.02emZwölf Boxkämpfer jagen Viktor
h1 · 60/1 · -0.015emZwölf Boxkämpfer jagen Viktor
h2 · 36/1.1Zwölf Boxkämpfer jagen Viktor
h3 · 22/1.3 · 0.02emZwölf Boxkämpfer jagen Viktor
body · 16/1.65 · 0.01emZwölf Boxkämpfer jagen Viktor
small · 12/1.5 · 0.12emZwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 0pxmd 0pxlg 0pxxl 4px

Abständexs 8pxsm 16pxmd 32pxlg 48pxxl 96px

SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.

Layout

Maximale Breite: 1440px
Textbreite: 60ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

Mode- und Luxusmarken
Schmuck, Beauty und Parfum
Boutiquehotels und Restaurants
Lookbooks und Kampagnenseiten

Dos and Don’ts

Lass Fotografie den größten Teil der Seite einnehmen.
Setze Labels und Navigation in kleinen Versalien mit weiter Laufweite.
Füge keine grellen Farben hinzu; Bronze ist das Lauteste, was erlaubt ist.
Überfrachte Produkte nicht mit Badges, Bewertungen oder Sale-Bannern.