---
title: "uh!ive — Guide de Direction Artistique"
subtitle: "Design System v2.2.0 — Référence officielle"
version: "2.2.0"
statut: "Référence officielle — source de vérité écrite"
maj: 2026-06-16
figma_file: "uhlive — Branding"
figma_key: "8SG5KSZ5o3cvTseRRAgDDP"
figma_url: "https://www.figma.com/design/8SG5KSZ5o3cvTseRRAgDDP/uhlive-Branding"
tags: [uhlive, design-system, direction-artistique, figma]
---

# uh!ive — Guide de Direction Artistique
## Design System v2.2.0 — Référence officielle

Ce document est la **source de vérité écrite** du design system uh!ive. Il croise chaque règle de la direction artistique avec son **implémentation Figma réelle** : pour chaque élément, le nom exact du token, du style ou du composant tel qu'il existe dans le fichier.

- **Bibliothèque vivante** : fichier Figma `uh!ive — Branding` (`8SG5KSZ5o3cvTseRRAgDDP`).
- **Référence écrite** : ce document.
- **Règle d'or** : les **variables** sont la source de vérité des couleurs et dimensions. Les styles (texte, dégradés, effets) et les composants en découlent.

---

## Mode d'emploi

### Consommer le système dans un autre fichier

1. Publier le fichier `uh!ive — Branding` en bibliothèque : panneau **Assets** → icône bibliothèque → **Publier**.
2. Dans le fichier consommateur : **Assets → activer** la bibliothèque uh!ive.
3. Les composants se glissent depuis le panneau Assets ; les variables, styles de texte, de couleur (dégradés) et d'effets apparaissent dans leurs sélecteurs respectifs.
4. Toute modification dans le fichier source se propage via **mise à jour de bibliothèque**.

### Ce qui est partagé nativement

| Élément | Type Figma | Onglet |
|---|---|---|
| Couleurs, dimensions | Variables | Variables |
| Typographie | Styles de texte | Styles |
| Dégradés | Styles de couleur | Styles |
| Élévations, glows | Styles d'effets | Styles |
| Composants UI | Composants | Assets |

---

## Architecture du fichier (8 pages)

| Page | Rôle |
|---|---|
| `00 · Cover` | Page de garde, sommaire à liens, conventions de nommage |
| `10 · Foundations` | Tokens visuels : couleurs, typo, spacing, radius, élévations, borders, dégradés, breakpoints, motion, z-index, accessibilité |
| `20 · Logos` | Wordmark, claim, bubble, produits, 18 frames d'export, usage & gouvernance |
| `30 · Composants` | Masters (signatures/footer, boutons produits, fonds) + bibliothèque de composants à variants |
| `40 · Iconographie` | Pack d'icônes rangé en 20 catégories (base Lucide) |
| `50 · Templates` | 15 cartes éditoriales A0→C4 |
| `90 · Archive` | Legacy Allo-Media et doublons, préservés (jamais supprimés) |
| `95 · Scratch` | Travail en cours non validé |

---

## 1. ADN visuel

Marque de l'IA vocale qui **comprend les humains**. Registre : technique mais chaleureux, premium sans froideur, sobre sur fond sombre profond avec un accent glacier lumineux.

- **Glacier** (`#59c2d3`) : couleur signature, accent, interactif.
- **Blueprint** : structure, profondeur, fonds (référence V5 `#0e2a38`).
- **Obsidian** : neutres sombres, code, surfaces.
- **Premium** : violet IA, fonctionnalités avancées.
- Sémantiques : **Success**, **Warning**, **Attention**.

---

## 2. Couleurs

### Implémentation Figma
- Collection de variables : **`uh!ive · Couleurs`** (70 variables).
- Nommage : **`Famille/Nuance`** (ex. `Glacier/500`, `Blueprint/800`).
- 7 familles × 10 nuances (50 → 900).
- Board visuel sur `10 · Foundations`.

### Palette complète

**Glacier** — accent signature, interactif
| Nuance | Hex |
|---|---|
| Glacier/50 | `#eef9fb` |
| Glacier/100 | `#ccecf1` |
| Glacier/200 | `#b3e3eb` |
| Glacier/300 | `#90d6e2` |
| Glacier/400 | `#7acedc` |
| Glacier/500 | `#59c2d3` |
| Glacier/600 | `#51b1c0` |
| Glacier/700 | `#3f8a96` |
| Glacier/800 | `#316b74` |
| Glacier/900 | `#255159` |

