Design System
Tokens, composants et typographie pour cohorte.school. Notion-like minimal avec gamification subtile.
Couleurs
Palette Notion-like : blanc, beige-gris chaud, noir doux.
Core
Background
--background: #FFFFFF
Foreground (noir doux)
--foreground: #191919
Muted (Notion beige)
--muted: #F7F6F3
Muted Foreground
--muted-foreground: #6B6B6B
Border (Notion warm)
--border: #E8E5E0
Card
--card: #FFFFFF
Brand & Actions
Primary (noir)
--primary: #191919
Brand
--brand: #191919
CTA (Notion blue)
--cta: #2383E2
CTA Hover
--cta-hover: #1B6EC2
Destructive (Notion red)
--destructive: #EB5757
Gamification
XP Gold
--xp-gold: #D4A853
Streak Orange
--streak-orange: #E67E22
Success (Notion green)
--success: #0F7B6C
Typographie
Inter pour le corps, JetBrains Mono pour le code et les stats.
h1 — Inter Bold 36px, tracking tight
Maitrisez l'IA operationnelle
h2 — Inter Semibold 28px
Parcours structures et gamification
h3 — Inter Semibold 20px
Module 1 : Fondamentaux de l'IA
Body — Inter Regular 16px, line-height 1.7
L'intelligence artificielle transforme les metiers. Ce parcours vous donne les cles pour integrer l'IA dans votre quotidien professionnel, sans jargon technique inutile.
Labels — JetBrains Mono Medium 12px, uppercase
Niveau intermediaire — 12 modules — 4h30
Code — JetBrains Mono Regular 14px
const response = await ai.chat({
model: "claude-opus-4-0-20250514",
prompt: "Analyse ce document..."
});XP/Stats — JetBrains Mono Bold, gamification colors
Boutons
Primary noir, outline fin, CTA bleu Notion pour les actions fortes.
Variants
Tailles
CTA (Notion blue) — actions fortes
Disabled
Cards
Fond blanc, bordure chaude, shadow ultra-subtile.
65% complete
Pas encore commence
Parcours termine
Badges
Badges sobres par defaut, couleurs uniquement pour la gamification.
Inputs
Bordure chaude, focus ring noir subtil.
Skeleton (Loading)
Placeholders de chargement avec fond Notion beige.
Gamification
Touches de couleur reservees aux elements de progression.
Radius
--radius: 0.375rem — quasi carre, style Notion