Paper: Editorial-Designsystem

Web · Hell · Serifen · Editorial · Blogs und Inhalte

Paper

Ruhig, redaktionell und gut lesbar, wie eine gut gesetzte Buchseite.

Paper liest sich wie eine gut gesetzte Buchseite: Papierweiß, fast schwarze Tinte, eine kräftige Serifenschrift für Überschriften und ein einziger tiefer tintenblauer Akzent. Es setzt auf Typografie, Linien und Weißraum statt auf Schatten, Verläufe oder Dekoration.

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

Tokens

Farben

Helles Theme

background#F6F6F3oklch(0.972 0.004 106.473)
foreground#1A1C20oklch(0.226 0.008 264.395)
card#FFFFFFoklch(1 0 0)
card-foreground#1A1C20oklch(0.226 0.008 264.395)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1A1C20oklch(0.226 0.008 264.395)
primary#23408Eoklch(0.397 0.134 265.312)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E9EBF1oklch(0.94 0.008 271.326)
secondary-foreground#1A1C20oklch(0.226 0.008 264.395)
muted#EDEDEAoklch(0.945 0.004 106.476)
muted-foreground#5C5F66oklch(0.485 0.012 267.263)
accent#E6E8EEoklch(0.931 0.008 271.325)
accent-foreground#1A1C20oklch(0.226 0.008 264.395)
destructive#B42318oklch(0.5 0.182 29.513)
border#DCDDD8oklch(0.895 0.007 115.718)
input#CFD0CAoklch(0.855 0.008 114.245)
ring#23408Eoklch(0.397 0.134 265.312)
chart-1#23408Eoklch(0.397 0.134 265.312)
chart-2#2F6B57oklch(0.482 0.071 168.864)
chart-3#A9741Coklch(0.599 0.117 74.246)
chart-4#7A4E7Eoklch(0.491 0.091 323.901)
chart-5#5B6B7Doklch(0.521 0.034 251.525)

Dunkles Theme

background#14161Boklch(0.2 0.01 268.16)
foreground#ECEAE4oklch(0.937 0.008 91.486)
card#1B1E24oklch(0.235 0.012 264.3)
card-foreground#ECEAE4oklch(0.937 0.008 91.486)
popover#1B1E24oklch(0.235 0.012 264.3)
popover-foreground#ECEAE4oklch(0.937 0.008 91.486)
primary#8EA6E8oklch(0.732 0.1 268.539)
primary-foreground#14161Boklch(0.2 0.01 268.16)
secondary#242832oklch(0.277 0.019 267.979)
secondary-foreground#ECEAE4oklch(0.937 0.008 91.486)
muted#20232Aoklch(0.256 0.014 267.019)
muted-foreground#9BA0A9oklch(0.705 0.014 262.365)
accent#272B33oklch(0.288 0.016 264.291)
accent-foreground#ECEAE4oklch(0.937 0.008 91.486)
destructive#F0705Eoklch(0.694 0.162 29.892)
border#2E323Boklch(0.317 0.017 266.408)
input#383D47oklch(0.359 0.019 264.308)
ring#8EA6E8oklch(0.732 0.1 268.539)
chart-1#8EA6E8oklch(0.732 0.1 268.539)
chart-2#7DBFA6oklch(0.753 0.077 168.435)
chart-3#E0B25Eoklch(0.788 0.115 80.839)
chart-4#C29BC6oklch(0.739 0.075 323.251)
chart-5#A3B1C2oklch(0.755 0.029 253.286)

Schriften

Überschriften: Source Serif 4 · 600
Fließtext: Public Sans · 400
Monospace: IBM Plex Mono

Schriftgrößen

display · 64/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
h1 · 44/1.1 · -0.015emZwölf Boxkämpfer jagen Viktor
h2 · 30/1.2 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 22/1.3Zwölf Boxkämpfer jagen Viktor
body · 17/1.6Zwölf Boxkämpfer jagen Viktor
small · 14/1.5Zwö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

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

Ideal für

Blogs und Newsletter
Portfolios und Studios
Inhaltsgetriebene Landingpages
Dokus, die menschlich wirken sollen

Dos and Don’ts

Lass eine Serifen-Überschrift jeden Abschnitt tragen.
Trenne Inhalte mit dünnen Linien.
Füge keine Verläufe, keinen Glassmorphism und keine Schlagschatten hinzu.
Verwende nie mehr als eine Akzentfarbe pro Screen.