# CoachingΚα — Design System

**CoachingΚα** is the practice of **Marie-Clémence Perrot**, a certified executive coach (Linkup, EMCC member) working with company directors and leadership teams in France. Her differentiator is method, not niche: five crossed disciplines — coaching, philosophy, theatre, **fencing** and fifteen years running a 400-person sports-and-arts organisation. Fencing (*escrime coaching*) and stage work are used as live laboratories for uncertainty, leadership, conflict and presence.

**Mission.** Empower executives to lead their own future and develop their skills — linking high professional performance to personal fulfilment, "in a virtuous synergy".

**Offer, as it exists today.** Individual coaching (dirigeants, équipe de direction, coaching de transition, développement personnel), interactive seminars, conferences.

## Sources used

| Source | What was taken |
| --- | --- |
| https://coachingka.com (live WordPress site, © 2017) | All product copy: home, `/dirigeants`, `/marie-clemence-perrot`, `/seminaires`, nav + footer structure, credentials, client sectors |
| https://coachingka.com/wp-content/uploads/2017/10/cropped-Kairos-1024x810.png | The **Kairos logo** — referenced in the brief but **not downloadable** into this project (cross-origin fetch blocked). See "Missing assets". |
| Brief keywords | smiling, trust, joyful, dynamic, simple, winning, team, luminous, elegant, warm, ethical, harmony, soothing, great outdoors, nature, horizon, sea. Explicitly excluded: movement, bright colours, sound. |

The old site's visual design was **not** carried over — the brief asks for a complete change. Nothing in this system is a recreation of the 2017 WordPress theme; the copy is the only inherited material.

## Missing assets — needs the client

1. **The Kairos logo.** Could not be fetched. Everywhere a mark belongs, the system renders the name typographically (`Wordmark`: *Coaching* in sea + *Κα* in brass). Please upload the original file (SVG preferred) — swap it into `components/core/Wordmark.jsx` and the API stays identical.
2. **Photography.** No brand imagery was available. Every image slot in the UI kit is a labelled placeholder ("Photo à fournir — horizon marin…"). Nothing was drawn or generated in its place.
3. **Client logos** (S.T. Dupont, Danone, Starbucks, CJD, Pôle Emploi, Lesieur, EMCC…) — the references band on the *Présentation* screen is intentionally empty.
4. **Font binaries.** None supplied — see Typography below.

---

## Index