**Blueprint** — structure, fonds
| Nuance | Hex |
|---|---|
| Blueprint/50 | `#e8edef` |
| Blueprint/100 | `#b7c8cf` |
| Blueprint/200 | `#94adb7` |
| Blueprint/300 | `#638896` |
| Blueprint/400 | `#457182` |
| Blueprint/500 | `#164d63` |
| Blueprint/600 | `#14465a` |
| Blueprint/700 | `#103746` |
| Blueprint/800 | `#0c2a36` |
| Blueprint/900 | `#09202a` |

> Fond de référence V5 : `#0e2a38` (Blueprint-deep, entre 700 et 800).

**Obsidian** — neutres sombres, code, surfaces
| Nuance | Hex |
|---|---|
| Obsidian/50 | `#eaebed` |
| Obsidian/100 | `#bdc1c6` |
| Obsidian/200 | `#9da3aa` |
| Obsidian/300 | `#707983` |
| Obsidian/400 | `#545f6b` |
| Obsidian/500 | `#293746` |
| Obsidian/600 | `#253240` |
| Obsidian/700 | `#1d2732` |
| Obsidian/800 | `#171e27` |
| Obsidian/900 | `#11171d` |

**Premium** — violet IA
| Nuance | Hex |
|---|---|
| Premium/50 | `#f7f4fe` |
| Premium/100 | `#ede4fc` |
| Premium/200 | `#e3d4fa` |
| Premium/300 | `#d4c0f7` |
| Premium/400 | `#c9b4f5` |
| Premium/500 | `#bfa8f2` |
| Premium/600 | `#ae98da` |
| Premium/700 | `#8877aa` |
| Premium/800 | `#685c83` |
| Premium/900 | `#504665` |

**Success** — vert
| Nuance | Hex |
|---|---|
| Success/50 | `#ecfdf6` |
| Success/100 | `#c8f7e3` |
| Success/200 | `#a8f2d1` |
| Success/300 | `#7cecb8` |
| Success/400 | `#67e2ac` |
| Success/500 | `#52d8a0` |
| Success/600 | `#4ac392` |
| Success/700 | `#3a9872` |
| Success/800 | `#2d7558` |
| Success/900 | `#235a44` |

**Warning** — rouge
| Nuance | Hex |
|---|---|
| Warning/50 | `#fdf2f3` |
| Warning/100 | `#f8d9dd` |
| Warning/200 | `#f4c4ca` |
| Warning/300 | `#efa6af` |
| Warning/400 | `#ea8d98` |
| Warning/500 | `#d94559` |
| Warning/600 | `#c63e51` |
| Warning/700 | `#9b3040` |
| Warning/800 | `#782531` |
| Warning/900 | `#5c1c26` |

**Attention** — jaune
| Nuance | Hex |
|---|---|
| Attention/50 | `#fefcf0` |
| Attention/100 | `#fdf6d1` |
| Attention/200 | `#fcf0b6` |
| Attention/300 | `#fae690` |
| Attention/400 | `#f8df74` |
| Attention/500 | `#f5c858` |
| Attention/600 | `#dfb650` |
| Attention/700 | `#ad8e3e` |
| Attention/800 | `#876e30` |
| Attention/900 | `#685425` |

---

## 3. Typographie

### Implémentation Figma
- **12 styles de texte** : `Type/Display` → `Type/2xs` (police Inter).
- Spécimen sur `10 · Foundations`.

### Familles officielles
| Famille | Usage |
|---|---|
| **Inter** | UI, body, webapp, site (400 → 800) |
| **Montserrat** | Branding, print, titres (500 → 800) |
| **JetBrains Mono** | Code, data, API (400 / 500) |

### Échelle (Inter)
| Style | Taille | Line-height | Letter-spacing | Poids |
|---|---|---|---|---|
| `Type/Display` | 72px | 1.05 | -2px | 800 |
| `Type/H1` | 56px | 1.1 | -1.5px | 700 |
| `Type/H2` | 40px | 1.15 | -1px | 700 |
| `Type/H3` | 28px | 1.25 | -0.5px | 600 |
| `Type/H4` | 22px | 1.3 | -0.25px | 600 |
| `Type/H5` | 18px | 1.4 | 0 | 600 |
| `Type/H6` | 15px | 1.5 | 0 | 600 |
| `Type/Lg` | 18px | 1.6 | 0 | 400 |
| `Type/Base` | 16px | 1.6 | 0 | 400 |
| `Type/Sm` | 14px | 1.5 | 0 | 400 |
| `Type/Xs` | 13px | 1.5 | 0 | 400 |
| `Type/2xs` | 11px | 1.4 | 0.5px | 600 |

