Przejdź do treści
Spis treści

Fundamenty

Typografia

Manrope wspiera system. Jeden krój do aplikacji, strony i komunikacji, w trzech wagach. Logotyp pozostaje osobnym rysunkiem.

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

Krój

Cytat

Krój do aplikacji, strony i komunikacji marki. Logotyp pozostaje osobnym rysunkiem zapisanym jako krzywe.
Źródło: Brandbook 1.0, s. 9

Cytat

W pakiecie są pliki fontu i licencja SIL Open Font License 1.1. Manrope jest propozycją kroju systemowego, a nie identyfikacją fontu z pierwotnej grafiki logo.
Źródło: Brandbook 1.0, s. 9

Aa

Manrope

  • Regular 400: Zażółć gęślą jaźń. 0123456789
  • SemiBold 600: Zażółć gęślą jaźń. 0123456789
  • Bold 700: Zażółć gęślą jaźń. 0123456789
Brandbook 1.0, s. 9. Licencja SIL Open Font License 1.1.

0O

JetBrains Mono

  • MP-0241 numer w rejestrze
  • AL-77310-0O1Il numer fabryczny: zero z kreską, I i l różne

z aplikacji, brandbook milczy

apps/web/src/app/layout.tsx. Krój o stałej szerokości do numerów fabrycznych i kodów, gdzie wielkie I i małe l muszą się różnić. Brandbook nie definiuje kroju o stałej szerokości.
  • Manrope w trzech wagach: Regular 400 do tekstu, SemiBold 600 do etykiet i przycisków, Bold 700 do nagłówków. Czwartej wagi nie dodajemy.
  • Krój ładujemy z własnego serwera (w Kanonie i na stronie przez @fontsource-variable/manrope, w aplikacji przez next/font), nie z zewnętrznego dostawcy w czasie działania. Dział IT szpitala pyta o połączenia wychodzące.
  • Podzbiory latin i latin-ext, bo polskie znaki diakrytyczne są w latin-ext. Próba: „Zażółć gęślą jaźń”.
  • JetBrains Mono do identyfikatorów (numer w rejestrze, numer fabryczny, kod na etykiecie). Powód jest praktyczny: wielkie I, małe l i cyfra 1 muszą się różnić, a zero ma kreskę. Brandbook nie definiuje kroju o stałej szerokości; aplikacja go używa i Kanon to zachowuje jako propozycję.

Skala

Brandbook podaje cztery stopnie z widełkami. Token musi być liczbą, więc Kanon wybiera z widełek jedną wartość i zapisuje, z jakiego przedziału pochodzi. Dwa stopnie (nagłówek karty, drobny podpis) dodaje Kanon, bo brandbook sam ich używa w makietach, ale nie wpisuje do skali.

  • Nagłówek strony44 px / 115% / 700 / trakt -0.02em

    Zażółć gęślą jaźń. 0123456789

    Jeden na stronę. Tytuł ekranu, tytuł rozdziału Kanonu.

  • Nagłówek sekcji30 px / 120% / 700 / trakt -0.015em

    Zażółć gęślą jaźń. 0123456789

    Tytuł sekcji na stronie, tytuł karty urządzenia.

  • Nagłówek karty20 px / 130% / 600 / trakt -0.01empropozycja Kanonu

    Zażółć gęślą jaźń. 0123456789

    Tytuł karty, tytuł pozycji w historii, nagłówek grupy w formularzu.

  • Tekst podstawowy16 px / 150% / 400

    Zażółć gęślą jaźń. 0123456789

    Akapity, treść formularzy, opisy.

  • Etykiety i dane14 px / 140% / 600

    Zażółć gęślą jaźń. 0123456789

    Etykiety pól, komórki tabeli, przyciski, pastylki. Dane w wadze Regular, etykiety w SemiBold.

  • Drobny podpis12 px / 135% / 600 / trakt 0.06empropozycja Kanonu

    Zażółć gęślą jaźń. 0123456789

    Kicker nad nagłówkiem (wielkie litery, fiolet), podpis pod przykładem, numer strony. Nigdy do treści, którą trzeba przeczytać w całości.

StopieńBrandbook (s. 9)Kanon wybiera
Nagłówek strony40 do 48 px / 110 do 120% / Bold44 px / 115% / 700, trakt -0,02 em
Nagłówek sekcji28 do 32 px / 120% / Bold30 px / 120% / 700, trakt -0,015 em
Nagłówek kartybrak20 px / 130% / 600 (propozycja)
Tekst podstawowy16 px / 150% / Regular16 px / 150% / 400
Etykiety i dane14 px / 140% / SemiBold albo Regular14 px / 140% / 600 etykiety, 400 dane
Drobny podpisbrak12 px / 135% / 600, wielkie litery z traktem 0,06 em dla kickera (propozycja)

Zasady składu

  • Jeden nagłówek strony na ekran. Hierarchia idzie w dół bez przeskakiwania poziomów.
  • Szerokość akapitu do 76 znaków. Kanon ma 76ch, aplikacja w widokach prozy 42 rem.
  • Cyfry tabelaryczne w tabelach, listach definicji i osiach czasu (font-variant-numeric: tabular-nums), żeby kolumny dat i liczb stały równo. Ustawione na elemencie table, nie klasą doklejaną ręcznie.
  • Data w tabeli zawsze DD.MM.RRRR. Nazwa miesiąca ma zmienną długość i kolumna przestaje być kolumną. Format długi zostaje w prozie i w PDF.
  • Kicker (drobny podpis wielkimi literami) stoi nad nagłówkiem w fiolecie i mówi, w jakim jesteś rozdziale. Nigdy nie jest jedynym nagłówkiem.
  • Nie używamy kursywy do wyróżnień w interfejsie. Wyróżnienie to waga 600 albo kolor fioletu, jeśli to akcja.

Co zmienić w aplikacji