Das Linear Designsystem, gelesen als Constraints

Starten Sie hier, da die meisten nachfolgenden Verwirrspielungen dadurch entstehen, dass man diesen Punkt überspringt. Linear veröffentlicht kein Designsystem. Es gibt kein @linear/tokens auf npm, kein Storybook, keine Dokumentationsseite wie etwa ein design.linear.app Äquivalent und keine vom Unternehmen veröffentlichte Figma-Library. Vergleichen Sie das mit IBM's Carbon, Shopify's Polaris oder Salesforce Lightning, die alle als bewusste Produktentscheidung installierbare Pakete und öffentliche Dokumentationen ausliefern.

Was stattdessen existiert, sind drei Arten von Sekundärmaterial, und es ist wichtig zu wissen, welches Sie gerade lesen:

Diese Unterscheidung ist wichtig, weil eine Extraktion Ihnen sagen kann, dass eine Oberfläche #0f1011 ist, aber sie kann Ihnen nicht sagen, ob dies ein bewusster Schritt über der Canvas ist oder ein Zufall. Alles Folgende wird auf der Ebene angegeben, die tatsächlich gestützt werden kann: beobachtbare Patterns, wobei die Begründung sichtbar bleibt, damit Sie ihr widersprechen können.

Wenn Sie eines aus diesem Artikel mitnehmen: Linears Typografie bewegt sich in einem schmalen Gewichtungsband, etwa 400 bis 510, über fast das gesamte Produkt hinweg. Eine 72px Display-Überschrift und ein 15px Label unterscheiden sich durch Größe und Farbe, nicht durch das Gewicht. Bold, im Sinne der 700er-Stärke, nach der die meisten Interfaces greifen, ist funktional nicht vorhanden.

Diese eine Constraint leistet mehr visuelle Arbeit als die Palette. Ein breites Gewichtungsband (400 Body, 600 Labels, 700 Headings, 800 Hero) ist der Standard, mit dem jedes UI-Framework ausgeliefert wird und den jedes KI-generierte Interface reproduziert. Es wirkt laut und generisch, weil die Hierarchie geschrien statt komponiert wird. Ein schmales Band zwingt die Hierarchie dazu, stattdessen durch Größe, Spacing und Farbe getragen zu werden, was schwieriger präzise umzusetzen und viel schwerer versehentlich zu imitieren ist.

Das Variable-Font-Detail ist es, was 510 überhaupt erst ermöglicht. Ein Gewicht von 510 ist kein statischer Schnitt; es existiert nur, weil das Interface eine Variable Typeface verwendet, bei der jeder Wert auf der Achse verfügbar ist. Der Versuch, dies mit statischen Gewichten zu reproduzieren, ergibt 500, was nah dran ist – und dieser Fehlgriff ist ein Grund, warum sich Replikationen oft nur „fast richtig“ anfühlen.

Dies ist das Detail, das bei den meisten Nachbildungen völlig fehlt, und es ist messbar, keine Frage des Geschmacks. Der Zeichenabstand bei Linear wird mit zunehmender Größe negativer: Display-Typografie im Bereich von 48 bis 72px liegt bei etwa -0.022em, mittlere Überschriften bei etwa -0.012em und Fließtext bei etwa -0.010em. Die Beziehung ist monoton: Größere Schrift, engeres Tracking.

Der Grund ist optischer Natur, nicht dekorativ. Schriftzeichen, die für eine Lesbarkeit bei 16px gezeichnet wurden, haben Seitenabstände, die für 16px dimensioniert sind. Skaliert man diese auf 64px, skalieren auch diese Lücken mit, sodass das Wort visuell in einzelne Buchstaben zerfällt. Professionelles Type-Design kompensiert dies durch optische Größen; Interface-Design kompensiert dies durch eine Tracking-Rampe. Die meisten Designsysteme setzen einen einzigen letter-spacing-Wert oder gar keinen, wodurch ihre Überschriften eine Lockerheit aufweisen, die niemand benennen kann.

/* The ramp, expressed as tokens. Values shown are the pattern,
   not Linear's — pick your own by eye at each step. */
:root {
  --tracking-display: -0.022em;  /* 48px and up */
  --tracking-heading: -0.012em;  /* 20-32px */
  --tracking-body:    -0.010em;  /* 13-17px */
  --tracking-label:    0.02em;   /* small caps, 11-12px: loosens */
}

Beachten Sie die Umkehrung am unteren Ende. Kleine Versalien benötigen aus demselben optischen Grund ein positives Tracking, aus dem große Display-Schriften ein negatives benötigen. Eine Rampe, die nur in eine Richtung verläuft, ist nur die halbe Regel.

Linear trennt Oberflächen mit Rahmen in Subpixel-Breiten: 0,5px auf Displays, die dies darstellen können, und einem abgestuften Set aus fast schwarzen Grautönen, anstatt mit Schlagschatten. Die Leinwand liegt bei etwa #08090a, Kartenoberflächen eine Stufe darüber bei etwa #0f1011, erhöhte Panels noch darüber. Rahmen stammen aus einem kontrastarmen Grau um #23252a für strukturelle Kanten, mit einer leicht helleren Stufe für Sektions-Trenner.

