# MEDEF Loire-Atlantique — Design System

Design system for **MEDEF Loire-Atlantique** (MEDEF 44), the departmental employers'
organisation of the Mouvement des Entreprises de France. Built entirely from the
brand material supplied by the client — no invented marks, no invented palette.

## The organisation

MEDEF Loire-Atlantique is an autonomous local association run *by and for*
company directors. It is the 6th largest MEDEF in France: around **2 000 member
companies** (71 % of them under 50 employees) representing roughly **127 000
employees**, close to **40 % of private employment** in the department. It counts
**10 professional branches** and 2 inter-professional associations, is present in
about **100 institutions through 330 mandataires**, and runs roughly **100 events
a year** — the Université Jules Verne (800+ directors), the MEDEF Tour, the Club
and Ateliers RH, the Soirée des Ambassadeurs de l'entreprise. Thematic
commissions cover mandats, emploi-social, numérique, commerce, handicap, sport,
création-transmission, entreprises en difficulté, croissance-international, RSE,
Génération MEDEF, enseignement-entreprises, formation.

Raison d'être (fixed, never reworded): **« Agir ensemble pour une croissance
responsable »**.

### Surfaces represented here
| Surface | Where |
|---|---|
| Public website (medef44) | `ui_kits/site-web/` |
| Weekly member newsletter « MEDEF 44 Hebdo » | `ui_kits/newsletter/` |
| Presentation master (16:9) | `slides/`, and as a reusable template in `templates/presentation/` |
| Print/editorial construction rules | `guidelines/spacing-grille.card.html` |

## Sources used

Everything in this system derives from files the client uploaded:

- **`guidelines/CHARTE_GRAPHIQUE_MEDEF_2021.pdf`** — the national *Charte
  graphique MEDEF, juillet 2021* (35 pages). This is the authority for the
  logotype rules, the three palettes, typography, elementary shapes,
  iconographic style, construction grid, stationery, PowerPoint master,
  newsletter and homepage. Page references throughout this readme point into it.
- **Logotypes (PNG + SVG)** — `MEDEF_Loire-Atlantique_LOGO_RVB`,
  `…_BLANC` (PNG + SVG), `…_BLOCMARQUE_RVB`, `…_BLOCMARQUE_BLANC`,
  `Logo.PNG` (the colour symbol), `E NOIR.png` (black symbol),
  `LOGO LES MANDATS.png` (the "Les Mandats" sub-brand tile).
- **Fonts** — `BarlowCondensed-Medium.ttf`, `-SemiBold.ttf`, `-Bold.ttf`.
- Public information about MEDEF 44 (LinkedIn company page, PRST Pays de la
  Loire, HelloAsso membership pages) for the factual copy used in the UI kits.

No Figma file, repository or codebase was provided. **No screenshots of the live
medef44 site were available**, so the website kit follows the charte's own
homepage construction (p.34) rather than reproducing a specific live page.

---

## CONTENT FUNDAMENTALS

**Language.** French, always. Institutional but not administrative — the voice of
an association of business owners talking to business owners.

**Person.** Collective *nous* for the organisation, *vous* for the member:
« Le MEDEF 44 **vous** accompagne », « **Ne soyez plus seul, rejoignez-nous** ».
Never *je*. Never *on*.

**Register.** Vouvoiement, present tense, active voice. Sentences are short and
declarative. Verbs lead: *Adhérer*, *Agir*, *Représenter*, *Décarboner*,
*Recruter*.

**Casing.** This is the brand's strongest copy signal.
- Titles, section headings, card titles, buttons, tags: **CAPITALES** in Barlow
  Condensed — « ACTUALITÉS & COMMUNIQUÉS », « ADHÉRER AU MEDEF 44 ».
- Body copy: normal sentence case in Barlow.
- French typographic rules hold: accents on capitals (**É**CONOMIE,
  **É**DUCATION), non-breaking space before `: ; ! ?`, French quotes « … ».

