Apollo

YouSchool's design system. It pulls the values from the live site and seven Figma files into one set of tokens, and every page here renders straight from apollo-tokens.json.

Version 0.34.1 Status: draft · 0 open decisions Reconciled vs. Assets-site library WCAG 2.1 AA target

Sources reconciled

Reconciliation notes

↳

Open decisions

Decisions that were documented but not yet promoted to tokens. They need a human owner.

All open decisions resolved

The last open item, magenta #ED1E79, was settled in v0.16.0. It is the Métiers de bouche sector accent (sector/bouche), not a brand-wide accent; it shows up a lot only because the food funnel gets heavy traffic. Required-field asterisks move to the semantic danger token. See the Changelog.

PENDING

Tokens

Every Apollo token in one list, brand & neutral colours, accent and badge surfaces, the brand gradient, the Poppins type scale, spacing, radius, shadows and layout constants. Values trace 1:1 to the YouSchool token source (--ys-*). Export the whole set as Tokens Studio JSON to import into Figma via MCP or the Tokens Studio plugin.

Brand & neutrals

--ys-blue* · --ys-bg / border / text …

Brand

{{ sw.hex }}

Neutrals

{{ sw.hex }}

Accents

--ys-red / green / orange / purple / pink · badge surfaces only

{{ sw.hex }}

Badge surfaces

--ys-{name}-bg / --ys-{name}-fg · tinted bg + text pairs

{{ b.bg }}
{{ b.fg }}

Brand gradient

gradient/brand · #fbb03b → #ed1e79 → #29abe2 → #19dbad · 0 / -45°

{{ g.hex }}

Typography, {{ typeFamily }}

--ys-fs-* sizes · weights · line-heights · letter-spacing

Sizes

Weights

Line-height & tracking

lh/{{ t.name }} {{ t.value }}

ls/{{ t.name }} {{ t.value }}

Spacing

--ys-sp-1 … sp-12 · px

Radius

--ys-r-xs … r-full · px

{{ r.name }}

{{ r.value }}

Shadows

--ys-shadow-sm / md / lg

{{ s.name }}

Layout constants

--ys-header-h / sidebar-w / content-max

Documentation

Using Apollo

Apollo backs every YouSchool interface, the marketing site and the learner and coach Plateforme alike. This guide covers the practical side: where the values live, how to pull a component, and how the library is organised.

Source of truth for implementation

Apollo is the spec the build team codes to, build to these tokens and components, not to whatever the current app happens to ship. Where the live Plateforme drifts from Apollo (e.g. it renders in system-ui while Apollo prescribes Poppins), Apollo wins. Designers skin against these tokens; developers implement them from apollo-tokens.json.

For designers

Work from Foundations and the Atoms → Templates tiers. Never invent a colour, radius, or spacing value that isn't documented here.

For developers

Consume tokens from apollo-tokens.json. Right-click any component to copy its CSS, then map raw values back to tokens.

TIP

Use the search bar at the top of the sidebar to jump to any component, and right-click a component to view its CSS or open it in the guide, GitHub, or Figma.

LANGUAGE

This reference is written in English on purpose: it makes the system easier to hand between the different AI tools we work with, which read English most reliably. The product copy itself stays French, exactly as it ships. A French version of this documentation will follow later, no date set yet.

Installation

Three steps to wire Apollo into a project.

Pull the tokens

All values originate from apollo-tokens.json, colour, type, radius, spacing, shadow, motion. This file is the contract; the page you're reading is rendered from it.

Load the fonts

Poppins for UI text (400/500/600/700) and IBM Plex Mono for code and token names.

Expose the values as CSS variables

Generate CSS custom properties from the token file and reference them everywhere.

