# SKILL — ORDiDOC Design System

When designing for ORDiDOC (local IT shop in Ganges, Hérault), follow this skill.

## 1. Always load tokens
In every HTML file, link `colors_and_type.css` (or its relative equivalent). Never hardcode colors, type, radii or shadows — use the CSS variables.

## 2. Pick a layer FIRST
Before writing a single line, decide:
- **Brand Core** — website, devis, B2B, collectivité, app UI. Palette = blue + green + neutrals. Type = Archivo / Inter. No orange, no yellow, no Anton.
- **Retail Promo** — A4 posters, PLV, stickers prix. Accents = orange + yellow + gold. Prices in Anton XXL with blue stroke. Never on the website.

Mixing the two = brand violation. Refuse to produce it.

## 3. Typography rules
| Role | Font | Weight | Notes |
|---|---|---|---|
| H1/H2/H3 | Archivo | 600/700 | tight leading, letter-spacing: -0.01em |
| Body, UI | Inter | 400/500 | line-height 1.5 |
| Retail prices | Anton | 400 | XXL, `-webkit-text-stroke: 2-3px var(--blue-700)` |
| Mono / tech | JetBrains Mono | 400 | SIRETs, SKUs, IP addresses |

Minimum body size 14 px on web, 24 px on slides, 12 pt on print.

## 4. Mascotte « Super-Technicien »
- Jamais à la place du logo
- Jamais sur devis / collectivités
- OK en médaillon web (30 %) ou affiche B2C (100 %)
- Jamais plus grande que le produit qu'elle vend

## 5. Poster checklist
- A4 (210×297 mm, ratio 1:√2)
- Marge sécurité 8 mm, fond perdu 3 mm
- 300 dpi, CMJN
- **4 specs max** — si ça déborde, coupez
- Prix Hero lisible à 3 m → Anton 80 px+ avec stroke bleu
- Une seule accroche (1 H1 maximum)

## 6. Web checklist
- Nav sticky sur fond blanc, logo 40-48 px
- Hero bleu dégradé `#1F4E8C → #163A69`
- CTA primaire = green-500, arrondi 999 px (pill)
- Cards radius `--radius-lg` (20 px), shadow `--shadow-card`
- Footer = blue-700 fond, logo mono inverse

## 7. Anti-slop
- Pas d'emoji dans le ton corporate
- Pas de gradient flashy inventé (utiliser le gradient brand)
- Pas de "données slop" : stats inventées, icônes décoratives inutiles
- Pas de mentions de fontes hors-système (Inter substitute, Roboto, Arial)

## 8. Copy guidance
- Ton direct, concret, pédagogue. Éviter le jargon IT gratuit.
- En français, toujours. Typographie française : espaces insécables avant `? ! : ;`, chiffres avec `€` collé.
- Adresse : 98 avenue du Mont Aigoual, 34190 Ganges. Tél : 04 11 93 49 13.
- Taglines validées : « Simplifier la technologie. » « Un interlocuteur unique. »