Biblioteka komponentów
Każda wartość ma token zdefiniowany w app/globals.css. Ta strona renderuje te same komponenty co reszta aplikacji, więc nie może rozjechać się z produktem.
Kolory semantyczne
primaryMarka, nagłówki, nawigacja
primary-darkHover / stan aktywny
accentGłówne CTA rezerwacji
accent-darkHover accent
successPotwierdzona rezerwacja
warningOstatnie miejsca, zbliżający się termin
dangerBłąd, token wygasł, brak slotów
slate-900Tekst podstawowy
slate-600Tekst drugorzędny
slate-200Obramowania, slot zajęty
slate-50Tło kart, slot wolny
Typografia
text-3xl / Manrope 80030px · tracking-tightCześć Jan!
text-2xl / Manrope 80024pxTermin zarezerwowany
text-xl / Manrope 70020pxWybierz termin
text-base / Inter 40016px · line-height 1.5520.08 mija ważność badania technicznego.
text-sm / Inter 50014pxul. Elewatorska 14, 15-620 Białystok
font-mono13px · JetBrains MonoBI 12345 · 09:30 – 10:15
Button
accent
primary
ghost
neutral
danger
Badge / StatusTag
Wolnyslot dostępny
Zajętyslot zarezerwowany
Zablokowanyblokada diagnosty
Potwierdzonarezerwacja w panelu
Nowa · przed chwiląświeża rezerwacja
Ostatnie miejscakończące się terminy
Stany slotu — wspólne dla obu ekranów
Wolny
Wybrany
Zajęty
Zablokowany
InlineAlert
Ten termin właśnie zajął inny kierowca. Odświeżyliśmy listę — wybierz inną godzinę.
Przypomnimy Ci SMS-em 2h przed wizytą.
Zostały 2 wolne terminy w tym tygodniu.
Spacing, radius, cień
Skala 4 / 8 px
gap-14px
gap-28px
gap-312px
p-416px
p-624px
gap-832px
Radius i cienie
rounded-lgrounded-xlshadow-smshadow-mdrounded-full