Noir: Dunkles Portfolio-Designsystem

Web · Dunkel · Serifen · Minimalistisch · Portfolio

Noir

Schwarz, Knochenweiß und eine riesige Serifenschrift. Das Werk ist die einzige Farbe.

Noir nimmt die Farbe weg, damit die Arbeit sprechen kann: schwarze Seiten, knochenweiße Schrift, eine riesige Instrument Serif für Namen und Projekttitel und eckige Bildrahmen. Am besten wirkt es im Dunkelmodus; der knochenweiße Hellmodus passt zu druckähnlichen Case Studies.

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

Tokens

Farben

Helles Theme

background#F4F2EEoklch(0.962 0.006 84.566)
foreground#0E0E0Eoklch(0.164 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#0E0E0Eoklch(0.164 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0E0E0Eoklch(0.164 0 0)
primary#0E0E0Eoklch(0.164 0 0)
primary-foreground#F4F2EEoklch(0.962 0.006 84.566)
secondary#E7E4DEoklch(0.92 0.009 84.574)
secondary-foreground#0E0E0Eoklch(0.164 0 0)
muted#EAE7E1oklch(0.929 0.009 84.574)
muted-foreground#5F5C57oklch(0.476 0.009 80.7)
accent#E2DFD8oklch(0.904 0.01 87.475)
accent-foreground#0E0E0Eoklch(0.164 0 0)
destructive#A3261Doklch(0.472 0.163 28.986)
border#D3CFC7oklch(0.855 0.012 84.582)
input#C2BDB4oklch(0.8 0.014 82.4)
ring#0E0E0Eoklch(0.164 0 0)
chart-1#0E0E0Eoklch(0.164 0 0)
chart-2#6E6A63oklch(0.526 0.012 81.78)
chart-3#A39D93oklch(0.698 0.016 80.689)
chart-4#3F3C38oklch(0.358 0.008 75.303)
chart-5#A3261Doklch(0.472 0.163 28.986)

Dunkles Theme

background#0E0E0Eoklch(0.164 0 0)
foreground#F2EFE9oklch(0.953 0.009 84.573)
card#161616oklch(0.2 0 0)
card-foreground#F2EFE9oklch(0.953 0.009 84.573)
popover#161616oklch(0.2 0 0)
popover-foreground#F2EFE9oklch(0.953 0.009 84.573)
primary#F2EFE9oklch(0.953 0.009 84.573)
primary-foreground#0E0E0Eoklch(0.164 0 0)
secondary#1F1F1Foklch(0.239 0 0)
secondary-foreground#F2EFE9oklch(0.953 0.009 84.573)
muted#1A1A1Aoklch(0.218 0 0)
muted-foreground#9C978Foklch(0.678 0.013 79.764)
accent#242424oklch(0.26 0 0)
accent-foreground#F2EFE9oklch(0.953 0.009 84.573)
destructive#F07167oklch(0.697 0.159 26.504)
border#2A2A2Aoklch(0.285 0 0)
input#353535oklch(0.329 0 0)
ring#F2EFE9oklch(0.953 0.009 84.573)
chart-1#F2EFE9oklch(0.953 0.009 84.573)
chart-2#9C978Foklch(0.678 0.013 79.764)
chart-3#6A665Foklch(0.512 0.012 81.778)
chart-4#C9C4BBoklch(0.822 0.014 82.4)
chart-5#F07167oklch(0.697 0.159 26.504)

Schriften

Überschriften: Instrument Serif · 400
Fließtext: Manrope · 400
Monospace: JetBrains Mono

Schriftgrößen

display · 120/0.9 · -0.03emZwölf Boxkämpfer jagen Viktor
h1 · 72/0.95 · -0.02emZwölf Boxkämpfer jagen Viktor
h2 · 40/1.05 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 22/1.3Zwölf Boxkämpfer jagen Viktor
body · 16/1.6Zwölf Boxkämpfer jagen Viktor
small · 12/1.5 · 0.08emZwö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: 56ch
Spalten: 12
Spaltenabstand: 16px

Ideal für

Fotografen und Filmemacher
Designer und Art Directors
Kreativstudios
Persönliche Websites und Case Studies

Dos and Don’ts

Eröffne jede Seite mit einem riesigen Serifen-Titel.
Nummeriere Projekte und nenne Jahr, Kunde und Rolle.
Füge keine Akzentfarbe hinzu; die Bilder liefern die Farbe.
Setze Bilder nicht in abgerundete oder mit Schatten versehene Rahmen.