Aller au contenu
encrine encrine

Design system · Le parcours

Le style d’Encrine, case après case.

C’est le style de la marque Encrine, pour la page d’accueil et la documentation : son logo, ses couleurs, ses polices, ses composants et son ton.

Chaque classe a son propre design system, choisi par son enseignant parmi trois maquettes de mini-site. Celui-ci est le style du moteur, pas celui des classes. Toutes les valeurs de cette page sont lues dans styles.css et dans assets/ : elles ne peuvent pas s’écarter de ce que le site affiche.

9couleurs de case, une par case du parcours
3polices libres, servies par le site
2thèmes, clair et sombre

Voir la page en

2 · Les couleurs

La craie, l’ardoise, et les couleurs des cases.

Un fond de craie, des cartes de feuille, une encre ardoise : c’est tout le texte du site. Les couleurs vives ne servent qu’aux cases. En sombre, la craie et l’ardoise échangent leurs rôles ; les cases ne changent pas. Chaque pastille est peinte avec la variable elle-même ; les deux petits carrés montrent sa valeur en clair et en sombre.

Le fond et l’encre

Craie--craie

—

Le fond de la page, et l’encre en sombre.

Feuille--feuille

—

Les cartes, et une section sur deux.

Ardoise--ardoise

—

Le texte, les titres, le bouton principal, l’encre du logo.

Ardoise douce--ardoise-douce

—

Le texte courant des cartes, les chapeaux, les légendes.

Trait--trait

—

Les filets : le pied, l’en-tête descendu, les pointillés.

Trait fort--trait-fort

—

Le cerne du lien GitHub, les pastilles « Plus tard ».

Les cases

Huit couleurs vives et la case d’encre, une par case du parcours. Chacune a son texte : blanc, ou ardoise sur les trois plus claires. Le contraste est calculé ici, sur les valeurs du fichier.

Bleu--case-bleu

—

Rose--case-rose

—

Vert--case-vert

—

Ocre--case-ocre

—

Violet--case-violet

—

Turquoise--case-turquoise

—

Rouge--case-rouge

—

Encre--case-encre

—

Ciel--case-ciel

—

Le texte sur les cases

Sur case claire--sur-case-clair

—

Le texte blanc des cases foncées.

Sur case sombre--sur-case-sombre

—

Le texte ardoise du rose, de l’ocre et du ciel ; le fond du bloc appli.

3 · Les polices

Trois polices libres, servies par le site lui-même.

Unbounded pour les titres et les chiffres, Figtree pour le texte, Marelle pour le nom et les étiquettes. Toutes trois sont sous licence libre SIL Open Font License 1.1 et servies depuis fonts/ : aucune requête vers un service extérieur, comme le promet la page Confidentialité.

Case après case.

0 1 2 3 4 5 6 7 8 9

Police
Unbounded
Rôle
Les titres, les chiffres, les numéros des cases.
Variable
--font-titre : —
Graisses
—
Fichiers
—
Licence
SIL OFL 1.1 · la licence

Répondez à quelques questions, une par case : le niveau, la zone de vacances, le thème de l’année… Encrine fabrique le reste.

  • Aa400
  • Aa600
  • Aa700
  • Aa800
Police
Figtree
Rôle
Le texte, les boutons, les menus.
Variable
--font-texte : —
Graisses
—
Fichiers
—
Licence
SIL OFL 1.1 · la licence

le niveau, la zone, Prêt !

La cursive scolaire de l’Éducation nationale, celle qu’apprennent les élèves. Le nom « encrine » du logo est tracé avec elle.

Police
Marelle
Rôle
Le nom, les étiquettes des cases, les titres du sommaire.
Variable
--font-cursive : —
Fichiers
—
Licence
SIL OFL 1.1 · ministère de l’Éducation nationale ; Laurent Bourcellier, Jonathan Fabreguettes, Rosalie Wagner. la licence

L’échelle des textes

