ayael.ayael.orbit/Ressources
09 ayael / SYSTÈME GRAPHIQUE

Ressources
& intégration.

Les fichiers de référence, les valeurs exactes et une base d’intégration. Les téléchargements restent utilisables sans service externe.

01

Le kit orbit

#

Le kit rassemble les logos, variantes monochromes, monogrammes, motifs, polices distribuées, tokens et licences. Le guide PDF est une version de consultation de la charte. Les ressources portent une version pour éviter de mélanger plusieurs éditions.

02

Une source pour les valeurs

#

Les couleurs, espaces, rayons, durées et tailles typographiques sont exportés depuis une source commune. Les variantes Clair et Sombre ont les mêmes noms de rôle. Modifier une valeur centrale implique de contrôler ses effets sur les composants.

:root {
  --orbit-color-bg: #F6F5F2;
  --orbit-color-text: #24212B;
  --orbit-color-accent: #73559A;
}
[data-theme="dark"] {
  --orbit-color-bg: #111115;
  --orbit-color-text: #F1EDF3;
  --orbit-color-accent: #C5B5ED;
}
  • orbit.tokens.json : valeurs structurées et modes, faciles à transformer.
  • orbit.dtcg.json : export utilisant le format DTCG 2025.10 pour les types pris en charge.
  • orbit.css : variables CSS et modes prêts à intégrer.
  • Exemples Android XML, Compose et SwiftUI : tables de couleurs, à raccorder à l’architecture de l’application.
  • Les fichiers de logo gardent leurs noms de variante ; un token de couleur ne doit pas recolorer le SVG principal à la volée.
03

Intégration web

#

Appliquer le thème sur la racine du document. Une préférence explicite prévaut sur le choix système. Les composants consomment les rôles sémantiques ; un changement d’accent ne doit pas changer le sens des états.

  • Servir les polices localement avec leur licence et une stratégie de chargement adaptée.
  • Éviter un flash de thème au premier rendu.
  • Respecter les préférences de mouvement et les couleurs forcées.
  • Ne pas laisser un cache ancien combiner un nouveau logo et une ancienne feuille de style.
<link rel="stylesheet" href="orbit.css">
<html lang="fr" data-theme="dark">

.button-primary {
  background: var(--orbit-color-accent);
  color: var(--orbit-color-on-accent);
  border-radius: var(--orbit-radius-md);
  min-height: 44px;
}
04

Transmettre à une équipe ou un agent

#

Un brief d’interface doit livrer autre chose que « fais du orbit ». Préciser les usages, les états, le support et la version du système. Les fichiers de référence évitent les logos retapés et les variantes de couleur approximatives.

  • Joindre la version de la charte, les tokens et le logo produit concerné.
  • Lister les écrans et les tâches à accomplir, puis les cas vide, erreur, attente et réussite.
  • Donner les contraintes mobile, clavier, performance et internationalisation.
  • Demander une vérification visuelle dans les deux thèmes et un relevé des limites.
  • Décrire les modifications d’une version à l’autre ; ne pas présenter une maquette comme une application déployée.
Référence : ayael orbit 1.0.0.
Utiliser les tokens sémantiques et les logos fournis.
Conserver la structure fonctionnelle et les états existants.
Vérifier Clair/Sombre, 320 px, clavier et mouvement réduit.
Documenter les écarts nécessaires avant validation.
05

Chaque ressource garde sa licence

#

Le ZIP n’a pas une licence unique qui remplacerait celles de ses éléments. Le manifeste de licences indique la portée des droits pour la documentation, le code, les polices et les éléments d’identité.

  • Documentation : CC BY 4.0.
  • Code, tokens et icônes génériques originales : MIT.
  • Polices : SIL Open Font License 1.1, notices conservées.
  • Nom, mot-symbole et monogramme ayael : autorisation d’usage d’identité distincte.

Rechercher dans la charte

Saisir au moins deux caractères.