Design System

Documentation visuelle complète de l'écosystème BossBot — couleurs, typographie, composants et patterns

Palette Principale

BG
Background
#050304
CARD
Card
rgba(18,13,11,0.65)
ACCENT
Accent
#ff7b35
ACCENT2
Accent Light
#ffa552
TEXT
Text
#fff8f5
OK
Success
#22c55e
WARN
Warning
#fb923c
ERR
Danger
#ef4444

Couleurs par Agent

🤖 BossBot
🌐 Webby
🎨 Pixel
🔧 SysOps
🐛 Debugger
🏗️ Architect
💬 Douss

Typographie

48px / 800
Brand Title
22px / 700
Page Heading
18px / 700
Section Heading
15px / 600
Card Title
13px / 400
Body text — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
11px / 700 / 0.16em
Section Label

Composants

App Card
🚀 Application Description de l'application avec hover effect
Status Card
Container Name
Up 3 hours
image:latest
Buttons
Status Badges
À faire En cours Bloqué Terminé
Progress Bars
Low (45%)
Medium (72%)
High (91%)
CSS Variables
:root { --bg: #050304; --surface: #0a0706; --card: rgba(18, 13, 11, 0.65); --text: #fff8f5; --accent: #ff7b35; --accent-2: #ffa552; --success: #22c55e; --danger: #ef4444; --ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }