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 wörtlich die Standardwerte von Tailwind waren und dass unsere eigene Produkt-Website mit shadcn initialisiert worden war ("style": "new-york"). Ein Wettbewerber aus einer völlig anderen Branche teilte 9 unserer 12 charakteristischen Gestaltungsmittel mit nahezu identischen Werten, weil beide Websites aus derselben Registry zusammengesetzt worden waren.
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 dreizehn Stufen hinweg bleibt der Farbton innerhalb von 3.1 Grad. Beim Chroma sieht es anders aus: Es erreicht am Ausgangspunkt seinen Höchstwert und fällt zu beiden Enden hin ab, weil sRGB am blassen Ende keine Sättigung halten kann. Die Leiter ist eine Helligkeitsleiter mit festgelegtem Farbton, und genau das ist die Eigenschaft, auf die es ankommt.
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 2.24:1 auf dem hellen Grund. Auf einer hellen Fläche ist es ausschließlich eine Füllung. Nie Text, nie eine Haarlinie, die gelesen werden muss. Auf dem dunklen Grund erreicht derselbe Hex-Wert 6.37:1 und kann als Text gesetzt werden. Diese Asymmetrie ist der ganze Grund dafür, dass es eine Leiter gibt und nicht einen einzelnen Hex-Wert.
Dieser Text ist #33A9FF auf Papier. Mit 2.24:1 unterschreitet er jede Untergrenze für Barrierefreiheit, die es gibt.
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 75 #106aa6 |
5.09 | Stufe 30 #81c5ff |
8.77 |
--mark-deep |
stärkere Betonung | Stufe 80 #005990 |
6.53 | Stufe 20 #b0daff |
11.05 |
--mark-solid |
FÜLLUNG auf hell, Text auf dunkel | Stufe 50 #33a9ff |
2.24 | Stufe 50 #33a9ff |
6.37 |
--mark-tint |
getönte Flächen | Stufe 05 #edf6ff |
1.04 | Stufe 95 #002e4d |
1.16 |
--fig |
Zahlen in jeder Größe, der sichere Standard | Stufe 75 #106aa6 |
5.09 | Stufe 30 #81c5ff |
8.77 |
--fig-display |
Display-Zahlen ab 24px | Stufe 65 #017ec8 |
3.84 | Stufe 40 #5fb7ff |
7.49 |
--fig-inline |
Zahlen im Fließtext, ein Alias von --fig | Stufe 75 #106aa6 |
5.09 | Stufe 30 #81c5ff |
8.77 |
--fig-display liegt auf dem hellen Grund bei 3.84:1 und ist daher nur über etwa 24px zulässig. Solange diese leuchtende Stufe den Namen --fig trug, verfehlte jede Indexziffer und jede Inline-Statistik, die zum naheliegenden Namen griff, stillschweigend AA, und genau das ist einmal passiert. Seit dem 8. September 2026 passen die Namen zum Risiko: --fig ist die sichere Stufe, 5.09:1 auf hellem Grund und in jeder Größe zulässig, und die Display-Stufe ist Opt-in unter einem Namen, der seine eigene Einschränkung mitführt.
Führen Sie niemals einen zweiten Akzentfarbton ein. Messing wurde für Zahlen ausprobiert und verworfen, überlebte dann aber unbemerkt zwei Entwürfe lang in einer atmosphärischen Fläche bei Chroma 0.086. Wenn eine Farbe über etwa 0.02 Chroma liegt und nicht dieses Blau ist, ist sie ein Bug. Es gibt zwei Ausnahmen, und beide müssen prüfbar sein: Marken Dritter behalten die Farbe ihres Eigentümers, so ausgezeichnet, dass das Audit das Attribut auf die Whitelist setzt und niemals den Hex-Wert; und eine Produktnachbildung, die einem Nutzer zeigt, was er nach dem Login tatsächlich sieht, behält die eigenen Tokens des Produkts, in beide Richtungen per Assertion abgesichert.
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 reichen die zwölf Neutralfarben von 62.35 bis 80.72 Grad. Das ist kein Drift in den Farben. Bei Chroma 0.005 bis 0.013 kann 8-Bit-sRGB den Farbton nicht adressieren: Ein Schritt auf einem einzelnen Kanal verschiebt den gemessenen Farbton um 3.5 bis 15.8 Grad, sodass jeder Wert bereits innerhalb eines Quantisierungsschritts vom Ziel liegt und eine Neukodierung bei exakt 65.56 denselben oder einen benachbarten Hex-Wert liefert. Die prüfbare Form der Regel lautet Chroma höchstens 0.013, Farbton zwischen 55 und 90. Beides gilt für alle zwölf, und beides ist falsifizierbar.
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 ist seit dem 21. September 2026 das Hinweisband, dieses hier eingeschlossen. Es trägt die Leitzeile in --mark, --risk oder --good bei 1rem, und alle drei erreichen darauf in beiden Themes 4.5:1, am knappsten mit 4.57:1 für --risk auf hellem Grund, beim Build aus dem geparsten Stylesheet gemessen. --risk und --good wurden am 21. September 2026 zweimal nachjustiert, um dorthin zu kommen, einmal für das Band und erneut, als der Grund dunkler wurde: hell #ad4a40 und #357642, dunkel #d87369 und #5e9e69, alle bei mindestens 4.57:1 auf dem Band. Der Fließtext darauf ist --ink-soft. --wash ist ausschließlich eine Flächentönung: --mark, --graphite, --risk und --good fallen darauf alle unter die Untergrenze, 4.10 bis 4.32:1 auf hellem Grund, sodass Text auf einem Wash-Band auf --ink-soft oder dunkler hochgestuft wird.
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.
Der niedrigste dieser vier Werte misst 4.83:1 auf Papier. Bis zum 21. September 2026 lagen drei davon um 0.04 oder weniger über der Untergrenze; die zwei Nachjustierungen an diesem Tag, im Hinweis oben festgehalten, brachten den Spielraum, den das Hinweisband braucht.
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 überdimensionierte Serifenschrift mit einem kursiven Wort darin ist der universelle KI-Start-up-Hero, und es ist die eine Stelle, an der diese Display-Schrift vom Erkennungsmerkmal zum Schnörkel abrutschen könnte. Was sie zum Erkennungszeichen macht, ist, dass sie meist ein Standard ist: einmal gegriffen, als Würze, ohne einen 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 bilden drei sanktionierte Kursiv-Rollen das gesamte Vokabular, und eine vierte gibt es nicht: .tag, .note-l und .quote. .doc-title em ist am 21. September 2026 von der Liste gestrichen worden. Die kursive zweite Zeile nach einer aufrechten ersten auf der H1 jedes Dokuments war das eine Gestaltungsmittel, das wie der generierte Hero wirkte, daher ist der zweite Teil eines Titels jetzt aufrecht in Blau: der Zug, den die Wortmarke macht (ein Segment in Blau, sonst ändert sich nichts). Hervorhebung innerhalb einer Dokumentüberschrift entsteht durch Größe, Gewichtung, Farbe oder Position. Verlaufsfüllung auf Text ist überall verboten, auch auf dem blauen Titelsegment: Die Farbe markiert es bereits, und der Verlauf fügt nur ein Erkennungszeichen hinzu.
Der Eyebrow und was an die Stelle des Mono-Labels getreten ist
Dokumente tragen seit dem 21. September 2026 überhaupt keinen Eyebrow mehr. Rund hundert davon im gesamten Hub-Satz wiederholten nur den Titel darunter, und die Zeile aus Haarlinie plus Kursive über jeder Überschrift war zum generierten Abschnittsmarker geworden. Die Ziffer trägt die Position eines Abschnitts; der Inhaltsblock trägt seine Art. Die Klasse bleibt für die Website, wo es wenige Abschnitte gibt: Instrument Serif kursiv, Satzschreibung, Graphit, mit einem 26px-Haarlinienpräfix. Der alte gesperrte Mono-Großbuchstaben-Eyebrow 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 Ziffern machen eine Spalte lesbar: Jede Ziffer belegt dieselbe Breite, sodass die Zahlen unabhängig von ihrem Wert vertikal ausgerichtet sind. Die Rechtsbündigkeit erledigt den Rest, und das Ledger unten ist der Ort, an den die Zahlen eines Dokuments gehören, mit der Quelle darunter.
Compaytence-Zahlen, Stand August 2026.
Dieselbe Klasse wie ein fehlendes Logo. Eine Zahl in einem Ledger oder auf einer Statistik-Karte ist eine Behauptung, daher trägt sie einen echten Wert, einen Nenner, wo es einen gibt, ein Datum und ihre Herkunft. Runde Zahlen ohne Quelle sind das meistzitierte inhaltliche Erkennungszeichen überhaupt: „über 10,000 Händler“, „99.9% Verfügbarkeit“, „3x schneller“. Platzhalterzahlen dürfen in einem Gerüst existieren. Ausgeliefert werden dürfen sie nie.
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 sind alle 30 Pixel gezogen. Der Text sitzt auf ihnen, weil --lh-body 1.765 beträgt und 17 × 1.765 gleich 30.005 ist. Eine Zeile Fließtext ist genau eine Einheit der Abstandsskala, weshalb die Skala in Bruchteilen einer Zeile angegeben wird.
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 und Glas
Eine zweistufige Formskala, eine Haarlinienstärke und auf einem Dokument ein flacher Grund, mit nichts dahinter und nichts darüber.
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 durchscheinende Karte über dem warmen Grund, mit backdrop-filter: blur(16px) saturate(1.25). Beibehalten statt gestrichen, weil auf der Website Halos dahinter und Körnung darüber sie zu einem Materialstapel machen, nicht zu einem Weichzeichner für Glanz. Dieser Stapel aus Halo, Glas und Körnung gehört allein der Website. Auf einem Dokument ist der Grund flach, und dieselbe Karte sitzt darauf als helleres Panel mit einer Haarlinie, ihr Weiß im hellen Theme um dasselbe ×0.9653 skaliert wie das Papier.
Dort liegt sie über allem, auch über den Karten, bei z-index 9. Darunter würde jede Karte sie auslöschen, und beide würden sichtbar miteinander kämpfen. Obenauf verhält sie sich wie Filmkorn und vereinheitlicht die Oberfläche. Eine gekörnte Fläche pro Seite, und niemals ein gekörnter Kasten in einem anderen verschachtelt. Dokumente werden seit dem 21. September 2026 flach ausgeliefert: Die Körnung war die letzte Ebene eines Stapels, den es in einem Dokument nicht mehr gibt, und sie kostete scharfen Text, ein Neuzeichnen bei jedem Scrollen und PDFs, die sich nicht komprimieren ließen. Der Grund wanderte zu der Farbe, auf die die Körnung im Mittel hinauslief, gemessen in headless Chrome, sodass nichts heller wurde: helles Papier von #fcf9f5 zu #f3f0ec, ein Multiply von ×0.9653 pro Kanal; dunkel von #120f0c zu #23201d, ein Screen-Lift um 7.07% des Spielraums jedes Kanals.
Dokumente werden seit dem 21. September 2026 ohne Halos ausgeliefert. Papier leuchtet nicht, und auf Papier war der Eck-Halo auf jeder Seite des Satzes dasselbe Leuchten. Das Blau kommt über die Ziffern und Zahlen, die Links und den Button in ein Dokument. Die Website behält genau zwei Halos, und das ist ihr gesamtes atmosphärisches Budget: kein dritter Halo, kein Aurora-Feld, kein Mesh-Verlauf und keine Leuchtkugel mit welcher Kantenbehandlung auch immer. „Weichgezeichnet“ wäscht keine davon rein.
Dort muss die Körnung auf der Ebene liegen, die den Ton malt, nie auf dem Abschnittskasten. In einem Bridge- oder Bleed-System läuft die Farbe eines Bands über seinen eigenen Abschnitt hinaus, sodass eine auf den Abschnitt begrenzte Körnung endet, während ihre Farbe weiterläuft, und an jeder Grenze eine harte Linie zieht: gemessen mit Δ10/255 auf Papier und Δ22/255 auf dem dunklen Grund. Die Seite wirkt dann wie ein Stapel von Platten statt wie eine Flä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.
Das Ledger und die Doppellinie
Die Zahlen eines Dokuments gehören ins Ledger: .card-row für eine, .card-total mit .mini-Zeilen für mehrere und darunter eine .ledger-src-Zeile, die Quelle und Datum nennt. Die Anzahl ist, was die Anzahl eben ist. Eine Reihe aus drei Statistik-Karten ist seit dem 21. September 2026 aus Dokumenten verbannt: Drei runde Zahlen in einer Reihe waren das meistzitierte inhaltliche Erkennungszeichen, und das System hatte sie auf vier kundenseitigen Dokumenten ausgeliefert. .card-stat bleibt für eine einzelne Hero-Zahl erhalten.
Ein Ledger schließt eine Spalte nie mit einer einzelnen Linie ab. .total-line zieht zwei Haarlinien im Abstand von 4px über einer Summe. Es kostet ein Pseudo-Element, es gehört sonst niemandem, und es bedeutet etwas. Verwenden Sie es nur über einer echten Summe, nie als Dekoration: Ein Ledger, dessen Zeilen sich nicht summieren, trägt keine Summenlinie.
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: ein spaltenbreites
--paper-2-Band mit der Leitzeile in der semantischen Farbe und ohne seitliche Linie, höchstens eines pro Abschnitt. 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 Transition-Deklarationen im Korpus aus, was diese Regel bestätigt. - 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 | 15.07 | 15.05 | 4.5 |
--ink-soft |
Fließtext | 7.33 | 13.05 | 4.5 |
--graphite |
gedämpfter Text, Eyebrow | 5.08 | 5.88 | 4.5 |
--mark |
Links, Betonung | 5.09 | 8.77 | 4.5 |
--fig |
Zahlen, jede Größe | 5.09 | 8.77 | 4.5 |
--fig-inline |
Zahlen im Text | 5.09 | 8.77 | 4.5 |
--fig-display |
Display-Zahlen >=24px | 3.84 | 7.49 | 3.0 |
--mark-solid nur Füllung |
FÜLLUNG auf hell; Text auf dunkel | 2.24 | 6.37 | 4.5 |
--risk |
Fehlerzustände | 4.83 | 5.07 | 4.5 |
--good |
Bestätigungen | 4.84 | 5.07 | 4.5 |
Verhältnisse gegen --paper in jedem Theme. Relative Leuchtdichte nach WCAG 2.1, beim Build berechnet. Die ausgelieferten Untergrenzen des Systems sind 3.84:1 auf hell (--fig-display) und 5.07:1 auf dunkel (--good).
--fig-displayist mit 3.84:1 nur über etwa 24px zulässig. Jede ausgelieferte Verwendung erfüllt das: die Statistikzahl mit 51.9px, die Abschnittsziffer, Zeilenzahl und Gesamtsumme mit 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.