Système / Composants — état courant

Système de design ETSA — catalogue blueprint4

Styleguide vivant : tous les composants et layouts du kit etsa-kit.css, rendus en réel. Textes d'exemple neutres (le rédactionnel des pages reste celui de Mélanie). noindex — page de travail, co-évolue avec le design jusqu'à validation.

01 — Couleurs (tokens)

Palette ACSS de marque + neutres. ⚠ Customs à mapper sur tokens ACSS réels en phase Etch (--base-deep → --base-ultra-dark, --neutral-700… → variants, --primary-dim → --primary-trans-*).

primary#0C9EDA

primary-ink (AA)#066D96

primary-hover#0A86BD

primary-ultra-light#E7F6FC

base#414B51

base-dark#2A3338

base-deep#1D2429

neutral-700#54606A

neutral-500#6B757B

neutral-300#C2CACE

neutral-100#EEF1F3

neutral-ultra-light#F5F7F8

02 — Typographie & grammaire

Échelle ACSS native (Headings + Text, clamps fluides). Customs dérivés de --text-m (--text-mono).

Eyebrow — kicker mono

Titre H1 — display

Titre H2 — section

Titre H3 — sous-section

Titre H4 — carte

Lead — texte d'introduction allégé, plus grand, en graisse 300, pour ouvrir une section.

Corps de texte courant. Mesure de lecture limitée, rythme vertical régulier via .prose. Lien fondu : lien dans le texte.

Statement — phrase forte à valeur d'accroche.

Lien fléché — voir plus

Texte mono — référence technique

03 — Boutons

Framework boutons ACSS var-driven. .btn--ghost-light sur fond sombre uniquement.

Bouton primary Bouton ghost

Primary Ghost light

04 — Layout « colonne d'ancrage » .editorial

Rail titre ancré (sticky) + corps. Brise la « colonne centrée façon blog » sur les sections de texte.

Texte d'introduction de la section, posé à droite du rail.

Corps de la section. Le rail de gauche reste visible au scroll, le corps déroule à droite. Texte d'exemple neutre pour la démonstration du composant.

Deuxième paragraphe d'exemple, pour montrer le rythme vertical du corps éditorial.

05 — Layout « process imagé » .process / .phase

Étapes numérotées, image + texte alternés (.phase--rev). Pour un déroulé (bureau d'études → atelier → site).

01 Étape A

Titre de la première étape

Texte d'exemple de l'étape. Le grand numéro filigrané et l'image alternée donnent le rythme du déroulé.

02 Étape B

Titre de la deuxième étape (inversée)

Variante .phase--rev : l'image passe à gauche, le texte à droite, pour alterner.

Plan coté

Layout « plan technique annoté » `.plan`

Cartouche-titre bordé + ligne de rappel + grand numéro en filigrane + corps à filet cyan. Variante signature « plan d'atelier ».

Le cartouche est borné à 60 % pour les titres longs ; le filigrane reste à droite ; .plan--rev inverse texte/image.

07 — .section--dark + .step-grid / .step-card

Modificateur sombre (basculement de couleur tokenisé). Cartes numérotées, nombre de colonnes par variante (--2 / --3 / --4).

Carte sombre

Titre + description. Sur fond sombre, titres en blanc par héritage tokenisé.

Deuxième

Texte d'exemple neutre pour la carte numérotée.

Troisième

Texte d'exemple neutre pour la carte numérotée.

08 — .step-grid--2 sur fond clair

Mêmes cartes, variante claire automatique (hors .section--dark) et 2 colonnes.

01 — A

Carte claire

Variante claire : fond neutre, titre anthracite, description neutre-700.

02 — B

Carte claire

Texte d'exemple neutre.

09 — Fiche-produit .spec-card / .spec-grid

Fiche à blocs étiquetés (Fonction / Composants / Matériaux). Pour les gammes détaillées (appareils de raclage).

Produit d'exemple

Phrase de description du produit, posée avant les blocs étiquetés.

Fonction

Élément un
Élément deux

Composants

Élément un
Élément deux

Matériaux

Aluminium
Inox

Second produit

Description d'exemple neutre.

Fonction

Élément un
Élément deux

Composants

Élément un

Matériaux

Inox

10 — Fiche technique .fiche (REP. 01)

Texte + image, gros numéro détouré, repère RÉF, alternance .fiche--rev.

01 Réf. exemple

Titre de la fiche

Description de la fiche technique. Texte d'exemple neutre pour le composant.

Tag ATag BTag C

Consulter la fiche

RÉF · 01

11 — Module « 3 métiers » .schema + marquee

Schéma à branches cotées (illustration figurative = SVG graphiste à venir) + bandeau défilant des techniques.

◆ CŒURau centre

01Branche ADescription courte d'exemple

02Branche BDescription courte d'exemple

03Branche CDescription courte d'exemple

Technique ATechnique BTechnique CTechnique D Technique ATechnique BTechnique CTechnique D

12 — Bi-colonne .poly · stats · piliers

Colonne A

Élément un
Élément deux
Élément trois

Colonne B

Texte d'exemple neutre de colonne.

Note mono · exemple

2000m²

Libellé d'exemple

10t

Libellé d'exemple

3ISO

Libellé d'exemple

Pilier A

Pilier B

Pilier C

13 — Galerie · tags · placeholders

Logo

Marqueur interne : Texte provisoire — à valider · coordonnée <à compléter> (masqués hors vue team — ?display=team).

Bandeau CTA pleine largeur

Texte d'exemple neutre pour le bandeau d'appel à l'action.

Action primaire Action secondaire

Titre H1 — display

Titre H2 — section

Titre H3 — sous-section

Titre H4 — carte

Titre de la section

Titre de la première étape

Titre de la deuxième étape (inversée)

Layout « plan technique annoté » .plan

Carte sombre

Deuxième

Troisième

Carte claire

Carte claire

Produit d'exemple

Second produit

Titre de la fiche

Colonne A

Colonne B

Pilier A

Pilier B

Pilier C

Bandeau CTA pleine largeur

Layout « plan technique annoté » `.plan`