Design | Setlit

Setlit

Živé komponenty · krok 1 · ke srovnání s docs/design-system.html

Dark firstLinear-precision + klubová energie

1 · Barevná paleta

CSS proměnné → utility Tailwindu

Základ jsou neutrály s jemným fialovým nádechem — ne čistě šedé, ty by appce sebraly teplotu. Akcent je jediný: fialová → růžová. Status barvy nesou jen informaci, nikdy dekoraci.

Povrchy

canvas#08070Cpozadí celé appky

surface#0E0D14sidebar, lišty

elevated#14131Ckarty a panely

overlay#1B1A25menu, sekundární tlačítko

inset#050409vstupní pole

Hranice

line-subtle#1C1A28hranice karet

line#272536pole a tlačítka

line-strong#393748hranice při najetí

Značka a akcenty

brand-500#7C5CFFprimární — tlačítka, fokus, aktivní navigace

brand-400#9B7BFFnajetí myší, odkazy

brand-600#6344E0výplň tlačítka — bílý text projde AA

pink-500#FF4D9Dživé stavy, svatby

pink-400#FF7AB6text na tmavém

gradient značky135° #7C5CFF → #FF4D9Djen akce a živé stavy

Status a typy akcí

cyan#22D3EEživé · informace

amber#F5B544čeká se

green#3DDC97hotovo

red#FF5A65zrušeno · chyba

Text

Token	Hodnota	Ukázka	Kde se používá
fg	#EDECF2	Svatba Novákovi	hlavní text
fg-muted	#A5A3B5	Svatba Novákovi	doplňující text
fg-subtle	#85839A	Svatba Novákovi	popisky a nápovědy
fg-disabled	#4A4857	Svatba Novákovi	nedostupné

2 · Typografie

next/font — servírováno z našeho serveru

Tři řezy s jasnou dělbou práce. Nadpisy mají zúžený tracking (−0,02 em), text zůstává neutrální a čitelný, monospace nese všechno, co se má „počítat“ — čas, peníze, kódy akcí.

Space Grotesk · 700Svatba Novákovi

Space Grotesk · 600 / h2Co teď potřebuje pozornost

Inter · 500 / UIDoplňkové služby akce

Inter · 400 / textKlient si vyžádal dýmové miny na první tanec, potvrdit s koordinátorem místa.

JetBrains Mono · 60022:41:07 · AB3F9 · 18 500 Kč

3 · Komponenty

tlačítka · badge · pole

Glow se objevuje jen tam, kde se dá kliknout nebo kde něco žije. Karty mají 14px rádius a 1px hranici — stín místo obrysu. Fokus je vždycky fialový prstenec, i pro toho, kdo appku ovládá klávesnicí.

Tlačítka

Nedostupné a načítání

Nedostupné tlačítko nemá glow ani se nezvedá.

Badge — typ akce, stav, služby

SvatbaFiremníNarozeninyHraníFotokoutek

DoplacenoČeká se na zálohuHraje seZrušeno

Formulářové prvky

Název akce

Kód pro hostyHost zadá na setlit.cz/song nebo naskenuje QR

Cena služby

Přihlašovací e-mailZměna vyžaduje ověření

Stavy pole

Klikni do pole — fokus

ChybaTakový kód neznáme

Nedostupné

S volitelným popisemvolitelné

4 · Pravidla

závazné pro celou appku

Tohle není inspirace, ale pravidla, podle kterých se staví každá další obrazovka. Když bude spor, rozhoduje tenhle seznam.

Rytmus, tvar, pohyb

Mřížka 4 px. Rozestupy 4 / 8 / 12 / 16 / 24 / 32 / 48.
Rádiusy: 6 px pole a badge · 10 px tlačítka a řádky · 14 px karty · 20 px modály · plná pilulka.
Hranice před stíny. 1 px hranice definuje plochu, stín ji jen jemně zvedá.
Glow jen na interakci — primární tlačítko, aktivní navigace, živý stav. Nikdy na statické ploše.
Animace: 120 ms najetí · 180 ms panely · 240 ms sheet a modál, křivka cubic-bezier(.16,1,.3,1).
prefers-reduced-motion vypíná pulzování, ekvalizér i posuny.
Tap target min. 44 px na dotykovém ovládání, v Aktivním režimu 64 px.
Barva nikdy nenese informaci sama — ke stavu vždy text.

Jak se tokeny jmenují v kódu

V design systému	V kódu
--bg-canvas	bg-canvas
--bg-surface	bg-surface
--bg-elevated	bg-elevated
--bg-overlay	bg-overlay
--bg-inset	bg-inset
--border-subtle	border-line-subtle
--border-default	border-line
--border-strong	border-line-strong
--text-primary	text-fg
--text-secondary	text-fg-muted
--text-tertiary	text-fg-subtle
--brand-500	text-brand-500 (fokus, navigace)
výplň tlačítka	bg-brand-solid
--pink-500	text-pink-500
--grad-brand	grad-brand
--radius-lg	rounded-lg
--ease	ease-brand

Výchozí paleta Tailwindu je vypnutá — barva, která není v design systému, v appce neexistuje a nejde ji omylem použít.