**Numbers.** Written with a thin space as thousands separator (2 000, 127 000),
percentages with a space (40 %). Key figures are set oversized and standalone —
never buried in a sentence when they can be a `StatFigure`.

**Naming.** *adhérent* (not "client" or "user"), *mandataire*, *branche
professionnelle*, *commission*, *territoire*, *dirigeant*. The organisation is
"le MEDEF Loire-Atlantique" formally and "le MEDEF 44" in running copy.

**Emoji: never.** Not in UI, not in the newsletter, not in slides. The charte's
graphic vocabulary is geometric; emoji have no place in it.

**Tone examples**
- Good: « Recruter en Loire-Atlantique : tensions, alternance, mobilité. L'état
  des lieux du territoire. »
- Good: « 24 mandats à pourvoir. Appel à candidatures jusqu'au 30 octobre. »
- Wrong: « 🚀 Boostez votre business avec nous ! » — hype, emoji, anglicism.
- Wrong: « Nous sommes ravis de vous annoncer que… » — throat-clearing.

**Length discipline.** Card titles ≤ 60 characters. Chapeaux one sentence.
Buttons two or three words, verb first.

---

## VISUAL FOUNDATIONS

### Colour
Three **couleurs identitaires** taken from the logotype and mandatory on every
support: bleu `#2F2483`, violet `#662282`, rouge `#E4002C` (charte p.5, p.15).
Nine **couleurs d'accompagnement** may be combined freely, but **never more than
four colours on one support**. Fourteen **couleurs thématiques** each own a
subject (Économie `#2680C4`, Social `#EF7982`, Numérique `#0BB3CD`, Mandats
`#34AB54`, …) and are used *en majeur* when a document is about that subject.

Two absolute rules: **every colour is used at 100 % of its tint — never
screened, never tinted, never at reduced opacity**, and **the blue→violet→red
gradient exists only inside the symbol** — never as a background, a text fill or
a shape.

Blue is the surface colour for inverse bands (`.medef-inverse` scope). Red is
the action colour: primary buttons, active tab rules, kickers, key figures.
Violet is the third voice — quotes, secondary sections. White is the default
page ground; the charte insists the logotype's upper-right zone stays white.

### Typography
- **Barlow Condensed** (`--font-titrage`) — all titling: titles, subtitles,
  accroches, pull-quotes, buttons, tags, key figures. Weights supplied as
  binaries: Medium 500, SemiBold 600, Bold 700 (the family runs Thin→Black on
  Google Fonts).
- **Barlow Semi Condensed** (`--font-intertitre`) — the intermediate register:
  kickers, small uppercase labels, intertitres, table headers. Buys width
  economy without the narrowness of the full condensed.
- **Barlow** (`--font-texte`, non-condensed) — running text, dense paragraphs,
  legal mentions.
The 2021 national charte also names **Franklin Gothic** as an office-software
substitution font (Word, PowerPoint). MEDEF 44 does not use it — the three Barlow
families are the whole type system, so no token is declared for it.

