Design system

Charte graphique

Référence visuelle et technique du système de design NowWeLearn : palette, typographie, espacements, badges, boutons et icônes tels qu'ils existent aujourd'hui dans src/styles/tokens.css. Chaque exemple est accompagné du nom exact de la classe CSS ou du token à réutiliser.

Logos & Identité visuelle

Actifs vectoriels de marque NowWeLearn. Le logo complet est utilisé dans l'en-tête du site, tandis que le pictogramme (livre ouvert et étoiles) sert de favicon d'onglet et d'icône d'application.

Logo complet/logo-nowwelearn.svgOuvrir SVG

Pictogramme / Favicon/favicon.svgOuvrir SVG

Couleurs

Palette Tokyo Night pour les neutres et les couleurs sémantiques, palette de marque distincte pour l'accent (vert) et l'accent secondaire (jaune). Chaque couleur change selon le thème clair/sombre actif.

Marque

Accent--color-accent

Accent (survol)--color-accent-hover

Accent secondaire--color-accent-secondary

Neutres

Fond--color-bg

Surface--color-bg-surface

Surface élevée--color-bg-elevated

Bordure--color-border

Texte--color-text

Texte atténué--color-text-muted

Texte discret--color-text-subtle

Sémantiques

Info--color-info

Astuce--color-tip

Avertissement--color-warning

Danger--color-danger

Succès--color-success

Typographie

Police unique Nunito pour les titres, l'interface et le corps de texte (--font-heading,--font-ui, --font-body), plus Cascadia Code / Fira Codepour le code (--font-mono). Échelle de taille en 8 paliers.

Aa--font-size-xs

Aa--font-size-sm

Aa--font-size-base

Aa--font-size-lg

Aa--font-size-xl

Aa--font-size-2xl

Aa--font-size-3xl

Aa--font-size-4xl

Espacements & rayons

Échelle d'espacement --sp-* et échelle de rayons de bordure --radius-*, à réutiliser telles quelles plutôt que d'introduire une valeur ponctuelle en dur.

Espacement

--sp-1

--sp-2

--sp-3

--sp-4

--sp-5

--sp-6

--sp-8

--sp-10

--sp-12

--sp-16

Rayons de bordure

--radius-sm

--radius-md

--radius-lg

--radius-full

Badges

Composant .badge (rectangle compact, --radius-sm) avec ses variantes de type de contenu et de statut. Toujours combiné avec .badge--*, jamais utilisé seul.

Type de contenu

cours.badge.badge--cours

tp.badge.badge--tp

slides.badge.badge--slides

quiz.badge.badge--quiz

Statut et accès

public.badge.badge--public

prive.badge.badge--prive

brouillon.badge.badge--brouillon

completed.badge.badge--completed

danger.badge.badge--danger

Niveau (composant dédié)

Initiation

<FlameLevel level="débutant" />

Pratique

<FlameLevel level="intermédiaire" />

Expertise

<FlameLevel level="avancé" />

Boutons

Composant .btn (pilule, hauteur fixe 2.5rem) avec 5 variantes sémantiques. Toujours combiné avec un modificateur, jamais utilisé seul.

.btn.btn--primaryAction principale (validation, soumission)

.btn.btn--outlineAction affirmative / progression

.btn.btn--secondaryConsultation, export, navigation

.btn.btn--amberAvis utilisateur, feedback

.btn.btn--dangerSuppression, action destructive

Bouton-icône rond (`.delete-btn`)

.delete-btnAction destructive (suppression compte/classe)

Icônes

Jeu d'icônes SVG unifié, consommé via le composant <Icon name="..." />(src/components/Icon.astro). 46 icônes disponibles.

book

bookOpen

bug

calendar

check

checkCircle

chevronDown

chevronLeft

chevronRight

chevronUp

circle

clock

copy

danger

document

expand

external

eyeOff

filter

flame

graduationCap

helpCircle

info

lock

logout

message

moon

pencil

play

presentation

printer

rotateCcw

school

search

shield

shrink

sparkles

star

sun

tip

trash

unlock

user

userCheck

users

warning