:root {
  /* generated from apollo-tokens.json */
  --ys-blue: #0088ff;
  --ys-blue-hover: #006fcc;
  --ys-text: #3c3f4e;
  --ys-muted: #8a8fa8;
  --ys-border: #e8eaf2;
  --ys-r-md: 8px;   /* buttons, inputs */
  --ys-r-lg: 10px;  /* cards */
  --ys-gradient-brand:
    linear-gradient(-45deg, #fbb03b, #ed1e79, #29abe2, #19dbad);
}

Design tokens

The golden rule: reference a token, never a raw value. Tokens carry intent and let the whole system shift from one place.

Don't, hardcoded

.cta {
  background: #0088ff;
  border-radius: 8px;
}

Do, tokenised

.cta {
  background: var(--ys-blue);
  border-radius: var(--ys-r-md);
}

For small text on white, use --ys-blue-hover (#006fcc, AA-safe) rather than the lighter brand blue, see Foundations → Accessibility.

Using components

Every component is documented at its atomic tier with a live specimen. To reuse one:

Find it via the sidebar search or by browsing its tier (Atoms, Molecules, Organisms, Sections, Templates).

Right-click the specimen → Afficher le code CSS to read and copy its styles, or open it in the guide / GitHub / Figma.

Swap any raw values for tokens, and keep the documented hover, focus, and disabled states.

Building for the Plateforme app? Switch to app density and the brand gradient, both documented in Foundations (App density, Brand gradient).

Atomic structure

Apollo follows Brad Frost's atomic-design methodology, five stages where each composes the one before it: atoms, molecules, organisms, templates and pages. Apollo adds one tier of its own, Sections, between organisms and templates.

AtomsThe smallest building blocks, button, badge, input, toggle, tag, avatar, tooltip, divider.

MoleculesAtoms combined into a unit, card, alert, stepper, tabs, formation card, pricing card, dropdown.

OrganismsDistinct interface sections, navbar & mega-menu, footer, data table, modal, curriculum, app components.

SectionsApollo tierReusable page-section blocks, hero, features, pricing, stats, testimonials, CTA, trust, newsletter. Apollo's own layer of large, composable organisms used to assemble pages.

TemplatesContent-agnostic page skeletons, layout and slots with no real copy, page header and lead-capture form.

PagesTemplates filled with representative content, Home, Page Formation, Catégorie, Blog, Article, Contact. Real instances that prove the system holds together (flagged beta).

NOTE

A template is the skeleton; a page is that skeleton with real content used to test the system. In the sidebar, Apollo groups both under Templates, the page header and lead form are true templates, while Home, Formation, Catégorie, Blog, Article and Contact are pages shown as filled instances.

Building app screens

Apollo feeds two surfaces from one set of tokens: the marketing site (youschool.fr) and the Plateforme app for learners and coaches. Over time they grew apart. This page is what you need to keep building Plateforme screens on Apollo, with the same Atoms to Templates ladder, instead of starting a second system from scratch. You don't build the app here; you assemble it in code from these tokens and components.

RULE

Same tokens, two densities. Colour, type family, radii, motion and accessibility rules are shared verbatim. Only spacing scale, base font-size and the brand gradient differ between site and app, and those differences are themselves tokenised, never improvised.

Shared verbatim, site & app

Brand blue + the primary/text-a11y rule
The Slate neutral ramp, one scale, both surfaces
Semantic colours + the six sector themes
Poppins UI + IBM Plex Mono
Radii, shadow elevation, focus ring
Motion durations + reduced-motion policy

Differs by surface, tokenised

Density: app base 13px, micro-labels to 9px; site base 15–16px
Card padding: app 10–14px; site 18–28px
Headings: site H1 45px/700; app tops out ~28px/600
Gradient: gradient/brand is app-only; the site stays flat
Layout: app is sticky header + left rail; site is marketing sections

Known discrepancies & how to reconcile

Where the live Plateforme drifted from Apollo, build the Apollo column, not what the old app currently ships.

Area

Legacy Plateforme

Build on Apollo

Assembling a screen, tier by tier

TemplateStart from the app shell, sticky header + left rail + content on slate/50. Pick the page skeleton (dashboard, list, detail) before any content.

OrganismsDrop in the big sections, data table, nav, modal, KPI row. These set the screen's structure and own most of the density decisions.

MoleculesFill sections with cards, stat tiles, alerts, tabs, steppers, applying app card padding (10–14px), not the site's looser spacing.

AtomsButtons, badges, inputs, toggles, avatars, straight from the library. Keep the documented hover, focus and disabled states; never restyle in place.

Keep the status wording French and encouraging (Félicitations, À améliorer, À faire, Reprendre mon cours), and keep emoji inside status badges only. If the app needs something this page doesn't cover, log it against the token file rather than inventing a one-off.

Voice & content

How YouSchool talks to people in the product. The interface is French end to end, and the wording does real work: it reassures someone who is often retraining mid-career. Keep it warm, plain, and on their side.

Language

The product is 100% French. No mixed-language strings, no English labels in the UI. (This reference is the one exception, and only because it is an internal document.) Use standard French sentence case for headings; save all-caps for the tiny eyebrow labels.

Tone

Warm and encouraging, like a coach who wants you to pass. Speak to the person with possessives rather than the definite article: Reprendre mon cours, Mes entraînements, Mes annexes, never le cours or les entraînements.

No marketing fluff inside the app

This is a working tool, not a landing page. No exclamation marks in headings, no Welcome back, Marie!. A page title and a quiet date subtitle are enough: Dashboard pédagogique, then Vue d'ensemble, semaine du 24 au 28 mars.

Status wording

Status copy gives feedback, it doesn't just label a state. Use the encouraging verb, not the dry tag.

✅ Félicitations when a TP is passed
⚠️ À améliorer when it needs another pass
🔵 À faire for work not started
Non lu, Terminé, En cours for course state

Don't

Done, Failed, Pending (cold, English)
Error / Success as bare labels
Emoji anywhere outside a status badge
Blame wording (Échec, Insuffisant)

A few more rules

EyebrowsTiny uppercase labels with letter-spacing chunk a dense page, like STATISTIQUES APPRENANTS. Use them sparingly.

NumbersA KPI is a bold numeral with a muted label underneath (apprenants inscrits), and a trend goes in a small green or red chip.

EmojiOnly inside status badges (✅ ⚠️ 🔵), and only to support the word, never decorative and never in a heading.

Empty statesKeep them calm and factual, like Non assigné in muted italic, with one clear next step where it helps.

Versioning & contribution

Apollo's version lives in apollo-tokens.json and the header, and every release is listed on the Changelog page. It is still a draft, so some token names and a few decisions can change before 1.0.

Semantic versioning, a.b.c

PartMeaning

aMajor, backward-incompatible changes (a removed/renamed token, a removed component or prop, a changed visual contract). Held at 0, 1.0.0 is not published until explicitly approved. While at 0.x a breaking change bumps b, not a (per SemVer §4).

bFeature / minor, a new backward-compatible component, section, page, or behaviour, or marking anything deprecated (SemVer §7 requires a minor bump for deprecation). One feature per release; resets c to 0.

cPatch, a fix, copy edit, or small refinement to existing work.

Every add / modify / patch gets its own changelog entry and version bump, with a Conventional Commits line, type(scope): summary (e.g. feat(nav):, fix(toast):, docs(surface):). The header badge and Overview chip always track the newest entry.

SEMVER 2.0.0

Alignment. Apollo follows semver.org §4 (initial-development 0.y.z): the public API is intentionally not yet stable. Apollo's public API = the published tokens plus each documented component's name, props and visual contract. The v in v0.34.1 is a display prefix only (SemVer FAQ); the canonical version carries no v. Apollo does not use SemVer pre-release/build syntax (-beta.1, +build); the beta badge is per-component maturity, a different axis from the release version.

Badge taxonomy

Apollo uses four families of badge. Status and destination pills are stamped automatically onto every component header; inline tags and header badges are authored.

1 · Maturity (auto, on every component)

stable beta deprecated

stable = safe to use. beta = usable but may change (all Templates are beta). deprecated = avoid, scheduled for removal.

2 · Final-product destination (auto, on every component)

BOGY · desktop Site Plateforme Global

BOGY = internal CRM, desktop only, never on mobile. Site = public marketing site. Plateforme = learning app. Global = shared base component used across all three. A component can carry more than one.

3 · Inline section tags (authored)

SITE ORIGINAL REDESIGNED v0.3.0 PAGE

Green = provenance (lifted from a Figma/site source). ORIGINAL (amber) = an original Apollo design with no prior Figma/site source — the counterpart to the green provenance tag. Blue = a version event (NEW / REDESIGNED vX) or a structural marker (PAGE, variant count).

4 · Header badges (global state)

v0.34.1 draft WCAG 2.1 AA

Current version, the draft/published status, and the accessibility conformance target apply to the whole system.

To propose a change, open a request against the Figma library and the token file together, note the affected tier and components, add a Changelog entry, and bump the version.

v0.2.0

Design principles

Six principles that guide every design decision in Apollo. When a token, pattern, or component choice is unclear, come here first.

Clarity over cleverness

Every element earns its place. Remove decoration that does not carry meaning. Prefer the familiar pattern over the novel one when the outcome is the same.

Consistent across surfaces

A learner on the Plateforme, a visitor on the site, and a coach using BOGY should all feel the same brand. Tokens are shared; surface-specific overrides are exceptions, not the rule.

Accessible by default

WCAG 2.1 AA is the floor, not the ceiling. Every component ships with verified contrast ratios, keyboard navigation, and screen reader markup. Accessibility is built in, not bolted on.

Purposeful hierarchy

Visual weight communicates importance. One primary action per view. Supporting actions recede. Destructive actions require confirmation. Hierarchy is not decoration, it is navigation.

Systematic, not arbitrary

Spacing, type size, radius, and color all come from the token scale. Hardcoded values are a smell. If you cannot express a decision in tokens, the token set is incomplete.

Designed to evolve

Apollo will be wrong in places. Document decisions, flag open questions, and build in ways that can change. A living system beats a frozen one.

Color

Every value is a Figma variable named color/{group}/{key}. Accessibility restrictions are pinned to the swatches that carry them.

Slate (neutral)

color/slate/*, the cool blue-grey ramp behind every surface, border and text tone. Apollo's neutral signature, distinct from flat grays.

50

#F5F7FE

100

#E8ECFD

200

#BCC2E3

400

#7E84A3

600

#4A4F68

700

#393E59

800

#262B47

900

#1B1F35

950

#050B2B

Text on white: slate/600 and darker clear AAA for body; slate/400 is AA for large text, UI & icons only; slate/50–200 are surfaces, hairlines and dividers (non-text).

{{ sw.name }}

{{ sw.hex }}

Sector themes

RESOLVED v0.4.0

The teal/magenta accents flagged PENDING in v0.1 are a per-sector theme system, defined as Figma Variables (collection "Variable collection"), not drift. Each sector gets a Primary + Secondary. Real brand teal is #0095AD (sector/ma); the earlier #5EEAD4 sample was a mis-read and is dropped.

{{ s.primary }}

{{ s.secondary }}

{{ s.name }}

Interactive (semantic) tokens

NEW v0.3.0

Adopted from the Figma color/theme/interactive/* layer, the real source-of-truth for component states. This fills the old "components not yet defined" gap.

Role

Default

Hover

Active

Disabled

Usage rules

Typography

Poppins, shipped weights 400/500/600/700. Heading styles use weight 500, line-height 100%.

{{ h.key }}

{{ h.size }} · 500

Une formation pour changer de vie

Size scale, weight 400 (labels & body)

{{ f.key }} · {{ f.size }} The quick brown fox jumps

NOTE

Marketing-site headings currently ship larger/bolder (H1 45px/700) than this scale, two contexts (marketing vs product) pending reconciliation. This scale is canonical for Apollo until that's resolved.

Radius

Button radius is size-scaled in the Figma variables (4/6/8/10px); card stays 20px. Badge radius isn't a token, it's set at the component level.

{{ r.key }}

{{ r.val }}

Spacing

These are paddings measured on the live site. The 7px "base unit" reads as a capture artifact.

RECONCILE v0.3.0

The Figma spacing/theme/* variables are a clean even scale, button padding 6/8/10/12/14/16/18/20px, gap 8px, input padding 8–18px. The odd 7/21/30/37 values below look like measurements off a scaled capture. Recommend adopting the even Figma scale as canonical.

{{ sp.key }} · {{ sp.val }}

Shadow

Soft, ambient, slate-900-tinted (#0F172A), one elevation system replacing the old slate- and purple-tinted shadows.

{{ sh.key }}

shadow/focus-ring

RESOLVED

shadow.special.cta-pulse, the indefinite orange A/B pulse is dropped (WCAG 2.2.2 Pause/Stop/Hide). Replaced by a brand-blue static rest shadow plus a user-initiated hover halo, suppressed under prefers-reduced-motion (v0.15.0).

Motion

Sparse and fast. Motion confirms an action or guides attention, it never decorates. Transition only color, border-color, box-shadow, opacity, and transform, never layout properties.

Duration

TokenValueUse

duration/instant0msFeedback that must feel immediate, press / active states

duration/fast120msHover & focus, color, border, shadow

duration/base180msDefault, toggles, dropdowns, accordions

duration/slow240msOverlays entering, modal, drawer, toast

duration/slower320msLarge / page-level surfaces

Easing

ease/standard

cubic-bezier(.4, 0, .2, 1)

Most transitions. Symmetric in and out.

ease/decelerate

cubic-bezier(0, 0, .2, 1)

Elements entering, settles into place.

ease/accelerate

cubic-bezier(.4, 0, 1, 1)

Elements exiting, speeds away.

ease/emphasized

pop · scale .96 → 1

Modals & popovers appearing.

Try it

fast · standard

base · decelerate

A11Y

Under @media (prefers-reduced-motion: reduce) durations collapse to 0.01ms and transforms are removed. The former orange CTA pulse was resolved (v0.15.0): the indefinite animation is dropped per WCAG 2.2.2 and replaced by a user-initiated hover halo.

Layout & Grid

Apollo uses a 12-column grid system. Column count, gutter, and margin adapt per breakpoint and surface.

Grid configurations

Marketing site, Desktop (md+)

12 cols · 24px gutter · 60px margin · max-width 1280px

youschool.fr public pages

Marketing site, Tablet (sm)

8 cols · 20px gutter · 24px margin · max-width 100%

Tablet breakpoint

Plateforme app, Desktop

12 cols · 16px gutter · 24px margin · max-width 1440px

Learner & coach app

Plateforme app, Mobile

4 cols · 16px gutter · 16px margin · max-width 100%

Mobile screen layouts

Container max-widths

TokenWidthUsage

container.sm640pxNarrow content: forms, auth pages

container.md768pxMedium content: article, single column

container.lg1024pxWide content: two-column layouts

container.xl1280pxFull content: marketing pages (default)

container.2xl1536pxExtra wide: data-dense dashboards

Z-index & Depth

A predictable stacking order prevents overlap bugs and ensures correct layering across all surfaces.

600z.tooltipTooltip

500z.toastToast

400z.modalModal, Drawer

300z.overlayModal overlay

200z.stickyData Table, Side Nav

100z.dropdownSelect, Combobox

10z.raisedTop Nav, FAB

0z.baseAll standard content

-1z.backgroundPage backgrounds

Tooltips, highest intentional layer

Never place application content above 600.

Toast, always on top of modals

Toast must outlayer dialogs (500 > 400).

Dialogs, drawers, bottom sheets

Modal at 400; its scrim at 300.

Modal backdrop scrim

Sticky headers, persistent sidebars

Scroll-pinned but below all overlays.

Dropdowns, select menus, autocomplete

Sticky nav, floating action buttons

Default document flow

Background patterns, decorative shapes

Behind content, never interactive.

Breakpoints

Apollo uses 5 named breakpoints. Design mobile-first; each breakpoint expands capability.

xs

Mobile

sm

Tablet

md

Laptop

lg

Desktop

xl

Wide

TokenRangeDeviceColsGutterMargin

bp.xs0 – 767pxMobile4 col16px16px

bp.sm768 – 1023pxTablet8 col20px24px

bp.md1024 – 1279pxLaptop12 col24px40px

bp.lg1280 – 1535pxDesktop12 col24px60px

bp.xl1536px+Wide12 col32px80px

Responsive size variation

Type, icons, and touch targets step down on narrow breakpoints. The device viewer (top bar) applies the bp.xs / bp.sm / bp.lg column geometry so specimens reflow exactly as they would on device.

ElementTokenTypexssmlg+

Display titlefs.displayAtom · text324046

Page heading H1fs.h1Atom · text263034

Section heading H2fs.h2Atom · text202226

Body copyfs.bodyAtom · text141515

Inline iconsize.iconAtom · icon141618

Touch targetsize.tapAtom · control444036

Card paddingsp.cardMolecule141620

Organism gridgrid.colsOrganism1 col2 col3–4

RULE

Touch targets grow as the viewport shrinks (44px on xs, 2.5.5 AAA), while display type and icons shrink. Body copy never drops below 14px. All other element sizes interpolate between the steps shown.

Accessibility

WCAG 2.1 AA is the floor, not the ceiling (Principle 03). Every component ships with verified contrast, a visible focus state, keyboard operability, and screen-reader markup. Accessibility is built in, not bolted on.

Contrast

PairRatioVerdict

Aa#262B47 on #FFF13.6:1AAA · all text

Aa#4A4F68 on #FFF8.3:1AAA · body

Aa#7E84A3 on #FFF3.9:1Large / UI only

Aa#FFF on #0088FF3.1:1Large / UI only

Aa#FFF on #0458D65.6:1AA · small text

Small text (< 18.66px) needs ≥ 4.5:1. Brand blue #0088FF clears AA for large text and UI only, for small text links and labels use #0458D6 (blue/700). Muted #7E84A3 is for ≥ 18.66px labels, icons, and non-text UI, never small body copy.

Focus

Token focus/ring, a 3px rgba(0,136,255,.45) halo with a 2px offset. Visible on every focusable element; never removed without a replacement. Click the controls, then Tab between them.

Target size

Touch targets are 44 × 44px minimum (2.5.5 Target Size AAA), with a hard floor of 24px (2.5.8 AA). Spacing between adjacent targets counts toward the floor.

44px ✓

24px floor

Keyboard & screen reader

Every interactive element is reachable by Tab in a logical order.

Esc closes modals and menus; focus is trapped inside a modal and returned to the trigger on close.

Every input has a <label>; errors link via aria-describedby.

Icon-only buttons carry an aria-label; decorative imagery is aria-hidden.

Toasts and alerts use aria-live; status is never conveyed by color alone.

Text reflows to 320px without horizontal scroll and zooms to 200% without loss.

Brand gradient

APP · CANON

The Plateforme (learner & coach app) introduces one gradient for primary moments, the Reprendre play circle, the active onboarding step, the Assistance button, and the floating help bubble. It is the single sanctioned gradient; the marketing site stays flat.

Accent de marque, décoratif

DÉCORATIF

gradient/brand

linear-gradient(-45deg, #fbb03b, #ed1e79, #29abe2, #19dbad)

The YouSchool brand gradient (0 / -45°). Decorative only, the light amber and teal stops do not meet text contrast, so never rely on it behind body copy; add a text-shadow or solid scrim for any overlaid label.

Texte blanc · large/bold only

LIMITED

gradient/brand-vivid

linear-gradient(135deg, #2D7BFF, #6A4DEA)

The brighter, as-observed gradient. Light end #2D7BFF is only ≈ 3.6:1 on white, use behind large/bold text (≥ 18.66px) or as a text-free fill. Never small white labels.

RULE

Default to gradient/brand everywhere there is white text. Reserve brand-vivid for hero / decorative fills. Gradients are app-only, the marketing site stays flat (Foundations → Color).

App density

The Plateforme is calmer and more spacious than the dense internal tools, generous padding, large radii, and a roomy white sidebar. These are the app-mode defaults; site components keep their own tighter scale.

app/radius-card

18px

Cards, tiles, panels

app/pad-card

20px

Card inner padding

app/gutter

32px

Page padding

app/sidebar-w

212px

Icon + label nav

app/header-h

64px

Top bar

app/bg

#F5F7FD

App canvas

Active nav = light-blue pill #E8F1FE with a coral active icon #F2506E. Full working shell in YouSchool Plateforme.dc.html.

Icons

Heroicons, outline, 24×24, 1.5px stroke, for navigation and UI. In code they're substituted with Lucide (closest free CDN match in weight and naming).

SUBSTITUTION

These are traced in the Heroicons-outline style for the reference. Restore exact parity with @heroicons/react or the Figma Icons/Heroicons/ folder.

UI icons

bell

check

plus

chevron-down

chevron-right

arrow-right

user

calendar

mail

phone

home

heart

star

play

video-camera

document

lock-closed

eye

bars-3

trash

download

clock

map-pin

info-circle

pencil

academic-cap

Sector pictograms

REAL ASSETS v0.3.0

The six formation-family pictograms (Pictos-Puces in Assets-site), copied as-is. Each is a single-colour glyph on a light circle; the icon colour is the sector's primary, the circle a ~12% tint of it.

{{ p.icon }}

Icon scale

All icons are 24×24 on a 24px base grid with 1.5px stroke weight. Four size steps cover every context.

SizeStepUsage

16pxxs, inline, dense UI, badges

20pxsm, default action icons, buttons

24pxmd, standard base grid (default)

32pxlg, feature icons, empty states

Icons are substituted with Lucide in code, closest CDN match to Heroicons outline in stroke weight. Restore exact parity via @heroicons/react or the Figma Icons/Heroicons/ folder.

Logos

Le logo YouSchool associe un symbole icône vidéo à la marque gradient et le mot « YouSchool » en Poppins SemiBold. Le gradient du symbole ne peut jamais être recolorisé, déformé ou reconstruit.

Logo de marque

Le logo s'utilise majoritairement en version horizontale. Source : Charte.fig / Uniquement-logos-et-typo

Utilisation principale

Fond clair — texte #1B1F35

Fond foncé (Version Dark)

Fond #1B1F35 · texte blanc

Avec slogan, fond clair

« Une formation pour changer de vie. »

Avec slogan, fond foncé

Version Dark avec accroche

Zone de protection (marge de sécurité)

Espace minimum à respecter autour du logo

Utilisation contrainte*

Niveaux de gris, noir 80% · usage exceptionnel uniquement

Anatomie

Symbole

Icône vidéo-play dans un carré arrondi à bordure gradient. Ne jamais recoloriser ni reconstruire.

Logotype

« YouSchool » — Poppins SemiBold (600). Casse titre, jamais tout en majuscules.

Gradient du symbole

#FFB808 → #ED1E79
#29ABE2 → #19DBAD
134.5° 

Version horizontale par défaut
Fond blanc ou gris clair #F5F7FE
Symbole seul sous 120px de large

Cas limites

Fond foncé → version Dark
Couleur impossible → niveaux de gris (N80), exceptionnel

Don't

Recoloriser le gradient
Déformer ou étirer
Changer la typographie ou la couleur du texte
Réorganiser les éléments

*Lorsque l'utilisation de la couleur est impossible, le logo peut passer, à titre exceptionnel, en niveaux de gris (noir 80%).

Integrations & partners

Réassurance cards used across the site, financing eligibility, quality certifications, social proof, and awards. Extracted from -- Réassurance // CPF in the Figma.

Certifications & labels

Éligible CPF

La certification qualité délivrée au titre des actions de formation

Centre de formation déclaré à la Préfecture de Paris

LA FRENCH
TECH

La French Tech

8ème place, Best School Experience 2024

Social proof figures

40.000 Apprenants YouSchool

4.8

sur 5 · +2 000 avis

23 Formations professionalisantes

Partner logos

27 marks · from Assets-site.fig

Sector partners used in the course-page carousels. Organised by vocational sector to match the site's Partenaires / Carrousel frame. Two marks (Prowear, Cousette) are SVG-only in the Figma, shown with a styled tile here.

Métiers de bouche

PROWEAR

Métiers animaliers

Beauté, esthétique & ongles

Mode & couture

Cousette

Art floral & déco

Prowear and Cousette are SVG-composed marks in the Figma (no bitmap export), shown as styled tiles. Sector colour coding matches the Sector themes token set on the Foundations → Color page.

Meta & SEA — Publicité

SITE

Spécifications de formats, règles d'usage de la marque et emplacements de référence pour les publicités Meta (Facebook/Instagram) et les annonces SEA (Google). Les espaces grisés sont des emplacements — à remplir avec les meilleures créations en production.

Formats & spécifications

FormatTaille (px)RatioPoids maxTexte max

Facebook Feed

1200 × 6281.91:130 Mo125 car. (body)

Facebook Feed carré

1080 × 10801:130 Mo125 car.

Instagram Feed

1080 × 10801:130 Mo125 car.

Instagram Stories / Reels

1080 × 19209:1630 MoZone sûre 250px

Carrousel (par carte)

1080 × 10801:130 Mo / carte40 car. (titre)

Google Search (RSA)

Texte uniquement——30 titres · 90 desc.

Google Display (image)

1200 × 6281.91:15 Mo5 titres · 5 desc.

Meilleures créations (emplacements)

Glissez vos meilleures créations dans les emplacements ci-dessous pour les conserver comme référence dans le DS. Utilisez le clic droit → Ouvrir dans l'aperçu appareil pour valider le rendu à taille réelle.

Feed 1:1 · 1080×1080

Feed carré

Facebook + Instagram

Story 9:16 · 1080×1920

Stories / Reels

Instagram + Facebook

1.91:1 · 1200×628

Feed paysage

Facebook + Display

123

Carte 1 · 1080×1080

Carrousel

2–10 cartes · Facebook + Instagram

Règles d'usage de la marque en publicité

Logo sur fond blanc ou fond de marque foncé
Gradient de marque uniquement en décoratif
Poppins SemiBold/Bold pour les titres
CTA = verbe d'action + CPF si éligible
Zone de sécurité 250px haut/bas (Stories)

Texte

Titre : 40–60 caractères max
Description : 90–125 caractères max
Moins de 20 % de texte sur l'image (Meta)
Pas de CAPS LOCK sur tout un titre
Chiffres clés en avant (« 95% réussite »)

Don't

Recoloriser ou étirer le logo
Gradient de marque derrière du texte corps
Prix barrés simulés (politique Meta)
Claims non vérifiables (« N°1 en France »)
Plus de 3 polices / couleurs dans une pub

CPF & réglementation. Toute mention de financement doit être exacte et vérifiable. Le logo CPF (Caisse des Dépôts) ne peut être utilisé que conformément à leur charte de marque — ne pas le modifier. Les campagnes axées sur le CPF doivent respecter les consignes de communication Mon Compte Formation.

Clic droit sur un composant pour l'ouvrir dans l'aperçu appareil, afficher son CSS / HTML, ou l'ouvrir dans le guide, GitHub ou Figma.

Button

radius/button · text scale · color fills · hover → 600

Usage, Primary fill for the main action in a view; secondary or ghost for lower-emphasis actions. Labels are verbs. Use the success fill only for confirm/validate, never as a generic accent.

Badge

radius/badge · tinted 50 bg · AA-safe text

Usage, Read-only status or category labels. An icon belongs only inside semantic badges; a badge is never clickable, use a tag or button for that.

Input

ORIGINAL

radius/button · shadow/focus-ring · danger.500 on error

Usage, Single-line text entry, always with a visible label. Keep the focus ring; surface errors inline below the field.

Default (click to focus)

Focus

Error

Adresse e-mail invalide.

Disabled

Checkbox & radio

ORIGINAL

radius/sm 6px (check) · radius/full (radio) · 20px control · click to toggle

Usage, Checkbox for independent multi-select, radio for one-of-many. Make the whole row clickable and stack options when labels wrap.

Checkbox

Option désactivée

Radio, mode de financement

Toggle

ORIGINAL

44×24 track · radius/full · knob 20px · duration/base · click to toggle

Usage, Immediate on/off settings that apply with no save step. If a choice needs confirmation, use a checkbox in a form instead.

Verrouillé (désactivé)

Géré par votre établissement

Select & textarea

ORIGINAL

radius/button 10px · native control · focus/ring · chevron 16px

Usage, Native select for 4+ preset options; textarea for free multi-line input. Below ~4 options, prefer radios for faster scanning.

Secteur d'activité

Choisissez le domaine qui vous intéresse.

Votre projet

Facultatif0 / 500

Phone input

ORIGINAL

country prefix · dial code · used on the lead form (étape Coordonnées)

Usage, Lead and contact forms. Keep the country prefix selectable, auto-format the national number, and validate before submit.

Numéro de téléphone

+33

Indicatif pays sélectionnable · format national auto-formaté.

Tag

SITE

radius/full · topic markers & filter chips · removable variant

Usage, Topic markers (#Essentiel) and removable filter chips. Tint follows the sector palette; keep tags non-interactive unless they carry a remove control.

#Essentiel Beauté Secrétariat Restauration CAP Pâtissier

Avatar

SITE

monogram chip · tinted bg · radius/full · sizes 28 / 36 / 44 · group + status

Usage, Monogram chips for people; overlap and cap with +N for groups. Add the status dot only where presence actually matters.

ML JD AR

CL PM SR +5

Rating

SITE

star/full #F59905 · Trustpilot read-out · click to set

Usage, Read-only score display (Trustpilot) or an interactive star input in feedback forms. Always pair the stars with the numeric value for screen readers.

Interactif

Lecture seule

4,7 sur 5 · 1 240 avis

Loading

ORIGINAL

spinner · skeleton (shimmer) · progress bar · respects prefers-reduced-motion

Usage, Spinner for short waits, skeleton for content filling a known layout, progress bar for determinate tasks. Respect prefers-reduced-motion.

Spinner

Skeleton

Progression62%

Divider

SITE

border/default · horizontal · vertical · with label

Usage, Separate content groups. Use the labelled variant to break long forms ("ou"); keep the hairline at the default border token.

Horizontal

Avec label

Vertical

12 moisNiveau 3Éligible CPF

Clic droit sur un composant pour l'ouvrir dans l'aperçu appareil, afficher son CSS / HTML, ou l'ouvrir dans le guide, GitHub ou Figma.

Card

ORIGINAL

radius/card · shadow/md, widely used on site, no Figma component before

Usage, The system's atomic surface for grouping related content. One primary action per card; add the hover shadow only when the whole card is clickable.

CAP

CAP Pâtisserie

Formation à distance, à votre rythme. Diplôme d'État reconnu.

Selector

6 variants

Contextual filter widgets embedded in blog posts, article pages, and sector landing pages. Each variant targets a different content context, status filtering, sector/formation selection, and testimonial surfacing.

Usage, Compact pickers that filter or switch context (sector, formation, testimonial). Pre-select a sensible default and keep options short.

Status selector, compact

Je suis…

Usage: embedded in blog articles and sector pages to personalise content for the reader's profile.

Variants: white bg (on white/light page sections), light blue bg (on tinted sections or dark wrappers).

radius: 20px · inset border: #E8ECFD 2px · padding: 24px

Formation selector, horizontal

Sélectionnez un formation pour afficher les articles concernés.

Usage: embedded in sector/programme pages and blog listing pages to filter content by formation. Two-column layout works well in wide content zones (min ~420px).

Status selector, inline

Je suis…

Usage: very compact, for tight horizontal spaces like blog post sidebars or sticky bars. Single-row layout collapses naturally to vertical on narrow viewports.

Testimonial selector

Choisissez une formation pour afficher les témoignages d'élèves

Usage: surfaces student testimonials filtered by formation. Wide variant (360px) for desktop sidebar / article breakout blocks; narrow (240px) for mobile or right-rail use.

Surface

#fff / #F5F7FE

Border (inset)

#E8ECFD 2px

Radius

20px card · 10px input/btn

Accent

#0088FF (primary.500)

Dropdown border

#D8EDFF 1.5px

CTA hover

#0458D6 (primary.700)

Alert

REDESIGNED v0.3.0

Full-tint surface with a soft same-hue border, a solid semantic icon shape (circle / triangle / octagon, the shape itself signals status, not just colour), a bold dark-hue title and a matching dismiss control.

Usage, Inline, contextual messages tied to a section. Use the semantic colour and icon together; reserve toast for transient page-level feedback.

Inscription confirmée

Bienvenue ! Votre espace élève est désormais accessible.

Espace bientôt plein

Il vous reste peu de place de stockage pour vos documents.

Paiement refusé

Une erreur est survenue. Vérifiez vos informations et réessayez.

Dossier en cours de vérification

Votre financement CPF est en cours d'instruction. Réponse sous 48 h.

Stat tile

metric · label · radius/card · shadow/md

Usage, A single KPI with a label and optional trend chip. Keep the numeral bold and the label muted, one metric per tile.

10 ans

d'expertise en ligne

95 %

de satisfaction élèves

150 000

apprenants formés

Qualiopi

certifié, actions de formation

Stepper

ORIGINAL

34px node · done / current / upcoming · drives the multi-step lead form

Usage, Multi-step flows (lead form, onboarding). Show every step, distinguish done/current/upcoming, and let users step back.

Form validation

ORIGINAL

helper / error / success · message tied via aria-describedby · status never by color alone

Usage, Field feedback, helper, error, success. Tie the message to the field via aria-describedby; never signal by colour alone.

Avec aide

Un conseiller vous rappelle sous 24h.

Erreur

Adresse e-mail invalide.

Validé

Adresse vérifiée.

Désactivé

Formation card

SITE

catalog unit · sector header · CPF badge · price · radius/card 20px

Usage, Catalog tile for a diploma. Lead with sector + title, show the CPF badge when eligible, and keep a single Découvrir CTA.

Éligible CPF

Restauration

CAP Pâtissier

12 mois Niveau 3 100% à distance

4,7· 1 240 avis

à partir de

1 490 €

Éligible CPF

Beauté & bien-être

CAP Esthétique

14 mois Niveau 3 100% à distance

4,8· 980 avis

à partir de

1 690 €

Tabs

SITE

underline indicator · blue/600 active · duration/fast · click to switch

Usage, Switch between peer views of one subject (programme / débouchés / avis). Keep 2–5 tabs and never nest tab bars.

Toast

ORIGINAL

snackbar · aria-live · auto-dismiss · floating bottom-center · z.toast 500

Usage, A toast confirms an action just happened, then leaves. It is not an Alert: Alerts are inline, persistent and tinted to the message status; a toast is a single floating dark snackbar at the edge of the viewport, one line plus one optional action, and it dismisses itself.

Alert vs Toast — reach for Alert when the message must stay on the page (form errors, page-level notices). Reach for Toast for ephemeral confirmation ("Enregistré", "Lien copié") that should disappear on its own.

Demande envoyée

Surface foncée, action inline (« Annuler »), barre de progression d'auto-fermeture. Empile les toasts récents en bas, le plus récent en bas.

Pagination

ORIGINAL

36px control · blue/600 current · prev / next · click to navigate

Usage, Paginate long lists when infinite scroll doesn't fit. Always expose prev/next and the current page; keep the range compact on mobile.

Empty state

ORIGINAL

32px feature icon · short title · one primary action

Usage, First-run and no-results states. One short explanation plus a single recovery action (reset filters, add item); keep the tone encouraging.

Aucune formation trouvée

Aucun résultat ne correspond à vos filtres. Élargissez votre recherche pour voir plus de formations.

Announcement bar

SITE

top utility strip · Trustpilot · contact · dismissible · click ✕ then “Réafficher”

Usage, Top utility strip for persistent, low-urgency info (Trustpilot, contact, espace élève). Make it dismissible; never trap critical actions here.

Excellent 4,7 sur 5Trustpilot 01 71 18 23 97 Espace élève

Barre masquée ?

FAQ accordion

expandable · chevron rotates · interactive

Usage, Progressive disclosure for FAQs and long secondary content. Prefer one open at a time on dense pages; keep headers scannable.

Sector card

FROM ASSETS-SITE

"Card Listing secteur" · centred picto → title → checklist · radius 20 · inset 2px #E8ECFD

Usage, Sector entry card (centred picto → title → checklist). Use the sector's own colour and keep the checklist to 3–5 concrete items.

Métiers de bouche

CAP Pâtissier

CAP Cuisine

CAP Boulanger

Obligatoire pour le diplôme

Animaux

ACACED Chien et Chat

Auxiliaire vétérinaire

Toiletteur canin

Éducateur canin

Pricing card

SITE

price · feature list · « populaire » variant · CPF mention · radius/card 20px

Usage, Offer comparison. Highlight one plan with the « populaire » treatment; always surface CPF financing and keep one CTA per card.

Essentiel

Pour démarrer à son rythme

1 290 €/ formation

Finançable CPF à 100 %

Accès aux cours 12 mois

Exercices corrigés

Coaching individuel

LE PLUS CHOISI

Accompagné

Coaching + suivi personnalisé

1 890 €/ formation

Finançable CPF à 100 %

Tout Essentiel, +

Coaching individuel illimité

Préparation à l'examen

Premium

Garantie diplôme ou remboursé

2 490 €/ formation

Finançable CPF à 100 %

Tout Accompagné, +

Garantie réussite

Stage en entreprise

Back to top

ORIGINAL

44px target · appears after scroll · radius/full · shadow/md

Usage, Long pages (article, catalogue). Fades in past the first fold, fixed bottom-right, never overlaps the sticky mobile CTA.

Cible 48×48px (≥ 44px). Apparaît après ~600px de défilement.

Clic droit sur un composant pour l'ouvrir dans l'aperçu appareil, afficher son CSS / HTML, ou l'ouvrir dans le guide, GitHub ou Figma.

Comparison table

NEW v0.3.0 · MOBILE-FIRST

One dataset, two renderings. The same cells render as a full grid on desktop and as a swipeable / focusable card stack on mobile, nothing is hidden or removed, so every value stays in the DOM and crawlable. That's the fix for the density problem: stop deleting content, change how it's navigated.

Why it helps SEO & density: the markup is a single source of truth rendered responsively, no display:none duplicate tables, no content stripped for small screens. Desktop keeps full at-a-glance visibility; mobile trades width for vertical depth and gesture.

Desktop ≥ 768px, full grid

Mobile < 768px, swipe / focus

Comparez nos CAP

3 formations · 9 critères

Glissez pour comparer

Compare mode

Horizontal snap-scroll, columns peek at 81% so the swipe is discoverable. Best for side-by-side decisions.

Focus mode

No horizontal scroll, pick one option, read its full spec vertically. Best for reading depth on a single thumb.

Recommended column

A single popular flag tints the column on desktop and the card header on mobile, one source, both views.

Data table

NEW v0.3.0 · RECORD → CARD

The other table archetype: many records, several short fields, and one long free-text column, the real density killer (this is the table the SEO team fought). A column-swipe would bury the long text, so the mobile rule flips: each row becomes a record card. Short fields pair up; the long field gets full width. Vertical only, no horizontal scroll, every cell still in the DOM.

Length is managed with a filter, not deletion: the continent chips below narrow what's shown on both views while the full dataset stays in the markup. One filter state drives the desktop grid and the mobile cards.

Desktop ≥ 768px, full grid

Pays

Continent

Capitale

Langue

Particularité

Mobile < 768px, record cards

Pays du monde

{{ dtSel }} · touchez un pays pour déplier

Langue{{ c.langue }}

Particularité

When to use this vs Comparison

Records (rows you read down) → record cards. Options (columns you weigh against each other) → the Comparison table's swipe/focus.

The long column wins

"Particularité" gets full card width on mobile instead of being clipped in a narrow cell, the content that caused the problem is the content that reads best.

Filter, don't delete

Length is handled by the continent filter; the full markup stays present and crawlable.

Testimonial

ORIGINAL

avatar · rating · quote · verified badge

Claire M.

CAP Pâtisserie · 2025

« J'ai pu me reconvertir à mon rythme, tout en gardant mon emploi. Les vidéos sont claires et les coachs disponibles. »

Avis vérifié

Témoignage vidéo

Karim · Bac Pro ASSP

Article card

ORIGINAL

thumbnail · category badge · title · meta

Financement

Comment financer son CAP avec le CPF en 2026

12 mars 2026 · 5 min de lecture

Reconversion

5 métiers de la petite enfance qui recrutent

28 février 2026 · 4 min de lecture

Card grid

CONFLICT

The live site's measured grid gap is 40px, which isn't a clean multiple of the 7px spacing unit. This grid uses space/4 (21px) per the token spec. New pending decision, needs a human to reconcile rather than silently picking one.

CAP

Pâtisserie

Diplôme d'État, à distance.

Bac Pro

ASSP

Accompagnement, soins, services.

Concours

ATSEM

Préparation complète en ligne.

Form

Demander de la documentation

Nom complet

Adresse e-mail

Navbar & mega-menu

hover-driven · 3 levels

Hover Formations to open the panel. Hover a sector → loads its formations. Hover a formation → reveals its sub-pages. Move away to close.

Excellent 4.7 sur 5 Trustpilot 01 71 18 23 97

Nous contacterEspace élève

Toutes nos formations

Toutes les formations {{ megaActiveSector }}

La formation

Programme Alternance Examen Stages Financement CPF Débouchés Avis élèves

Documentation gratuite · Réponse sous 24h

Survolez Formations dans la barre de navigation pour ouvrir le mega-menu interactif.

Footer

France Travail Mon Compte Formation Plusieurs solutions de financement sont possibles, contactez-nous !

Trustpilot Avis Google Avis Vérifiés

Contacter un conseiller · 01 71 18 23 97

Nos formations•Tarifs•Recrutement•Qui sommes-nous ?•Blog•Contact•Espace Presse

Suivez nous sur nos réseaux !

YouSchool® 2026

Certificat Qualiopi•Modalités des formations•Accessibilité•CGU•Mentions légales•Politique de confidentialité•Cookies

App components

Status badges

Terminé Non lu En cours Professeur Nouvel élève

Onboarding stepper

Découverte

Ouvrez votre premier cours.

Publication

Publiez dans un cours ou sur le fil.

Activity / KPI card

Progression, essentiels

42%

Publications

1publication

Sidebar nav item

pill 9999px · active #E8F1FE bg + coral #F2506E icon · idle #9AA1BD icon

Tableau de bordactif

Agendahover

Défis

Composer

feed entry · monogram avatar + pill prompt

Écrire une publication

Course list item

play disc · title + topic tag · state badge (Terminé / Non lu / À faire)

Préparation de la terre au façonnage

Module 2 · 14 min

#Essentiel Terminé

Les décors sur biscuit

Module 3 · 22 min

#Bonus Non lu

Publication card

feed post · author + Professeur badge · region tag · body

Prof Marion M de YouschoolProfesseur

il y a 57 minutes

Île-de-France

···

Un reportage à ne pas manquer sur « l'illusion du carton par la terre », pensez à le partager avec vos camarades.

À la une card

dashboard feature · eyebrow w/ icon · body · ghost CTA

Prochain rendez-vous

Permanence du service technique

Lundi 22 juin · 15:00 – 16:00

Dernier défi

Histoire de la céramique 2

En cours

Weekly streak

flame KPI · 7 day discs (done = brand blue, idle = #F1F3F9)

Série de la semaine

3jours consécutifs

Défi & groupe cards

challenge w/ state · group w/ member avatars

En cours

Histoire de la céramique 2

10 questions · 8 min · clôture le 28 juin

Promo CAP Céramiste 2026

128 membres

JD AR CL +125

Mobile menu (drawer)

SITE

burger open · full nav · scrim · 44px rows

Usage, The header's mobile state. Full-height panel over a scrim, sector list + CTA, every row a 44px target.

YouSchool

Formations

Financement CPF

Avis élèves

Blog

CTA sticky mobile

SITE

fixed bottom bar · price + primary CTA · shadow up

Usage, Formation pages on mobile. Pins the conversion action to the thumb zone; keep a short value reminder on the left.

CAP Pâtissier · CPF

dès 1 290 €

Programme / Curriculum

ORIGINAL

module accordion · duration per module · count

Usage, Formation page syllabus. Each module shows its duration and lesson count; the first module is open by default.

Les fondamentaux de la pâtisserie

8 leçons · 6 h

Hygiène et sécurité (HACCP)

Les pâtes de base

Crèmes et appareils

Entremets et gâteaux de voyage

10 leçons · 8 h

Préparation à l'examen

6 leçons · 5 h

ORIGINAL

sticky sidebar · active section highlighted · anchor links

Usage, Long articles and guides. Sticky on desktop, the current section is marked with the brand accent rail.

Sur cette page

Pourquoi passer un CAP

Le programme en détail

Financer sa formation

Débouchés et métiers

Author box

NEW · E-E-A-T

photo · name · role · short bio · E-E-A-T signal

Usage, Byline on articles to establish authorship (E-E-A-T). Keep the bio to one or two sentences and link to the author's other content.

Claire LefèvreCheffe pâtissière · 12 ans

Formatrice CAP Pâtisserie chez YouSchool, Claire a dirigé les laboratoires de plusieurs maisons étoilées avant de se consacrer à la transmission.

Video modal

ORIGINAL

lightbox · poster + play · scrim · close

Usage, Testimonial and presentation videos. A poster with a play button opens the lightbox; trap focus and close on Esc / scrim click.

Témoignage — Sophie, CAP Cuisine

2 min 14

Clic droit sur une section pour l'ouvrir dans l'aperçu appareil, afficher son HTML, ou l'ouvrir dans le guide.

Features section

SITE

Usage, 3–4 column grid of arguments (icon + title + text). Keep each blurb to one line of value.

Diplômes reconnus

Des CAP d'État, mêmes diplômes qu'en présentiel.

À votre rythme

Cours accessibles 24/7, sans contrainte d'horaire.

Coaching dédié

Un professeur vous suit du début à l'examen.

Finançable CPF

Jusqu'à 100 % pris en charge par votre CPF.

Pricing section

SITE

Usage, 2–3 pricing cards side-by-side with the « populaire » plan raised. See the Pricing card molecule for the unit.

Une formule pour chaque objectif

Toutes nos formules sont finançables à 100 % par le CPF.

Essentiel

1 290 €

CPF 100 %

AccompagnéPOPULAIRE

1 890 €

CPF 100 %

Premium

2 490 €

CPF 100 %

Stats section

SITE

Usage, Key numbers in a row — reassurance band. Pair with the Stat tile molecule.

150 000

apprenants formés

95 %

de satisfaction

10 ans

d'expertise

4,6/5

sur Trustpilot

Testimonials section

SITE

Usage, Grid of testimonial cards with a satisfaction headline. Pair with the Testimonial molecule.

Ils ont réussi avec YouSchool

4,6/5 sur 2 400 avis vérifiés

★★★★★

CTA section

SITE

Usage, Full-width call to action. One headline, one primary CTA, optional reassurance line.

Prêt à décrocher votre diplôme ?

Un conseiller vous rappelle gratuitement sous 24 h.

Trust section

SITE

Usage, Certifications and partner marks band. Name-only placeholders here — swap official assets in production.

Ils nous font confiance

Clic droit sur un composant pour l'ouvrir dans l'aperçu appareil, afficher son CSS / HTML, ou l'ouvrir dans le guide, GitHub ou Figma.

Page hero

2 variants · WCAG AA

Full-bleed hero banner used at the top of sector pages and high-level pages. Left-anchored text sits over a black→transparent gradient ensuring WCAG AA contrast (≥4.5:1) for all text. Right side features the brand origami motif. Swap the background image via the image-slot.

WCAG 2.1 AA compliance notes: • Gradient minimum: rgba(0,0,0,0.78) on the left edge → white text contrast ≈ 14.5:1 (well above 4.5:1 threshold). • Text is constrained to the left 55% of the hero, fully within the opaque gradient zone, never placed over the transparent right half. • Primary CTA: white text on #0088FF → contrast 3.6:1 (passes AA for large/bold text ≥18px bold or ≥24px). Button label is 15px/600 which qualifies as bold large text. • Secondary CTA (ghost): white text + white border on gradient dark bg → >10:1 for text, >3:1 for border component (WCAG 1.4.11). Uses solid dark overlay behind border zone. • Background image is decorative, no alt text needed; gradient overlay removes its informational value. Always set aria-hidden="true" on the image element.

Variant A, single CTA (sector/formation page)

Nos formations rapides en restauration pour adultes

Découvrez quelle formation en restauration envisager pour travailler dans le domaine des métiers de bouche, trouver un emploi rapidement ou créer votre entreprise alimentaire (restaurant, pâtisserie, boulangerie…) !

Variant B, two CTAs (homepage / L'École / Alternance)

Découvrir l'École en ligne YouSchool

Adulte en reconversion professionnelle, formez-vous en ligne avec YouSchool et profitez d'une méthode rigoureuse et efficace ! Formations à distance reconnues par l'État : CAP, titres professionnels etc.

Height

320px (desktop) · 220px (mobile)

Radius

20px

H1 type

46px / 800 / white

Body type

16px / 400 / white 92%

Content max-width

55% of hero width

Gradient

rgba(0,0,0,0.88) → transparent

Lead forms

interactive · flux canonique 4 étapes

Multi-step lead capture. Le flux canonique du site compte 4 étapes : ① secteur → formation (+ éligibilité), ② civilité / prénom / nom, ③ âge / financement / situation / créneau d'appel, ④ coordonnées + consentement. La carte contextuelle ci-dessous démarre à l'étape 2, la formation étant pré-remplie par la page.

Contained card, 3 steps

CAP Pâtissier

Documentation gratuite

Civilité *

Prénom *

Nom *

Vous avez entre

Votre dernier diplôme obtenu

Mode de financement envisagé

Numéro de téléphone

🇫🇷 +33

Code postal

J'accepte d'être contacté(e) par YouSchool (téléphone, SMS ou email) pour étudier ma demande de formation.

3 steps: identity (civilité, prénom, nom) → profile (âge, diplôme, financement) → contact (email, tél, code postal, consent)

Context: embedded in blog articles, sector pages, sidebar, pop-in. Formation is pre-set by context, icon + name appear in the card header.

Card radius

20px

Border

#0088FF 2px ring

Input bg

#F0F4FF · 8px radius

Required mark

#ED1E79 asterisk

Template — Home

PAGE

Assemblage, fidèle à youschool.fr : Header → Hero slogan → Preuves → Secteurs (10) → Témoignages → Financement → Blog → Footer. Ouvrez en aperçu appareil pour le rendu mobile.

YouSchool

FormationsFinancementL'ÉcoleAlternanceAvisBlogDemande d'informations

Une formation pour changer de vie

Donnez un nouvel élan à votre carrière avec YouSchool, expert de la formation professionnelle. Depuis plus de 10 ans, + de 55 000 apprenants nous ont fait confiance pour leur reconversion.

France TravailCFA YouSchoolPlusieurs solutions de financement possibles

Nos formationsJ'ai un projet

10 ans d'expertise dans l'apprentissage à distance

+ 55 000

apprenants YouSchool

10 ans

d'expertise à distance

QualiopiCertifié

Trustpilot

Découvrez nos formations 100 % en ligne

Restauration

CAP Pâtissier, Cuisine, Boulanger

Beauté

CAP Esthétique, Coiffure, Ongulaire…

Secrétariat & RH

Médical, administratif, comptable…

Petite Enfance

CAP AEPE, ATSEM, parentalité

Artisanat

CAP Mode, Céramiste, Fleuriste…

Nutrition

Nutritionniste

Animaux

ACACED, métiers animaliers

Bâtiment (BTP)

CAP Électricien, Plombier MIS

Compétences Pro

Création de formation, Webmarketing

NOUVEAU

Bureautique

TOSA Excel, TOSA Word

Ils ont réussi leur reconversion avec YouSchool

François : ancien militaire, candidat du Meilleur Pâtissier, propriétaire de sa boulangerie pâtisserie.

Carine : à 49 ans, diplômée du CAP Esthétique, elle devient gérante de son institut de beauté.

Anthony : devenu éducateur canin après la formation ACACED Chien à distance.

Retrouvez tous nos témoignages →

Comment financer ma formation ?

Nos solutions de financement s'adaptent en fonction de votre profil : CPF, France Travail, alternance, OPCO, AIF, FAF.

Quel financement est fait pour moi ?

Compte Personnel de Formation

Le CPF est un dispositif mis en place par le gouvernement afin de faciliter l'accès à la formation pour les travailleurs.

Découvrir le financement CPF →

Découvrez toute l'actualité YouSchool

Voir tous les articles →

Dates

Passer le CAP Électricien 2027 en candidat libre : dates et inscription

1 juillet 2026

Examen

Passer le CAP Plomberie 2027 en candidat libre : dates et inscription

1 juillet 2026

Dates

Tout savoir des inscriptions pour passer le CAP Fleuriste en 2027

1 juillet 2026

YouSchool® 2026Certificat Qualiopi · CGU · Mentions légales · Cookies

Template — Page Formation

PAGE

Assemblage, Main Page du site : breadcrumb → sous-navigation (pages secondaires) → hero → carte documentation → programme. Pas de prix affiché, la conversion passe par la demande d'informations.

Accueil › Restauration › CAP Pâtissier

La formation Programme Alternance Examen Stages Financement CPF Débouchés Avis élèves

Restauration · Diplôme d'État niveau 3

CAP Pâtissier à distance

Préparez le CAP Pâtissier 100 % en ligne, à votre rythme, avec un coach dédié jusqu'à l'examen. Immersion professionnelle en stage et partage d'expériences avec la communauté d'apprenants.

100 % en ligneAlternance possibleÉligible CPF

Documentation gratuite

Programme complet, financements, réponse sous 24 h.

Le programme

1 · Les fondamentaux de la pâtisserie8 leçons · 6 h

2 · Entremets & gâteaux de voyage10 leçons · 8 h

3 · Préparation à l'examen6 leçons · 5 h

Template — Page Catégorie

PAGE

Assemblage, Liste formations : titre catégorie → grille de Formation cards → documentation. Pas de filtres sur le site réel, la navigation passe par le mega-menu.

Secteur · Métiers de bouche

Toutes les formations Restauration

3 formations diplômantes · 100 % en ligne · éligibles CPF

CAP Pâtissier

Diplôme d'État · 100 % en ligne

CPF

CAP Cuisine

Diplôme d'État · 100 % en ligne

CPF

CAP Boulanger

Diplôme d'État · 100 % en ligne

CPF

Template — Blog / Liste

PAGE

Assemblage, Index articles : titre → grille de Blog cards (catégorie, titre, date, extrait).

Découvrez toute l'actualité YouSchool

Voir tous les articles →

Dates

Passer le CAP Électricien 2027 en candidat libre : dates et inscription

1 juillet 2026

Examen

Passer le CAP Plomberie 2027 en candidat libre : dates et inscription

1 juillet 2026

Dates

Tout savoir des inscriptions pour passer le CAP Fleuriste en 2027

1 juillet 2026

Template — Article

PAGE

Assemblage, Single post : breadcrumb → titre → author box (E-E-A-T) → corps → ToC sticky.

Accueil › Blog › CPF

Comment financer son CAP avec le CPF en 2026

Claire Lefèvre

Cheffe pâtissière · 12 ans

Le Compte Personnel de Formation permet de financer tout ou partie d'un CAP. Voici les étapes concrètes pour mobiliser vos droits et démarrer votre formation sereinement…

Première étape : vérifiez votre solde sur moncompteformation.gouv.fr…

Sommaire

Qu'est-ce que le CPFVérifier ses droitsMonter le dossier

Template — Contact / Lead

PAGE

Assemblage, Capture : formulaire Lead + colonne réassurance (rappel gratuit, CPF, satisfaction).

Être rappelé gratuitement

Rappel sous 24 h

Un conseiller, sans engagement.

Finançable CPF

Jusqu'à 100 % pris en charge.

4,6/5 sur Trustpilot

2 400 avis vérifiés.

Changelog

A dated record of what this build produced and what it deliberately left open.

2026-07-02 v0.34.1 · alignement youschool.fr

fix(templates): align Site templates with the live youschool.fr structure

Home rebuilt on the real page: hero slogan « Une formation pour changer de vie » (+ 55 000 apprenants, 10 ans, France Travail/CFA), the real 10 sectors (incl. Nutrition, BTP, Compétences Pro, Bureautique · NOUVEAU), real testimonials (François, Carine, Anthony), financement + CPF band, real blog articles.
Page Formation, added the secondary-pages sub-nav (La formation · Programme · Alternance · Examen · Stages · Financement CPF · Débouchés · Avis élèves) and replaced the invented price card with the site's real conversion path, Demande d'informations / Brochure.
Footer restructured to match production: pre-footer financement/avis band, « Contacter un conseiller », real link row (Tarifs, Recrutement, Espace Presse…), socials, and the full legal line (Qualiopi, Modalités, Accessibilité, CGU…).
Catégorie / Blog / Lead, sector index without invented filters, real article cards (Dates / Examen), and the lead form documented as the canonical 4-step flow (secteur → formation first).

2026-07-02 v0.34.0 · Meta & SEA Ads section

feat(logos): add Meta & SEA Ads section with format specs and placeholders

Added Meta & SEA — Publicité under Logos: format/size specs table for Facebook Feed, Instagram Feed, Stories/Reels, Carousel, Google Search (RSA) and Display.
4 labelled creative placeholders (Feed 1:1, Stories 9:16, Feed 1.91:1, Carousel) to store best-performing ads directly in the DS.
Brand usage rules for advertising: Do / Texte / Don't grid and a CPF/Mon Compte Formation compliance note.

2026-07-01 v0.33.2 · stable branch removed

fix(ci): delete stable branch, main is sole production branch

Deleted the stable branch locally and remotely. It was redundant — all QA happens in this canvas before any push, so a preprod branch added friction with no benefit. main is now the sole branch and the production source.

2026-07-01 v0.33.1 · CI pipeline finalised

fix(ci): store fingerprint as secret, reset --hard for clean deploy

The full deploy pipeline is live: push to main → GitHub Actions SSHs into the VPS as youschool-apollo → git reset --hard origin/main → apollo.youschool.fr updates in ~15 s. SSH fingerprint moved from hardcoded value to a SSH_FINGERPRINT GitHub secret so the workflow contains no credentials in plaintext.

2026-06-30 v0.33.0 · logo section from brand charter

feat(logos): rebuild logo section from Charte.fig

Replaced the placeholder lockup cards with accurate charter content drawn from Charte.fig / Uniquement-logos-et-typo: real logo asset (logo-horizontal.png), dark version, constrained grayscale (N80, exceptional), and symbol-only variant.
Added an Anatomie row (symbole, logotype, gradient exact stops at 134.5°) and a full Do / Cas limites / Don't grid matching the charter's verbatim rules.

2026-06-30 v0.32.4 · export modal cleanup

fix(tokens): remove redundant Fermer buttons from the export modal

The « Exporter en JSON » modal footer had two stray Fermer buttons (one a corrupted duplicate). Removed both, the header × and outside-click already close the modal.

2026-06-30 v0.32.3 · tokens on one page

fix(nav): collapse Tokens into a single scrolling page

The Tokens categories (brand, accents, badges, gradient, typography, spacing, radius, shadows, layout) were each rendering as a separate page. They're now one continuous page under a single Tokens sidebar entry, since the JSON export covers the whole set anyway.

2026-06-30 v0.32.2 · gradient consistency

fix(foundations): correct gradient/brand to the canonical 4-stop value

Replaced the stray blue→purple #0F6FE5→#6A4DEA on the Foundations gradient card and the app-screens reconciliation row with the real brand gradient #fbb03b→#ed1e79→#29abe2→#19dbad (-45°), and re-flagged it as decorative (its light stops don't meet text contrast), matching the Tokens page, Installation and apollo-tokens.json.

2026-06-30 v0.32.1 · documentation coherence

docs: reconcile Documentation against the atomic-design methodology

Atomic-structure ladder now shows all five Brad Frost stages, atoms → molecules → organisms → templates → pages, plus Apollo's own Sections tier, with a note on the template-vs-page distinction.
Fixed stale token references in Installation and Design tokens: --apollo-* → --ys-*, correct radii (8/10px), and the real brand gradient (was a stray purple one). Added Sections to the component tiers list.

2026-06-30 v0.32.0 · specs rolled out

feat(docs): implementation specs for every component via right-click

Generalised the Button exemplar into a data-driven spec panel, right-click any component → Spec d'implémentation, opening props, tokens, states, accessibility and do/don't. Specs now live alongside the CSS/HTML/JS in the same right-click menu.
Authored specs for every component across all five tiers (atoms → templates), held in component-specs.js.

2026-06-30 v0.31.0 · implementation specs

feat(docs): per-component implementation spec, Button exemplar

Introduced a collapsible Spec d'implémentation block for developers, props, tokens, states, accessibility and do/don't, co-located with the live demo. Shipped on Button first to settle the format before rolling it out to the rest of the library.

2026-06-30 v0.30.0 · real handoff artifacts

feat(tokens): generate apollo-tokens.json + downloadable export

Created the real apollo-tokens.json the docs reference, generated from the canonical Tokens-page model. The export modal now has a Télécharger .json button (downloads the file), not just copy-to-clipboard.
Regenerated tokens/fig-tokens.css from the same model so the CSS and JSON agree, replacing the older Figma-export file that carried a competing Core/Theme architecture.
Note, the old export's theme aliases, interactive-state and per-component (button/input) tokens, and sector brand pairs were dropped, they aren't part of the canonical model yet.

2026-06-30 v0.29.1 · handoff statement

docs(start): state Apollo is the source of truth for implementation

Added a prominent banner on Getting Started: the external build team codes to Apollo's tokens and components, not to whatever the current app ships, where the live Plateforme drifts (e.g. system-ui vs the prescribed Poppins), Apollo wins.

2026-06-29 v0.29.0 · tokens grounded in source

fix(tokens): rebuild the Tokens page 1:1 from the --ys-* source

The previous Tokens page carried invented values (a fake primary ramp, a non-existent secondary, marketing type sizes). Rebuilt it to trace 1:1 to the YouSchool token source, now every token is present.
Added the categories that were missing: 4 brand blues, 8 neutrals, 5 accents, 9 badge bg/fg surface pairs, the full Poppins scale (11 sizes, 5 weights, 4 line-heights, 2 letter-spacings), all 8 radii, 3 shadows, 12 spacing steps and the 3 layout constants.
The Figma / Tokens Studio export now emits the complete, correctly-typed set (color / spacing / borderRadius / boxShadow / typography / sizing).

2026-06-29 v0.28.1 · semver alignment

docs(versioning): align the rules with semver.org 2.0.0

Audited the version history against semver.org, numbering is compliant (monotonic, no leading zeros, patch resets to 0 on every minor bump).
Documented the rules that were implicit: deprecation bumps minor (§7), breaking changes bump b while at 0.x (§4), defined Apollo's public API, and clarified that v is display-only and beta is component maturity, not a SemVer pre-release tag.

2026-06-29 v0.28.0 · tokens page

feat(tokens): add Tokens page with Figma/Tokens-Studio JSON export

New Tokens page lists every token, Core palettes, Theme aliases, spacing, radius, shadows, the brand gradient and the Poppins type scale.
Export en JSON emits a Tokens Studio-formatted file, importable into Figma via MCP or the Tokens Studio plugin.

2026-06-29 v0.27.2 · overview cleanup

refactor(overview): collapse sources, drop roadmap

Removed the "Token source of truth" eyebrow, collapsed Sources reconciled and Reconciliation notes into a single accordion (closed by default), and removed the Plateforme app-kit roadmap from the Overview.

2026-06-29 v0.27.1 · clearer original tag

fix(badge): rename "NEW · NO PRIOR SPEC" to "ORIGINAL"

Replaced the cryptic NEW · NO PRIOR SPEC inline tag with a clear ORIGINAL across all 24 components, the amber counterpart to the green SITE provenance tag. Updated the Versioning page legend to match.

2026-06-29 v0.27.0 · versioning & badge docs

docs(versioning): document semver scheme and full badge taxonomy

Rewrote the Versioning page to spell out the a.b.c scheme (major held at 0 until approved), the Conventional-Commits rule, and one-feature-per-release.
Documented all four badge families, maturity (stable / beta / deprecated), destination (BOGY · desktop / Site / Plateforme / Global), inline section tags, and global header badges.

2026-06-29 v0.26.1 · BOGY desktop-only

docs(surface): flag BOGY components as desktop-only

BOGY (CRM) is an internal desktop tool, never used on mobile. Its surface pill now reads BOGY · desktop with a tooltip making the desktop-only constraint explicit.

2026-06-29 v0.26.0 · sidebar accordions

feat(nav): collapsible sidebar categories, closed by default

Sidebar categories are now collapsible accordions, closed by default, one open at a time, with a rotating chevron.

2026-06-29 v0.25.0 · toast redesign

fix(toast): redesign as a snackbar, distinct from Alert

Toast is now a floating dark snackbar (inline action + auto-dismiss bar), no longer a duplicate of the inline tinted Alert; the page documents when to use each.

2026-06-29 v0.24.0 · product-surface taxonomy

feat(surface): flag every element by final-product destination

Every element now carries a destination pill, BOGY (CRM), Site, Plateforme, or Global for shared base components.

2026-06-29 v0.23.0 · page templates

feat(templates): six full-page templates (beta)

Built full-page Templates, Home, Page Formation, Page Catégorie, Blog/Liste, Article and Contact/Lead. All templates are flagged beta · unstable until reviewed.

2026-06-29 v0.22.0 · sections tier

feat(sections): add dedicated Sections tier

Introduced a dedicated Sections tier (Features, Pricing, Stats, Testimonials, CTA, Trust, Newsletter) so the library mirrors the ticket's Atoms → Molecules → Organisms → Sections → Templates structure.

2026-06-29 v0.21.0 · missing components

feat(components): add the atoms / molecules / organisms the ticket required

Added Divider (atom); Pricing card and Back to top (molecules); Mobile drawer, Sticky mobile CTA, Promo + countdown, Curriculum, Table of contents, Author box (E-E-A-T) and Video modal (organisms).

2026-06-29 v0.20.0 · device preview

feat(docs): device-frame preview panel with filetree breadcrumb

Added a device preview on the tier pages: right-click any component, then Ouvrir dans l'aperçu appareil, to open a phone / tablet / desktop bezel rendering the live component at its real breakpoint width (375 / 768 / 1280px). The toggle lives in the header and only shows on Atoms / Molecules / Organisms / Templates.
The panel carries a filetree breadcrumb of the element's ancestry (section › div › …) plus a row of its children, so you can climb to the parent card or drill into a child without re-selecting on the page.
Documented a responsive size-variation ramp on the Breakpoints page, how display / heading / body type, icons, touch targets, card padding and grid columns step across xs / sm / lg, tagged by atomic tier.
The changelog can now be copied as Markdown from the button in its header.

2026-06-27 v0.19.0 · five new sectors

feat(sectors): add five sector themes from the live site

Added the five sectors that existed only on youschool.fr: Petite Enfance (#0088FF), Nutrition (#ED1E79), Bâtiment / BTP (#EEA027), Compétences Pro (#4A4F68) and Bureautique (#0088FF). Colours and pictograms come straight from the Figma source, so they are exact, not guessed.
They now appear in both the Color sector themes and the Sector pictograms gallery, bringing the documented set to eleven and closing the biggest site-versus-Apollo gap.

2026-06-27 v0.18.0 · status flags & voice page

feat(docs): per-component status flags and a voice & content page

Every component now carries a stable or beta flag next to its title, so it's clear what is safe to lean on. Data table, article, app components and lead form start as beta.
Added a Voice & content page to the docs: language, tone, the status wording with do and don't, and the rules for eyebrows, numbers and emoji.

2026-06-26 v0.17.0 · navigation & copy

feat(nav): one page per sidebar entry, plus reading aids

Every sidebar sub-entry is now its own page showing just that one section, instead of one long scroll per group. Clicking a group heading jumps to its first page; the active page is highlighted in the rail.
Indented the sub-entries under each group with a guide line, so the nesting is easy to read at a glance.
Added a lightbulb in the header that opens a short "what's on this page" summary for wherever you are.

2026-06-25 v0.16.0 · magenta resolved

feat(color): adopt magenta as the Métiers de bouche sector token

Resolved the last open decision (magenta-scope). Magenta #ED1E79 is the missing Métiers de bouche / Restauration sector accent, added as sector/bouche (primary #ED1E79, secondary #FFE9F3) alongside the other five sector themes, which the page already used for that sector verbatim.
Not promoted to a brand-wide accent: its 547× frequency reflects a high-traffic food funnel, not system-wide use. Non-sector uses (required-field asterisks) are reassigned to the semantic danger token; decorative funnel art stays sector-derived.
Apollo now has zero open decisions; the Overview panel shows an all-clear state.

2026-06-24 v0.15.0 · tokens, usage notes & CTA resolution

feat(tokens): add brand gradient, rename neutral→slate, document component usage

Added gradient/brand (#0F6FE5→#6A4DEA) and gradient/brand-vivid to the token file, and renamed the neutral ramp to slate so the JSON matches the Color page (one neutral scale).
Added a Usage guidance line to every atom (13) and molecule (15), when and how to reach for each component.
Resolved the CTA-pulse decision (fix): the indefinite orange A/B pulse is dropped, WCAG 2.2.2 (Pause, Stop, Hide) requires >5s auto-motion to be controllable, in favour of a brand-blue static rest shadow + user-initiated hover halo, suppressed under reduced-motion. Only magenta-scope remains open.

2026-06-23 v0.14.1 · neutral consolidation

fix(color): drop duplicate neutral family, standardize on slate

The Color page carried two neutral subcategories (a legacy Neutral family and the new Slate ramp). Removed the legacy family so there is a single neutral scale, Slate. Usage rules renamed neutral/* → slate/* to match.

2026-06-23 v0.14.0 · slate neutral ramp

feat(color): add named slate neutral ramp

Documented the Slate neutral ramp on the Color page, color/slate/50–950 (#F5F7FE → #050B2B). Apollo's cool blue-grey signature, distinct from flat Tailwind-style grays, with a WCAG verdict per step (slate/600+ AAA body · slate/400 AA large/UI only · slate/50–200 non-text).
Applied slate/200 #BCC2E3 to the doc-chrome frame (header, sidebar, search) for a recognizably slate edge.

2026-06-22 v0.13.0 · documentation guide

docs: add usage documentation guide

Added a Documentation page (after Overview), Getting started, Installation, Design tokens, Using components, Atomic structure, and Versioning & contribution, with code samples and a Don't/Do tokenisation example.

2026-06-20 v0.12.0 · sidebar search & full-width nav

feat(nav): add taxonomy search and full-width sidebar

Added a taxonomy search bar at the top of the sidebar, live filter across Atoms / Molecules / Organisms / Templates, with tier tags and jump-to-component.
The sidebar menu now spans the full width of its container (removed the 100px left indent).

2026-06-19 v0.11.0 · component context menu

feat(components): add right-click context menu with CSS inspector

Added a DRUIDS-style right-click menu on tier component specimens: Afficher le code CSS (extracts the element's computed CSS into a copyable modal) plus guide / GitHub / Figma links (placeholders).
Each tier page carries a discoverability hint for the right-click action.

2026-06-18 v0.10.0 · atomic-design taxonomy

refactor(taxonomy)!: reorganize library into atomic-design tiers

Reorganized the library into the Atoms → Molecules → Organisms → Templates ladder, replacing the flat Components / Patterns / Plateforme grouping. No component was changed, only re-tiered.
Atoms (13), button, badge, input, checkbox/radio, toggle, select, phone, tag, avatar, rating, tooltip, loading, breadcrumbs. Molecules (15), card, selector, alert, stat, stepper, validation, formation card, tabs, toast, pagination, empty state, announcement bar, dropdown, accordion, sector card.
Organisms (10), modal, comparison & data tables, testimonial, article, card grid, form, navbar/mega-menu, footer, app components. Templates (2), page header, lead form.
Brand gradient and app density moved into Foundations, they are tokens, not components.

2026-06-17 v0.9.0 · Plateforme app kit + brand gradient

feat(plateforme): add app kit and promote brand gradient to canon

Added the Plateforme page, the learner & coach app mode, grounded in the real product screenshots: brand gradient, app density tokens, and app components.
Promoted the brand gradient to canon as gradient/brand (#0F6FE5 → #6A4DEA), both stops ≥ 4.5:1 on white, so white text is AA at any size. The brighter as-observed brand-vivid is limited to large/bold text or text-free fills. Gradients stay app-only; the site remains flat.
Documented app density (18px card radius, 20px padding, 212px sidebar, 64px header, #F5F7FD canvas) and a growing app-component set, status badges, sidebar nav-item states, composer, course list item, publication card, à-la-une card, weekly streak, onboarding stepper, activity/KPI cards, and défi/groupe cards. The full interactive shell lives in YouSchool Plateforme.dc.html.

2026-06-16 v0.8.0 · Plateforme app-kit scope (Phase 3)

docs(plateforme): scope app-kit roadmap

Added a Plateforme app-kit roadmap to the Overview, the learner & coach surfaces, the denser app mode, and the new components an app build would need.
Scoping only: flagged as not-yet-built, pending a reconciliation pass over the Middle Plateforme codebase before promoting app density / components to tokens.
Completes the three-phase response to the DRUIDS / youschool.fr gap analysis (foundations → site components → app scope).

2026-06-16 v0.7.0 · site components (Phase 2)

feat(components): add 12 youschool.fr site components

Added 12 youschool.fr components: formation card, tabs, tooltip, toast, avatar, tag, rating, breadcrumbs, pagination, loading (spinner / skeleton / progress), empty state, and the dismissible announcement bar.
Tabs, pagination, rating, and the announcement bar are interactive; all are built only from existing tokens and the sector pictogram assets.
Closes the DRUIDS / youschool.fr component gaps identified in the analysis. Phase 3, the Plateforme app kit, is next.

2026-05-31 v0.6.0 · accessibility, motion & form controls

feat: add accessibility, motion foundations and form controls

Added Motion foundation, duration scale (instant → slower), easing tokens, a live demo, and a prefers-reduced-motion rule.
Added Accessibility foundation, verified contrast table (with the small-text #0088FF → #0458D6 rule), focus ring, target size, and a keyboard / screen-reader checklist.
Added the form-control suite: checkbox, radio, toggle, select, textarea, phone input, stepper, and form-validation states, interactive, built only from existing tokens.
Gap analysis against DRUIDS and youschool.fr drove this phase; Phase 2 (site components) and Phase 3 (Plateforme app kit) are queued.

2026-05-29 v0.5.0 · components, patterns & foundations build-out

feat: build out components, patterns and foundations

Design Principles page, 6 principles (Clarity, Consistency, Accessible by default, Purposeful hierarchy, Systematic, Designed to evolve) in 2-col card grid; nav entry added between Overview and Foundations.
4 new Foundations sections, Layout & Grid (4 surface configs + container max-widths), Icon scale (xs/sm/md/lg, moved to Icons section), Z-index & Depth (9-layer dark-to-light stack), Breakpoints (xs–xl visual diagram + spec table).
27 partner logos extracted from Assets-site.fig and organised by vocational sector (Métiers de bouche, Animaliers, Beauté & ongles, Mode & couture, Art floral & déco) on the Logos page.
Integration logos (Réassurance section) rebuilt from the real Figma -- Réassurance // CPF page, CPF, Qualiopi, Préfecture de Paris, La French Tech, Speak & Act bitmaps + social proof stat cards (40 000 apprenants, 4.8/5, 23 formations).
Selector component (Components page), 6 variants: status compact (white + light-blue bg), formation horizontal, status inline, testimonial wide + narrow. All dropdowns live.
Lead form (contained card), 3-step interactive: identity → profile → contact. 300px card with blue ring border, formation icon header, FR flag phone prefix, consent checkbox.
Mega-menu prototype (Patterns page), full 3-level hover-driven fly-out matching youschool.fr: 10 sectors → formations → sub-pages. Native DOM mouseenter/mouseleave for reliable open/close; pre-computed active-state styles; overflow:hidden removed from wrapper so the absolutely-positioned panel is not clipped.

2026-05-28 v0.4.0 · partner logos

feat(logos): add 27 partner logos

27 partner logo marks added to Logos page, extracted directly from Assets-site.fig / Partenaires / Carrousel. Organised by vocational sector: Métiers de bouche (7), Métiers animaliers (7), Beauté & ongles (8), Mode & couture (5), Art floral & déco (2). Prowear and Cousette are SVG-composed marks in Figma (no bitmap), shown as styled tiles.
Icon scale moved from Foundations to the Icons section (UI icons → Sector pictograms → Icon scale), better information architecture.
Logos TOC updated with Partner logos anchor; placeholder "PLACEHOLDER" callout on Integrations removed.

2026-05-27 v0.3.0 · design reference build-out

feat: build out design reference with responsive tables

Fidelity pass against Assets-site: sector pictograms rebuilt from real Figma SVGs (Pictos-Puces) with correct sector colours; Sector card rebuilt to the real "Card Listing secteur" layout (centred picto → underlined checklist); Unicode icon misuses (▾ ×) replaced with SVGs; video-camera & academic-cap corrected to canonical Heroicons.
Alerts redesigned to full-tint surface + solid semantic icon shapes (circle / triangle / octagon) matching the supplied reference, dropped the Flowbite flat-tint pattern.
Version numbering corrected from v1.x.x → v0.x.x across doc + apollo-tokens.json (unpublished system).
Two responsive table components added for the mobile-density / SEO problem: Comparison table (options → swipe/focus columns) and Data table (records → expandable-accordion on mobile, continent filter). Content stays in DOM, no display:none duplicates.
Data table seeded with the real country reference table provided by the team; mobile pattern rebuilt from nested-scroll cards → expandable accordion (compact rows, tap to reveal long Particularité field).
Apollo icon (spartan helmet) added to the top-bar, replacing the placeholder "A" letter badge.
Design Principles page added (6 principles: Clarity, Consistency, Accessible by default, Purposeful hierarchy, Systematic, Designed to evolve) between Overview and Foundations in the nav.
Four new Foundations pages: Layout & Grid (4 surface configs + container max-widths), Icon scale (xs/sm/md/lg with usage), Z-index & Depth (9-layer stacking scale), Breakpoints (xs–xl visual diagram + specs table).

2026-05-26 v0.2.0 · reconciled vs. Assets-site library

fix(tokens): reconcile values against Assets-site library

Reconciled against the live-site asset library (Assets site.fig, 224 component sets, 150 Figma Variables)

Accent decision RESOLVED: teal/magenta are a per-sector theme system (Variable collection, ma / beauté / secrétariat / créativité / mrp, each Primary + Secondary), not drift. Promoted to a Sector themes family on the Color page.
Correction: real brand teal is #0095AD (sector/ma). The v0.1 sample #5EEAD4 was wrong, dropped.
Primary ramp corrected to the Figma variables: 600 = #1C64F2, hover 700 = #0458D6, active 900 = #233876 (v0.1's #007AE6 hover was an interpolation).
New: Interactive (semantic) token layer, primary/secondary/neutral/danger/ghost × default/hover/active/disabled, lifted from color/theme/interactive/*. Closes the old "components not yet defined" gap.
Button radius is size-scaled (4/6/8/10px), not a single 10px. Spacing base is a clean even scale in the variables (6–20px), v0.1's "7px base" flagged as a capture artifact.
Icons & Logos pages added from the asset library; Alert / Stat / Sector card / Testimonial / Article / FAQ components and Navbar / Lead form / Footer patterns added.
Fidelity pass against Assets-site: sector pictograms now use the real copied SVGs (Pictos-Puces) with correct sector colours (bouche #ED1E79, beauté #996CED, animaux #0095AD, santé #222831, créativité #DF5D5F, secrétariat #29967C); the Sector card rebuilt to the real "Card Listing secteur" layout (centred picto → title → underlined checklist); Alerts redesigned to the supplied reference, full-tint surface, solid semantic icon shape (circle / triangle / octagon), bold dark-hue title, matching dismiss control; and Unicode glyphs used as icons (▾ × ★) replaced with real SVGs per the icon guidelines.
Two table components added for the mobile-density problem: a Comparison table (options → swipe/focus columns) and a Data table (records → record cards, with a continent filter), both keeping every cell in the DOM (SEO-safe; no display:none duplicate tables).

Still open after reconciliation

Magenta #ED1E79, used 547× but not in the Variable collection like the sector themes. Confirm whether it becomes a named token or stays a campaign one-off.
CTA pulse animation, unchanged from v0.1; still a conversion + WCAG 2.2.2 decision for the CTA-performance owner.

2026-05-26 v0.1.0 · initial build

feat: initial design system build

Built this session

color variables

heading text styles

radius variables

spacing variables

shadow effect styles

components

patterns

UI + sector icons

integration marks

Deliberately skipped

color.accent_unconfirmed.*, teal & magenta appear only on Financement/Alternance templates, in no Figma source. Pending the funnel-page owner's confirmation.
shadow.special.cta-pulse, off-brand orange pulse injected by an A/B tool, likely WCAG 2.2.2 violation. A conversion decision; needs the CTA-performance owner.

New gaps surfaced, need a human decision

Grid gap vs spacing scale: live card grid uses 40px, not a multiple of the 7px unit. Flagged on the Card grid pattern.
Marketing vs product headings: marketing H1 ships 45px/700 against this scale's 31.5px/500. Two contexts to reconcile or converge.
Secondary color scope: color/secondary (Plateforme gradients) not yet confirmed for use outside Plateforme. Review during component pass.
Sector pictogram hues: the per-sector category colors (Restauration #ED1E79, Beauté #5145CD, …) are pulled from the live mega-menu but are not Apollo tokens, candidates pending the accent-colors decision. Icons page flags them.
Partner/integration marks: CPF, France Travail, Qualiopi, Trustpilot etc. shown as name-only placeholders. Swap in each owner's official asset before production.

Apollo v0.34.1 · rendered from apollo-tokens.json · réconcilié vs. Assets-site library · WCAG 2.1 AA · status: draft

Apollo

Sources reconciled

Reconciliation notes

Open decisions

All open decisions resolved

{{ d.title }}

Tokens

Brand & neutrals

Accents

Badge surfaces

Brand gradient

Typography, {{ typeFamily }}

Spacing

Radius

Shadows

Layout constants

Using Apollo

Installation

Design tokens

Using components

Atomic structure

Building app screens

Known discrepancies & how to reconcile

Assembling a screen, tier by tier

Voice & content

Status wording

A few more rules

Versioning & contribution

Semantic versioning, a.b.c

Badge taxonomy

Design principles

Clarity over cleverness

Consistent across surfaces

Accessible by default

Purposeful hierarchy

Systematic, not arbitrary

Designed to evolve

Color

Slate (neutral)

{{ fam.title }}

Sector themes

Interactive (semantic) tokens

Usage rules

Typography

Size scale, weight 400 (labels & body)

Radius

Spacing

Shadow

Motion

Duration

Easing

Try it

Layout & Grid

Grid configurations

Container max-widths

Z-index & Depth

Breakpoints

Responsive size variation

Accessibility

Contrast

Focus

Target size

Keyboard & screen reader

Brand gradient

App density

Icons

UI icons

Sector pictograms

Icon scale

Logos

Logo de marque

Integrations & partners

Certifications & labels

Social proof figures

Partner logos

Meta & SEA — Publicité

Formats & spécifications

Meilleures créations (emplacements)

Règles d'usage de la marque en publicité

Button