System designu Termbee

Jeden arkusz termbee-ui.css dla wszystkich ekranów produktu. Ta strona jest jednocześnie dokumentacją i testem: rysuje ją dokładnie ten plik, a kontrast każdej pary kolorów jest liczony w przeglądarce, nie deklarowany.

miód = akcent karty białe na kremowym AA ≥ 4.5:1

Tokeny

Wszystko jest zmienną CSS. Zmiana marki = podmiana kilku zmiennych, nie przepisywanie ekranów. Kolory „surowe" (--brand, --ok) są do wypełnień; do tekstu służą warianty --*-text.

Kontrast — policzony, nie obiecany

Wartości poniżej liczy JS: pobiera realne wartości zmiennych przez getComputedStyle i stosuje wzór WCAG 2.1. Próg dla tekstu to 4.5:1, dla dużego tekstu i elementów graficznych 3:1.

Pary kolor tekstu / tło

ParaMotywTekstTłoKontrastPrógWynik
Miód #F6A81C na białym daje 2.0:1 — dlatego w systemie nie ma go jako koloru tekstu. Jest jako tło z grafitem (8.6:1) i jako --brand-text (#9C5C00, 5.3:1).

Typografia

Kiedy: Sora tylko na nagłówki, liczby KPI i numery kroków. Inter na całą resztę. Nigdy odwrotnie — Sora w tekście ciągłym męczy.

Widget wolnych terminów

Sekcja ekranu — Sora 700

Nagłówek karty — Sora 700, 15px

Tekst treści: Inter 400/14px, interlinia 1.55. Pogrubienie na 600. Maksymalna szerokość akapitu to 62–70 znaków.

Podpis / metadana — --ink-3, 12.5px.

Etykieta wersalikowa

Widget wolnych terminów

Sekcja ekranu — Sora 700

Nagłówek karty — Sora 700, 15px

Tekst treści: Inter 400/14px, interlinia 1.55. Pogrubienie na 600. Maksymalna szerokość akapitu to 62–70 znaków.

Podpis / metadana — --ink-3, 12.5px.

Etykieta wersalikowa

tb-card

Kiedy: każda treść na ekranie siedzi w karcie. Karta = biała powierzchnia na kremowym tle, ciepła ramka, cień --shadow-sm. Nigdy karta na karcie — zamiast tego separator lub --surface-2.

1

Kogo pokazuje widget

Specjalista albo placówka
gotowe

Nagłówek z numerem kroku, treść, opcjonalna stopka z akcją.

Zmiany zapisują się same
tb-card--brand — karta wyróżniona miodowym washem. Maksymalnie jedna na ekran.
1

Kogo pokazuje widget

Specjalista albo placówka
gotowe

Wariant numeru --hex — heksagon zamiast kwadratu.

Zmiany zapisują się same
tb-card--brand — karta wyróżniona miodowym washem. Maksymalnie jedna na ekran.

tb-step

Kiedy: instrukcja, którą użytkownik wykonuje po kolei (wklej kod, podłącz kalendarz). Numer w miodowym kwadracie lub heksagonie. Do stanu procesu (zrobione / w toku) użyj tb-checklist, nie kroków.

  1. Wejdź w stronę lub wpis i dodaj blok Własny kod HTML.
  2. Wklej skopiowany kod. W edytorze zobaczysz zwykły link — to normalne.
  3. Zapisz i podejrzyj stronę. Linijkę <script> wklejasz raz.
  1. Konto potwierdzone
  2. Podłącz kalendarz — wariant heksagonalny.
  3. Opublikuj pierwsze terminy.

tb-btn

Kiedy: primary — jedna akcja główna na ekran (miód + grafit). ghost — akcje drugorzędne. soft — akcja markowa w gęstym interfejsie. danger — usuwanie, odłączanie. quiet — akcje w wierszu tabeli. Tekst na miodzie jest zawsze grafitowy; biel na miodzie to 2:1.

tb-pill · tb-chip · tb-badge

Kiedy: pill = stan obiektu (opublikowane, błąd tokenu) — nie klika się. chip = filtr, który użytkownik włącza. badge = licznik przy nawigacji lub etykieta techniczna.

Opublikowano Do weryfikacji Token wygasł Zaplanowane Pro Szkic
7 3 v2 data-tb-doctor
Opublikowano Do weryfikacji Token wygasł Zaplanowane Pro Szkic
7 3 v2 data-tb-doctor

tb-field · tb-switch

Kiedy: etykieta wersalikowa nad polem (wzór generatora), podpowiedź pod polem — pełnym zdaniem, po ludzku. tb-switch gdy zmiana działa natychmiast; checkbox tylko w formularzach z przyciskiem „Zapisz".

Widget na stronie profilu lekarza → wybierz specjalistę.

Podaj pełny adres z https://

Widget w nagłówku strony → wybierz placówkę.

Podaj pełny adres z https://

tb-seg

Kiedy: 2–4 wykluczające się opcje widoczne od razu (motyw, język, zakres dat). Powyżej 4 opcji → select. Komponent obsługuje aria-pressed i aria-selected — generator używał pierwszego, dashboard drugiego, teraz działa jedno i drugie.

tb-tabs

Kiedy: ta sama treść w kilku odmianach (instrukcja per CMS). Nie do nawigacji między ekranami — od tego jest sidebar.

  1. Dodaj blok Własny kod HTML.
  2. Wklej kod i zapisz.
  1. Dodaj blok Własny kod HTML.
  2. Wklej kod i zapisz.

tb-table

Kiedy: lista obiektów z porównywalnymi atrybutami (placówki, specjaliści, publikacje). Na telefonie tabela przewija się poziomo — kolumna z nazwą zawsze pierwsza.

