Design System

Scriptorium — Référence visuelle

1. Palette — 10 tokens de couleur

Tokens définis dans app/assets/css/main.css et utilisés dans tout le système.

--ink-deep#0e0b09Fond body

--ink-page#17130fPage principale

--ink-surface#1f1b15Panels, hero, formulaires

--ink-raised#282217Cards, éléments surélevés

--vellum#f0e9d6Texte principal

--vellum-dim#c4ae88Texte secondaire

--vellum-faint#7a6e5aLabels, kickers

--bronze#b08a50Accent principal

--bronze-bright#c8a068Hover, liens actifs

--border#352d1eBordures

2. Typographie

Quatre familles pour quatre registres distincts du système éditorial.

--font-serif · Playfair Display · Titres H1–H4, titres cartes

L'encre et le parchemin

Abcdefghijklmnopqrstuvwxyz 0123456789

--font-body · Lora · Corps éditorial, extraits, descriptions

Le corps du texte éditorial respire ici, dans une lecture longue et sereine. Lora apporte chaleur et lisibilité aux articles.

--font-script · Caveat · Signatures, accroches décoratives

Une signature manuscrite

--font-sans · Public Sans · Navigation, labels, badges, boutons

Navigation · Labels · Badges · Boutons

Abcdefghijklmnopqrstuvwxyz 0123456789

3. Classes utilitaires

Classe réutilisables définies dans app/assets/css/main.css.

Classe	Description	Utilisée dans
`.theme-card`	Card fond --ink-raised	ArticleCard, MyArticleCard
`.theme-panel`	Panel fond --ink-surface	HeroHeader, pages formulaires
`.theme-btn`	Bouton accent bronze	boutons primaires partout
`.theme-btn-ghost`	Bouton ghost avec bordure	boutons secondaires partout
`.theme-kicker`	Label uppercase bronze	index.vue, HeroHeader, pages
`.theme-title`	Titre Playfair vellum	pages section headings
`.theme-lead`	Corps Lora vellum-dim	descriptions sous titres
`.theme-muted`	Texte vellum-faint	textes secondaires
`.theme-back-link`	Lien retour avec flèche	pages article, mes-articles, etc.
`.filter-chip`	Chip de filtre sélectionnable	FiltersPanel
`.theme-form`	Conteneur formulaire	login, inscription, ecrire, mon-compte
`.theme-field-label`	Label de champ uppercase	formulaires

.theme-card

Contenu d'une card avec fond --ink-raised.

.theme-panel

Panel avec fond --ink-surface.

.theme-kicker.filter-chip

.theme-back-link — Retour aux articles

.theme-lead — Corps éditorial Lora pour descriptions et sous-titres.

.theme-muted — Texte atténué pour métadonnées secondaires.

.theme-form

.theme-field-label

4. Tokens structurels

Rayons, ombres et variables typographiques globales.

--radius-panel1rem

Rayon des panels

--radius-card0.75rem

Rayon des cards

--shadow-softbox-shadow légère

Ombre douce pour cards

--shadow-strongbox-shadow marquée

Ombre forte pour modales

--font-sansPublic Sans

Navigation, labels, badges, boutons

--font-serifPlayfair Display

Titres H1–H4, titres cartes

--font-bodyLora

Corps éditorial, extraits, descriptions

--font-scriptCaveat

Signatures, accroches décoratives

--radius-panel + --shadow-soft

--radius-card + --shadow-strong