---

## 4. Fondations techniques

### 4.1 Spacing — rythme 4px

Collection de variables : **`uh!ive · Dimensions`**, préfixe `Spacing/`.

| Token | Valeur |
|---|---|
| `Spacing/0` | 0 |
| `Spacing/1` | 4px |
| `Spacing/2` | 8px |
| `Spacing/3` | 12px |
| `Spacing/4` | 16px |
| `Spacing/5` | 24px |
| `Spacing/6` | 32px |
| `Spacing/7` | 48px |
| `Spacing/8` | 64px |
| `Spacing/9` | 96px |
| `Spacing/10` | 128px |

### 4.2 Radius

Collection `uh!ive · Dimensions`, préfixe `Radius/`.

| Token | Valeur |
|---|---|
| `Radius/none` | 0 |
| `Radius/sm` | 4px |
| `Radius/md` | 6px |
| `Radius/lg` | 12px |
| `Radius/xl` | 16px |
| `Radius/2xl` | 24px |
| `Radius/full` | 9999px |

### 4.3 Élévations & Glows

**9 styles d'effets**.

| Style | Ombre |
|---|---|
| `Elevation/1` | 0 1px 2px rgba(0,0,0,.12) |
| `Elevation/2` | 0 4px 12px rgba(0,0,0,.18) |
| `Elevation/3` | 0 8px 24px rgba(0,0,0,.24) |
| `Elevation/4` | 0 16px 48px rgba(0,0,0,.32) |

| Style | Halo (0 4px 20px, alpha .25) |
|---|---|
| `Glow/glacier` | `#59c2d3` |
| `Glow/premium` | `#bfa8f2` |
| `Glow/success` | `#52d8a0` |
| `Glow/attention` | `#f5c858` |
| `Glow/warning` | `#d94559` |

### 4.4 Borders (V5)

| Rôle | Couleur | Opacité |
|---|---|---|
| subtle | `#ffffff` | .08 |
| glacier | `#59c2d3` | .35 |
| premium | `#bfa8f2` | .35 |
| success | `#52d8a0` | .35 |
| attention | `#f5c858` | .35 |

### 4.5 Breakpoints

| Token | Valeur | Cible |
|---|---|---|
| `--bp-sm` | 640px | Mobile large / petite tablette |
| `--bp-md` | 768px | Bascule layout principal |
| `--bp-lg` | 1024px | Tablette paysage / petit desktop |
| `--bp-xl` | 1280px | Largeur confort lecture |
| `--bp-2xl` | 1536px | Max-width containers |

### 4.6 Motion

| Durée | Valeur | Usage |
|---|---|---|
| `--duration-instant` | 50ms | Feedback tactile |
| `--duration-fast` | 150ms | Micro-interactions (hover, focus) |
| `--duration-base` | 250ms | Transitions standard |
| `--duration-slow` | 400ms | Apparitions, collapses |
| `--duration-slower` | 600ms | Entrées scénarisées |

| Easing | Courbe | Usage |
|---|---|---|
| `--ease-out` | cubic-bezier(0.16, 1, 0.3, 1) | Standard uh!ive |
| `--ease-in` | cubic-bezier(0.7, 0, 0.84, 0) | Sorties |
| `--ease-in-out` | cubic-bezier(0.65, 0, 0.35, 1) | Transitions symétriques |
| `--ease-spring` | cubic-bezier(0.34, 1.56, 0.64, 1) | Feedback ludique (rare) |

### 4.7 Z-index

| Token | Valeur | Usage |
|---|---|---|
| `--z-base` | 0 | Contenu standard |
| `--z-raised` | 10 | Cards hover |
| `--z-dropdown` | 100 | Menus déroulants |
| `--z-sticky` | 200 | Headers sticky |
| `--z-fixed` | 300 | Éléments fixes (FAB) |
| `--z-overlay` | 400 | Backdrops |
| `--z-modal` | 500 | Modales |
| `--z-popover` | 600 | Popovers |
| `--z-toast` | 700 | Notifications |
| `--z-tooltip` | 800 | Tooltips |
| `--z-max` | 9999 | Urgences (réservé) |

---

## 5. Dégradés

### Implémentation Figma
- **20 styles de couleur** sous **`uhlive/Gradient/`**.
- Présentés sur `10 · Foundations` (section Dégradés), groupés Par famille / Fonctionnels.
- Un dégradé ne peut pas être une variable Figma : le **paint style est le bon vecteur de tokenisation** (et reste partageable en bibliothèque).

