Designsystem
Grundlage ist das GSAP-Stylesystem von refero.design: Near-Black-Bühne, cremefarbene Riesentypo, nur umrandete Pill-Buttons, farbcodierte Kategorielabels, Haarlinien statt Schatten. Diese Seite hält fest, was davon unverändert gilt, wo die Vorlage einer Adressliste mit Maskottchen nicht standhält, und welche sechs Regeln dazugekommen sind.
Ohne Änderung
Diese Regeln der Vorlage sind hier wörtlich in Kraft. Sie sind der Grund, warum die Seite überhaupt nach etwas aussieht und nicht nach Standardeinstellungen.
Mit Begründung verworfen
Die Vorlage beschreibt die Marketingseite einer Animationsbibliothek. Diese Seite ist ein Verzeichnis mit 61 Einträgen, fünf Filtern und 132 illustrierten Figuren. An drei Stellen bricht das.
Mori ist eine kommerzielle Lizenz von PangramPangram. Diese Seite lädt grundsätzlich keine externen Ressourcen und hat zwei selbst gehostete Subsets ausgeliefert: Barlow Condensed und Inter. Statt eine dritte Schrift einzukaufen, übernimmt Barlow Condensed die Display-Rolle, enger als Mori und damit besser für die 224-px-Zeile, und Inter das 14–23-px-Band. Die Regel dahinter bleibt gültig: eine Display-Schrift, eine Textschrift, keine Systemvorgabe.
Für Karten gilt das hier weiter, kein einziges box-shadow im Stylesheet.
Für die Maskottchen nicht: Die Vorlage rechnet mit 3D-Formen, deren Tiefe aus internen
Verläufen kommt. Die Figuren hier sind flach gerenderte Freisteller und verlieren auf
#0e100f ihre Silhouette. Sie bekommen deshalb einen farbigen Schein in ihrer
Familienfarbe statt eines schwarzen Schattens. Das ist ein Farbakzent, keine Erhebung.
Der Schein läuft in drei gestaffelten Stufen aus: ein einzelner
drop-shadow mit großem Radius fällt linear ab und bricht am Rand seines
Unschärfefelds sichtbar ab, das sah aus wie ein aufgemalter Kasten. Und kein Behälter
um eine Figur darf overflow: hidden tragen, sonst schneidet er den Verlauf
quer durch.
Die Regel bleibt, die naheliegende Anwendung nicht. Die Seite hat zehn Sortimente. Zehn Kategoriefarben lassen sich auf dem Farbkreis nicht mehr mit 30° Abstand und gleichzeitig ausreichendem Kontrast unterbringen; gemessen kamen zwei Paare auf 6° und 17° Abstand. Statt die Palette zu verwässern, sind die zehn Sortimente auf fünf Materialfamilien gefaltet. Die Sortimentchips bleiben farblos. Daraus die neue Regel: Ist die Taxonomie breiter als fünf, falte sie. Erweitere nie die Palette.
Neu
Die Vorlage schweigt zu allem, was ein Verzeichnis braucht: Facettensuche, Leerzustand, Belegqualität, gedämpfter Text auf dunkler Fläche, Bedienung mit dem Daumen. Diese acht Regeln füllen die Lücken und halten sich dabei an die Logik der Vorlage.
| # | Erweiterung | Warum | Grenze |
|---|---|---|---|
| 1 | Ebene 2 #212120 | Karten tragen eingebettete Kästen (Tipp, Passform). Die Vorlage kennt nur zwei dunkle Ebenen; auf der zweiten verschwindet der Kasten. | Nur innerhalb einer Karte. Nie als Seitenfläche. |
| 2 | Surface 60 #a5a596 | Surface 50 (#7c7c6f) erreicht auf Canvas 4,52:1 und auf Panel 4,16:1, als Fließtextfarbe damit unter WCAG AA. Surface 60 kommt auf 7,66:1 und 7,05:1. | Surface 50 bleibt für Rahmen und deaktivierte Zustände, verschwindet aus jedem Textblock. |
| 3 | Statuskanal #ffd23f / #cfd3c4 | Die Seite muss ausweisen, wie gut ein Eintrag belegt ist. Die Vorlage hat keine Statusfarbe. | Nur Umriss und Text, nie Fläche, nie neben einer Kategoriefarbe verwechselbar. Zwei Stufen, keine dritte. |
| 4 | Maskottchen als einzige Bildklasse | Die Vorlage lässt nur 3D-Formen zu und verbietet Fotografie. Die Figuren ersetzen beides. | Genau drei Größen (72 / 132 / 200 px), immer alt="", nie Träger einer Information, die nicht auch im Text steht. |
| 5 | Filterchips mit gefülltem Auswahlzustand | Die Vorlage kennt keine Facettensuche. Ein reiner Rahmenwechsel ist als Auswahlzustand zu schwach. | Gefüllt wird in Creme mit Canvas-Text, nie in einer Kategoriefarbe. Neben dem Farbband aus Erweiterung 8 die einzige gefüllte Fläche im System. |
| 6 | Bewegungsbudget | Die Vorlage stammt von einer Animationsbibliothek und enthält trotzdem keine einzige Bewegungsregel. | Nur an Zustandswechseln, 140–180 ms, nie beim Scrollen, nie auf Bildern. prefers-reduced-motion schaltet alles auf 1 ms. |
| 7 | Wischleisten statt Umbruch | Die Vorlage kennt kein schmales Gerät. Fünf umbrechende Filtergruppen ergaben auf 390 px allein fünf Bildschirmhöhen Bedienelemente, bevor die erste Adresse kam. | Nur für Chip- und Linkreihen, nie für Inhalt. Weicher Auslauf am rechten Rand statt harter Kante, Polster für den Fokusring, Tastaturbedienung bleibt. |
| 8 | Farbband im Kartenkopf | Die Vorlage lässt Kategoriefarbe nur als Text und Umriss zu. Seit die Karte gekürzt ist und in vier Spalten steht, war die Familienzeile eine unter vielen. Als Fläche im Kopf steht sie vor dem Namen. | Der Bandtext steht in Canvasfarbe, nie in Creme: gemessen erreicht Canvas auf den fünf Familienfarben 7,44:1 bis 11,10:1, Creme nur 1,66:1 bis 2,48:1. Genau ein Band je Karte, sonst bleibt Farbe Text und Umriss. |
Werte
Fünf Farben, fünf Familien, keine Doppelbelegung. Eine der fünf trägt zusätzlich die
Signatur: Titelwort, Links, primäre Pille, Verlauf. Bis zum 21.08.2026 war das Grün;
seither das Rosa. Der Wechsel fügt keine sechste Farbe hinzu, er verschiebt nur die
Doppelrolle: --signatur zeigt auf --fam-mesh, Grün ist eine
gewöhnliche Familienfarbe geworden. Gemessen wurde gegen drei Bedingungen: mindestens
7:1 auf dem Canvas wie die übrigen Familienfarben, Helligkeit und Buntheit im Band der
Palette, genug Abstand zum bisherigen Rosa. Nebenbefund: die engste Lücke zwischen zwei
Farbwinkeln wächst dabei von 42,7° auf 59,7°, die Palette wird also leichter zu
unterscheiden, nicht schwerer. Verworfen wurden #f100cb (nur 5,09:1 und 9,5°
neben dem alten Rosa), #ff69b4 (Klischee-Hotpink) und #ff8ab5
(C 0,148, als Signatur zu blass).
Latex & Lack
#0ae448 · 11,10:1
Vorlage: Shockingly Green, seit 21.08.2026 nicht mehr die Signatur
Leder & Harness
#ff8709 · 7,93:1
Vorlage: Orangey
Mesh & Dessous
#ff77b0 · 7,75:1
Vorlage: Pink, trägt zusätzlich die Signatur
Cyber, Rave & Boots
#00bae2 · 8,29:1
Vorlage: Blue
Glitzer, Drag & DIY
#9d95ff · 7,44:1
Vorlage: Lilac
| Token | Wert | Rolle | Kontrast auf #0e100f |
|---|---|---|---|
| --canvas | #0e100f | Seitenfläche | entfällt |
| --panel | #191919 | Karten, Fuß | entfällt |
| --panel-2 | #212120 | Kasten in der Karte (Erweiterung 1) | entfällt |
| --hairline | #42433d | Trennlinien, Kartenrahmen | entfällt |
| --faint | #7c7c6f | nur Rahmen und deaktivierte Zustände | 4,52 |
| --muted | #a5a596 | gedämpfter Text (Erweiterung 2) | 7,66 |
| --cream | #fffce1 | Text, Buttonrahmen, Navigation | 18,43 |
| --status-warn | #ffd23f | nicht nachgeprüft (Erweiterung 3) | 13,22 |
| --status-thin | #cfd3c4 | nur über Verzeichnisse belegt (Erweiterung 3) | 12,52 |
| --signatur | var(--fam-mesh) | Titelwort, Links, primäre Pille; keine eigene Farbe, ein Verweis | 7,75 |
| --gradient-signatur | #ff77b0 → #ffbdd8 | einzige Farbsteigerung: der Rahmen der primären Pille | entfällt |
| --lipstick | #f100cb | dekorativ, nie Kategorie, wie in der Vorlage | 5,09 |
Barlow Condensed 600 für alles ab 34 px, Inter 400 darunter. Zwischen 23 px und 34 px liegt bewusst nichts, der Sprung ist die Vorlage.
| Rolle | Größe | Schrift | Zeile | Laufweite |
|---|---|---|---|---|
| Caption (Untergrenze) | 14 px | Inter 400 | 1,40 | −0,14 px |
| Body small | 16 px | Inter 400 | 1,40 | −0,01 em |
| Body | 19 px | Inter 400 | 1,15 | −0,01 em |
| Body large (Obergrenze) | 23 px | Inter 400 | 1,38 | −0,23 px |
| Subheading | 34 px | Barlow Condensed 600 | 1,20 | −0,34 px |
| Heading small | 44 px | Barlow Condensed 600 | 1,20 | −0,44 px |
| Heading | 66 px | Barlow Condensed 600 | 1,20 | −0,66 px |
| Heading large (Leerzustand) | 101 px | Barlow Condensed 600 | 1,00 | −1,11 px |
| Display (Bühne) | 224 px | Barlow Condensed 600 | 0,90 | −0,02 em |
Die alte Seite setzte Tags auf 10 px, Meta auf 11 px und Fuß auf 12 px. Alles unter 14 px ist ersatzlos gestrichen. Das war zugleich ein Verstoß gegen die Vorlage und ein Lesbarkeitsproblem.
Bausteine
nicht nachgeprüft, vor der Anfahrt anrufen
nur über Branchenverzeichnisse belegt
nur HTTP, unverschlüsselt
Latex & Lack
Latex-Atelier · €€€
Kurzbeschreibung in Body small. Sichtbar bleibt, was die Auswahl entscheidet.
Musterstraße 1, 1010 Wien
Sackgasse
Nichts in dieser Kombination.Filter lockern. Oder DIY: Baumarkt-Kette plus Physiotape erfüllt den Dresscode auch.
Die Vorlage erlaubt eine cremefarbene Fläche als seltenen, bewussten Callout. Auf der ganzen Seite ist das genau ein Element: die Checkliste. Die alte Fassung hatte 33 helle Karten auf dunklem Grund, also das Gegenteil von selten.
Checkliste
Herkunft
