Dizajn sustav Pčele (engleski Bee): svijetla i tamna tema, shadcn komponente, smjer Bee productive. Izvor: design system HR i EN (4.11.2026).
Pčela (engleski Bee) je sustav za orkestraciju rada: vodi priču, zadatak ili dokument kroz korake, pušta AI agente da rade ono što smiju sami i zaustavlja tok tamo gdje mora odlučiti čovjek. Smjer dizajna je Bee productive: mirna, gusta radna površina na kojoj se odmah vidi što je na redu, tko je na potezu i koliko je ostalo vremena. Sučelje je crno-bijelo, a žuta iz znaka označava samo ono što je upravo u radu.
primary (crni gumb, u tamnoj temi bijeli). Sve ostalo je secondary, outline ili ghost.agent i agent-soft, korak koji čeka čovjeka nosi human i human-soft. Ta dva para se ne koriste ni za što drugo.mono, a rok koji ističe prelazi u warning.shadow-sm) i plutajuće slojeve (shadow-md). Bez gradijenata, bez obojenih rubova sa strane kartica, bez emojija.background; kartice, paneli i tablice su card s rubom border. Tekst je foreground, sporedni tekst muted-foreground.primary je za glavni gumb i odabranu stavku: crn u svijetloj temi, bijel u tamnoj. Na njemu je primary-foreground.honey (limunasta žuta #f5ce1b, u tamnoj temi #f7d23a) je samo za prvu ćeliju znaka, trenutni korak u StepTrackeru i točku agenta. Na žutoj je on-honey (taman). Žuta nikad nije boja teksta ni pozadina gumba; za žuti tekst i poveznice je honey-ink. Tako se Pčela jasno razlikuje od Sove, čija je glavna boja jantar.accent (svijetla žuta) je hover i aktivna stavka izbornika te pozadina rada agenta.agent i agent-soft (radi AI), human i human-soft (čeka čovjeka), success (Objavljeno), warning (rok, eskalacija, rizik), destructive (Odbij, Povuci, greška). Svaki ima i -soft pozadinu za značke i poruke.success je plavozelen, a destructive crven, pa ih razlikuju i daltonisti. Ipak se stanje nikad ne prikazuje samo bojom: uvijek ima riječ ili ikonu.chart-1 je naš portal (primary), chart-2 prosjek, chart-3 konkurencija.ring najmanje 3:1 na svakoj površini.Obje teme su ravnopravne i koriste iste nazive tokena. Tamna tema nije obrnuta svijetla: podloge su grafitne (background #121317, card #1a1c21), primary je bijel (#f4f4f1), a žuta svjetlija (honey #f7d23a), a tekst na destructive, warning i success postaje taman. Tema prati postavku sustava, a korisnik je može promijeniti u izborniku profila (next-themes, klasa .dark na html).
display za praznu stranicu i prijavu, h1 za naslov ekrana, h2 za odjeljke.h3 za naslov kartice i priče, body za tekst, body-sm za tablice i trag, label za oznake i gumbe, caption za pomoćni tekst, overline za fazu ili kontrolnu točku iznad naslova.mono), s tabular-nums.next/font/google.space-1 4 do space-12 48. Unutar kartice space-4, između kartica space-6, rub stranice space-12 na desktopu i space-4 na mobitelu.radius-md (6 px) za gumbe i polja, radius-lg (8 px, shadcn --radius) za kartice i dijaloge, radius-sm za značke.shadow-sm za kartice i aktivni tab, shadow-md za popover, dropdown, dijalog i toast.lucide-react, kao u shadcn: 16 px u gumbima, izbornicima i značkama, 20 px u praznim stanjima, debljina linije 2, boja currentColor. Agent ima ikonu Sparkles, čovjek User, rok Clock. Emoji se ne koriste.
Znak je saće od četiri spojene ćelije u dva reda; prva ćelija je limunasta žuta (honey). Datoteke su u grupi Logos: bee-mark-light.svg na svijetloj podlozi, bee-mark-dark.svg na tamnoj i bee-favicon.svg s debljim stijenkama za 16-32 px. Naziv se uz znak piše malim slovima u Lexendu 600 ("pčela", na engleskoj instalaciji "bee"), kao živi tekst, ne kao slika. Znak se ne okreće, ne boji drugim bojama i ne slaže u drugi raspored ćelija.
Pčela se isporučuje pod klijentovim imenom. Klijent smije zamijeniti logo u bočnoj traci i na prijavi te tokene primary, primary-foreground, ring, sidebar-primary i honey-ink, uz uvjet da zadrže kontrast iz ovog dokumenta. honey ostaje boja znaka Pčele. Stanja procesa (agent, human, success, warning, destructive), tipografija, razmaci i komponente ostaju isti na svakoj instalaciji, da bi urednik koji prijeđe na drugu instalaciju odmah znao što znači koja oznaka.
Aplikacija koristi shadcn/ui s Tailwindom; tokeni nose iste nazive kao shadcn CSS varijable, pa se globals.css (:root i .dark) slaže izravno iz tablice boja ispod. Gotov isječak je u design system artefaktu.
Komponente se dodaju s npx shadcn add <komponenta>. Ne prepisivati ih rukom i ne graditi vlastiti okvir stranice: okvir je shadcn Sidebar, na mobitelu Sheet. Komponente Pčele (StepTracker, ApprovalCard) slažu se od shadcn dijelova i žive u components/bee/.
Isti sustav na engleskom: https://claude.ai/artifact/FLJvsLggVy3GZkpbRggEy6
| Token | Svijetla | Tamna | Upotreba |
|---|
| Stil | Primjer | Veličina | Upotreba |
|---|---|---|---|
display | Pregled priče | 36px/40px 600 | Naslov prazne stranice i prijave. Najviše jednom po ekranu. |
h1 | Plan priča | 28px/34px 600 | Naslov ekrana. |
h2 | Čeka odobrenje | 20px/28px 600 | Naslov odjeljka i dijaloga. |
h3 | Vlada spušta cijene goriva | 16px/24px 600 | Naslov kartice i priče. |
body | Urednik Sporta treba odobriti objavu do 10:30. | 14px/20px 400 | Osnovni tekst sučelja. |
body-sm | Predano 10:02 · provjere gotove 10:03 | 13px/18px 400 | Gusti prikazi: tablice, trag procesa. |
label | Rubrika | 13px/18px 500 | Oznake polja, gumbi, tabovi. |
caption | Prije 4 min | 12px/16px 400 | Pomoćni tekst, vrijeme, opisi ispod polja. |
overline | KT3 · ODOBRENJE OBJAVE | 11px/16px 600 | Oznaka faze ili kontrolne točke iznad naslova; uvijek velikim slovima. |
mono | 48.200 · +12 min · 0,04 $ | 12.5px/18px 500 | Brojke, ID-jevi, trošak, vremena u tablicama. |
Gumb za jednu radnju; u aplikaciji je to shadcn Button iz components/ui/button.
Varijante: default (crni, u tamnoj temi bijeli; primary) za glavnu radnju ekrana, secondary, outline za sporednu radnju uz glavnu, ghost za tihe radnje u tablicama i trakama, destructive za Odbij i Povuci, link za prijelaz u drugi sustav. Veličine: sm 32 px, zadana 36 px, lg 40 px, icon 36 x 36.
default gumb po ekranu ili kartici. Na kartici odobrenja to je Odobri.aria-label.destructive i traže potvrdu u dijalogu.Što daje korisnik komponente: tekst ili children, variant, size, onClick, po potrebi disabled i asChild za poveznicu.
Kratka oznaka stanja, kategorije ili vrste priče; shadcn Badge s dodanim varijantama za stanja procesa.
agent: korak radi AI agent sam (agent na agent-soft, s točkom).suggest: AI je dao prijedlog koji čeka prihvaćanje (isprekidani rub agent).human: korak čeka odluku čovjeka, kontrolnu točku (human na human-soft).success Objavljeno, warning rok ili rizik, destructive Odbijeno ili Povučeno.Ostale: default (crna) samo za Breaking, secondary za Nacrt i neutralna stanja, outline za kategoriju (Sport, Showbiz, Politika).
outline.Okvir za jednu priču, panel ili skup podataka; shadcn Card s CardHeader, CardTitle, CardDescription, CardContent i CardFooter.
Kartica priče (Plan priča, Ulaz): iznad naslova je overline s kategorijom i fazom, naslov je h3, ispod je meta u muted-foreground (tko, kada, rok). Slijedi red sa značkom stanja, kategorijom i troškom u mono, a u podnožju najviše dva gumba.
card s rubom border, kut radius-lg, sjena shadow-sm. Ne dodavati obojeni rub sa strane; stanje nosi značka.space-4, a razmak između kartica space-6.Polje za unos s oznakom i pomoćnim tekstom; shadcn Input uz Label, u obrascu kroz Form (react-hook-form + zod).
label). Placeholder nije zamjena za oznaku.caption u muted-foreground.destructive, aria-invalid, a poruka kaže što ne valja i kako popraviti ("Rok je prošao. Upiši vrijeme nakon 10:15."). Bez isprika.radius-md, rub input, fokus prsten ring.Prebacivanje između pogleda istog skupa; shadcn Tabs s TabsList i TabsTrigger.
mono.| Članak | Kategorija | Čitatelji 24 h | Prema konkurenciji | Stanje |
|---|---|---|---|---|
| Vlada spušta cijene goriva | Politika | 48.200 | +12 min | Objavljeno |
| Hajduk dovodi novog trenera | Sport | - | - | Čeka urednika |
| Rezultati 12. kola | Sport | 21.940 | prvi | Objavljeno |
| Glazbeni festival otkazan | Showbiz | - | - | Odbijeno |
Popis priča i brojki; shadcn Table, a za sortiranje i filtere DataTable (TanStack Table).
mono s tabular-nums. Tisuće s točkom, decimale sa zarezom (48.200; 0,04 $).caption u muted-foreground, bez velikih slova.muted. Klik na red otvara Pregled priče.Poruka o stanju sustava ili roku unutar stranice; shadcn Alert s AlertTitle i AlertDescription, varijante info, warning i destructive.
warning za rokove i eskalacije, destructive za greške integracija (Labrador, Teams), info za potvrde.Faze jedne priče kao ćelije saća; komponenta Pčele izvedena iz znaka, nema je u shadcn.
done: puna ćelija u foreground, linija do sljedeće također.current: žuta ćelija (honey) s tamnim rubom; korak u tijeku, najčešće ga radi agent.waiting: ćelija u human-soft s rubom human; čeka kontrolnu točku. Natpis je u human i podebljan.pending: samo rub input.current ili waiting.{ name, state }) i ne računa stanje sama.Kartica kontrolne točke na kojoj čovjek odlučuje; komponenta Pčele složena od shadcn Card, Badge i Button. Isti sadržaj ide i u Teams Adaptive Card.
human-soft: oznaka točke ("KT3 · Odobrenje objave") i preostali rok. Kad rok padne ispod 5 min, traka prelazi u warning-soft i warning.h3) i meta.default), povrat (outline) i odbijanje (ghost u destructive). Odbij i Vrati traže kratko obrazloženje u dijalogu.human, jer kartica čeka čovjeka.Glavna navigacija Deska; shadcn Sidebar (SidebarProvider, SidebarGroup, SidebarMenu, SidebarMenuButton), na mobitelu kao Sheet.
sidebar-accent i ikonu u honey-ink. Broj stavki koje čekaju je u mono, desno.