Pop: Neo-Brutalismus-Designsystem

Web · Hell · Kräftig · Verspielt · Start-ups

Pop

Dicke schwarze Konturen, harte Schatten und Zitronengelb. Absichtlich laut.

Pop ist Neo-Brutalismus mit guten Manieren: eine cremefarbene Seite, breite Unbounded-Überschriften, schwarze Konturen um alles und massive versetzte Schatten, die Karten wie Sticker aussehen lassen. Zitronengelb und Koralle übernehmen das Schreien, während Raster und Abstände diszipliniert bleiben.

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

Tokens

Farben

Helles Theme

background#FFFDF5oklch(0.993 0.011 95.159)
foreground#141414oklch(0.191 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#141414oklch(0.191 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#141414oklch(0.191 0 0)
primary#141414oklch(0.191 0 0)
primary-foreground#FFE45Coklch(0.917 0.155 97.996)
secondary#FFE45Coklch(0.917 0.155 97.996)
secondary-foreground#141414oklch(0.191 0 0)
muted#F5F1E4oklch(0.958 0.018 92.683)
muted-foreground#5C5A52oklch(0.467 0.013 95.338)
accent#FFF3B0oklch(0.958 0.086 99.199)
accent-foreground#141414oklch(0.191 0 0)
destructive#D62D20oklch(0.57 0.206 29.497)
border#141414oklch(0.191 0 0)
input#141414oklch(0.191 0 0)
ring#141414oklch(0.191 0 0)
chart-1#141414oklch(0.191 0 0)
chart-2#FF6B4Aoklch(0.707 0.187 34.078)
chart-3#3D7EFFoklch(0.622 0.204 262.151)
chart-4#22B573oklch(0.684 0.153 157.451)
chart-5#FFE45Coklch(0.917 0.155 97.996)

Dunkles Theme

background#141414oklch(0.191 0 0)
foreground#FFFDF5oklch(0.993 0.011 95.159)
card#1E1E1Eoklch(0.235 0 0)
card-foreground#FFFDF5oklch(0.993 0.011 95.159)
popover#1E1E1Eoklch(0.235 0 0)
popover-foreground#FFFDF5oklch(0.993 0.011 95.159)
primary#FFE45Coklch(0.917 0.155 97.996)
primary-foreground#141414oklch(0.191 0 0)
secondary#2A2A2Aoklch(0.285 0 0)
secondary-foreground#FFFDF5oklch(0.993 0.011 95.159)
muted#222222oklch(0.252 0 0)
muted-foreground#A8A69Coklch(0.724 0.014 97.517)
accent#2E2E2Eoklch(0.301 0 0)
accent-foreground#FFFDF5oklch(0.993 0.011 95.159)
destructive#FF6B5Eoklch(0.709 0.183 27.67)
border#FFFDF5oklch(0.993 0.011 95.159)
input#FFFDF5oklch(0.993 0.011 95.159)
ring#FFE45Coklch(0.917 0.155 97.996)
chart-1#FFE45Coklch(0.917 0.155 97.996)
chart-2#FF8A6Eoklch(0.756 0.148 34.518)
chart-3#6FA0FFoklch(0.713 0.149 262.556)
chart-4#4CD494oklch(0.78 0.15 159.16)
chart-5#FFFDF5oklch(0.993 0.011 95.159)

Schriften

Überschriften: Unbounded · 600
Fließtext: Manrope · 500
Monospace: JetBrains Mono

Schriftgrößen

display · 72/1 · -0.03emZwölf Boxkämpfer jagen Viktor
h1 · 48/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
h2 · 30/1.15 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 20/1.3Zwölf Boxkämpfer jagen Viktor
body · 17/1.55Zwölf Boxkämpfer jagen Viktor
small · 14/1.45Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 10pxmd 12pxlg 14pxxl 18px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenHard: a solid offset in the ink color, no blur; it disappears when pressed.

Layout

Maximale Breite: 1200px
Textbreite: 64ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

Launches von Startups und Indie-Produkten
Creator-Tools und Nebenprojekte
Events, Hackathons und Communities
Verspielte SaaS-Marketing-Websites

Dos and Don’ts

Gib jeder Karte, jedem Button und jedem Eingabefeld dieselbe schwarze Kontur.
Wähle pro Abschnitt eine laute Farbe.
Weiche die Schatten nicht auf; halte sie massiv und versetzt.
Mische keine Pastellverläufe und keinen Glassmorphism dazu.