Banksider Style Guide

Design tokeny, komponenty a vzory pro unifikované UI.

Barvy

Blue 500 (Primary)#1E5A8E--color-blue-500
Blue 400#4793C2--color-blue-400
Blue 700#14406A--color-blue-700
Green 500 (Secondary)#3E7C47--color-green-500
Amber 500 (Accent)#E8A857--color-amber-500
Red 500 (Error)#C6543C--color-red-500
Neutral 900#0F172A--color-neutral-900
Neutral 600#475569--color-neutral-600
Neutral 400#94A3B8--color-neutral-400
Neutral 200#E2E8F0--color-neutral-200
Neutral 50#F8FAFC--color-neutral-50
White#FFFFFF--color-neutral-0

Sémantické barvy

--bg-primary
--surface
--brand-primary
--brand-secondary
--brand-accent
--status-error-text

Typografie

Font: Inter (next/font, latin-ext pro české háčky)

Display — 3rem / 800
H1 — 1.875rem / 700
H2 — 1.5rem / 700
H3 — 1.25rem / 600
Large — 1.125rem / 400
Body — 1rem / 400 (výchozí)
Small — 0.875rem / 400
Label — 0.75rem / 600 / uppercase

Spacing (4px base)

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px

Buttons

Velikosti

Stavy

Alerts

Formulářové prvky

Cards

Základní karta

Statická karta s titulem a obsahem.

Interaktivní karta

Hover efekt s elevation a translateY.

Shadows

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl

Border Radius

sm (6px)
md (8px)
lg (12px)
xl (16px)
full (9999px)