Dies ist ein echter Trade-off, keine strikt bessere Wahl, und es ist wichtig, ehrlich über die Kosten zu sein. Schatten kommunizieren Tiefe präattentiv; ein Betrachter weiß, dass eine Karte über der Seite liegt, ohne hinzusehen. Hairlines tun dies nicht. Was man gewinnt, ist eine flache, dichte, präzise Oberfläche, auf der viele Informationen nah beieinander liegen können, ohne visuelles Rauschen zu erzeugen – genau das, was ein Issue-Tracker benötigt und genau das, was eine Marketing-Seite nicht braucht.

Die letzte Zeile ist die entscheidende. Der Grund, warum ein Treatment im Linear-Stil auf einer Landingpage oft scheitert, ist nicht eine schlechte Ausführung; es ist, dass die Elevation-Strategie für Informationsdichte gewählt und dann auf eine Oberfläche mit nur vier Karten angewendet wurde.

Die Beobachtung, die oft wiederholt wird, lautet: „Linear ist lila“. Zum Zeitpunkt der Erstellung wirkt das Interface eher nahezu monochrom mit einem einzigen hochgesättigten Akzent für primäre Aktionen und aktive Zustände, ergänzt durch ein kleines Set chromatischer Füllfarben für Tags und Labels. Der spezifische Akzentton hat sich über verschiedene Redesigns hinweg geändert; die strukturelle Tatsache hingegen nicht.

Die strukturelle Tatsache ist ein Verhältnis. Der Akzent erscheint nur auf einem kleinen Prozentsatz der Pixel (ein primärer Button, ein aktiver Navigationsindikator), alles andere ist grau. Den Farbton zu kopieren und ihn in einer typischen SaaS-Dichte anzuwenden (Akzent-Überschriften, Akzent-Icons, Akzent-Links, Akzent-Rahmen, Akzent-Gradient-Hero), erzeugt etwas, das zwar die Palette von Linear teilt, aber nichts von seinem Charakter hat.

Die Tag-Farben sollten separat betrachtet werden, da sie ein anderes System bilden. Eine Handvoll chromatischer Füllfarben (ein Violett, ein Teal, ein Koralle, ein Grün) existiert, um Labels auf einen Blick unterscheidbar zu machen, so wie kategoriale Serien in einer Dashboard-Palette funktionieren. Es sind weder Markenfarben noch Statusfarben. Ein System, das diese drei vermischt, ist am Ende nicht in der Lage, einen Fehler in Rot anzuzeigen, weil Rot an einem Label bereits „Marketing“ bedeutet.

Die Radien sind eng gefasst, etwa 6px bei Controls und 12px bei größeren Containern, im Gegensatz zur gängigen Gewohnheit im Ökosystem, überall rounded-lg und mehr zu verwenden. Das Padding ist kompakt, im Bereich von 8 bis 12px für Controls, statt der 16 bis 24px, die die meisten Komponenten-Bibliotheken liefern.

Beides leitet sich aus derselben Quelle wie die Hairlines ab: Dichte. Ein dichtes Tool kann es sich nicht leisten, 24px Padding pro Control zu verschwenden, und große Radien an kleinen Elementen beginnen, das Element zu „auffressen“. Die zugrunde liegende Regel lautet nicht „nutze 6px“, sondern dass der Radius mit dem Element skalieren sollte. Die meisten Systeme wenden jedoch denselben Radius-Token auf einen 28px-Button wie auf ein 400px-Panel an.

Dies zu kopieren, ist das falsche Ergebnis, und das nicht nur aus markenrechtlichen Gründen. Ein Designsystem ist das Resultat einer Produktentscheidung. Die Dichte von Linear dient Menschen, die sechs Stunden am Tag in einem Issue-Tracker verbringen; dieser Nutzer hat andere Bedürfnisse als jemand, der für vierzig Sekunden auf einer Preisseite landet. Die Übertragung dieses Oberflächen-Treatments über diese Lücke hinweg führt zu einem Interface, das für eine Aufgabe optimiert ist, die Ihr Produkt nicht hat.

Das Übertragbare ist die Methode. Jede obige Beobachtung folgt demselben Muster: Ein Muster erkennen, die Einschränkung (Constraint) ermitteln, die es erzeugt, und diese Einschränkung als Regel aufschreiben. Das ist eine wiederholbare Übung, die man an jedem bewunderten Produkt durchführen kann, und sie verwandelt ein Moodboard in etwas, das ein Agent ausführen kann.

1. 1

   Screenshots von drei Screens machen, nicht von einem

   Ein einzelner Screen verrät die Palette. Drei Screens verraten, welche Entscheidungen konsistent sind – und Konsistenz ist das, was ein System von einer einzelnen Seite unterscheidet.

2. 2

   Messen, nicht schätzen

   Öffnen Sie die Entwicklertools und lesen Sie die berechneten Werte: font-weight, letter-spacing, border-width, border-radius, padding. Notieren Sie die tatsächlichen Zahlen. „Enger Zeichenabstand“ ist keine Regel; -0.022em bei über 48px hingegen schon.

