Border-Radius-Skalen

Ein abgerundetes Thumbnail sitzt bündig in einer abgerundeten Card. Beide Ecken nutzen denselben Wert — 16px, direkt aus dem Styleguide — und trotzdem sieht das Ergebnis subtil falsch aus: Der Abstand zwischen der Kante des Thumbnails und der Kante der Card bleibt an den Seiten gleichmäßig und schwillt an jeder Ecke sichtbar an. Designer justieren das Padding nach, tauschen das Bild aus, geben dem Schatten die Schuld. Jeder einzelne Wert ist „korrekt”, also kann niemand sagen, was nicht stimmt.

Eine Border-Radius-Skala löst das genauso, wie eine Abstandsskala Lücken löst: ein kurzes, festes Menü von Eckenwerten — üblicherweise vier Stufen plus eine Pille, etwa 0, 4, 8, 16 und 9999px —, aus dem sich jede Komponente bedient und das als Tokens ausgeliefert wird. Dazu kommt die eine Regel, die die meisten Leitfäden auslassen: Der Radius einer verschachtelten Ecke entspricht dem äußeren Radius minus dem Abstand zwischen den Kanten — 16 − 8 = 8 —, und genau das entspannt die Card von oben.

Radien belohnen dieselbe Systematisierung wie der Rest des Abstands-Systems — und sie belohnen sie schnell, denn eine falsche Ecke ist leichter zu erkennen als eine falsche Lücke, wie die Eingangsszene zeigt.

Warum sehen verschachtelte abgerundete Ecken falsch aus?

Reine Geometrie. Zeichne zwei abgerundete Rechtecke, eines im anderen, mit einem gleichmäßigen Abstand von 8px entlang der geraden Kanten. Damit dieser Abstand rund um die Ecke bei 8px bleibt, müssen die beiden Bögen konzentrisch sein — vom selben Mittelpunkt aus gezeichnet — und konzentrische Bögen unterscheiden sich im Radius um genau den Abstand zwischen ihnen. Wenn die äußere Ecke 16px hat, muss die innere Ecke 16 − 8 = 8px haben.

Gibst du der inneren Ecke stattdessen 16px — der Instinkt „überall dasselbe Token” —, wird ihr Bogen von einem anderen Mittelpunkt aus gezeichnet. Der Abstand misst entlang der geraden Kanten weiterhin 8px, doch über die Diagonale der Ecke öffnet er sich auf etwa 11,3px (8 × √2), rund 40 % breiter. Dieses anschwellende Band ist es, was das Auge einfängt: Menschen registrieren ungleichmäßige Abstände zwischen zwei parallel verlaufenden Kanten lange, bevor sie sie benennen können. Die Ecke sieht schlicht falsch aus — und sie sieht so lange falsch aus, bis die Radien konzentrisch werden.

Wie lautet die Regel für verschachtelte Radien?

Innerer Radius = äußerer Radius − Abstand. Sie lässt sich auf jede Verschachtelung verallgemeinern:

Daraus folgen zwei Dinge. Abgeleitete Werte wie 12 oder 15 müssen nicht im Radius-Menü stehen — das Menü regelt frei stehende Ecken, während verschachtelte Ecken daraus berechnet werden. Und wenn der Abstand gleich dem äußeren Radius ist oder ihn übersteigt, wird die innere Ecke quadratisch: ebenfalls korrekt, so kontraintuitiv es in einem Design-Review auch aussieht.

In CSS ist die Regel ein einzeiliges calc():

.card {
  border-radius: 16px;               /* --radius-lg */
  padding: 8px;                      /* --space-1  */
}
.card > .thumbnail {
  border-radius: calc(16px - 8px);   /* innen = außen − Abstand */
  /* mit Tokens: calc(var(--radius-lg) - var(--space-1)) */
}

border-radius nimmt außerdem Langformen pro Ecke und eine elliptische Syntax entgegen — selten nötig, aber gut zu wissen, wenn ein Design eine einzelne abgeflachte Ecke verlangt.

Wie viele Radius-Werte braucht ein System?

Weniger als Abstände brauchen: Vier Stufen plus eine Pille decken viele Produkte ab. Ein brauchbares Menü ist keine (0), klein (4), mittel (8), groß (16) und voll (9999px — jeder Wert jenseits der halben Elementhöhe erzeugt eine Pille, die Zahl muss also nur sicher riesig sein).

Statt diese Zahlen zu erfinden, borge dir das kleine Ende der Abstandsskala. Mit einer 16px-Basis, dem Verhältnis 2 und zwei Zwischentönen pro Verdopplung sind die kleinsten Stufen des Abstands-Menüs 8, 11 und 16 — und die kleinste durch das Verhältnis zu teilen, verlängert dieselbe Arithmetik um eine Stufe nach unten: 8 ÷ 2 = 4. Ein Radius-Menü aus 0, 4, 8, 16 und voll bleibt auf der Formel der Skala, mit 11 in Reserve, falls eine mittlere Ecke jemals eine Rolle verdient. Beide Menüs auf einer Formel zu halten, hält Ecken und Lücken visuell verwandt — und heißt, dass sie zusammen ausgeliefert werden: Der Tailwind-v4-@theme-Export des Scale Composer führt Radien neben den Spacing-Tokens, Schriftgrößen-Stufen, Farben und Breakpoints, ebenso die DTCG- und Figma-Variables-Exporte.

Öffne die Skala, aus der sich das Radius-Menü bedient, im Scale Composer — der Arbeitsbereich für Radien ist das untere Ende desselben Menüs, aus dem die Abstands-Stufen stammen.

Was sagt der Eckenradius über eine Marke aus?

Der Radius ist eines der schnellsten Ton-Signale, die eine Oberfläche hat. Scharfe, kleine Radien (0–4px) wirken tendenziell technisch, präzise, ernst — der Look von Entwickler-Tools und Finanz-Dashboards. Mittlere Radien (um 8px) wirken neutral; große Radien (ab 16px) freundlich und zugänglich; volle Pillen leger und konsumentennah. Keine dieser Deutungen ist ein Gesetz — der Kontext verschiebt sie —, aber die Tendenz ist konsistent genug, dass die Entscheidung auf Markenebene gehört: einmal entschieden, in der Skala kodiert, überall angewendet.

Was das Signal untergräbt, ist, es pro Komponente zu entscheiden. Jeder neue Screen beantwortet die Ecken-Frage etwas anders, und das Produkt driftet in eine Mischung aus scharf und weich, die überhaupt nichts aussagt — derselbe Fehlermodus, Ecke für Ecke, wie bei unsystematisierten Abständen.

Rechne deine eigenen Ecken durch

Nimm das am stärksten verschachtelte Paar auf deinem vollsten Screen — Bild in Card, Card in Panel, Button bündig am Padding eines Containers. Notiere den äußeren Radius und den Abstand zwischen den Kanten, subtrahiere und vergleiche das Ergebnis mit dem, was tatsächlich ausgeliefert wird: Ist die innere Ecke größer als die Differenz, hast du das anschwellende Band aus der Eingangsszene gefunden. Sieh dann, wie sich das Paar auf die Skalen-Stufen abbildet — öffne die Mathematik für verschachtelte Radien im Scale Composer.