ask.gobananas.cz / design tokens
Design system
Source of truth pro tokeny napříč platformou. Tokeny žijí v apps/web/lib/design-tokens.ts; Tailwind utility classes je vystavují s lehkým přejmenováním pro ergonomii. Tahle stránka existuje pro vizuální review — neměj v produkci žádný odkaz na ni.
<AIHeroBlock>
Hlavní komponenta dashboardu. Tři stavy (ready / loading / error), staggered reveal, count-up na číselném accentu. Voice mic je placeholder. Reference: spec sec 22 + mockup dashboard-coral.png (čeká na přiložení).
Pavle, dobré ráno ☀️
Hrubá marže 0.0 % v posledním týdnu.
Dětská kolekce 5218 (028 s květy) drží sezónní výkon — meziroční růst objemu o 28 %, hrubá marže 60 % v Jonap own-brand prodejích. B2B podíl rostl z 38 na 44 %.
Pozor na zásoby: model B12SV (Velikost 30) se prodává rychleji než plán. Při aktuální velocity ~5 ks/den dochází zásoba do dvou týdnů — stihni doobjednat u dodavatele.
Dashboard layout — RiskStrip, DashboardSection, StatRow
Tři komponenty pro přestavěný klientský dashboard. Risk strip pod AI hero, pak themed sekce: hlavička + AI shrnutí + řádek čísel + Detail. Žádné boční pruhy, žádné vnořené karty, sekce čteme jako souvislou sekvenci.
RiskStrip — 3 položky
- Detail
Stockout: JP-100 dochází za 6 dní
Při aktuální prodejní rychlosti 4,2 ks/den dojde zásoba před koncem května — objednej doplnění hned.
- Detail
Únava kreativy v kampani Jaro 2026
Frekvence vyšplhala na 4,1 a CTR za týden klesl o pětinu — připrav novou variantu kreativy.
Segment „děti 5–7 let" je zralý na repeat-purchase
U 38 zákazníků uplynulo 9 měsíců od posledního nákupu dětské obuvi — ideální okno pro připomínkovou kampaň.
RiskStrip — prázdný stav
Vše vypadá v pořádku
AI nenašla žádná rizika ani příležitosti, které by teď vyžadovaly pozornost.
RiskStripSkeleton — Suspense fallback
DashboardSection + StatRow — sekvence sekcí
Nákupy a zisk
posledních 7 dníAIMarže drží nad cílem díky vyšší ceně jarní kolekce; náklady na zboží rostou pomaleji než obrat.
- Čistá marže
- 1 240 500 Kč
- +12,4 %vs. minulý týden
- Obrat
- 4 380 200 Kč
- +8,1 %vs. minulý týden
- Marže %
- 28,3 %
- +1,2 b.
- Náklady na zboží
- 3 139 700 Kč
- +5,9 %
Skladovost
aktuální stavShrnutí pro toto období zatím není k dispozici.
- Hodnota skladu
- 2 870 000 Kč
- Obrátka
- 6,1×
- −0,3×
- Položky pod minimem
- 4
- +2
Bento primitiva
Karty pro dashboard layout. HeroMetricCard reuse count-up. WarningCard má border-left coral. DarkAnchorCard slouží jako vizuální kotva v gridu.
Čistá marže
0 Kč
12,4 %vs. minulý týden
Čistá marže %
0,0 %
0,8 p.b.vs. minulý týden
Počet objednávek
0
3,2 %vs. minulý týden
ROAS celkový
0,00
0,0 %stabilní
Tržby (posledních 7 dní)
0 Kč
+28,4 %meziroční růst
Stockout: B12SV (Velikost 30) za 10 dní
Při aktuální sales velocity ~5 ks/den dochází zásoba modelu B12SV ve Velikosti 30 před koncem května. Doporučujeme objednat u dodavatele tento týden, jinak hrozí stopnutí reklam na top variantu.
Cream paleta
Off-white base. Vrstvy oddělené světlostí, ne čarami.
cream-bg
#F4F2EE
outer container
cream-surface-bg
#FBFAF7
inner container
cream-surface
#FFFFFF
card
cream-surface-muted
#EEEDE7
subtle separation
Coral paleta
Jediný UI accent. Tlumená, ne křiklavá.
coral-50
#FAECE7
light fill (chips, badges)
coral-100
#F5C4B3
subtle accent
coral-200
#F0CDBC
borders, selection
coral-400
#E89B7E
primary accent (mic, avatar)
coral-500
#D85A30
hover primary
coral-600
#C66B45
text on light, italic accent
coral-800
#993C1D
text on coral fill
coral-900
#3D1A0A
text on coral fill (high contrast)
Banana yellow
Rezervovaná pro brand moments. Coral zůstává jediný funkční UI accent.
banana
#F5E663
Povolené použití: logo, achievement badges, welcome illustrace, eastereggs. Vždy s tmavým textem (WCAG 8.5:1 ✓). Yellow text na cream je nečitelný (1.2:1 FAIL) — nikdy ho nepoužívej jako foreground.
Zakázané: chart accenty, CTA buttons, hover states, warning indikátory, focus rings. To všechno je doménou coralu.
Achievement badges — ukázka
Foreground (text)
Tři úrovně. Spec je nazývá text.primary / .secondary / .tertiary, Tailwind vystavuje jako fg / fg-muted / fg-subtle.
The quick brown fox jumps over the lazy dog 0123
fg
#0A0A0A
primary text
The quick brown fox jumps over the lazy dog 0123
fg-muted
#5D5A54
secondary text
The quick brown fox jumps over the lazy dog 0123
fg-subtle
#8B8780
tertiary / meta
Sémantické barvy
Tlumené, nikoli neonové. Warning není křiklavá amber.
success
#0F766E
warning
#B45309
danger
#A32D2D
Typografie
Geist Sans (body), Instrument Serif (display & italic accenty), Geist Mono (čísla, kód). Dvě váhy: 400 a 500.
display · 56px · Instrument Serif
Pavle, čistá marže roste.
hero · 48px · Instrument Serif
Hero headline accent
h1 · 32px · Geist Sans medium
Sekce dashboardu
h2 · 24px · Geist Sans medium
Hlavní headline kartičky
h3 · 18px · Geist Sans medium
Sub-headline
body-lg · 16px · Geist Sans regular
Klíčový lead odstavec v AI Hero Bloku. Lidsky podaný komentář s konkrétními čísly.
body · 14px · Geist Sans regular
Standardní text aplikace. Tabulky, popisy, formuláře.
small · 13px · Geist Sans regular
Sekundární popisek, label nad fieldem, meta info.
micro · 11px · Geist Mono
FROM 2026-05-12 TO 2026-05-18
mono · numbers
1 248 530 Kč
Border radius
Šest úrovní, plus full pro pily.
sm
8px
md
12px
lg
14px
xl
18px
2xl
24px
full
9999px
Shadows
Tři úrovně elevation + coral focus ring.
sm
0 1px 2px rgba(0,0,0,0.04)
md
0 4px 12px rgba(0,0,0,0.06)
lg
0 8px 24px rgba(0,0,0,0.08)
focus
0 0 0 3px rgba(232, 155, 126, 0.3)
Motion
Tři doby + jeden snadný easing. Najeď myší — uvidíš rozdíl.
easing: cubic-bezier(0.16, 1, 0.3, 1)
Mini-komponenty
Validace tokenů v kontextu. Reálné <AIHeroBlock>, <HeroMetricCard> přijdou v Block C.
Čistá marže (Kč)
248 530
+12.4 % vs. minulý týden
Risk
Stockout: JP-100 za 6 dní
Při aktuální sales velocity 4.2 ks/den dochází zásoba před koncem května.
Admin (night) paleta
Použito pouze v /admin/*. Klientská zóna je light-only.
/admin/*
Linear-style command palette
Dark mode default v admin zóně. Coral zůstává accent, ale méně přítomný — focus rings a active states.
bg
#0A0A0A
surface
#171717
border
#262626
fg
#FAFAF7
fg-muted
#A3A099
accent (coral-400)
#E89B7E