# Design System Tempus — v1

*Dérivé de la charte graphique Cécile Hencky 2025 et des textes validés du projet. Système d'invariants pour concevoir le site. Les 2-3 directions de maquette se composent par-dessus ce système : elles ne le redéfinissent pas.*

---

## 1. Couleurs & rôles

| Couleur | Hex web | Rôle |
|---|---|---|
| Roche | `#0e0d0c` | Texte principal, aplats sombres |
| Albâtre | `#ebe4d9` | Fond clair, cartes, texte sur fond dense |
| Argile | `#873816` | Fond dense, liens texte sur fond clair |
| Cuivre | `#d16224` | Accent, CTA, titres display |
| Mélèse | `#3a603a` | Vert de soutien, repérage axe 02 |
| Mousse | `#93953e` | Soutien, repérage axe 03 — décoratif uniquement |

Extension au nuancier : un tint clair dérivé de l'Albâtre (`#f4efe8`) pour alléger les grandes surfaces de fond. L'Albâtre pur (`#ebe4d9`) reste pour les bandes chaudes et les cartes. Seule extension, signalée comme telle.

## 2. Contrastes vérifiés (WCAG, ratios calculés)

| Texte | Sur fond | Ratio | Verdict | Usage |
|---|---|---|---|---|
| Roche | Albâtre | 15,4:1 | AAA | Corps + titres, partout |
| Blanc | Argile | 8,1:1 | AAA | Corps sur fond dense |
| Argile | Albâtre | 6,4:1 | AA | Liens, sous-titres sur clair |
| Albâtre | Argile | 6,4:1 | AA | Corps sur fond dense |
| Mélèse | Albâtre | 5,7:1 | AA | Texte de soutien |
| Roche | Cuivre | 5,1:1 | AA | **Label CTA — toutes tailles** |
| Blanc | Cuivre | 3,8:1 | AA grand | Label CTA ≥18px gras seulement |
| Cuivre | Albâtre | 3,0:1 | AA grand | Titres ≥24px, filets — pas de corps |
| Mousse | Albâtre | 2,5:1 | Échoue | Décoratif uniquement |
| Cuivre | Argile | 2,1:1 | Échoue | Display uniquement, jamais texte |

**Règles non négociables :** corps = Roche (clair) ou Blanc/Albâtre (dense) · liens sur clair = Argile, jamais Cuivre · CTA = fond Cuivre + label Roche · Cuivre et Mousse interdits en corps de texte.

## 3. Typographie

- **Satoshi** (Fontshare, libre) : titres + corps. `font-family: "Satoshi"`.
- **Aeternum Medium** : capitales exclusivement, pour kicker et exergue. Fournie en **WOFF2** (regular + italic, 540 glyphes, accents FR complets). `font-family: "Aeternum"`. Voir `aeternum-webfont.css` pour le `@font-face` prêt à l'emploi.

Échelle de départ (se resserre en mobile) : H1 46 / -.02em · H2 31 / -.01em · H3 21 · chapô 20 italique (Argile) · corps 17 / line-height 1.6 · kicker 13 / .22em capitales (Cuivre).

## 4. Composants

- **CTA** : pilule Cuivre, label Roche, puce flèche de la charte en affordance. Un seul style. Variante secondaire : contour Argile.
- **Liens texte** : Argile, souligné Cuivre.
- **Lockup kicker + titre** : motif signature (kicker Aeternum caps Cuivre + titre Satoshi).
- **Cartes prestations** : les 3 axes reçoivent une couleur de repérage — Opérations de terrain = Cuivre, Traitement de l'information = Mélèse, Valorisation = Mousse — portée par un filet et l'index, **jamais par le texte** (qui reste Roche). Ce fil couleur se prolonge sur les pages internes et les filtres projets.
- **Header** : logo + navigation ; menu burger de la charte en mobile.
- **Listes** : puce-point de la charte (recolorée en Cuivre).
- **Diviseur stratigraphie** : ligne fine entre sections.
- **Silhouettes** : bandes décoratives de pied de page / accents de section.

## 5. Traitement de l'image

Deux registres cohérents : vues terrain/aériennes et coupes stratigraphiques. Voile de marque (gradient Argile ou Roche) en pied pour asseoir le texte et unifier des sources hétérogènes.

⚠️ Les 7 visuels istock fournis sont **« à acheter si utilisés »** — décision à prendre avant mise en production.

## 6. Application — zonage de la home

Alternance clair / dense (Albâtre / Argile) pour rythmer la lecture :

1. **Hero** (fond clair) — lockup « Tempus » + H1 + chapô italique + CTA, visuel terrain.
2. **Le collectif** (clair) — deux paragraphes, prose.
3. **Nos prestations** (dense) — 3 cartes code-couleur.
4. **Nos derniers projets** (clair) — grille dynamique 3-6 projets + CTA.
5. **Nos commanditaires** (clair) — liste typographique ou mur de logos.
6. **Travailler avec Tempus** (dense) — CTA contact, silhouette en pied.

## 7. Garde-fous

**À faire :** corps Roche/Blanc selon le fond · CTA unique Cuivre+Roche · code couleur des axes en filet · Aeternum capitales seules · un motif signature par zone, avec de l'air · max deux fonds.

**À éviter :** Cuivre/Mousse en corps · liens Cuivre sur clair · incliner/aplatir/ombrer/recolorer le logo · accumuler les motifs · vocabulaire creux (« innovant », « dynamique », « souplesse » répété, « sur-mesure » vide) · effacer la distinction archéologie programmée ≠ préventive.

---

## Brief à coller dans Claude Design

```
SYSTÈME TEMPUS — contraintes de design (ne pas dévier)

COULEURS (hex web)
Roche #0e0d0c (texte) · Albâtre #ebe4d9 + tint #f4efe8 (fonds clairs)
Argile #873816 (fond dense, liens texte sur clair) · Cuivre #d16224 (accent, CTA, titres display)
Mélèse #3a603a · Mousse #93953e (repérage des 3 axes, décoratif — jamais de texte en Mousse)

CONTRASTE
Corps = Roche sur clair / Blanc-Albâtre sur dense. Liens sur clair = Argile.
CTA = fond Cuivre + label Roche. Cuivre/Mousse interdits en corps.

TYPO
Satoshi (titres + corps). Aeternum Medium EN CAPITALES seulement (kicker, exergue) — WOFF2 fournie.
Échelle : H1 46 / H2 31 / H3 21 / chapô 20 italique / corps 17, line-height 1.6.

COMPOSANTS
CTA pilule Cuivre + puce flèche. Cartes prestations : 3 axes code-couleur (Cuivre/Mélèse/Mousse) en filet, texte Roche.
Lockup kicker+titre. Diviseur stratigraphie entre sections. Alternance de fonds clair/dense (max 2 fonds).

TON & INTERDITS
Sobre, factuel, aéré. Un motif signature par zone. Logo : ne pas incliner/aplatir/ombrer/recolorer.
Bannir « innovant / dynamique / souplesse (répété) / sur-mesure » creux. Garder distinction archéo programmée ≠ préventive.

HOME — zonage
Hero (H1+chapô+CTA) → Collectif → 3 prestations (dense) → Projets → Commanditaires → Travailler avec Tempus (dense).
```