Fundamenty

Odstępy, narożniki, siatka

Rytm oparty na prostych kartach. Krok 8 px, wnętrze karty 24 px, karty 16 px, przyciski 10 px. Jeden zestaw reguł.

Stan rozdziału:: gotowe
Aplikacja dziś:: rozjazd z brandbookiem

Odstępy

Cytat

Bazowy krok: 8 px. Wewnątrz kart zwykle 24 px.

Źródło: Brandbook 1.0, s. 10

054 pxMiędzy ikoną a tekstem w pastylce, pionowe wypełnienie pastylki. (propozycja Kanonu)
18 pxKrok bazowy. Między elementami w rzędzie, między etykietą a polem.
216 pxMiędzy polami formularza, między wierszami listy, wypełnienie przycisku w poziomie.
324 pxWnętrze karty. Między kartami w siatce.
432 pxMiędzy sekcjami wewnątrz strony. (propozycja Kanonu)
648 pxMiędzy dużymi blokami strony, margines pod nagłówkiem strony. (propozycja Kanonu)
864 pxOddech między rozdziałami na stronie marketingowej. (propozycja Kanonu)

Krok 8 px. Pasek ma dokładnie tyle pikseli, ile mówi token.

Wszystkie odstępy są wielokrotnością 8 px. Pół kroku (4 px) wolno użyć tylko wewnątrz drobnych elementów: między ikoną a słowem w pastylce, jako pionowe wypełnienie pastylki.
Wnętrze karty: 24 px z każdej strony. Między kartami w siatce: 24 px. Między sekcjami strony: 32 px. Pod nagłówkiem strony: 48 px.
Wysokość wiersza tabeli jest zadana, nie wynika z wypełnienia komórki (w aplikacji --row-h, 56 px domyślnie, 44 w trybie kompaktowym, 76 w prezentacyjnym). Przełącznik gęstości zmienia jedną wartość, nie dwadzieścia klas.
Wysokość przycisku i pola: 40 px w rozmiarze podstawowym, 32 w małym, 48 w dużym. Pole i przycisk obok siebie tworzą jedną linię, nie schodki.

Narożniki

Cytat

Karty 16 px. Przyciski 10 px. Jeden zestaw reguł.

Źródło: Brandbook 1.0, s. 10

karta16 px
przycisk10 px
drobny6 px
pelnypełny

Karty 16 px, przyciski 10 px: jeden zestaw reguł (brandbook s. 10). Drobny i pełny to propozycje Kanonu.

16 px dla wszystkiego, co jest powierzchnią: karta, kafel, panel, okno modalne, ramka przykładu.
10 px dla wszystkiego, co się klika albo w co się pisze: przycisk, pole, zakładka, pozycja menu.
6 px (propozycja) dla drobiazgów: pieczęć orzeczenia, miniatura, pole wyboru, kod w tekście.
Pełny (propozycja) dla pastylki statusu, awatara i licznika. Pastylka jest okrągła, pieczęć kanciasta, i to jest różnica w znaczeniu, nie w guście: pastylka to stan bieżący, pieczęć to wpis do rejestru.
Element wewnątrz elementu ma narożnik mniejszy o wartość wypełnienia, żeby krzywizny były współśrodkowe. Zakładki w pasku: pasek 14 px (10 plus 4 wypełnienia), zakładka 10 px.

Siatka

Brandbook nie definiuje siatki. Poniższa jest propozycją Kanonu, wyprowadzoną z układu stron brandbooka (kontener około 1200 px) i z szerokości panelu aplikacji (1440 px w kontener.tsx).

12 kolumn, rynna 24 px. Szerokości: treść 720 px, strona 1200 px, panel aplikacji 1440 px. Marginesy boczne: 16 / 24 / 32 px.

Marginesy: telefon / tablet / komputer. Siatka 12 kolumn z rynną 24 px dla układów kart; tabele nie używają siatki, tylko pełnej szerokości.
Kontekst	Szerokość	Marginesy boczne	Uwaga
Proza (tekst czytany zdanie po zdaniu)	720 px	16 / 24 / 32 px	Kanon ma 76ch, aplikacja 42 rem. Akapit szerszy trudno objąć wzrokiem.
Strona marketingowa	1200 px	16 / 24 / 32 px	Odpowiada układom brandbooka.
Panel aplikacji	1440 px plus pasek boczny 264 px	16 / 24 / 32 px	Tabela rejestru potrzebuje szerokości. Na telefonie pasek boczny chowa się w szufladę.