### Par famille (12)
| Style | Composition |
|---|---|
| `uhlive/Gradient/Glacier → Blueprint` | bicolore |
| `uhlive/Gradient/Blueprint → Obsidian` | bicolore |
| `uhlive/Gradient/Premium` | famille |
| `uhlive/Gradient/Success` | famille |
| `uhlive/Gradient/Warning` | famille |
| `uhlive/Gradient/Attention` | famille |
| `uhlive/Gradient/Glacier transparent` | fade vers transparent |
| `uhlive/Gradient/Blueprint transparent` | fade vers transparent |
| `uhlive/Gradient/Premium transparent` | fade vers transparent |
| `uhlive/Gradient/Success transparent` | fade vers transparent |
| `uhlive/Gradient/Warning transparent` | fade vers transparent |
| `uhlive/Gradient/Attention transparent` | fade vers transparent |

### Fonctionnels (8)
| Style | Usage |
|---|---|
| `uhlive/Gradient/Hero — Blueprint deep` | Fond de section sombre (vertical) |
| `uhlive/Gradient/Hero — Glacier ambient` | Fond avec halo glacier central |
| `uhlive/Gradient/Surface — fade` | Cartes / panneaux (fade subtil) |
| `uhlive/Gradient/Scrim — bottom` | Overlay texte sur photo (bas) |
| `uhlive/Gradient/Scrim — top` | Overlay texte sur photo (haut) |
| `uhlive/Gradient/Radial — Glacier glow` | Spot lumineux / halo |
| `uhlive/Gradient/Glacier → Premium` | Accent IA / premium |
| `uhlive/Gradient/Glacier → Success` | Accent positif / data |

---

## 6. Logo & symbole

### Implémentation Figma — page `20 · Logos`
- Sections : Wordmark, Wordmark + claim, Bubble, Produits uh!ive.
- **`Exports — prêts à livrer`** : 18 frames (5 couleurs × 3 types), tailles d'export PNG 160/320/480/640/1024w + SVG, fond transparent.
- Section **Logo — Usage & gouvernance** (détail ci-dessous).

### Couleurs du logo
| Variante | Couleur |
|---|---|
| Primary | Blanc `#ffffff` |
| Inverted | Blueprint-800 `#0c2a36` |
| Mono | Noir `#000000` |

### Clear space (zone de protection)
- **Wordmark** : 1× la hauteur du « h » tout autour.
- **Bubble** : 0.25× le diamètre (0.25d) tout autour.

### Tailles minimales
| Wordmark | Largeur min. |
|---|---|
| Écran / web (avec tagline) | 140px |
| Écran / web (sans tagline) | 80px |
| Print (avec tagline) | 35mm |
| Print (sans tagline) | 20mm |

> En dessous → basculer sur le Bubble.

| Bubble | Taille min. |
|---|---|
| Écran / web | 24×24px (favicon) |
| Print | 8×8mm |
| Avatar social | 180×180px natif |

### Fonds autorisés (contraste min. 4.5:1)
| Fond | Wordmark | Bubble | Statut |
|---|---|---|---|
| `#0e2a38` (Blueprint-deep) | Blanc | Glacier-500 | Référence V5 |
| Blueprint-800/900 | Blanc | Glacier-500 | Autorisé |
| Obsidian-800/900 | Blanc | Glacier-500 | Autorisé |
| Blanc pur `#ffffff` | Blueprint-800 | Glacier-500 | Autorisé |
| Glacier-50/100 (très clair) | Blueprint-800 | Mono white | Autorisé |
| Photo sombre contrastée | Blanc | Glacier-500 | + filtre assombrissant |
| Photo claire contrastée | Blueprint-800 | Glacier-500 | + filtre éclaircissant |
| Coloré saturé hors palette | — | — | INTERDIT |
| Motif chargé | — | — | INTERDIT |
| Success / Warning / Premium plein | — | — | INTERDIT (collision) |

### Do's & Don'ts
**À faire** : fichiers sources officiels ; proportions strictes (homothétie) ; zones de protection ; ® sur communications officielles ; bon logo selon l'espace.

**À ne jamais faire** : déformer ; re-typographier ; recolorier hors palette ; effets (ombre, glow, contour) ; séparer le « ! » du « i » ; modifier la bubble ; incliner / pivoter ; fond à faible contraste ; entourer le wordmark ; bubble en couleur sémantique ; superposer wordmark + bubble ; remplacer le « uh! » de la bubble.

