Bordi e raggi

A cosa servono

Bordi

I bordi sono linee che delimitano i contorni di elementi oppure oggetti presenti in un'interfaccia.

Possono essere applicati a componenti come pulsanti, campi di input, sfondi, immagini o qualsiasi area definita.

I bordi contribuiscono a dare enfasi alla forma e alla struttura di un elemento, possono variare in termini di spessore e stile e creano una separazione fra l'elemento e ciò che lo circonda.

Raggi

I raggi definiscono il grado di curvatura degli angoli di un elemento. La misura di un raggio determina quanto gli angoli dell'elemento sono arrotondati.

Ad esempio, se un raggio è impostato su 4px, gli angoli dell'elemento saranno arrotondati con una curvatura di questa entità.

Sono anche conosciuti con il termine tecnico di "border-radius".

Come usarli

Angoli arrotondati

L'uso di angoli arrotondati conferisce leggerezza visiva agli elementi di un'interfaccia. Per questo motivo sono raccomandati per pulsanti, campi di input, card e simili.

Per dare più enfasi a elementi chiave dell'interfaccia, puoi aumentare la dimensione del raggio dei bordi che vorresti mettere in risalto.

Angoli squadrati

Gli angoli squadrati si addicono maggiormente a elementi che richiedono una presentazione più formale e strutturata, come modali o riquadri informativi.

I token per bordi e raggi

I token applicati a bordi e raggi sono tutti della tipologia globali. Come tali, possono essere riutilizzati come misura di riferimento per token semantici o specifici.