Design system Ember

• Une palette de marque, deux produits

  La palette ember, de 50 à 950, est la même dans l’application et sur le site. L’orange du logo est ember-500 ; les neutres sont des gris chauds, et rien d’autre.

• Le texte reste blanc sur les boutons orange

  Gros bouton ember-500, petit bouton ember-700, texte blanc. Un seul bouton principal par écran, et la surbrillance est réservée à trois boutons du site.

• Rien ne flotte sans raison

  Aucune ombre sur les boutons, les cartes, les puces ni les segmentés. Trois ombres seulement pour les panneaux flottants : menu, fenêtre et pied de page.

• Vouvoiement et français soigné

  L’application et le site vouvoient, sans tiret long, avec des espaces insécables avant « : ; ? ! » et des apostrophes courbes.

• Cibles de 44 px et focus visible

  Tout contrôle mesure 44 px au moins sous 1 024 px. Le focus est un anneau ember-700 de 2 px, décalé de 2 px.

• Des jetons partagés

  Couleurs, ombres, durées et polices viennent d’un seul préréglage, utilisé par l’application et par le site.

• FondationsLogo, couleurs, typographie, espacements, grille, rayons, ombres, bordures, icônes, mouvement.15 sections
• ComposantsUne fiche par composant de l’app et du site, avec états, anatomie et code.16 sections
• PatronsLes assemblages de pages : header, menus, hauts de page, tarifs, FAQ, pied de page, coquille de l’app.7 sections
• Écriture et accessibilitéTon, typographie française, accessibilité et ressources.4 sections

• Ressources de marque complètes

  ZIP : logos, couleurs (texte, JSON, CSS), textes de présentation, LISEZMOI

  Télécharger

• Symbole en couleur

  PNG, fond transparent, 622 × 571 px

  Télécharger

• Symbole blanc

  PNG, fond transparent, 622 × 571 px

  Télécharger

• Palette complète en CSS

  Variables --ember-50 à --ember-950 et --neutral-50 à --neutral-950

  Télécharger

• Palette complète en JSON

  Mêmes valeurs, pour un outil ou un script

  Télécharger

Polices : Satoshi et Inter sont à télécharger chez leurs éditeurs.