Design system · v0.1

La base visuelle des sites MasterIT

Tokens, composants et modèles partagés par tous les sites MasterIT. Du HTML et du CSS purs : aucun build, aucune dépendance. Copier, coller, construire.

Voir les modèles Composants
Identité

Valeurs et axes

Les mots, codes et icônes à reprendre tels quels sur chaque site — détail dans DESIGN.md § Brand identity.

Valeurs

Engagement

Accessibilité

Transparence

Axes de services

PAS

Pastèque

Le logiciel de caisse.

INF

Infogérance

Votre informatique gérée et maintenue au quotidien.

DEV

Développement

Des logiciels conçus et développés sur mesure.

Axes de structure

Fonctionnement

L'organisation interne de MasterIT.

R&D

Recherche et développement.

Couleurs

Palette

Valeurs lues en direct dans tokens/tokens.css — changez de thème avec le bouton en haut à droite. Les couleurs brand sont celles de la charte et ne changent jamais ; le vert #47B368 est trop clair pour du texte sur blanc, d'où --accent (vert approfondi) en thème clair.

Brand

Thème

États

Typographie

Échelle typographique

Charte : titres en Avenir Next (--font-heading), texte en Calibri (--font-sans) — utilisées si installées, sinon Nunito Sans / Carlito, puis les polices système. Les deux plus grandes tailles sont fluides (clamp()).

h1 · --text-4xl

(Re)prenez le contrôle

h2 · --text-3xl

Titre de section

--text-2xl

Sous-titre

h3 · --text-xl

Titre de carte

--text-lg
Texte d'introduction, plus grand et atténué.
--text-base
Texte courant : les infrastructures de nos clients, hébergées en France, surveillées jour et nuit.
--text-sm
Légendes, aides de formulaire, pied de page.
.eyebrow
Sur-titre
Espacement & formes

Espacement, rayons, ombres

Pas de 4 px. Toujours un token, jamais une valeur en dur.

--radius-sm
--radius
--radius-lg
--shadow-sm
--shadow
--shadow-lg
Composants

Composants

Définis dans css/components.css, HTML de référence dans DESIGN.md.

.btn

Primaire Secondaire Discret

.badge

Nouveau Opérationnel Maintenance Incident

.card

Carte lien

Survolez-moi : bordure accent, ombre, léger décalage.
Statique

Carte simple

Un div.card ne réagit pas au survol.

99,9 %.stat — disponibilité

.field · .input

.multiselect — js/multiselect.js, clavier : ↓ ↑ Espace Échap

Statut
Étiquettes

.question · .choice — questionnaires, js/survey.js (modèle « Recette Pastèque »)

  1. C1

    Ajouter et répéter

    1. Ajoutez 3 fois Baguette.

    AttenduUne seule ligne « Baguette ×3 », total 3,30 €.

    Résultat
    1:42
    Voir la solution

    Catalogue → Bakery → Baguette, trois fois.

.cta

Un projet ? Parlons-en.

Bandeau d'appel à l'action, sur le dégradé de marque.

Nous contacter

.reveal · .reveal-group — apparition au défilement, CSS seul

Un bloc .reveal monte en apparaissant à l'écran ; dans un .reveal-group, chaque enfant suit le précédent. Rien sans animations défilées ni avec « réduire les animations » : la page reste fixe et lisible.

Un

Premier enfant.

Deux

Un pas après.

Trois

Encore un pas.

Icônes — assets/icons/, trait 2 px, currentColor

Modèles

Pages et documents d'exemple

Point de départ de tout nouveau site ou document : copiez le dossier du modèle le plus proche — templates/web/… pour les sites et applications, templates/documents/… pour les documents à imprimer. Le contenu est fictif.

Site vitrine

Pages marketing : tokens + base + components.

web/site/index.html

Accueil MasterIT

Hero, chiffres clés, services, approche, appel à l'action, formulaire de contact.

 web/site/survey.html

Questionnaire · Recette Pastèque

Test utilisateur : missions sans aide chronométrées, parcours guidé, anomalies, avis, rapport à copier. Réponses gardées dans le navigateur.

Site produit & documentation

Site technique d'un produit (exemple : Orbit). La doc ajoute css/app.css.

web/product/index.html

Accueil produit

Hero avec terminal, fonctionnalités, démarrage en 3 étapes, fichier compose, CTA.

 web/product/docs.html

Documentation

Navigation, fil d'Ariane, prose, blocs de code, alertes, tableau, sommaire.

Application web

Interface applicative (exemple : Orbit) : css/app.css en plus, barre latérale + barre du haut.

web/app/login.html

Connexion

Carte de connexion SSO (OpenID Connect).

 web/app/dashboard.html

Tableau de bord

Indicateurs, jalons avec progression, activité GitLab, tâches à surveiller.

 web/app/tasks.html

Liste

Filtres, tableau avec statuts, priorités, labels, assignés.

 web/app/board.html

Kanban

Colonnes par statut, cartes de tâches.

 web/app/task.html

Détail

Alerte de blocage, description, commentaires, métadonnées en colonne.

Documents

Documents au format A4, à imprimer ou exporter en PDF : css/document.css à la place de css/app.css, toujours en thème clair.

documents/blank.html

Document vierge

En-tête avec logo, couverture, sections, tableau, alerte, saut de page, signatures.

 documents/modop.html

Mode opératoire

Révisions, prérequis à cocher, étapes numérotées avec commandes et captures, dépannage, validation.

 documents/attestation-caisse.html

Attestation de logiciel de caisse

Modèle BOFiP BOI-LETTRE-000242 mot pour mot : volet éditeur, volet client, champs à compléter.

 documents/presentation-produit.html

Présentation produit

Plaquette Orbit sur 2 pages : bandeau, bénéfices, captures, fonctionnalités, 3 étapes, contact.