3. 3

   Suchen Sie nach dem Bereich, nicht nach dem Einzelwert

   Die Erkenntnis ist selten eine einzelne Zahl. Es ist die Tatsache, dass alle Schriftschnitte zwischen 400 und 510 liegen oder dass jeder Radius 6 oder 12 beträgt und nichts anderes. Bereiche sind Regeln; Einzelwerte sind lediglich Stichproben.

4. 4

   Notieren Sie, was fehlt

   Keine Schatten. Keine Schriftschnitte über 510. Kein zweiter Akzent. Keine Verläufe. Das Fehlen von Elementen ist der wertvollste Teil einer Analyse und genau der Teil, der in einem Palette-Export nie überlebt.

5. 5

   Wandeln Sie jede Beobachtung in eine Anweisung um

   „Elevation nutzt einen 1px-Border und einen Surface-Step, niemals einen box-shadow“ ist ausführbar. „Minimalistisch und präzise“ ist es nicht. In diesem Schritt wird aus einer Analyse ein Designsystem.

Wir haben 299 DESIGN.md-Dateien aus öffentlichen Repositories und Verzeichnissen analysiert, um zu sehen, was Design-Richtlinien tatsächlich enthalten, wenn sie für einen AI-Agent geschrieben werden. Die Ergebnisse erklären, warum aus Analysen abgeleitete Systeme degradieren.

Drei Viertel dieser Dateien enthalten keine Verbote. Doch wie die obige Analyse zeigt, liegt in den Verboten die Identität: kein Bold, keine Schatten, kein zweiter Akzent. Eine Datei, die die Hex-Werte von Linear auflistet, aber die Einschränkungen weglässt, hat den am wenigsten charakteristischen Teil des Systems erfasst und den Rest verworfen.

Die Zahl der vagen Adjektive verschärft das Problem. „Clean“ erscheint in 39 % dieser Dateien und „modern“ in 36 %. Beides sind Begriffe, die ein Modell bereitwillig mit dem Durchschnitt seiner Trainingsdaten ausfüllt – was der Grund ist, warum AI-generierte Interfaces konvergieren und alle gleich aussehen. Keines dieser Wörter schränkt das Design ein.

Wenn das Ergebnis einer Analyse an einen Coding-Agent geht, muss es so beschaffen sein, dass es einmal gelesen und über Dutzende von Dateien hinweg angewendet werden kann. Das bedeutet: benannte Tokens mit definiertem Zweck und eine explizite Liste von Verboten. So sieht die Struktur aus:

## Type

Weights: 400 and 510 only. Never use 600 or above; hierarchy is
carried by size and colour, not weight.

Tracking ramps with size:
- 48px and up: -0.022em
- 20-32px:     -0.012em
- 13-17px:     -0.010em
- 11-12px uppercase labels: +0.02em

## Elevation

Never use box-shadow. Elevation is a surface step plus a 1px border:
- canvas   -> surface   -> elevated
- Border: --border-subtle for structure, --border-strong for sections

## Accent

One accent. It appears on primary buttons and active nav state only.
Do NOT use the accent for headings, links, icons, borders or gradients.
Tag fills are a separate categorical set and are not brand colour.

## Never

- No gradients
- No drop shadows
- No second accent colour
- No font-weight above 510
- No border-radius above 12px

Beachten Sie, wie viel von dieser Datei den Never-Abschnitt und die in jede Regel eingebetteten Verbote ausmacht. Genau dieses Verhältnis ist entscheidend. Wenn Sie einem Agent eine Palette und einen Schriftnamen geben, erlauben Sie ihm, alles andere nach Belieben zu gestalten – und „alles andere“ macht den Großteil des Interfaces aus.

Es gibt eine Variante dieser Übung, die ein schlechteres Ergebnis liefert als den Ausgangszustand. Das passiert, wenn die Analyse zum Ziel wird: Sie erstellen ein strenges Regelwerk, das das Produkt eines anderen beschreibt, übergeben es einem Agent und erhalten eine kompetente Imitation ohne Daseinsberechtigung.

Designsysteme, die wirklich gut sind, basieren auf einer fundierten Entscheidung über die Zielgruppe. Das System von Linear basiert auf der Annahme, dass Power-User, die den ganzen Tag in einem Tool arbeiten, Dichte und Ruhe benötigen. Ein Lernprodukt würde vielleicht großzügige Abstände und Wärme fordern. Ein Finanz-Dashboard würde reservierte Statusfarben und eine neutrale Skala verlangen, die in einer dichten Tabelle funktioniert. Die Regeln folgen aus dieser Entscheidung; sie ersetzen sie nicht.

Nutzen Sie die Analyse also zur Kalibrierung, nicht für den Inhalt. Sie zeigt Ihnen, wie ein rigoroses System aussieht: wie spezifisch die Zahlen sind, wie viele Dinge verboten werden und wie eng die Bereiche gefasst sind. Leiten Sie daraus nun die Entscheidung für Ihr eigenes Produkt ab.