§ BRAND SYSTEM

Ein System. Drei Fonts. Ein Universum.

Papierretter, Save the Oceans, papier., tools., popup. — dieselbe Type-Familie, unterschiedlich gewichtet. Referenz für alle Subdomains, Print und Kollaborationen.

§ 01 — Typography

01 — Display

Space Grotesk

Headlines, Sektions-Titel, Hero-Text. Uppercase, tight tracking (-0.04em), line-height 0.88.

Anteil visuell: ~62%
fontsource, self-hosted, GDPR-safe

PAPIER RETTEN

02 — Serif Accent

Instrument Serif

Editorial-Zitate, weiche Kontraste zu Display, Manifest-Text. Italic für Betonung.

Anteil visuell: ~12%
fontsource, self-hosted

The unperfect perfection

03 — Mono / Meta

JetBrains Mono

Labels (§ 01), Metabar, Werknummern, technische Details, Buttons. Uppercase, letter-spacing 0.06em.

Anteil visuell: ~26%
fontsource, self-hosted

§ N° 01 — RESCUE

§ 02 — Farben

Ink

--ink

Primärtext, Rahmen, dunkler Grund.

Paper

--paper

Hintergrund, warmes Cream statt Reinweiß.

Magenta

--magenta

Marken-Akzent. Sparsam — Buttons, Highlights, Störer.

Acid

--acid

Sekundär-Akzent für Kontraste. Selten.

Cream

--cream

Sektions-Hintergründe, Karten.

Rule

--rule

Trennlinien, Border.

Alle Farben sind in oklch() definiert (wide-gamut, P3-fähig). Ältere Scanner erkennen sie nicht als Hex — das ist kein Bug, sondern modernes CSS.

§ 03 — Anwendung im Universum

Surface	Rolle	Font-Gewichtung
papierretter.com	Hauptseite / Katalog	Display dominant · Serif für Akzente · Mono für Meta
save-the-oceans (Subseite)	Sub-Brand — Notebook-Editionen	Wie Hauptseite, plus Teal-Akzent (#3EC7C7) statt Magenta
papier.papierretter.com	Papier-Datenbank	Mono dominant · Display für Titel · minimal Serif
tools.papierretter.com	Werkstatt-Tools (Riso, Scanner)	Mono dominant · Display für Tool-Titel
popup.papierretter.com	Events / Popup Store	Display dominant · Mono für Datum/Ort

§ 04 — Regeln

01Nie mehr als drei Fonts pro Seite. Wenn eine vierte nötig scheint, ist die Hierarchie kaputt.
02Magenta ist Akzent, nie Hintergrund für Fließtext. Höchstens 10% der sichtbaren Fläche.
03Uppercase-Display nur für Headlines und §-Labels. Fließtext bleibt Normalfall.
04Serif ausschließlich für Editorial-Momente (Zitate, Manifest, Hero-Untertitel). Kein UI-Text.
05Mono für Meta-Informationen (Werknummer, Datum, Label), niemals für Fließtext.
06Farben immer aus dem Token-Set. Kein `bg-[#hex]` oder `text-white` direkt im Component.

Brand-Scanner öffnen →