Article technique · Inoskera
Inoskera : une charte écrite avant la feuille de style
Le site d’InosKera Group est un site statique de quatre pages, en français et en anglais, qui présente l’entreprise et porte la page produit de Sanu ; il est construit avec Astro à partir d’une charte graphique écrite.
- Rôle
- Auteur unique du site et de la charte
- Période
- Juin 2026, complété en octobre 2026
- État
- En service. En ligne
- Technologies
- Astro 5, TypeScript, CSS, GitLab CI
- Dépôts
- Un
Voir le site (s’ouvre dans un nouvel onglet)
Contexte
InosKera Group édite Sanu. Son site (s’ouvre dans un nouvel onglet) tient en peu de choses : une page de présentation et une page produit, chacune dans les deux langues, sans formulaire ni serveur d’application. Le dépôt contient à côté du site une charte graphique, avec les scripts qui produisent les déclinaisons du logo.
Problème
Un site, un papier à en-tête et des exports de logo finissent par diverger lorsque les couleurs et les règles de composition ne sont écrites nulle part. Le site devait par ailleurs proposer un thème sombre sans dupliquer ses styles, et s’adresser à deux marchés qui ne nomment pas les choses de la même façon.
Réponse apportée
Une charte en amont de la feuille de style
La charte est un document, qui fixe la palette, la typographie et l’usage du logo. La feuille de jetons du site la désigne comme sa seule source, et les composants citent le paragraphe qu’ils appliquent. La règle d’espacement du nom de la marque, par exemple, se retrouve à l’identique dans la barre de navigation.
Des jetons à deux niveaux
La palette brute n’est jamais modifiée par le thème. Les composants emploient une seconde couche de jetons, de nature sémantique, à savoir le fond, la surface, le texte ou le logo, que le thème sombre redéfinit. Trois états en découlent sans aucune duplication : suivre le système, forcer le clair, forcer le sombre.
/* --- DARK theme tokens ---
Applied in two cases:
(a) user forced dark → :root[data-theme='dark']
(b) OS prefers dark AND user has not forced light → media + :not([data-theme='light'])
The button sets data-theme on <html>; absence of the attribute = follow the OS. */
:root[data-theme='dark'] {
--bg: #0B1320;
--surface: #141F2E;
--text: #C2C9D2;
--text-strong: var(--cream);
--muted-text: #8B95A2;
--border: rgba(243, 239, 233, 0.12);
--panel: #15202E;
--logo-solid: var(--cream);
--accent-bg: var(--cream);
--accent-fg: var(--navy);
--accent-bg-hover: #ffffff;
color-scheme: dark;
}Un anglais écrit pour son marché
La page de Sanu n’est pas traduite d’une langue vers l’autre. Le français s’adresse à un dépôt de boissons au Togo et l’anglais à un dépôt du Ghana, avec les mots qu’on y emploie pour la caisse, les consignes et l’argent mobile. Les icônes sont de leur côté intégrées au moment de la construction depuis un paquet local, et leurs noms restent dans le composant plutôt que dans les textes, afin que les deux langues ne puissent pas diverger sur ce point.