### Co-branding
Wordmark uniquement · hauteur optique équivalente · séparateur 1px rgba(255,255,255,0.2) hauteur 1.5x · espacement 1.5x · uh!ive à gauche si émetteur. Interdits : logos collés sans séparateur, tailles inégales, plus de 3 logos par ligne.

### Favicon & app icon
| Usage | Format | Source |
|---|---|---|
| Favicon navigateur | 32×32 · 16×16 ICO/PNG | Bubble Glacier-500 |
| Apple touch icon | 180×180 PNG | Bubble Glacier-500 |
| Android / PWA | 192 · 512 PNG | Bubble Glacier-500 |
| Open Graph / social | 1200×630 | Wordmark blanc / dégradé BP-700→900 |
| Avatars (X, LinkedIn, YouTube) | 400/400/800 PNG | Bubble Glacier-500 |

---

## 7. Iconographie

### Implémentation Figma — page `40 · Iconographie`
- Pack complet conservé, rangé en **20 catégories** : Arrows, Brands, Communication, Design, Devices, Documents, E-Commerce, Graphs, Map, Math, Media, Editor, Misc, Sort, Symbols, System, Time, Users, With Fills, New Icons.
- Base **Lucide**.
- **À curer** : sous-set officiel uh!ive à isoler au fil de l'eau.

### Specs (DA §6)
- Tailles : 16 / 20 / 24px.
- Couleurs sémantiques alignées sur la palette (Glacier interactif, Blueprint neutre, sémantiques pour statuts).
- Trait cohérent, jamais de texte en image (hors logo).

---

## 8. Composants UI

### Implémentation Figma — page `30 · Composants`, section *Bibliothèque*
**13 composants** en `COMPONENT` / `COMPONENT_SET`, auto-layout, fills bindés aux variables, effets via styles. Nommage des variants entre crochets.

| Composant | Type | Variants / propriétés |
|---|---|---|
| **Button** | SET | `Type` (Primary / Secondary / Ghost / Danger) × `State` (Default / Hover / Focus / Disabled) — 16 |
| **Badge** | SET | `Variant` (Neutral / Glacier / Premium / Success / Warning / Attention) — 6 |
| **Tag** | CMP | chip + fermeture |
| **Input** | SET | `State` (Default / Focus / Error / Disabled) |
| **Checkbox** | SET | `State` (Unchecked / Checked / Disabled) |
| **Radio** | SET | `State` (Unselected / Selected) |
| **Toggle** | SET | `State` (Off / On) |
| **Alert** | SET | `Variant` (Info / Success / Warning / Error) |
| **Toast** | CMP | Elevation/3, bordure accent |
| **Select** | SET | `State` (Default / Focus / Disabled), chevron |
| **Textarea** | SET | `State` (Default / Focus / Disabled), 120px min |
| **Tooltip** | CMP | Obsidian-900, Elevation/2 |
| **Modal** | CMP | header / body / footer, boutons via instances Button, Elevation/4 |

> Autres masters sur la page : signatures & footer, boutons produits (BOUTON : WEBSOCKET, FILTRER, RECHERCHER, ANALYSER, ÉCOUTER, MRCPV2), fonds.

### Tokens visuels V5 (rappels d'usage)
- Fond surface : blanc à 4 % d'opacité ; bordure subtle blanc 8 %.
- Code block : fond Obsidian-900 `#11171d`, JetBrains Mono 13px / lh 1.8, bordure blanc 8 %, radius-lg. Syntaxe : keywords Premium-400 `#c9b4f5`, strings Success-400 `#67e2ac`, fonctions Glacier-400 `#7acedc`, commentaires Obsidian-400 `#545f6b`.

---

## 9. Templates

### Implémentation Figma — page `50 · Templates`
- **15 cartes éditoriales** A0 → C4 (séries A, B, C × 0–4).
- Fond dark aligné DS.
- CTA standardisé : texte foncé (Blueprint-800) sur pastille Glacier — meilleur contraste.

---

## 10. Accessibilité

### Implémentation Figma — `10 · Foundations`, section Accessibilité
Matrices de contraste avec échantillons réels, fond sombre et fond clair.

### Seuils WCAG 2.1
| Niveau | Texte normal | Texte large | UI / icônes |
|---|---|---|---|
| AA (obligatoire) | 4.5:1 | 3:1 | 3:1 |
| AAA (idéal) | 7:1 | 4.5:1 | — |

