Bono · Design System
Sistemul Bono.
Tokens, componente si referințe vizuale pentru interfețele Bono The Edge. Sursa de adevăr e bono-ds.css — pe el îl importi în orice pagină nouă.
Markup canonic · components/welcome.json
Bono · Design System
Sistemul Bono.
Tokens, componente și referințe vizuale pentru interfețele Bono The Edge.
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.
Explorează
Tokeni canonici de culoare — brand, surfaces, text, status.
Scara tipografică, Fraunces, T-em, T-actor, numerice mono.
Variante (primary, secondary, ghost, dark, outline, danger), mărimi, focus.
Field + label + input + help; variante alb/tonal, lg, search, states.
Zonă de drop + listă de fișiere, cu slot de înălțime fixă; progres, succes și eroare pe rând.
Disclosure pentru conținut secundar — flush, contained, sm.
Tonal, filled, compact, cu dot — pe status, AI, categorii.
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.