| Path | What it is |
| --- | --- |
| `styles.css` | The single entry point consumers link. `@import` list only. |
| `tokens/` | `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `radius.css`, `elevation.css`, `motion.css`, `base.css` (element resets + link colours). |
| `guidelines/` | 21 specimen cards — colours, type, spacing, shape, motion, brand voice. |
| `components/` | React primitives, grouped `core/`, `forms/`, `feedback/`, `navigation/`, `content/`. |
| `ui_kits/website/` | Click-through recreation of the marketing site (5 screens) + its own README. |
| `thumbnail.html` | Homepage tile. |
| `SKILL.md` | Agent-Skills front matter for use outside this project. |

### Components

`core/` — **Button**, **IconButton**, **Badge**, **Tag**, **Card**, **Wordmark**
`forms/` — **Field**, **Input**, **Textarea**, **Select**, **Checkbox**, **Radio**, **Switch**
`feedback/` — **Dialog**, **Toast**, **Tooltip**
`navigation/` — **Tabs**
`content/` — **SectionHeading**, **Quote**, **Stat**

Each has a sibling `.d.ts` (props contract) and `.prompt.md` (what & when + usage). Starting points: `Button`, `Card`, `Tabs`, and the site kit's `index.html`.

**Intentional additions** (no component source existed — the brief is brand-guidelines-only, so the standard set was authored, plus):
- **Wordmark** — because the real logo is missing and every surface needs a mark; it is a placeholder with a stable API.
- **SectionHeading / Quote / Stat** — the site is content-led; these three encode the eyebrow→title→lead rhythm, the testimonial treatment and the credential figure so they are never re-invented per page.
- **Field** — label/hint/error wrapper; keeps form controls dumb.

### UI kits

`ui_kits/website/` — the only product this brand has: a marketing site. Screens: **Accueil**, **Dirigeants**, **Séminaires**, **Présentation**, **Contact**.

No slide template was provided, so no sample slides were created.

---

## Content fundamentals

**Language.** French, always. No English mixed in except established job titles (*executive coach*, *start-up*). Accents and typographic apostrophes (’) are respected; French spacing rules apply (« guillemets », thin space before `?` `!` `:`).

**Person.** Two voices, used deliberately:
- **"Vous"** for the client, on every offer and marketing page. Never *tu*. It names their situation before it names the service: *« Vous disposez souvent de peu de temps pour prendre du recul… »*
- **"Je"** for Marie-Clémence, on presentation, method and testimonial-framing pages: *« Je partage avec les dirigeants que j’accompagne le fruit de mes formations et expériences. »*
- **"Nous"** only for the partner network: *« CoachingΚα est engagée dans une logique partenariale. »*

**Register.** Precise, adult, unhurried. Sentences are complete and often use a triad: *« comprendre, décider, agir »*, *« un accompagnement court, tourné vers l’action présente et le futur »*. Verbs of movement and clarity carry the brand: *mener, franchir, prendre du recul, y voir clair, rayonner, passer à l’action, faire ses preuves*.

**Casing.** Sentence case everywhere in prose. Uppercase is reserved for eyebrows, button labels and tab labels — always with `--tracking-eyebrow`/`--tracking-wide`, never for a heading or a sentence.

**Punctuation & length.** No exclamation marks. No rhetorical questions in headlines. Headlines 3–7 words, ending in a full stop when they are a statement (*« Mener son avenir, avec plaisir. »*). Lead paragraphs ≤ 2 sentences. Body paragraphs ≤ 4 lines at `--measure` (62ch).

**Emoji: never.** Not in UI, not in copy, not in social posts. No exclamatory growth-marketing verbs (*boostez, débloquez, révolutionnez*), no guarantees, no countdowns, no scarcity.

**Ethics show up in wording.** Confidentiality, non-judgement and the client's autonomy are stated plainly rather than promised loudly: *« un espace de questionnement en toute bienveillance et confidentialité »*, *« le client devient leader de lui-même »*. Testimonials are anonymised to **role + sector** ("Directeur général — Industrie").

**Example pairs**

| Write | Not |
| --- | --- |
| Mener son avenir, avec plaisir. | Libérez votre potentiel dès aujourd’hui ! |
| Un entretien préalable pour faire connaissance, sans engagement. | Réservez votre call stratégique gratuit 🚀 |
| Le coaching agit comme un accélérateur pour développer vos ressources. | +40 % de performance garantis en 3 mois |
| Directeur général — Industrie | Jean-Pierre M., PDG ⭐️⭐️⭐️⭐️⭐️ |

---

## Visual foundations

The keyword list is the specification: **luminous, warm, elegant, soothing, sea, horizon, nature** — and **no movement, no bright colour**. The system reads as an overcast coastal morning: deep calm water, warm sand light, one brass note on the horizon.

**Colour.** Four families plus warm neutrals. **Sea** (`#0E2830 → #E6EFF1`) is the anchor: text, actions, full-bleed bands. **Sand** (`#FCFAF6 → #AD9C81`) is every light ground — the page is `--sand-50`, not white; white is reserved for cards so they lift without shadow. **Brass** (`#F6EEDF → #82683C`) is the single accent, and it is used as a *line*, an *eyebrow* or a *figure* — never a button fill, never a large field. **Sage** for breathing sections and positive states. Neutrals are tinted toward sand, so nothing feels clinical. Semantic hues are desaturated versions of the palette (`--positive #5F7C6A`, `--critical #9E5A4E`) so feedback never shouts. Max **two** background tones per page beyond the page ground. Always use semantic aliases (`--text-body`, `--surface-card`, `--action-primary`) — raw scales only when composing new tokens.

**Type.** Two families. **Newsreader** (serif) at Light/Regular for anything display, heading, lead or quote — it carries the elegance and the warmth. **Mulish** (humanist sans) for body copy, labels, buttons, nav — simple, luminous, unfussy. Display is set at weight 300 with `-0.02em` tracking; body at 400/1.65. Uppercase eyebrows at 12px with `0.18em` tracking are the brand's signature small element. Reading measure never exceeds 62ch; headline measure ~34ch. No third family, no italics outside quotes.

**Backgrounds.** Flat tones first. Two gradients exist and only two — `--wash-horizon` (sand → sea-100, for opening bands) and `--wash-deep` (sea-800 → sea-900, for dark bands). Both are vertical, low-contrast, sky-like. **No** patterns, textures, grain, noise, hand-drawn illustration or decorative shape. Imagery does the atmospheric work: sea, horizon, open air, natural light, fencing in silhouette — **warm, low contrast, generous sky, never high-saturation or cold**. Full-bleed photography is allowed only in hero and closing bands, always with `--scrim-deep` under any overlaid text (a bottom-up scrim, not a capsule).

