Promienie i obramowania

Pigułki, karty i trzy grubości obramowań.

Skala promieni

Kontrolki są pigułkami: przyciski, pola i chipy mają pełny promień. Powierzchnie dostają tym większe i łagodniejsze rogi, im są większe.

sm 4 px · checkbox
md 6 px · małe znaczniki
lg 8 px · elementy wewnętrzne
xl 12 px · okienka
2xl 16 px · kafle, alerty, toasty
3xl 24 px · karty, panele, arkusze
full 9999 px · przyciski, pola, chipy

Trzy grubości obramowań

Ramka nie może być grubsza niż kreska litery „I” w tekście, który obramowuje (Inter 600 przy 16 px to ok. 2,1 px, przy 14 px ok. 1,9 px). Dlatego grubość wybiera się z rozmiaru tekstu, nie z nawyku.

2 px

Tekst od 16 px, elementy od 44 px oraz powierzchnie: karty, kafle, wiersze list, okna, arkusze.

1,5 px

Tekst 12–14 px w wadze 600 w elementach 24–44 px: plakietki, małe chipy, paginacja, zakładki, małe selecty.

1 px

Kontrolki do 20 px (checkbox, radio), mały tekst regular i każda linia podziału wewnątrz powierzchni.

Jedyna grubsza linia to pierścień fokusu, 3 px.

Rogi wewnętrzne

Obszar wycięty w białej powierzchni („studnia” z listą albo mapą) ma zawsze rogi zaokrąglone do wewnątrz, 24 px jak karta, a jego wewnętrzny cień idzie za łukiem. Prostego rogu nie zostawiamy nigdy, poza miejscem, gdzie aktywna zakładka tworzy ściankę studni.