Compaytence
Design-Leitfaden
Jeder Token, jede Komponente und jede Regel im v2-System, in Arbeitsgröße dargestellt. Klicken Sie auf ein Farbfeld, um dessen Hex-Wert zu kopieren.
Das hier inline eingebundene Stylesheet ist system.css wortgetreu und wurde beim Build kopiert. Jede Farbfeldfüllung, jedes Kontrastverhältnis und jeder OKLCH-Wert wird von build.py aus einem Hex-Wert berechnet, sodass eine Beschriftung nicht von der Farbe darüber abweichen kann. Wenn sich das System ändert, führen Sie den Build erneut aus, statt diese Datei zu bearbeiten.
Warum das System existiert
Nicht, um gut auszusehen. Sondern damit es nicht installiert worden sein kann.
Ein Audit im August 2026 ergab, dass 13 von 13 Akzent- und Textwerten im vorherigen System wortwörtliche Tailwind-Standardwerte waren und dass unsere eigene Produktwebsite mit shadcn initialisiert worden war ("style": "new-york"). Ein Wettbewerber aus einer nicht verwandten Branche teilte 9 unserer 12 charakteristischen Gestaltungsmittel bei nahezu identischen Werten, weil beide Websites aus derselben Registry zusammengestellt wurden.
Jeder Wert muss auf eine Quelle zurückzuführen sein. Wenn die einzige Antwort auf „Warum diese Zahl?“ „Sie sah richtig aus“ lautet, ist es Drift.
Dieser Test ersetzte den älteren, „Könnte das installiert worden sein?“, weil Negativlisten in einem Zyklus von ungefähr zwölf Monaten veralten. Das Erkennungszeichen von 2024 waren ein violetter Verlauf und Inter. Das Erkennungszeichen von 2026 sind warmes Creme und eine Serifenschrift für Displays – der Fluchtweg vom Erkennungszeichen von 2024, der weit genug verbreitet übernommen wurde, um zum neuen zu werden. Herleitung veraltet nicht.
Quelle: design-system.md §0, Audit August 2026.
Schreiben Sie niemals ein Verbot ohne einen positiven Ersatz. Sagt man einem Modell „Kein Creme verwenden“, erzeugt es keine Vielfalt, sondern wechselt zu einer anderen festen Palette. Negation verlagert einen Attraktor, statt ihn aufzulösen. Jede Regel in diesem Leitfaden nennt stattdessen den verwendeten Token, die Zahl oder die Schrift.
Eine blaue Leiter, ein Farbton
Das PAY-Blau der Wortmarke ist der Ausgangspunkt. Jedes andere Blau ist dieselbe Farbe, heller oder dunkler gemacht.
Stufe 50 ist das Blau der Wortmarke selbst, gemessen bei OKLCH-Farbton 245.56. Über alle elf Stufen hinweg bleibt der Farbton innerhalb von 1.6 Grad konstant. Chroma erzählt eine andere Geschichte: Sie erreicht am Ausgangspunkt ihren Höchstwert und fällt zu beiden Enden hin ab, weil sRGB am hellen Ende keine Sättigung halten kann. Die Leiter ist eine Helligkeitsleiter mit festgelegtem Farbton; das ist die relevante Eigenschaft.
Kontrast wird in jedem Theme gegen --paper gemessen. Grün erfüllt 4.5:1, Grau erfüllt 3:1, Rot erfüllt keines von beidem. Berechnet am 13. August 2026.
#33A9FF misst auf dem hellen Grund 2.42:1. Auf einer hellen Fläche ist es nur eine Füllung. Niemals Text, niemals eine Haarlinie, die Sie lesen müssen. Auf dem dunklen Grund erreicht derselbe Hex-Wert 7.51:1 und kann als Text gesetzt werden. Diese Asymmetrie ist der ganze Grund, warum es eine Leiter statt eines einzelnen Hex-Werts gibt.
Dieser Text ist #33A9FF auf Papier. Bei 2.42:1 scheitert er an jeder existierenden Barrierefreiheitsuntergrenze.
Tun Sie das niemalsDerselbe Hex-Wert als Füllung hinter Weiß und als Ausgangspunkt der ganzen Leiter.
Das ist seine AufgabeDaher wählt niemand je eine Stufe von Hand aus. Sechs Rollen-Token lösen sich je Theme zur richtigen Sprosse auf, und das Markup nennt immer nur die Rolle.
| Token | Aufgabe | Hell | Verhältnis | Dunkel | Verhältnis |
|---|---|---|---|---|---|
--mark |
Links, Betonung | Stufe 70 #0077bd |
4.57 | Stufe 30 #81c5ff |
10.34 |
--mark-deep |
stärkere Betonung | Stufe 80 #005990 |
7.07 | Stufe 20 #b0daff |
13.02 |
--mark-solid |
FÜLLUNG auf hell, Text auf dunkel | Stufe 50 #33a9ff |
2.42 | Stufe 50 #33a9ff |
7.51 |
--mark-tint |
getönte Flächen | Stufe 05 #edf6ff |
1.04 | Stufe 95 #002e4d |
1.36 |
--fig |
Display-Zahlen, nur >=24px | Stufe 60 #0089d9 |
3.59 | Stufe 40 #5fb7ff |
8.83 |
--fig-inline |
Zahlen im Fließtext | Stufe 70 #0077bd |
4.57 | Stufe 30 #81c5ff |
10.34 |
--fig erreicht auf dem hellen Grund 3.59:1 und ist daher nur über ungefähr 24px zulässig. Es zur Standardfarbe einer universellen Klasse für Zahlen zu machen, bedeutet, dass jede Indexziffer und jede Inline-Statistik stillschweigend AA verfehlt – genau das ist einmal passiert. Ein zweistufiges System für Zahlen muss standardmäßig die sichere Stufe verwenden und die Display-Stufe optional machen.
Führen Sie niemals einen zweiten Akzentfarbton ein. Messing wurde für Zahlen ausprobiert und abgelehnt, überlebte dann aber unbemerkt in einer atmosphärischen Lasur mit Chroma 0.086 für zwei Entwürfe. Wenn eine Farbe bei ungefähr mehr als 0.02 Chroma liegt und nicht dieses Blau ist, ist sie ein Fehler. Es gibt zwei Ausnahmen, und beide müssen auditierbar gemacht werden, statt implizit zu bleiben: Marken von Drittanbietern behalten die Farbe ihres Eigentümers und werden so gekennzeichnet, dass das Audit das Attribut, niemals den Hex-Wert, auf die Positivliste setzt; und eine Produktreplik, die einem Nutzer zeigt, was er bei der Anmeldung tatsächlich sieht, behält die eigenen Token des Produkts, die in beide Richtungen zugesichert werden.
Warmes Papier, kühler Akzent
Beide Themes sind warm. Der Akzent ist das einzig Kühle auf der Seite.
Das Blau liegt beim Farbton 245.56, sein exaktes Komplement ist also 65.56. Die Neutralfarben werden von dieser Zahl abgeleitet. Damit bestimmt eine Messung beide Hälften des Systems, und die Antwort auf „Warum dieser Farbton?“ ist Arithmetik statt Geschmack. Chroma und Helligkeit bestimmen die Rolle jeder Neutralfarbe.
Gemessen erstrecken sich die zwölf Neutralfarben über 62.35 bis 75.41 Grad. Das ist keine Drift in den Farben. Bei Chroma 0.005 bis 0.013 kann 8-Bit-sRGB keinen Farbton adressieren: Eine Stufe auf einem einzelnen Kanal verschiebt den gemessenen Farbton um 3.5 bis 15.8 Grad. Jeder Wert liegt also bereits innerhalb eines Quantisierungsschritts vom Ziel, und eine erneute Kodierung bei exakt 65.56 liefert denselben oder einen benachbarten Hex-Wert. Die überprüfbare Form der Regel lautet Chroma bei oder unter 0.013, Farbton zwischen 55 und 90. Beides gilt für alle zwölf, und beides ist widerlegbar.
Führen Sie jeden Rahmen über rgba(var(--rule-c), a). Der Token ist keine Farbe, sondern ein RGB-Tripel für die Komposition: 31,27,22 auf hell, 233,230,225 auf dunkel, bei Alpha 0.09 bis 0.45. Codieren Sie niemals ein Grau fest ein und verwenden Sie niemals einen neutral-schwarzen Schatten. Die helle Schattentönung ist ein warmes 44,32,21.
--paper-2 und --wash sind ausschließlich Flächentönungen. --graphite, --mark, --risk und --good fallen auf dem ersten auf ungefähr 4.3:1 und auf dem zweiten auf 3.9:1, was unter der Untergrenze liegt. Wenn Sie ein Band in einem der beiden gestalten, wechselt dessen Text zu --ink-soft oder dunkler.
Semantik, zwei davon
Es gibt bewusst keine bernsteinfarbene Warnung. Bernstein liegt nahe beim Farbton 70 und kollidiert mit dem warmen Grund; genau diesen Fehler machte der ausgemusterte Messing-Akzent. Alles, was eine Warnung gewesen wäre, ist entweder ein Risiko oder eine schlichte Akzentnotiz.
Drei dieser vier liegen nur um 0.04 oder weniger über der 4.5:1-Grenze. Sie haben keinen Spielraum mehr. Nicht anpassen.
Drei Schriften, feste Rollen
Die Rollen sind keine Präferenz. Wenn eine Schrift die Aufgabe einer anderen übernimmt, ist das ein Fehler.
Display, Abschnittstitel, Eyebrows, Folio und alle Zahlen. Nie Fließtext, nie ein UI-Label.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 und ihre Kursive
Fließtext, UI, Kartentitel, Tabellenköpfe, Buttons. Nie Display, nie Zahlen.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Nur technische Zeichenfolgen: Code, IDs, Chargennummern, Farbfeld-Labels. Niemals ein Label, ein Eyebrow oder ein Kolumnentitel.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Geist und Geist Mono sind ausgemustert: Sie sind Vercels eigene Hausschriften, und die Uniform der Plattform zu tragen, war die Hälfte des Problems. Inter, Roboto, Arial, Poppins, Montserrat, Space Grotesk und jeder Systemschrift-Display-Stack sind aus demselben Grund in größerem Maßstab ebenfalls ausgeschlossen. Danach greift ein Generator, wenn niemand eine Entscheidung getroffen hat.
Sie ist eine der vier am häufigsten als „KI-Schrift“ markierten Schriften, und warmes Creme plus Serif-Display ist der dokumentierte Hausstil der Frontier-Modelle von 2026. Die Verteidigung ist nicht die Schrift, sondern die Aufgabe, die wir ihr geben: Zahlen. Eine tabellarische Serifenzahlen-Spalte in Blau ist ein Gestaltungsmittel mit einer Population von eins. Ein kursives Serif-Wort, das zur Zierde in eine Überschrift gesetzt wird, ist der Attraktor. Der Schwerpunkt der Serifenschrift bleibt bei Zahlen.
Die Skala: 1.25 von einer 17px-Basis
Neun Stufen, und sie bilden den gesamten Wortschatz. Schrift wird vergleichend beurteilt, daher funktioniert hier ein langsames Verhältnis. Raum wird isoliert beurteilt und erhält ein schnelleres.
Serifenkursive: ein System oder nichts
Eine übergroße Serifenschrift mit einem kursiv gesetzten Wort ist der universelle Hero von KI-Startups, und dies ist die eine Stelle, an der diese Display-Schrift von einem Markenzeichen zur Zierde werden könnte. Was sie verräterisch macht, ist, dass sie meist ein Standard ist, einmalig zur Zierde eingesetzt, ohne Grund dahinter.
Ein kursives Serif-Wort, das in eine Überschrift gesetzt wird, weil es dort gut aussah. Einmalig, nicht erklärbar, dekorativ.
Kein SystemEin Akzentmittel, das auf eine benannte Quelle zurückführbar ist, systematisch über eine Fläche angewendet wird und im Inhaltsmodell als Daten geführt wird, statt pro Instanz manuell markiert zu werden.
Ein SystemIn Dokumenten gibt es kein solches System, daher sind vier zugelassene Kursivrollen der gesamte Wortschatz, und es gibt keine fünfte: .doc-title em (eine ganze Titelzeile, niemals ein herausgelöstes Wort), .tag, .note-l und .quote. Hervorhebung innerhalb einer Dokumentüberschrift entsteht durch Größe, Gewicht, Farbe oder Position. Verlaufsfüllung auf Text ist überall verboten, auch bei einem zugelassenen Akzentwort: Die Kursive markiert es bereits, und der Verlauf fügt nur ein verräterisches Merkmal hinzu.
Der Eyebrow und was an die Stelle des Mono-Labels getreten ist
Der Eyebrow ist Instrument Serif kursiv, in Satzschreibung, Graphit, mit einem 26px-Haarlinienpräfix. Er trägt die Art des Abschnitts; die Ziffer trägt seine Position. Wenn ein Eyebrow den Titel nur wiederholen würde, bleibt er weg. Der alte Mono-Eyebrow in Versalien mit Laufweite ist tot und darf in keiner Form zurückkehren.
.label — Archivo, --t-xs, Gewicht 600, Laufweite .09em, Versalien, Graphit. Dies ist die table th-Gestaltung, zur Klasse erhoben, und sie ist das einzige noch zugelassene Mittel mit Versalien und Laufweite. Für eine Spaltenüberschrift verwenden.
.tag — Serifenkursive, Satzschreibung, Graphit, wenn der Text eine Formulierung statt eines Feldnamens ist. Greifen Sie zuerst zu diesem.
Zahlen sind die Marke
Ein Gestaltungsmittel mit einer Population von eins. Es lässt sich nicht als Muster erkennen, weil es sonst niemand macht.
Jede Zahl wird in der Display-Serifenschrift, in Blau, mit font-variant-numeric: tabular-nums lining-nums gesetzt und überall dort rechtsbündig ausgerichtet, wo sie in einer Spalte steht. Im Fließtext läuft .fig-inline etwas größer als das umgebende Archivo, damit es auffällt, ohne fett zu werden.
Ohne die Gestaltung: Wir haben 20 Millionen Dollar über 450 Sperren für 2,500 Unternehmen zurückgewonnen und arbeiten mit 30 Zahlungsabwicklern.
Mit ihr: Wir haben $20M über 450 Sperren für 2,500 Unternehmen zurückgewonnen und arbeiten mit 30 Zahlungsabwicklern.
Tabellarische Zahlen machen eine Spalte lesbar: Jede Ziffer nimmt dieselbe Breite ein, sodass die Zahlen unabhängig von ihrem Wert vertikal ausgerichtet sind. Die Rechtsbündigkeit erledigt den Rest.
Gleiche Klasse wie ein fehlendes Logo. Eine Zahl in einer Statistik-Karte ist eine Behauptung und trägt daher einen echten Wert, einen Nenner, sofern vorhanden, ein Datum und ihre Herkunft. Runde Zahlen ohne Quelle — „10,000+ Händler“, „99.9% Verfügbarkeit“, „3x schneller“ — sind das meistzitierte verräterische Inhaltsmerkmal überhaupt. Platzhalterzahlen dürfen in einem Gerüst existieren. Sie dürfen niemals veröffentlicht werden.
Alles leitet sich von 30px ab
Der Fließtext ist 17px auf einer 30px-Grundlinie, also ist eine Zeile eine Einheit.
Jeder Abstandswert ist ein Bruchteil oder ein Vielfaches dieser Zeile, und jeder ist ein ganzer Pixelwert. Ein geometrisches Verhältnis wurde erwogen und verworfen: 1.25 benötigt vierzehn Stufen, um 4 bis 100px abzudecken, und setzt 24 neben 30, was wie ein Versehen wirkt, und 1.5 liefert ab der dritten Stufe Bruchwerte.
Die blauen Linien hinter diesem Absatz werden alle 30 Pixel gezeichnet. Der Text sitzt auf ihnen, weil --lh-body 1.765 ist und 17 × 1.765 gleich 30.005 ist. Eine Zeile Fließtext ist genau eine Einheit der Abstandsskala; deshalb kann die Skala als Bruchteile einer Zeile statt als willkürliche Menge von Zahlen, die jemandem gefielen, angegeben werden.
Abstand zwischen Textblöcken verwendet ganze Grundlinien: 30, 60, 90. Innenabstand innerhalb einer Komponente verwendet die Bruchteile: 6 bis 24. Nähe trägt Bedeutung, daher müssen sich Abstände unterscheiden, wo sich die Gruppierung unterscheidet. Überall derselbe Abstandswert ist ein Fehler bei der Gruppierung.
Geometrie, Glas, Körnung, Halos
Eine zweistufige Formskala, eine Haarlinienstärke und genau zwei atmosphärische Elemente.
Ecken: zwei Stufen, niemals eine dritte
Ein Steuerelement, das eine Stufe enger als sein Container sitzt, wirkt bewusst gestaltet statt voreingestellt. Ein Radius für alles ist das Erkennungszeichen des Soft-Blob-Looks, und die Lösung kostet nichts.
--r-lgKarten, Tabellen, Notizen, Panels
--r-ctlButtons, Eingabefelder, Umschalter
--r-xsnur Inline-Code
Immer alle vier Ecken. Elliptische, abgeschrägte, Squircle-, skalierte und asymmetrisch codierte Ecken wurden jeweils gebaut und verworfen und bleiben verworfen. --r-sm ist ausgemustert. Niemals zu einem rohen px-Wert greifen: Die zwei Tokens sind der gesamte Wortschatz.
--hair ist überall 1px und wird mit rgba(var(--rule-c), .09 bis .45) eingefärbt. Es gibt keine zweite Rahmenstärke im System.
Eine transparente Karte auf dem warmen Grund, mit backdrop-filter: blur(16px) saturate(1.25). Beibehalten statt verworfen, denn Körnung darüber und Halos dahinter machen sie zu einem Materialstapel und nicht zu einer für Glanz angewendeten Unschärfe.
Auch über den Karten, bei z-index 9. Darunter würde jede Karte sie auslöschen und die beiden würden sichtbar gegeneinander arbeiten. Obenauf verhält sie sich wie Filmkorn und vereint die Fläche. Eine gekörnte Oberfläche pro flacher Seite und niemals eine gekörnte Box, die in einer anderen verschachtelt ist.
Das ist das gesamte atmosphärische Budget. Kein dritter Halo, kein Aurora-Feld, kein Mesh-Verlauf und keine Glühkugel irgendeiner Kantengestaltung. „Unscharf“ wäscht keinen davon rein.
Körnung muss auf der Ebene liegen, die den Farbton zeichnet, niemals auf der Abschnittsbox. In einem Brücken- oder Bleed-System setzt sich die Farbe eines Bands über seinen eigenen Abschnitt hinaus fort; ist die Körnung auf den Abschnitt begrenzt, endet sie, während die Farbe weiterläuft, und zieht an jeder Grenze eine harte Linie: auf Papier mit Δ10/255 und auf dunklem Grund mit Δ22/255 gemessen. Die Seite wirkt dann wie ein Stapel Platten statt wie eine Oberfläche.
Die Karte und wann keine verwendet werden sollte
Die Karte ist der Haus-Container. Sie ist nicht der Hausstandard.
Eine Karte sagt: „Vergleiche mich mit meinen Geschwistern.“
Verwenden Sie eine Karte, wenn die Elemente tatsächlich gleichrangig sind und der Leser sie gegeneinander abwägt: drei Pläne, drei Ansätze, drei Ergebnisse. Alles, was der Leser einfach der Reihe nach liest, steht ohne Container auf dem Grund: als Titel, Zeile und mit einer Haarlinie zwischen den Zeilen. Eine Seite, auf der jeder Block ein Kartenraster ist, wirkt wie Rauschen, ganz gleich, wie gut die Karten sind. In einem Serviceabschnitt mit vier Routen senkte dies die Zahl der Kartenflächen von etwa 24 auf 9.
Dasselbe gilt für Belegbilder und herausgehobene Zitate: Ein Screenshot, der bereits seinen eigenen Rahmen und Schatten mitbringt, braucht keine Karte darum, und ein Zitat liest sich als Schrift auf einer Linie besser als eingerahmt. Die vier Blöcke in Abschnitt 07 oben sind genau aus diesem Grund kartenfreie Zeilen.
Die vier Kartentypen
Beschriftung links, Zahl rechts. Die Ledger-Zeile, eingerahmt.
64chEin Tag, ein Titel, eine Textzeile und ein Link, dessen Pfeil sich mit der Karte bewegt.
Zurück nach oben →Fahren Sie mit der Maus über eine der Karten oben. Im Ruhezustand hat sie eine Haarlinie und keinen Schatten. Die Erhöhung kommt nur bei Interaktion, und sie kommt in genau zwei Ebenen.
Die Karte steigt um 3px und erhält aus dem Nichts --shadow-lift. Sie rückt physisch näher.
Ein weiches Highlight folgt dem Zeiger über die Oberfläche, bei Alpha .035. Teure Materialien fangen Licht ein. Diese Ebene verkauft das Material.
Es wurde mit .14 ausgeliefert und wirkte wie ein Scheinwerfer, der dem Cursor folgt, statt wie ein Material, das Licht einfängt. Das Zeichen, dass es richtig ist: Sie bemerken es, wenn sich der Zeiger bewegt, und können es nicht genau benennen, wenn er stoppt. Jede Oberfläche teilt einen Block, daher stimmt diese eine Zahl die ganze Seite ab. Stimmen Sie sie niemals pro Komponente neu ab.
Eine dritte Ebene, eine blaue Linie, die über die obere Kante wischt, wurde gebaut und entfernt. Da der Schimmer bereits den Akzent trägt, war sie ein Signal zu viel und ließ die Karte sich ankündigen statt reagieren. Eine Haarlinie und einen diffusen Schatten im Ruhezustand auszuliefern, wurde aus demselben Grund verworfen: Es werden zwei Erhöhungssysteme gleichzeitig betrieben.
Die Doppellinie
Ein Ledger schließt eine Spalte nie mit einer einzelnen Linie. .total-line zeichnet zwei Haarlinien im Abstand von 4px über einer Summe. Es kostet ein Pseudo-Element, gehört sonst niemandem und bedeutet etwas. Verwenden Sie es nur über einer echten Summe, nie als Dekoration.
Der Rest des Katalogs
- Punkteliste: Eine 6×1px-Linie markiert jedes Element, niemals ein Aufzählungszeichen.
- Tabelle: Numerische Zellen erhalten sowohl
.nzur Rechtsausrichtung als auch.num, um die Zahl in der Serifenschrift zu setzen. - Hinweis: nur zwei Semantiken, Risiko und Gut.
- Herausgehobenes Zitat: Display-Serife, kursiv, auf 28ch begrenzt, auf einer Haarlinie statt in einer Box.
| Messwert | Vor v2 | Nachher |
|---|---|---|
| Tailwind-Standardwerte | 13 | 0 |
| Vercel-Schriften | 2 | 0 |
| Akzentfarbtöne | 2 | 1 |
| Radius-Stufen | 1 | 2 |
| Einblenddauern | 1 | 2 |
Quelle: Changelog von design-system.md, 3. August und 12. August 2026.
Eine Karte in einer Karte ist visuelles Rauschen. Wenn Inhalt innerhalb einer Karte einen Rahmen braucht, braucht er eine Linie oder ein getöntes Band, keine zweite Karte.
Zwei Gewichtungen, und nichts darunter
Wenn alles identisch erscheint, ist es Dekoration. Eine Gewichtung nach Bedeutung lässt Bewegung Bedeutung tragen.
| Klasse | Weg | Dauer | Verwenden für |
|---|---|---|---|
.rise | 18 | 0.7 | Abschnittsüberschriften, alles, was einen Block eröffnet |
.rise-sub | 10 | 0.5 | Karten, Raster, Tabellen innerhalb eines Abschnitts |
| keine | — | — | Punkte, Beschriftungen, Inline-Elemente, kleine Steuerelemente |
Das führende Element kündigt den Block an; der Nachfolger setzt sich darunter. Fügen Sie keine dritte Dauer hinzu und versehen Sie nichts Kleines mit einer Einblendung. Ein Element, das ohne Grund allein erscheint, ist derselbe Fehler, wie wenn alles identisch erscheint.
Die zwei Easing-Kurven
Ein Paar, und nirgends Sprung oder Elastizität. Jede manuell gewählte Easing-Kurve im gemessenen Korpus ist ein Ease-out, und genau das sind beide.
cubic-bezier(.2,.7,.2,1)
Übergänge für Farbe, Hintergrund und Rahmen.
cubic-bezier(.16,1,.3,1)
Einblendungen, Kartenanhebung, der wandernde Pfeil.
Die Norm im gemessenen Korpus für einen Hover ist eine Farbänderung: Hintergrund 33.8%, Farbe 24.4%, Rahmen 12.3%, Transform nur 6.6%. Unsere zweischichtige Anhebung ist auf einer Karte richtig und auf einem Link oder einer Tabellenzeile falsch; diese brauchen Farbe bei etwa 200ms. Der Median der Übergänge pro Website beträgt 250ms, daher sind --dur-lead bei 0.7s und --dur-sub bei 0.5s Werte des obersten Dezils: richtig für Einblendungen, falsch in der Nähe eines Hovers.
Quelle: motion-canon.md, ausgeliefertes CSS von 1,199 Websites, 13. August 2026.
- Animieren Sie nur
transformundopacity. Niemalswidth,height,paddingodermargin. Layout-Eigenschaften machen 5.7% aller Übergangsdeklarationen im Korpus aus; diese Regel ist also bestätigt, nicht nur behauptet. - Kein interaktives Element darf beim Hover nur seine Opazität ändern.
- Keine dekorativen pulsierenden Punkte, keine falschen blinkenden Cursor, keine automatisch scrollenden Laufbänder. Animieren Sie nur, was sich tatsächlich ändert.
- Drei Einblend-Fallbacks, alle verpflichtend: reduzierte Bewegung, ein fehlender
IntersectionObserveroder ein ausgeblendeter Tab blenden alles sofort ein.
Beide Themes, gemessen
4.5:1 für Text, 3:1 für Display-Zahlen über etwa 24px. Jeder Wert unten wurde aus dem ausgelieferten Hex-Wert berechnet, nicht aus einer Notiz kopiert.
| Token | Aufgabe | Hell | Dunkel | Untergrenze |
|---|---|---|---|---|
--ink |
Überschriften | 16.31 | 17.74 | 4.5 |
--ink-soft |
Fließtext | 7.93 | 15.38 | 4.5 |
--graphite |
gedämpfter Text, Eyebrow | 4.66 | 6.12 | 4.5 |
--mark |
Links, Betonung | 4.57 | 10.34 | 4.5 |
--fig-inline |
Zahlen im Text | 4.57 | 10.34 | 4.5 |
--fig |
Display-Zahlen >=24px | 3.59 | 8.83 | 3.0 |
--mark-solid nur Füllung |
FÜLLUNG auf hell; Text auf dunkel | 2.42 | 7.51 | 4.5 |
--risk |
Fehlerzustände | 4.54 | 4.53 | 4.5 |
--good |
Bestätigungen | 4.54 | 5.16 | 4.5 |
Verhältnisse gegenüber --paper in jedem Theme. Relative WCAG-2.1-Luminanz, berechnet am 13. August 2026. Die ausgelieferten Untergrenzen des Systems sind 3.59:1 auf hell und 4.53:1 auf dunkel.
--figbei 3.59:1 ist nur über etwa 24px zulässig. Jede ausgelieferte Verwendung qualifiziert sich: die Statistikzahl bei 51.9px, die Abschnittsziffer, Zeilenzahl und Summenzahl bei 33.2px.- Sichtbare
:focus-visible-Ringe, 2px in--mark, mit 3px Abstand. Navigieren Sie mit Tab durch diese Seite, um sie zu sehen. - Eigenständige Steuerelemente sind mindestens 44px groß. Inline-Links in Fließtext sind ausgenommen; ein
.card-linknicht. prefers-reduced-motionwird berücksichtigt, und das Theme wird vor dem ersten Rendern angewendet.- Inhalt darf niemals von einem Animationsframe abhängen. Das ist auch eine Suchanforderung: Ein Crawler sieht die Seite ohne Benutzerinteraktion, daher wird einklappbarer Inhalt in das DOM gerendert und per CSS eingeklappt, nie erst beim Klick eingebunden.
78.6% der gemessenen Websites schreiben mindestens einmal outline:none, und 26.5% tun dies, ohne jemals :focus-visible zu definieren. 12.7% haben überhaupt kein Fokus-Styling. Reduzierte Bewegung ist schlechter: Nur 39.8% der Websites enthalten die Query, und nach Plattform fällt dies auf 14.4% bei Webflow und 2.3% bei Framer, zwei Websites von 87. Jede Compaytence-Oberfläche, die auf Framer oder Webflow gebaut ist, braucht diese Query von Hand.
Quelle: motion-canon.md, 13. August 2026.
In einem ausgeblendeten Vorschau-Tab liefert getComputedStyle veraltete Werte für alles mitten in einer Transition, und ein erzwungener Reflow hilft nicht. Injizieren Sie vor der Kontrastmessung *,*::before,*::after{transition:none!important}. Andernfalls meldet ein Theme-Wechsel die Farben des vorherigen Themes, und jede Messung ist falsch.
Warum dies nach uns aussieht
Am 13. August 2026 wurden 1,290 ausgelieferte Designsysteme maschinell anhand angewendeten CSS gemessen. Die Zahlen unten sind das Ergebnis.
Quelle: styles.refero.design, 1,290 anhand angewendeten CSS gemessene Systeme; anti-patterns.md §9 und website-builder/references/design-canon.md, 13. August 2026.
Zwei weitere Erkenntnisse haben das System geschärft, statt es zu bestätigen. Fett ist ein stärkeres Signal als Radius: 46.2% dieser Websites überschreiten nie Gewichtung 600, und 36.6% schreiben eine Anti-Fett-Regel vor. Hierarchie entsteht durch Größe, Raum und Farbe; daher ist eine Überschrift mit Gewichtung 700 ein verlässlicherer Marker für ein unbedachtes System als jede Palettenwahl. Und negatives Tracking ist keine Hygiene: Etwa die Hälfte des Korpus verwendet keines, auch nicht für Display-Schrift. Setzen Sie Tracking nach Größenband und mit einem genannten Grund ein – oder gar nicht.
Lassen Sie keinen warmen Akzent auf das warme Papier. Nicht in einer Illustration, nicht in einer Diagrammreihe, nicht in einer Hover-Tönung, nicht in einer atmosphärischen Fläche. Das ist der eine Schritt, der eine 2.6%-Position in eine 77.3%-Position zusammenfallen lässt, und genau der bereits dokumentierte Fehlermodus: Messing blieb in einer Fläche mit Chroma 0.086 über zwei Entwürfe unbemerkt. --risk ist die genehmigte Ausnahme, ausschließlich auf Fehlerzustände beschränkt.
Die meisten dieser Merkmale waren von 2022 bis 2024 menschliche Designtrends mit benannten Beispielen, bevor die Generatoren überhaupt brauchbar waren. Was sich geändert hat, ist nicht das Vokabular, sondern dass der Durchschnitt kostenlos produziert werden konnte. Die eigentliche Diagnose lautet „niemand hat entschieden“, nicht „eine Maschine hat es gemacht“: Ein Mensch, der standardmäßiges shadcn ausliefert, erzeugt dasselbe Artefakt. Wenden Sie diese Liste auf unsere eigene Arbeit an.
Die Streichliste
Dauerhaft ausgeschlossen. Wenn eines davon auftaucht, ist es ein Rückschritt, keine Option.
- K-01Standardwerte der Tailwind-Farbpalette und jedes Blau, das nicht auf der Leiter liegt
- K-02Geist, Geist Mono, Inter, Roboto, Arial, Poppins, Montserrat, Space Grotesk, Display-Schrift in Systemschrift
- K-03Gesperrte Mono-Großbuchstaben-Eyebrows und Mono für jedes Label oder jeden Kolumnentitel
- K-04Ein zweiter Akzentfarbton, einschließlich eines gesättigten warmen Farbtons, der sich in der Atmosphäre verbirgt
- K-05Rasterüberlagerungen, Leuchtkugeln jeder Kantenbehandlung, Aurora-Felder und Mesh-Verläufe
- K-06Bernstein als Semantik
- K-07Varianten von Kartenecken: elliptisch, abgeschrägt, Squircle, asymmetrisch
- K-08Der Hover mit oberer blauer Linie
- K-09Fest codierte Grautöne anstelle von
rgba(var(--rule-c), a) - K-10Manuell erstelltes
box-shadowanstelle von--shadowoder--shadow-lift - K-11Verlaufstext in einer Überschrift oder einer Kennzahl
- K-12Ein farbiger Akzentstreifen an einer Kante einer Karte
- K-13Ein Icon-Glyph in einer getönten Kachel mit abgerundeten Ecken über einer Überschrift
- K-14Ein Badge- oder Pillen-Eyebrow über einer Hero-Überschrift
- K-15Emojis irgendwo im Interface-Chrome
- K-16Bento-Raster, die als Layoutstil verwendet werden, statt durch ungleichen Inhalt begründet zu sein
- K-17Zentrierter Fließtext und zentrierte Abschnittsüberschriften, die untereinander auf einer Seite gestapelt sind
- K-18Verschachtelte Karten
- K-19Dekorative pulsierende Punkte, vorgetäuschte blinkende Cursor, automatisch scrollende Laufbänder
- K-20Graustufige Logo-Wände mit „Vertraut von“ und Social Proof als Avatar-Reihe
- K-21Statistiken ohne Quellenangabe und Testimonials ohne vollständigen Namen, Unternehmen und Ergebnis
- K-22„Loslegen“ und „Mehr erfahren“ als CTA-Label auf der Seite
- K-23Generisches Stockmaterial, abstrakte 3D-Blobs, isometrische Illustrationen, jeder Platzhalter oder fehlerhafte
src - K-24Ein Hover-Zustand, der nur die Deckkraft ändert
- K-25Animation von Breite, Höhe, Innenabstand oder Außenabstand sowie federnde oder elastische Easing-Kurven
- K-26Ein
<div>mit Click-Handler, wo ein<button>hingehört
Das eingestellte v1-System ist archiviert und darf niemals gerendert werden: keine cremefarbene #fafaf7-Fläche, kein Geist, kein #3b82f6, keine Mono-Eyebrows, keine Leuchtkugeln, keine Rasterüberlagerungen, keine dunkle Navigationsleiste.
Das Audit vor der Präsentation
Sechs Fragen. Jedes „Nein“ ist ein Mangel, keine Präferenz.
Ersetzen Sie die Wortmarke durch die eines Wettbewerbers. Muss sich sonst etwas ändern?
Wählen Sie zufällig fünf gerenderte Werte aus: eine Farbe, einen Radius, einen Abstand, eine Größe, eine Dauer. Lässt sich jeder auf einen Token oder eine festgelegte Herleitung zurückführen, ohne zu sagen „es sah richtig aus“?
Zeigt die Seite, was am wichtigsten ist, oder hat jeder Block das gleiche Gewicht? Identische Wortzahlen bei nebeneinanderliegenden Karten bedeuten, dass der Text gekürzt wurde, um die Kästen zu füllen.
Hat jede Kennzahl und jedes Zitat eine echte Quelle, ein Datum und eine Zuschreibung?
Gibt es die Zustände leer, lädt, Fehler und 404, und sagt jeder etwas Konkretes aus?
Hält es beim Scrollen bis zum Ende bei 375px und bei 1440px in beiden Themes stand? Eine Seite, die nur anhand ihres ersten Viewports geprüft wird, wird so geprüft, wie ein Generator sie prüfen würde.
Wenn der Build mit einer Referenzseite abgeglichen wird, fügen Sie eine siebte Frage hinzu: Stellen Sie unsere Seite, die Referenz und das nächstliegende generische Template nebeneinander. Unverwechselbarkeit ist nur im Vergleich sichtbar.
Diese Seite ist für Menschen. Die bewertbare Version, in der jede Regel eine ID, einen gemessenen Wert, einen Test und eine Quellenzeile trägt, ist .claude/skills/compaytence/references/design-system-spec.md. Darauf löst der Systemkritiker der Skill design-loop auf, und §15 enthält eine vorgefertigte Checkliste mit zwanzig Zeilen, die bereit ist, in einen Lauf geforkt zu werden.