Liquid Glass — composants
La bibliothèque de base des écrans Oslaw. Chaque composant hérite des tokens et de la matière verre ; les écrans se composent d'ici, sans réinventer la grammaire.
Typographie
Inter pour tout — titres, corps ET chiffres (tabular-nums) ; le mono système est réservé au code. Une échelle, des graisses disciplinées. La base de toute mise en page — à reprendre via les tokens, jamais en dur.
Interface, titres & chiffres — optical sizing + tabular-nums pour les montants
font-sans / font-displayCode technique uniquement — noms de tokens, gabarits, chemins (jamais les chiffres)
font-mono--fs-5xl36 px--fs-4xl28 px--fs-3xl22 px--fs-2xl19 px--fs-xl17 px--fs-lg16 px--fs-md13 px--fs-sm13 px--fs-xs12 px--text-1 · 0.88--text-2 · 0.56--text-3 · 0.40Couleurs
La palette complète — encre & neutres, action azur, lavande IA, statuts, washes, surfaces pleines et matière verre. Source unique : les tokens de globals.css. À reprendre via les tokens (text-ink, bg-azur, var(--glass-fill)…), jamais en dur.
Texte, surfaces sombres, échelle de gris.
--o-ink#14161d--o-ink-soft#262a33--o-ink-hover#383d49--o-graphite#474c58--o-slate#6e7484--o-silver#9aa0ad--o-mist#e4e7eeCouleur primaire : actions, liens, états sélectionnés.
--o-azur#0164e1--o-azur-deep#0150b8--o-azur-tintrgba(1,100,225,.12)Réservée à l’automatisation / l’IA (AutoBadge). À ne pas détourner.
--o-lav#7a6bf0--o-lav-soft#b8b7d9--o-lav-tintrgba(122,107,240,.14)Succès, attention, alerte — et leurs teintes de fond.
--o-emerald#2da44e--o-emerald-tintrgba(45,164,78,.13)--o-amber#bd7d22--o-amber-tintrgba(189,125,34,.15)--o-signal#d4493a--o-signal-tintrgba(212,73,58,.13)Dégradés de fond très clairs (StatCard, bandeaux).
--wash-azurrgba(224,233,255,.7)--wash-emeraldrgba(225,242,230,.7)--wash-signalrgba(255,229,226,.65)--wash-amberrgba(255,243,224,.7)Fonds colorés opaques des cartes « couleur vive ».
--surface-azur#0164e1--surface-amber#f19b34--surface-sand#e2d6b6--surface-emerald#2da44e--surface-signal#d4493a--surface-white#ffffffGris neutre en creux, filets de séparation et fonds d’interaction (survol, sélection).
--o-track#f3f3f3--o-linergba(20,22,29,.1)--o-line-softrgba(20,22,29,.06)--o-separator#f3f3f3 (= track)--o-fill-hoverrgba(20,22,29,.04)--o-fill-activergba(20,22,29,.05)--o-fill-subtle.05 (= fill-active)Fonds translucides, arête spéculaire et filet du Liquid Glass.
--glass-fillrgba(255,255,255,.56)--glass-fill-strongrgba(255,255,255,.76)--glass-fill-softrgba(255,255,255,.34)--glass-fill-modalrgba(255,255,255,.9)--glass-fill-inkrgba(20,22,29,.8)--glass-strokergba(20,22,29,.07)--glass-edgergba(255,255,255,.85)Surfaces en verre
GlassPanel est le conteneur de base. Quatre intensités, une arête spéculaire fine, rendu plat (sans ombre portée).
backdrop-filter + arête spéculaire
backdrop-filter + arête spéculaire
backdrop-filter + arête spéculaire
overlay sombre · sidebar · toast
Icônes de marque
Un glyphe Lucide blanc dans une pastille teintée : chaque famille de couleur type une action ou une catégorie d'un coup d'œil. Primitive FeatureIcon, à poser au cas par cas devant un libellé. La lavande reste réservée à l'IA/automatisation.