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.

ClasseDescriptionUtilisée dans
.theme-cardCard fond --ink-raisedArticleCard, MyArticleCard
.theme-panelPanel fond --ink-surfaceHeroHeader, pages formulaires
.theme-btnBouton accent bronzeboutons primaires partout
.theme-btn-ghostBouton ghost avec bordureboutons secondaires partout
.theme-kickerLabel uppercase bronzeindex.vue, HeroHeader, pages
.theme-titleTitre Playfair vellumpages section headings
.theme-leadCorps Lora vellum-dimdescriptions sous titres
.theme-mutedTexte vellum-fainttextes secondaires
.theme-back-linkLien retour avec flèchepages article, mes-articles, etc.
.filter-chipChip de filtre sélectionnableFiltersPanel
.theme-formConteneur formulairelogin, inscription, ecrire, mon-compte
.theme-field-labelLabel de champ uppercaseformulaires

.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

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