Brandbook · v1 · 2026-05
Šis puslapis yra dizaino sistemos „šaltinis tiesos tikslu”. Spalvos, tipografija, komponentai — visa, kas naudojama landinge, skydelyje ir admin‑e, gyvena čia ir site/css/brand.css faile.
Trys taisyklės, kurios sprendžia ginčus. Jei surface'as su jais nesutampa — jis klysta, ne jos.
Mėtinė lova ne biuras. Pastel'iniai/cream'iniai foni, koralo akcentas, šriftas su charakteriu. AI produktai pasižymi šaltais mėlynais gradientais — mes esame priešingybė tam.
Kiekviename ekrane viena pagrindinė CTA. Vienas pagrindinis lauko fokusas. Jei reikia dviejų svarbiausių dalykų — vienas iš jų svarbesnis, surask ir paslėpk antrą.
Tekstas — antras dizaino sluoksnis. Trumpai, šiltai, antruoju asmeniu („tu”). Be „transformuok savo darbą su DI”. Be būsimosios. Esamuoju, dabar.
Šilta cream paletė su koralo akcentu. Visada „surface on paper”: korteles dedame ant --paper, taip akcentai turi vietos kvėpuoti.
paper & ink
accent & state
Fraunces displayui — variabili serifa su charakteriu, šilta, lietuviška. Inter body — švari, neutrali, greita. JetBrains Mono skaičiams ir techniniam tekstui.
Kiekvienas šios biblioteką naudojantis ekranas turi šios skyriaus pavyzdžiuose esančius elementus. Naujų variantų be aiškios priežasties nepridedame.
23 el. laiškai sutvarkyti. 4 atsakymai laukia tavo patvirtinimo.
4 px bazinis vienetas. Spinduliai — keturi (sm/md/lg/xl/pill). Nuoseklumas svarbesnis už pikselio tikslumą.
spacing scale
radius scale
Importuok brand.css ir kviek tokenus kaip CSS custom property. Nereikia js-build pipeline, viskas veikia native.
<!doctype html> <html lang="lt"> <head> <link href="https://fonts.googleapis.com/css2?family=Fraunces..." rel="stylesheet"> <link rel="stylesheet" href="/css/brand.css"> </head> <body> <button class="btn">Pradėti</button> <input class="prompt" placeholder="Klausk..."> </body> </html>
Pavyzdžiai naudojami šiose vietose: / · /dashboard · /admin · /setup.