Bono · Design System
Sistemul Bono.
Tokens, componente și referințe vizuale pentru interfețele Bono The Edge.
Cum folosești design system-ul
Alege unde lucrezi și ia doar pașii care te privesc. În orice variantă cu Claude, cuvântul „Bono” sau „Edge” în cerere e cel care pornește skill-ul: „fă-mi un ecran de login Bono”. Fără el, Claude face UI generic.
Ești în organizația Bono pe claude.ai? Skill-ul e deja acolo. Scrii /edge33 sau ceri direct un ecran Bono.
Nu ești în organizație? Îl încarci tu, o singură dată, în contul tău:
- Descarcă arhiva skill-ului. E ultimul release, același număr ca în producție, și se regenerează singur la fiecare release.
Descarcă edge-33-skill.zip - În claude.ai: Settings → Capabilities → Skills → Upload.
- Gata. Ceri un ecran „Bono” și skill-ul pornește.
Skill-ul din Chat și cel din Claude Code sunt instalări separate, nu se văd unul pe altul.
Aplicația desktop, sesiune locală. Se instalează o singură dată și rămâne pe calculatorul tău. Merge pentru oricine, marketplace-ul bono-skills e public.
- Apasă + lângă caseta de mesaj → Plugins → Add plugin.
- Marketplace:
bono-ro/bono-skills. Plugin:design-skills. - De acum ceri orice UI cu „Bono” sau „Edge” în propoziție.
Dacă lucrezi din terminal, același lucru în două comenzi:
/plugin marketplace add bono-ro/bono-skills /plugin install design-skills@bono-skills
Ai primit „/plugin isn't available in this environment”? E normal în caseta de chat a aplicației: comanda aia desenează un panou care are nevoie de terminal. Folosește butonul + de mai sus. Pluginul urmărește main, deci din când în când /plugin update.
Claude Code pe web (claude.ai/code) sau aplicația desktop pe o sesiune cloud. Containerul e nou la fiecare sesiune, așa că aici nu există un buton de instalare: pluginul vine din repo-ul pe care lucrezi.
- În repo, creează sau completează
.claude/settings.jsoncu blocul de mai jos. - Commit. De atunci îl au toți cei care deschid o sesiune cloud pe repo-ul ăla.
{
"extraKnownMarketplaces": {
"bono-skills": { "source": { "source": "github", "repo": "bono-ro/bono-skills" } }
},
"enabledPlugins": { "design-skills@bono-skills": true }
}
Dacă fișierul există deja, adaugi doar cele două chei lângă ce e acolo.
Fără Claude, în orice proiect HTML sau React.
- Copiază
bono-ds.cssîn rădăcina proiectului, o singură copie, cu antetul de proveniență pe prima linie. Nu face<link>la deploy-ul ăsta:mainse schimbă zilnic și ți-ar muta UI-ul fără să ceri. - Leagă relativ:
<link rel="stylesheet" href="bono-ds.css">. - Markup-ul componentelor îl copiezi din paginile din sidebar. Unde ai React, componenta din
react/e forma implicită.
Regulile de copiere, ștampilă și re-ștampilare sunt în SKILL.md, secțiunea „Canonical CSS source”. Pentru producție, CSS-ul se ia din release-ul numerotat, nu din main.
Cum e organizat
Sidebar-ul listează câte o pagină per componentă — câte un buton, input, badge sau modal pe o pagină dedicată. Foundation e împărțit pe topicuri (colors, typography, spacing, grid, sections). Componentele marcate WIP sunt cele în lucru — restul sunt stable și nu primesc badge.
Paginile sunt momentan minimale (header + demo). Pe rând sunt repopulate cu informațiile relevante (variante, reguli, accesibilitate, copy guidance) pe sablonul dezvoltat în paralel.
Trei niveluri · ce ajunge în DS-ul de producție
DS-ul de producție e mai mic decât catalogul ăsta: din el pleacă doar componentele. Organismele și pattern-urile rămân aici, în edge-33, ca referință de compoziție — sunt ale produsului, nu ale sistemului.
- Numește ceva din business-ul Bono? (document, semnatar, Vox, firmă) → organism, oricât de reutilizabil pare.
- L-ar putea folosi neschimbat un produs complet diferit? → componentă.
- E o aranjare, nu un lucru? (un shell, un layout, un flux) → pattern.
Exemplul e deja în repo: doc-sheet a fost deprecat pe 2026-09-16 și
înlocuit de .sheet.attached + .doc-list — adică organismul s-a
spart într-o componentă generică plus conținutul lui de domeniu.
Exact mișcarea pe care o cere separarea de mai jos.
Explorează
Foundation
Colors
Tokeni canonici de culoare — brand, surfaces, text, status.
Foundation
Typography
Scara tipografică, Fraunces, T-em, T-actor, numerice mono.
Forms
Button
Variante (primary, secondary, ghost, dark, outline, danger), mărimi, focus.
Forms
Input
Field + label + input + help; variante alb/tonal, lg, search, states.
Forms
Uploader
Zonă de drop + listă de fișiere, cu slot de înălțime fixă; progres, succes și eroare pe rând.
Data
Accordion
Disclosure pentru conținut secundar — flush, contained, sm.
Feedback
Badge
Tonal, filled, compact, cu dot — pe status, AI, categorii.
Data
KPI card
Income / expense / profit / due, plus varianta dark pentru scadențe critice.
Logo
assets/logo-full.svg (complet, roz). Variantele logo-black.svg și logo-white.svg sunt pentru fonduri speciale. Nu recrea logo-ul în CSS, folosește SVG-ul.