### Sur fond sombre (réf. `#0e2a38`) — extraits
| Couleur | Ratio | Statut |
|---|---|---|
| Blanc, Glacier-200/300/400 | 7.2 → 14.1:1 | AAA |
| Success-300/400, Premium-300/400 | 8.2 → 10:1 | AAA |
| Attention-300/400, Warning-300 | 7.2 → 11.8:1 | AAA |
| Blueprint-200 | 6.4:1 | AAA |
| Blueprint-300, Obsidian-300 | 3.3 → 3.9:1 | AA large |
| Blueprint-400 | 2.5:1 | **Interdit** |

### Sur fond clair (`#ffffff`) — extraits
| Couleur | Ratio | Statut |
|---|---|---|
| Blueprint-500 → 900, Obsidian-500 | 7.6 → 16.4:1 | AAA |
| Blueprint-400, Glacier-800, Success-800, Warning-500 | 4.8 → 5.9:1 | AA |
| Glacier-700, Success-700 | 3.5 → 4.2:1 | AA large |

### Combinaisons interdites
Les nuances **400/500 ne sont jamais utilisées en texte sur fond clair** (Glacier-500 2.3:1, Glacier-400 1.9:1, Success-500 1.9:1, Attention-500 1.7:1, Premium-500 2.2:1 — toutes insuffisantes).

### Règles transversales
- Jamais l'information par la couleur seule — doubler (icône, texte, forme).
- Focus clavier visible sur tout élément interactif.
- Zones cliquables : minimum 44×44px.
- Pas de texte en image (sauf logo) ; sémantique HTML correcte.
- Support `prefers-reduced-motion`.

---

## 11. Conventions de nommage

| Catégorie | Convention | Exemple |
|---|---|---|
| Pages | préfixe numérique, une page = un rôle | `10 · Foundations` |
| Variables couleur | `Famille/Nuance` | `Glacier/500` |
| Variables dimensions | `Spacing/N` · `Radius/taille` | `Spacing/5`, `Radius/lg` |
| Styles de texte | `Type/Token` | `Type/H1` |
| Styles d'effets | `Elevation/N` · `Glow/sémantique` | `Elevation/3`, `Glow/glacier` |
| Styles de dégradés | `uhlive/Gradient/Nom` | `uhlive/Gradient/Surface — fade` |
| Logos export | `uhlive-[type]-[couleur]-NNNw` | `uhlive-wordmark-blanc-320w` |
| Composants | `Section / Élément / Variante` | `Button` + variants `Type=Primary, State=Hover` |
| Archive | déprécié / legacy, jamais supprimé | — |
| Scratch | WIP non validé | — |

---

## 12. Cheat-sheet — noms exacts

**Collections de variables**
`uh!ive · Couleurs` (70) · `uh!ive · Dimensions` (18)

**Familles couleur** (× nuances 50–900)
`Glacier` · `Blueprint` · `Obsidian` · `Premium` · `Success` · `Warning` · `Attention`

**Dimensions**
`Spacing/0…10` · `Radius/none, sm, md, lg, xl, 2xl, full`

**Styles de texte**
`Type/Display, H1, H2, H3, H4, H5, H6, Lg, Base, Sm, Xs, 2xs`

**Styles d'effets**
`Elevation/1…4` · `Glow/glacier, premium, success, attention, warning`

**Styles de dégradés** (`uhlive/Gradient/`)
`Glacier → Blueprint` · `Blueprint → Obsidian` · `Premium` · `Success` · `Warning` · `Attention` · `… transparent` (×6) · `Hero — Blueprint deep` · `Hero — Glacier ambient` · `Surface — fade` · `Scrim — bottom` · `Scrim — top` · `Radial — Glacier glow` · `Glacier → Premium` · `Glacier → Success`

**Composants**
`Button` · `Badge` · `Tag` · `Input` · `Checkbox` · `Radio` · `Toggle` · `Alert` · `Toast` · `Select` · `Textarea` · `Tooltip` · `Modal`

---

## 13. Gouvernance & versioning

- **Version courante** : v2.2.0.
- **Source de vérité** : les variables (couleurs, dimensions). Styles et composants en dépendent.
- **Archive** : aucun élément legacy n'est supprimé — il est déplacé sur `90 · Archive` (réversible).
- **Évolution** : toute nouvelle valeur passe d'abord par une variable, puis par les styles/composants qui la consomment. Republier la bibliothèque après modification.

---

*Fin du document — uh!ive Design System v2.2.0. À tenir synchronisé avec le fichier Figma `uh!ive — Branding`.*
