Radii

Why a radii scale?

De radii-schaal volgt de Fibonacci-reeks (2, 3, 5, 8, 13, 21), een natuurlijk resultaat van de gulden snede en daarmee parallel aan de spacer-schaal. Elke stap is perceptueel duidelijk groter dan z'n voorganger zonder visuele "spring" — zes waarden dekken het hele bereik van 2px (barely-rounded) tot 21px (very-rounded) zonder tussenstappen.

De radius op een component spreekt: kantig (xs) suggereert professionaliteit en data-density; afgerond (l-xl) suggereert toegankelijkheid en consumer-context. Kies daarom een radius op basis van de archetype van het component, niet op basis van persoonlijke smaak.

Gebruik

example.scss

@use "@ftp/style-library/scss/variables/radii" as *;

.my-card {
  border-radius: $radius-m;
}

.my-button {
  border-radius: $radius-s;
}

// Pill — direct, intentionally not a scale value
.my-tag {
  border-radius: 9999px;
}

Border radius — preview + rationale

xs$radius-xs2px
Use for
Form-inputs in dichte data-UIs; tabular cells; strikt-rechthoekige UI met een softening-toets.
Avoid
Niet op een prominent CTA-button — voelt visueel inconsistent met een verder rounded design language.
s$radius-s3px
Use for
Standard buttons; small chips/tags; iets dat tussen "kantig" en "default rounded" wil zitten.
Avoid
Niet voor cards/panels — leest als button, niet als surface.
m$radius-m5px
Use for
Cards; panels; standard inputs; default keuze voor "is dit rounded?" als er geen specifieke reden is.
Avoid
Niet op een dense data-table cell — m is te zacht voor strikte grid-rigor.
l$radius-l8px
Use for
Modals; dialogs; prominente cards die zich willen onderscheiden van resting surfaces.
Avoid
Niet op form-inputs — voelt inconsistent met een dichte data-UI.
xl$radius-xl13px
Use for
Marketing/hero surfaces; consumer-facing cards; "playful" content-blocks.
Avoid
Niet in productive/data-heavy UIs — breekt grid-rigor en suggereert speelse context.
2xl$radius-2xl21px
Use for
Maximaal-speels: alleen decoratieve elementen, avatars-rectangle-variant, marketing-illustrations.
Avoid
Niet op interactieve elementen — zeer grote radius percipieert visueel een kleiner tap-target.

Pill — fixed pattern, not a token

Pill shape

border-radius: 9999px — gebruik dit direct, niet als variabele. De waarde is bewust geen onderdeel van de schaal: het is een styling-pattern (volledig afgeronde uiteinden), geen schaalwaarde.

Pill vs 2xl: pill (9999px) gebruikt voor capsule-affordances (tags, chips, pill-buttons, avatar-circles); 2xl (21px) voor "very rounded rectangle" — beide hebben een aparte semantische rol.

Accessibility

Radius is decoratief en heeft geen direct WCAG-impact. Zeer grote radii op interactieve elementen kunnen het percipieerde tap-target verkleinen omdat gebruikers de klikbare oppervlakte associëren met de visuele shape — het minimum tap-target blijft 24×24 px per WCAG 2.5.8 (Target Size, Minimum) ongeacht radius.