Das Linear Designsystem, gelesen als Constraints

Beginnen Sie hier, da die meisten späteren Missverständnisse auf das Überspringen dieses Punktes zurückzuführen sind. Linear veröffentlicht kein Designsystem. Es gibt kein @linear/tokens auf npm, kein Storybook, keine Dokumentationsseite unter einem Äquivalent zu design.linear.app und keine von der Firma veröffentlichte Figma-Bibliothek. Vergleichen Sie dies mit IBM's Carbon, Shopify's Polaris oder Salesforce Lightning, die alle installierbare Pakete und öffentliche Dokumentationen als bewusste Produktentscheidung bereitstellen.

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

Diese Unterscheidung ist wichtig, da eine Extraktion zwar sagen kann, dass eine Oberfläche #0f1011 ist, aber nicht, ob dies ein bewusster Schritt über der Leinwand ist oder ein Zufall. Alles Folgende wird auf der Ebene dargelegt, auf der es tatsächlich belegt werden kann: beobachtbare Muster, wobei die Herleitung sichtbar bleibt, damit man ihr widersprechen kann.

Wenn Sie eine Sache daraus mitnehmen: Die Typografie von Linear bewegt sich über fast das gesamte Produkt hinweg in einer schmalen Weight-Bandbreite, etwa von 400 bis 510. Eine 72px Display-Überschrift und ein 15px Label werden durch Größe und Farbe unterschieden, nicht durch das Weight. Bold, im Sinne des 700er-Werts, zu dem die meisten Interfaces greifen, ist funktional nicht vorhanden.

Diese eine Einschränkung bewirkt visuell mehr als die Farbpalette. Eine breite Weight-Bandbreite – 400 für Fließtext, 600 für Labels, 700 für Überschriften, 800 für Hero-Elemente – ist der Standard, den jedes UI-Framework mitliefert und jedes KI-generierte Interface reproduziert. Das wirkt laut und generisch, weil die Hierarchie eher herausgeschrien als komponiert wird. Eine schmale Bandbreite zwingt dazu, die Hierarchie stattdessen über Größe, Spacing und Farbe zu steuern, was schwieriger präzise umzusetzen und weitaus schwerer zufällig zu imitieren ist.

Das Detail der Variable Fonts ist es, was 510 überhaupt erst ermöglicht. Ein Weight von 510 ist kein statischer Schriftschnitt; es existiert, weil das Interface eine variable Schriftart verwendet, bei der jeder Wert auf der Achse verfügbar ist. Der Versuch, dies mit statischen Weights zu reproduzieren, führt zu 500, was nah dran ist – und genau diese geringfügige Abweichung ist Teil dessen, warum Replikationen sich "fast richtig" anfühlen.

Dies ist das Detail, das bei den meisten Nachbildungen völlig fehlt, und es ist eine messbare Tatsache statt eine Frage des Geschmacks. Der Zeichenabstand bei Linear wird mit zunehmender Größe negativer: Display-Typografie im Bereich von 48–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, besitzen 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; im Interface-Design geschieht dies über 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 etwas 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 bewusst hinzusehen. Hairlines tun dies nicht. Was man gewinnt, ist eine flache, dichte, präzise Oberfläche, auf der viele Informationen nah beieinander stehen 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 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 – und 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 einem anderen System folgen. Eine Handvoll chromatischer Füllfarben – Violett, Teal, Koralle, Grün – dienen dazu, 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 einer anderen Stelle 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 oder mehr zu verwenden. Das Padding ist kompakt, im Bereich von 8–12px für Controls, statt der 16–24px, die die meisten Komponenten-Bibliotheken ausliefern.

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 „verwende 6px“, sondern dass der Radius mit dem Element skalieren sollte; die meisten Systeme wenden hingegen denselben Radius-Token sowohl auf einen 28px-Button als auch 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 Pricing-Seite 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 formulieren. Das ist eine wiederholbare Übung, die man an jedem bewunderten Produkt durchführen kann, und sie ist das, was ein Moodboard in etwas verwandelt, 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 Gewichte zwischen 400 und 510 liegen oder dass jeder Radius 6 oder 12 ist und sonst nichts. Bereiche sind Regeln; Einzelwerte sind lediglich Stichproben.

4. 4

   Notieren Sie, was fehlt

   Keine Schatten. Keine Gewichte über 510. Kein zweiter Akzent. Keine Verläufe. Das Fehlen von Elementen ist der wertvollste Teil einer Analyse und genau der Teil, der bei 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 überstehen, einmal gelesen und auf Dutzende von Dateien angewendet zu werden. Das bedeutet: benannte Tokens mit festgelegtem 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 groß der Never-Abschnitt und die in jede Regel eingebetteten Verbote sind. 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, resultieren aus einer Überlegung zum Nutzer. Das System von Linear basiert auf der Annahme, dass ein Power-User, der den ganzen Tag in einem Tool arbeitet, Dichte und Ruhe benötigt. 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 der Argumentation; sie ersetzen sie nicht.

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