Chaque ligne est l’élément réel du site, avec sa classe ; la mesure à gauche est relevée dans la page, à la largeur de votre écran.

  • Surtitre.surtitre

    Comment ça marche

  • Titre de pageh1

  • Titre de section.section h2

  • Titre de carte.etape h3

  • Chapeau.chapeau

    Répondez à quelques questions, une par case.

  • Textebody

    Encrine travaille dans votre propre espace : votre classe vous appartient.

  • Étiquette.sommaire__titre

    Sur cette page

4 · Les espaces et les formes

Des cases carrées, des cartes arrondies, une ombre franche.

Les cases et les boutons sont carrés, comme à la craie ; les cartes ont des coins arrondis ; les pastilles sont rondes. L’ombre ne flotte pas : elle tombe droit, sans flou, sous la case. Et chaque case penche un peu, jamais plus de quatre degrés.

Les pas

Les marges et les écarts ne prennent que ces valeurs.

    Les angles

    Trois formes, pas davantage.

    Case, bouton : 0
    --angle-carte
    --angle-pastille

    La page tient dans --largeur : .

    Les ombres

    Pleines et sans flou, plus foncées en sombre.

    --ombre-case
    --ombre-bouton

    5 · Les composants

    Les pièces du site, avec leurs vraies classes.

    Ce qui suit n’est pas un dessin : ce sont les composants de la page d’accueil, avec les classes de styles.css. Ce que vous voyez ici est exactement ce que le site affiche.

    La case

    Le motif de tout le site : un carré de couleur, une étiquette en cursive, un chiffre en Unbounded, une ombre franche et une légère rotation, jamais la même d’une case à l’autre.

    1. Créez votre classe depuis le modèle

      Un clic sur « Créer ma classe », puis « Use this template ».

    2. Activez votre site

      Rubrique Pages, choisissez GitHub Actions.

    3. Lancez l’entretien

      Tapez /nouvelle-classe.

    4. Répondez, imprimez

      Vous jugez sur le papier.

    .etapes .etape .case .case--sombre .case__etiquette .case__chiffre · rotations relevées : — · ombre --ombre-case

    Les boutons

    Des cases, eux aussi : carrés, 54 px de haut (44 en petit). Le principal est plein, avec une ombre qui s’efface à l’appui ; le second est cerné.

    Créer ma classe Voir une classe d’exemple
    Voir la classe Copier

    .boutons .bouton .bouton--principal .bouton--petit · « Créer ma classe » ouvre ici le vrai panneau.

    Le lien GitHub et les pastilles

    GitHub est un lien discret, cerné d’un filet fin, sans fond ; sa cible garde 44 px de haut pour le doigt. Les pastilles disent un état.

    GitHub

    PrêteBientôtPlus tard

    l’entretien  de zéro  d’une classe

    .nav__github · .etiquette-etat--pret --bientot --plus-tard · .entretien__etiquette .depart__etiquette

    L’en-tête

    Toujours visible, collé en haut de l’écran : le logo, qui ramène en haut, le menu, et GitHub. Une fois la page descendue, il prend un filet et se resserre : sur ordinateur, il remonte de — sur —, sans rien déplacer dans la page, et le logo rapetisse un peu. Sur téléphone et tablette, il ne garde que le logo et un bouton « Menu », garde sa taille en défilant, et le menu se déplie dans un panneau : les sections, « Créer ma classe » et GitHub.

    .entete .entete--descendu .marque .nav · position: sticky · les ancres s’arrêtent juste dessous (scroll-margin-top).

    Le sommaire en cases

    En tête des pages longues : une petite case de couleur par section, posée de travers.

    1. Le logo
    2. Les couleurs
    3. Les polices

    .sommaire .sommaire__liste .sommaire__case

    La case d’étape de l’entretien

    Les questions numérotées dans de petites cases ardoise, qui penchent tour à tour.

    1. Le niveau de la classe, et ce qu’Encrine sait déjà en faire.
    2. L’année scolaire et votre zone de vacances : A, B ou C.
    3. Le thème de l’année, puis un milieu par période.

    .entretien .entretien__etiquette .entretien__liste

    Une carte « Ce que vous recevez »

    Une case numérotée, un titre, une phrase, et les points toujours visibles.

    Les évaluations et les fiches élève

    Entraînement à deux niveaux et évaluation de fin de période, prêts à photocopier.

    • Une évaluation par période, avec ses grilles d’observation et un livret de suivi.
    • Des fiches d’entraînement à deux niveaux, ★ et ★★, avec des défis.

    .fonction .fonction__case .case--sombre-texte .fonction__phrase

    La carte de classe de la galerie

    Lue dans classes.json et construite par le même script que l’accueil. Elle montre le site de la classe, sur l’ordinateur et sur le téléphone (champ apercu), et prend les couleurs du thème de la classe, jamais celles d’Encrine.

    Chargement de la classe d’exemple…

    .classes .classe--apercu .classe__apercu .classe__telephone .classe__appli .frise .classe__badge .classe__faits · site.js

    Le bloc appli

    Le seul bloc à l’ardoise dans les deux thèmes : il annonce que la classe s’installe sur le téléphone.

    Sur votre téléphone, sur la tablette de la classe

    Votre classe s’installe comme une appli.

    Le site de votre classe se pose sur l’écran d’accueil, avec son icône à ses couleurs, et s’ouvre en plein écran.

    Essayer avec la classe d’exemple

    1. Sur iPhone et iPad : dans Safari, « Partager », puis « Sur l’écran d’accueil ».
    2. Sur Android : le site propose lui-même « Installer ».
    3. Toujours à jour : chaque nouvelle version arrive à la prochaine ouverture.

    .appli .appli__etapes

    Le panneau en trois étapes

    « Créer ma classe » et « Partir de cette classe » ouvrent le même panneau : trois étapes, puis l’entretien. Ci-dessous, en petit ; le bouton ouvre le vrai, au-dessus de l’en-tête.

    dialog.partir .partir__etapes .partir__commande · Échap pour fermer, le focus revient au bouton.

    6 · Le ton

    Le site vouvoie, l’outil tutoie.

    Le site s’adresse à tous les enseignants, avant qu’ils commencent : il les vouvoie. L’outil, lui, travaille avec un collègue : il le tutoie, et le lui annonce dès la première question.

    Le site vous vouvoie

    L’accueil, la documentation, cette page : des phrases courtes, à la deuxième personne du pluriel.

    Sur l’accueil« Répondez à quelques questions, une par case. »
    Dans le panneau« Choisissez un dépôt public : c’est ce qui permet de mettre votre site en ligne. »

    L’outil tutoie, et l’annonce

    Une seule fois, dans le texte de la première question. Si l’enseignant préfère le vous, l’outil passe au vous aussitôt, et s’y tient.

    Première question de l’entretien« Je te tutoie, comme entre collègues — si tu préfères le vous, dis-le-moi. »
    Une valeur par défaut, annoncée« Je pars sur deux à trois fiches par semaine, dis-moi si c’est trop. »

    Comment on écrit

    • Sans jargon. « Le programme en liste numérotée », pas « le référentiel ».
    • Chaque chose ne se dit qu’à un endroit. Ailleurs, un renvoi : « voir Les contrôles ».
    • Ce qui n’est pas prêt n’est pas annoncé. Ce qui vient se dit « Bientôt » ou « Plus tard ».
    • Les chiffres sont ceux du moteur, vérifiés, jamais ceux d’une classe.
    • La typographie française. Guillemets « », apostrophe ’, espaces insécables devant les deux-points et les points-virgules.

    Créer votre classe

    Trois étapes, puis l’entretien : l’agent vous pose ses questions une à une, et construit la classe avec vos réponses.

    1. Créez votre classe depuis le modèle. Ouvrir le modèle, puis « Use this template ». Choisissez un dépôt public.
    2. Activez votre site. Dans les réglages du dépôt : Settings → Pages → Source : GitHub Actions.
    3. Lancez l’entretien. Ouvrez le dépôt dans Claude Code, sur la branche main, et tapez : /nouvelle-classe