2026-07-10 14:02:54 -04:00
|
|
|
|
# Design system OKI — Lagé Chat Control
|
2026-07-10 12:51:17 -04:00
|
|
|
|
|
|
|
|
|
|
Toutes les valeurs visuelles vivent dans
|
|
|
|
|
|
[`frontend/src/styles/tokens.css`](../frontend/src/styles/tokens.css).
|
|
|
|
|
|
Les composants Svelte consomment les tokens ; **jamais de valeur brute**
|
|
|
|
|
|
(couleur, taille) dans un composant (doctrine §5.2).
|
|
|
|
|
|
|
|
|
|
|
|
## Architecture CSS
|
|
|
|
|
|
|
|
|
|
|
|
Cascade explicite par `@layer` ([app.css](../frontend/src/app.css)) :
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
reset → tokens → base → layouts → components → utilities
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
- `reset.css` — reset moderne minimal (~40 lignes), inclut `prefers-reduced-motion`.
|
|
|
|
|
|
- `tokens.css` — custom properties : couleurs `oklch()`, typo fluide `clamp()`, espacements, interaction.
|
|
|
|
|
|
- `base.css` — HTML sémantique nu : typo, liens, focus visible, boutons.
|
|
|
|
|
|
- `layouts.css` — primitives Every Layout : `.stack`, `.cluster`, `.center`, `.card-grid` (container queries, pas de media queries de largeur d'écran).
|
|
|
|
|
|
- Le style propre à chaque composant vit dans son `<style>` Svelte (scopé à la compilation).
|
|
|
|
|
|
|
|
|
|
|
|
## Couleurs
|
|
|
|
|
|
|
|
|
|
|
|
En `oklch()` : la luminance perceptuelle rend les contrastes WCAG calculables
|
|
|
|
|
|
(méthode modus-vivendi, doctrine §4.3). `light-dark()` + `color-scheme` gèrent
|
|
|
|
|
|
le mode sombre sans duplication.
|
|
|
|
|
|
|
|
|
|
|
|
| Token | Rôle | Note contraste |
|
|
|
|
|
|
|---|---|---|
|
|
|
|
|
|
| `--oki-ink` / `--oki-surface` | texte / fond | ≥ 7:1 (AAA) dans les deux modes |
|
|
|
|
|
|
| `--oki-ink-2` | texte secondaire | ≥ 4.5:1 (AA) |
|
|
|
|
|
|
| `--oki-jaune` `--oki-vert` `--oki-rouge` `--oki-noir` | identité panafricaine | décoratif — jamais porteur d'information seul |
|
|
|
|
|
|
| `--accent` / `--accent-ink` | accent actif / accent texte | `--accent-ink` ≥ 4.5:1 sur `--oki-surface` |
|
|
|
|
|
|
| `--diff-*` / `--diff-*-ink` | difficulté (fond / texte) | les variantes `-ink` sont AA sur `--oki-surface` |
|
|
|
|
|
|
|
|
|
|
|
|
**Règle absolue** : la difficulté n'est jamais codée par la couleur seule —
|
|
|
|
|
|
`DifficultyBadge` = forme (●/◆/▲) + texte + couleur (doctrine §1.1, ~8 % de
|
|
|
|
|
|
déficience de vision des couleurs).
|
|
|
|
|
|
|
|
|
|
|
|
## Typographie
|
|
|
|
|
|
|
|
|
|
|
|
- Corps : **Atkinson Hyperlegible** 400 (SIL OFL, conçue pour la lisibilité).
|
|
|
|
|
|
- Display (titres, marque) : **Fraunces** 700 (SIL OFL).
|
|
|
|
|
|
- 2 fichiers WOFF2 auto-hébergés (`static/fonts/`), ~35 Ko au total,
|
|
|
|
|
|
`font-display: swap` — jamais de Google Fonts (doctrine §5.3).
|
|
|
|
|
|
- Échelle modulaire ratio 1.25, fluide par `clamp()` : `--text-0` … `--text-5`.
|
|
|
|
|
|
- `--measure: 65ch` sur `p, li` et `.prose` (doctrine §2.2 : 45–75 caractères).
|
|
|
|
|
|
- Tout en `rem` : la taille utilisateur est respectée.
|
|
|
|
|
|
|
|
|
|
|
|
## Interaction
|
|
|
|
|
|
|
|
|
|
|
|
- `--tap-target: 48px` : tout élément interactif (boutons, liens de nav,
|
|
|
|
|
|
filtres, switcher) a une hauteur minimale de 48 px (Fitts, doctrine §1.3).
|
|
|
|
|
|
- `:focus-visible` global : anneau 3 px `--accent`, offset 2 px.
|
|
|
|
|
|
- Durées `--duration-1/2` + `--ease-out` ; annulées par `prefers-reduced-motion`.
|
|
|
|
|
|
|
|
|
|
|
|
## Composants
|
|
|
|
|
|
|
|
|
|
|
|
| Composant | Rôle | Principe doctrinal |
|
|
|
|
|
|
|---|---|---|
|
|
|
|
|
|
| `DifficultyBadge` | niveau (forme + texte + couleur) | §1.1 — jamais couleur seule |
|
|
|
|
|
|
| `ToolCard` | fiche condensée, vrai `<a>` couvrant | §4.3 — pas de div cliquable |
|
|
|
|
|
|
| `CategoryNav` | 4 catégories visibles + `<details>` | §1.3 Hick-Hyman, divulgation progressive, sans JS |
|
|
|
|
|
|
| `SearchBar` | recherche instantanée, raccourci `/` | §2.2 — le clavier est roi |
|
|
|
|
|
|
| `LanguageSwitcher` | FR / Kréyòl, persisté localStorage | §4.2 — bilinguisme |
|
|
|
|
|
|
| `EndMarker` | « Ou pa manké ayen » en fin de liste | §1.5, §3 — point d'arrêt explicite |
|
|
|
|
|
|
|
|
|
|
|
|
## Test des 50 ms (doctrine §1.1)
|
|
|
|
|
|
|
|
|
|
|
|
L'identité OKI est reconnaissable avant toute lecture : bandes panafricaines
|
|
|
|
|
|
vert/jaune/rouge dans la marque d'en-tête, soulignés et bordures jaune OKI,
|
|
|
|
|
|
titres Fraunces, créole visible dès le héros (« Chwazi zouti ou »).
|