**Layout.** 1200px container (840px for text-led pages), 4px spacing base, section rhythm 96/128/176px. Bands are full-width colour with a centred container; content is left-aligned by default, centred only in hero and closing CTA. The header is sticky, translucent (`rgba(252,250,246,.92)`) with `--blur-veil` and a hairline bottom border. Nothing else is fixed; no floating action buttons, no sticky side rails.

**Cards.** White ground, **1px `--sand-300` hairline border**, **14px radius**, `--shadow-xs` — the border does the work, the shadow is almost invisible. Optional 2px brass rule along the top edge (`accent`) marks a card as an offer or entry point. Interactive cards lift to `--shadow-md` over 240ms and change nothing else. Never a coloured left border, never a gradient fill, never stacked shadows.

**Radii.** Controls 4px, media and cards 14px, large panels 22px, pill (999px) **only** for `Tag` and `IconButton`. Nothing is fully square except hairlines and rules.

**Shadows.** Diffuse and sea-tinted, as under an overcast sky: `xs 0 1px 2px/.05` → `lg 0 24px 60px -24px/.20`. Inner shadow is used once, as a hairline substitute (`--shadow-inset-hairline`). Focus is a 3px `rgba(62,124,140,.45)` ring, never a colour swap.

**States.** Hover *darkens* on filled surfaces (sea-800 → sea-700 reads slightly lighter and warmer; the primary button additionally gains `--shadow-sm`) and *tints* on transparent ones (`--sea-100` wash). Press goes darker still (`--action-primary-press`) — **no scale, no translate**. Ghost buttons and links exchange a brass underline for a sea one. Disabled is 45% opacity plus `not-allowed`; colours are not changed.

**Motion.** The brief says no movement, so the budget is transitions only: 160ms on controls, 240ms on surfaces, `--ease-calm cubic-bezier(.32,.08,.24,1)`. No entrance animations, no parallax, no autoplaying carousels, no loops, no bounce, no spring. The `Switch` knob is the only element that travels, 18px in 160ms. `prefers-reduced-motion` collapses everything to 1ms. And no sound, ever.

**Transparency & blur.** Exactly two uses: the sticky header veil and the `Dialog` scrim (`rgba(14,40,48,.42)` + blur). Text is never set on an alpha-muted colour — full-opacity ink only, so contrast holds.

**Borders & rules.** `1px --sand-300` hairlines separate surfaces; `2px --brass-400` marks emphasis (card top edge, active tab, quote left edge). `--border-strong` (sea-700) only on secondary buttons.

**Iconography** — see below.

---

## Iconography

The source site has **no icon system at all** — the 2017 WordPress theme uses a magnifying-glass search glyph and a text "LinkedIn" link, and nothing else. There is no icon font, no sprite, no SVG set to copy in.

**Substitution (flagged).** This system uses **[Lucide](https://lucide.dev) 0.454.0 from CDN** — outline, 1.5px stroke, round caps, 24px grid. It was chosen because a thin, open, geometric outline matches the type weight and the "simple, luminous" keywords; a filled or heavy set would fight the palette. **Please confirm or replace this choice** — if the client has a preferred set (or wants custom marks built from the Kairos geometry), swap it and this section.

```html
<script src="https://unpkg.com/lucide@0.454.0/dist/umd/lucide.js"></script>
<script>lucide.createIcons({attrs:{width:20,height:20,'stroke-width':1.5}})</script>
```

Rules of use:
- **Size** 20px inline with text, 24px standalone; **stroke 1.5** always; colour `--sea-600` on light, `--brass-300` on deep.
- Icons **support** a label; they never replace one, except inside `IconButton`, which requires an accessible `label`.
- One icon per card maximum. No icon in headings, no icon in body copy, no decorative icon grids.
- Vocabulary in use: `compass, users, route, sunrise, clock, shield, layers, zap, notebook-pen, arrow-right, search, menu, mail, linkedin`.
- **No emoji**, and no Unicode pictographs pressed into service as icons. Two typographic characters are used deliberately and are *not* icons: the `▾` chevron inside `Select`, and `×` for dismiss.

---

## Typography substitution — action needed

No font binaries were provided, so nothing is self-hosted. Both families load from Google Fonts in `tokens/fonts.css`:

- **Newsreader** (display/serif) — stands in for an elegant, warm, slightly literary serif. Variable, 200–600, with a true italic for quotes.
- **Mulish** (body/sans) — stands in for a soft humanist sans; open apertures, gentle terminals, excellent French diacritics.

If CoachingΚα owns or licenses different faces, **send the files** (woff2 preferred): drop them in `assets/fonts/`, replace the `@import` in `tokens/fonts.css` with `@font-face` rules, and keep `--font-display` / `--font-sans` pointing at the new names. Nothing else needs to change.