SpecjalistaStatusWolnych
lek. Anna Kowalska
ginekolog-położnik
 Publikuje18
dr n. med. Piotr Nowak
pediatra
 Do weryfikacji4
lek. M. Wiśniewska
endokrynolog
 Token wygasł0
SpecjalistaStatusWolnych
lek. Anna Kowalska
ginekolog-położnik
 Publikuje18
dr n. med. Piotr Nowak
pediatra
 Do weryfikacji4
lek. M. Wiśniewska
endokrynolog
 Token wygasł0

tb-kpi

Kiedy: maks. 4 liczby na górze ekranu. Zawsze z odniesieniem (zmiana vs poprzedni okres) — sama liczba nic nie mówi. Kafel w wąskim kontenerze chowa ikonę sam z siebie (@container).

Opublikowane terminy
1 284
▲ 12% vs poprzedni tydzień
Rezerwacje z widgetu
96 / 120
▼ 4% limit planu
Opublikowane terminy
1 284
▲ 12% vs poprzedni tydzień
Rezerwacje z widgetu
96 / 120
— 0% limit planu

tb-bar

Kiedy: wykorzystanie limitu i postęp długiej operacji (import rosteru). Zawsze z etykietą liczbową obok — sam pasek to zgadywanka.

Terminy w planie96 / 120
Wykorzystanie SMS112 / 120
Limit APIprzekroczony
Terminy w planie96 / 120
Import rosteruukończony

tb-callout

Kiedy: jedna myśl, której użytkownik nie może przeoczyć, osadzona w treści. Tekst zawsze grafitowy na tincie — kolor niosą ikona i ramka. Do błędów pola służy tb-field__error, nie callout.

Jeden skrypt na całą stronę. Linijkę <script> wklejasz raz — obsłuży wszystkie widgety.
Zmiana kolorów działa wstecz. Ustawienia marki aktualizują wszystkie osadzone widgety.
Token wygaśnie za 6 dni. Odnów połączenie, żeby publikacja nie stanęła.
Kalendarz podłączony. Pierwsze terminy pojawią się w ciągu kilku minut.
Jeden skrypt na całą stronę. Linijkę <script> wklejasz raz — obsłuży wszystkie widgety.
Zmiana kolorów działa wstecz. Ustawienia marki aktualizują wszystkie osadzone widgety.
Token wygaśnie za 6 dni. Odnów połączenie, żeby publikacja nie stanęła.
Kalendarz podłączony. Pierwsze terminy pojawią się w ciągu kilku minut.

tb-checklist

Kiedy: onboarding i „co jeszcze zostało". Dokładnie jedna pozycja --now — to ona mówi, co robić dalej.

✓ Konto potwierdzone12 sierpnia
2 Podłącz kalendarzBez tego widget nie ma czego pokazać
3 Wklej widget na stronęGenerator kodu
✓ Konto potwierdzone12 sierpnia
2 Podłącz kalendarzBez tego widget nie ma czego pokazać
3 Wklej widget na stronęGenerator kodu

tb-code

Kiedy: wszędzie, gdzie użytkownik ma coś skopiować. Przycisk kopiowania w pasku, nie pod spodem. Po skopiowaniu — potwierdzenie (toast), bo inaczej ludzie klikają drugi raz.

Kod do wklejenia

<!-- termbee — wolne terminy: lek. Anna Kowalska -->
<a href="https://termbee.app/p/d-kowalska"
   data-tb-doctor="d-kowalska"
   data-tb-type="button">Umów wizytę</a>

Kod do wklejenia

<!-- termbee — wolne terminy: lek. Anna Kowalska -->
<a href="https://termbee.app/p/d-kowalska"
   data-tb-doctor="d-kowalska"
   data-tb-type="button">Umów wizytę</a>

tb-modal · tb-drawer · tb-popover

Kiedy: modal — decyzja, której nie da się odłożyć (potwierdzenie, wejście w konto klienta). szuflada — szczegóły obiektu bez utraty listy w tle. popover — menu i powiadomienia. Wszystkie zamyka Esc i kliknięcie w tło.

Warstwy dziedziczą aktualny motyw i paletę z <html> — przełącz motyw u góry i otwórz ponownie.

tb-hexfield · tb-hex

Kiedy: znak wodny plastra na nagłówku sekcji i w pustych stanach. Krycie 4–6% — ma być wyczuwalny, nie widoczny. Nigdy pod tekstem tabeli ani formularza. Heksagon jako kształt: pusty = wolny slot, wypełniony miodem = zajęty.

Nagłówek ze znakiem wodnym

--hex-opacity: .055

9:00 10:30 12:00 14:15

Brak opublikowanych terminów

Podłącz kalendarz albo dodaj terminy ręcznie — widget pokaże je od razu.

Wariant --dense

gęstsza siatka, to samo krycie

9:00 10:30 12:00 14:15

Brak opublikowanych terminów

Podłącz kalendarz albo dodaj terminy ręcznie — widget pokaże je od razu.

tb-grid · tb-stack

Kiedy: tb-grid--auto jako domyślny wybór (sam się dzieli, bez breakpointów), --2/--3/--4 gdy liczba kolumn ma znaczenie, --split dla układu generatora (konfigurator + podgląd).

--4
2 kol. @640
4 kol. @900
1 kol. mobile
--split: konfigurator
--split: podgląd (max 560px)

Audyt kontrastu na żywo

Skrypt przechodzi po wszystkich widocznych elementach z tekstem, wylicza efektywne tło (przechodząc w górę drzewa i mieszając półprzezroczyste warstwy) i porównuje z progiem WCAG (4.5:1, a dla dużego tekstu 3:1). To ten sam kod, który uruchamia playwright podczas weryfikacji.

Wynik

Liczenie…