Inoskera
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
Contexte
InosKera Group édite Sanu. Son site 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.
Limites et perspectives
Les jetons sont recopiés depuis la charte et non générés, si bien que rien n’empêche l’écart : la palette sombre n’existe aujourd’hui que dans la feuille de style, et la charte se contredit elle-même sur la police retenue. La police est par ailleurs chargée depuis un service tiers, seule requête que le site adresse à l’extérieur, alors qu’elle pourrait être servie par le site.
La page produit de Sanu, ajoutée au dépôt en octobre 2026, n’est par ailleurs pas encore en ligne. Sous 640 pixels de large, les liens de la navigation disparaissent sans menu de remplacement. Le site ne comporte ni plan, ni page d’erreur, ni test, et son déploiement reste une commande manuelle, qui remplace les fichiers en ligne sans étape de retour arrière.