Titling is set uppercase, line-height 0.94–1.02, letter-spacing near zero for
large sizes and +0.14em for small kickers (the charte cotes these as "approche
+25 / +50"). Cover and slide titles are **ranged right, aligned under the
logotype**. Body copy runs 16/1.55.

### Shape, borders, radii
**Radius is zero. Everywhere.** Cards, buttons, fields, modals, images — all
square. The only round forms permitted are the radio dot and a social avatar.

Only three shapes are allowed, all derived from the symbol (p.13): the
**rectangle** (the bars of the "E"), the **triangle** (its upper-right
counterform) and the **trapeze** (the form closing the symbol on the right).
Separations between blocks are straight, horizontal or vertical — **never
diagonal**.

Rules (filets) do the work borders usually do: 1px hairline `#DDDDE5` around
cards, a 4px theme-coloured rule on a card's top edge, a 6px rule under section
titles (a direct echo of the "E" bars).

### Shadow
Almost none. The charte forbids any effect on the logotype (shadows,
reflections). Elsewhere: no shadow at rest; on hover a **hard 6px offset block**
in the theme colour (`0 6px 0 0`) — never a soft blur. The single blurred shadow
in the system is the modal scrim shadow.

### Transparency and blur
Used in exactly two places, both from the charte: the **fond de scène** backdrop
(white symbols at 50 % opacity over identity blue, p.29) and text-over-colour
opacity for secondary copy on inverse grounds (`rgba(255,255,255,.72)`). No
frosted glass, no backdrop blur, no protection gradients — the brand protects
legibility by keeping a **white band or flat block** under the type instead.

### Layout
Every format is built on the **construction grid** (p.21–22): frame the
upper-right corner of the symbol so its triangular counterform equals the format
width, then repeat the symbol four times across the width. The rightmost
repetition sizes the **corner triangle (12.5 % of width)** and positions the
**logotype (25 % of width, ranged right, up to 50 % on posters and kakemonos)**.
The upper-right area stays white; the lower-left area carries **one, two or three
elements** — flat tints, photographs, or a mix, with at least one flat tint
whenever three are used.

Fixed elements: the corner triangle top-right and the logotype under it. Two
documented exceptions, both for progressive vertical loading: the **newsletter**
and the **website homepage** centre the logotype in a white band at the top.

Spacing runs on a 4px scale (`--esp-1` … `--esp-24`), content maxes at 1240px,
text columns at ~68ch.

### Imagery
Two iconographic families (p.18–19), both photographic:
- **L'humain** — bust-framed portraits, subjects facing camera, smiling,
  candid and benevolent. Bright, contrasted, sharp subject against a wide
  blurred background. Values: confidence, optimism, positivity.
- **Les paysages** — French territories with a wide horizon always present;
  nature or city, coast or mountain, metropole or overseas. Clear sky, warm
  sunlight, aerial or elevated viewpoints for a sense of immensity.

Colour vibe: warm, luminous, saturated, high-contrast. Never black and white,
never grainy, never cool or desaturated, never duotone.

**No photography was supplied with this brief.** Wherever a visual belongs, the
kits and slides use a labelled flat tint from the palette — a configuration the
charte explicitly allows. Dropping real photos in changes nothing structurally.

### Motion
Sober and institutional. Short fades and straight slides, 160–240 ms, easing
`cubic-bezier(.2,0,.2,1)`. **No bounce, no spring, no parallax, no scroll-jacking,
no animated gradients.** Motion never animates the logotype.

### States
- **Hover** — fills darken by roughly 12 % (`--action-primary-hover`
  `#C50026`); outline buttons invert to a solid fill; nav items grow a 4px red
  underline; cards gain the hard 6px offset shadow. Never opacity fades on
  interactive elements.
- **Press** — 1px downward nudge. No scale, no ripple.
- **Focus** — 2px inset underline plus a blue border on fields; cyan
  `--focus-ring` is available for outlines.
- **Disabled** — flat `#DDDDE5` fill with `#9C9CAE` text; no opacity trick.

---

## ICONOGRAPHY

The charte defines two pictogram styles (p.17) and **no icon font or SVG set was
supplied**:
1. **Pictogrammes en volume** — isometric 3D, viewed slightly from above and
   three-quarters, any accompaniment colour, but **the edge/side face is always
   identity blue**. Simple, immediately readable subjects.
2. **Pictogrammes en aplat** — flat design, pure fills, very stripped-back, any
   palette colour, provided **at least one element stays identity blue**.

**Flagged substitution.** Since neither pictogram set exists as files, the
`Icon` component renders **Lucide** (`lucide-static@0.544.0`, CDN, 2px stroke)
as a CSS mask so glyphs inherit any brand colour. This is the closest neutral,
geometrically consistent line set — but it is *not* the brand's own pictogram
language. **Ask MEDEF 44's communication team for the pictogram library
(illustrator/SVG) before shipping anything public.**

Other icon-like elements used, all legitimate: the **triangle** as a bullet and
breadcrumb separator (cut from the brand shape, not an icon), and the **symbol
E/F** as a social avatar and as the repeating motif of the fond de scène. **No
emoji. No unicode dingbats.**

---

## Index

### Root
| File | What |
|---|---|
| `styles.css` | Entry point — `@import` list only. Consumers link this. |
| `thumbnail.html` | Homepage tile. |
| `readme.md` | This guide. |
| `SKILL.md` | Agent-Skills front matter for use outside this project. |

### `tokens/`
`fonts.css` (Google Fonts import for Barlow, Barlow Semi Condensed and Barlow
Condensed + the three supplied Barlow Condensed binaries) · `colors.css` (identity, accompaniment, thematic, neutrals, semantic
aliases, `.medef-inverse` scope) · `typography.css` (families, weights, scales,
`.t-*` utility classes) · `spacing.css` (4px scale, page margins, grid
constants, logo minimums) · `shape.css` (zero radii, rules, shadows, brand
clip-paths) · `motion.css` (durations, easings).

### `assets/`
`logos/` — `medef44-logo-rvb.png`, `medef44-logo-blanc.png`,
`medef44-logo-blanc.svg`, `medef44-blocmarque-rvb.png`,
`medef44-blocmarque-blanc.png`, `symbole-e-degrade.png`, `symbole-e-noir.png`,
`les-mandats.png`.
`fonts/` — `BarlowCondensed-Medium.ttf`, `-SemiBold.ttf`, `-Bold.ttf`.

### Components

**`components/brand/`** — `Logo`, `Triangle`, `Shape`, `CoverGrid`
**`components/core/`** — `Button`, `Icon`, `Tag`, `Card`, `StatFigure`
**`components/forms/`** — `Field`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`
**`components/navigation/`** — `Tabs`, `Breadcrumb`, `SectionTitle`
**`components/feedback/`** — `Alert`, `Dialog`, `Tooltip`

Each has a sibling `.d.ts` (props contract) and `.prompt.md` (what & when, usage
example). One `@dsCard` HTML per directory shows the variants.

*Intentional additions* (not named in the charte, needed to build anything):
`Icon` (wrapper for the substituted glyph set), `Field`, `Textarea`, `Switch`,
`Tabs`, `Breadcrumb`, `Alert`, `Dialog`, `Tooltip` — standard interface
primitives styled strictly to the charte's geometry, since the charte is a print
identity and defines no screen component library. `CoverGrid`, `Shape`,
`Triangle` and `StatFigure` are direct codifications of charte rules.

### `guidelines/`
`CHARTE_GRAPHIQUE_MEDEF_2021.pdf` plus 19 specimen cards feeding the Design
System tab: identity / accompaniment / thematic / neutral / semantic colours and
the gradient; titling, text, kicker and scale type specimens; spacing scale,
construction grid, protection zone, card & shadow anatomy; logotype, symbol,
elementary shapes, interdits, fond de scène.

### `ui_kits/`
- `site-web/` — website recreation: `index.html` (click-through: accueil →
  actualités → adhérer → événement), `Header.jsx`, `Hero.jsx`, `Sections.jsx`,
  `Pages.jsx`, `data.js`, `README.md`.
- `newsletter/` — « MEDEF 44 Hebdo » email, `index.html` + `README.md`.

### `slides/`
Seven slide types (`01-couverture` … `07-merci`) at 1280×720 + `README.md`.

### `templates/`
- `presentation/Presentation.dc.html` — the seven-slide 16:9 master as a
  reusable Design Component, with `ds-base.js`.

## Known gaps

1. **Pictograms** — the charte's isometric and flat pictogram sets were not
   supplied; Lucide substitutes. Highest-priority missing asset.
2. **Photography** — no *humain* or *paysage* library; flat tints stand in.
3. **Font binaries** — only Barlow Condensed Medium/SemiBold/Bold were supplied.
   The remaining Barlow Condensed weights and the whole **Barlow** and **Barlow
   Semi Condensed** families load from Google Fonts.
4. **No live site or codebase** — the website kit follows the charte's homepage
   construction, not a capture of the current medef44 site.