Design System — Rosa Artisan Fleuriste

01 · Brand

Fondations

Voix visuelle

Minimalist & Organic

Atelier feutré, lumière de fin de matinée, papier kraft. Pas de "corporate cold" : on cherche la texture, le geste, le silence entre deux fleurs.

Anti-références

✕ Aesthétique SaaS / dashboard
✕ Glassmorphism appuyé
✕ Gradients néon, dégradés saturés
✕ Ombres marquées, élévations multiples
✕ Pills systématiques, radius > 8px

Mots-clés

Artisan Poétique Local Saisonnier Tactile Rennais

02 · Couleurs

Tokens chromatiques

Proposition d'aliases sémantiques (sage, rose, sand, paper, charcoal) en plus des tokens Material 3 actuels. L'objectif : un nommage lisible côté équipe sans casser l'existant — les anciens noms restent en alias.

Sage Primary · feuillage

primary / primary-container / primary-fixed / inverse-primary

sage 50#f0f3ef

sage 100#d7e7cf

sage 200#bbcbb3

sage 300#8a9a84

sage 500 ★#53624f

sage 700#3c4b38

sage 900#243221

sage 950#121f10

★ Token de base — CTA primary, accents éditoriaux, état actif nav.

Rose poudrée Secondary · délicatesse

secondary / secondary-container / secondary-fixed

rose 100#ffdad6

rose 200#ffcbc6

rose 300#eebab5

rose 500 ★#7c5450

rose 700#623d3a

rose 900#2f1311

★ Token de base — étoiles avis, labels secondaires, étiquettes éditoriales.

Sable Tertiary · papier kraft

tertiary-fixed / tertiary-container / tertiary

sand 50#f9f7f2

sand 100 ★#e8e2d6

sand 200#cbc6ba

sand 300#9a958a

sand 500#625e55

sand 700#4a473e

sand 900#1e1c14

★ Token de base — fonds de section "univers", containers card mariages.

Paper & Charcoal Surfaces & texte

surface · surface-container-* · on-surface · outline

paper 50#ffffff

paper ★#fcf9f8

paper 100#f6f3f2

paper 200#f0eded

paper 300#eae7e7

paper 400#e4e2e1

outline soft#c4c8bf

outline#747871

charcoal 500#444841

charcoal 700#303030

charcoal ★#1b1c1c

Danger Erreur · validation

error / error-container

danger 100#ffdad6

danger 500#ba1a1a

danger 900#93000a

Réservé à l'état d'erreur de formulaire uniquement — jamais en accent décoratif.

03 · Typographie

Échelle & rythme

Display — Playfair

Poésie végétale

Notre signature

Body — Montserrat

Des compositions singulières façonnées au rythme des saisons, pour célébrer le vivant dans votre quotidien.

Texte secondaire, légendes, contenus tertiaires de l'interface.

Token	Famille	Taille / LH / Wt	Usage	Aperçu
`display-lg`	Playfair	48 / 1.1 / 400	H1 desktop	Bouquets de saison
`display-lg-mobile`	Playfair	36 / 1.2 / 400	H1 mobile	Bouquets de saison
`headline-md`	Playfair	32 / 1.3 / 400	H2 section	Nos créations
`headline-sm`	Playfair	24 / 1.4 / 500	H3 produit, citations	Le Rennais
`body-lg`	Montserrat	18 / 1.6 / 400	Intro, hero subline	Au rythme des saisons.
`body-md`	Montserrat	16 / 1.6 / 400	Corps de texte	Au rythme des saisons.
`label-md`	Montserrat	14 / 1.2 / 600 · UPPER	Boutons, labels, eyebrows	Voir la collection
`caption`	Montserrat	12 / 1.4 / 400	Mentions légales, métadonnées	© 2026 Rosa Artisan Fleuriste

04 · Espacement

Échelle 4 / 8 px

Base 4px, multiplicateurs en puissance de 2. Les sections respirent (sp-30 desktop) mais s'allègent en mobile (sp-16) — recommandation post-audit.

sp-1 · 4px

sp-2 · 8px

sp-3 · 12px

sp-4 · 16px

sp-6 · 24px

sp-8 · 32px

sp-12 · 48px

sp-16 · 64px

sp-20 · 80px mobile

sp-24 · 96px

sp-30 · 120px desktop

Section gap responsive — recommandation audit (C5)

section-gap: clamp(64px, 8vw, 120px)
margin-mobile: 16px · margin-desktop: 64px
gutter: 24px · container-max: 1200px

05 · Radius

Échelle "Soft-Modern"

Refonte post-audit (M5) : on consolide en 5 tokens. Tout ce qui n'est pas un status tag reste en 4px ou moins.

rs-none · 0

Hero images plein bord

rs-xs · 2px

Inputs, dividers

rs-sm · 4px ★

Boutons, cards, surfaces

rs-md · 6px

Modales, sheets

rs-pill

Chips, status tags uniquement

★ Token de base — par défaut, toute surface UI utilise rs-sm. Le radius asymétrique (top-left + top-right uniquement) reste autorisé sur les images "arche éditoriale" mentionnées dans le DESIGN.md.

06 · Élévation

"Ambient Whisper" — ombres murmurées

On reste fidèle à la philosophie du DESIGN.md : la profondeur naît des tonal layers, pas des ombres lourdes. 3 niveaux subtils + un anneau de focus.

shadow-none

Surface plate

shadow-whisper ★

Cards au repos

whisper-hover

Cards hover

whisper-deep

Modales / sheets

07 · Icônes

Fine-line · 1.5px stroke

SVG inline, jamais filled, hérite de currentColor. Les Material Symbols des maquettes sont remplacées par cette set (déjà présente dans src/components/Icon.astro).

menu

close

arrow-right

star

instagram

mail

phone

pin

florist

craft

leaf

share

Tailles standardisées : 16 · 20 · 24 · 32 px. Toujours associer un aria-label sur les icônes seules.

08 · Boutons

Système consolidé

4 variantes × 3 tailles × 5 états. Tous radius rs-sm, transitions 240ms ease, focus ring sage à 30% d'opacité.

Variantes (taille md)

Voir la collection

Primary sage 500 → l'action principale d'une vue (1 par section). Secondary charcoal outline → action alternative équivalente. Tertiary rose 500 → seulement pour actions "rendez-vous / devis" (mariages). Ghost sage transparent → actions tertiaires en cluster. Link souligné → actions inline éditoriales.

Tailles (variante primary)

★ MD par défaut. SM réservé à la nav et aux actions secondaires en cluster. LG réservé au hero et aux CTA conversion (devis, commander). Toutes les tailles > 40px minimum tactile WCAG.

États (primary md)

Hover : assombrissement de la teinte (pas de scale, pas d'élévation). Active : descente d'1px + assombrissement. Focus : ring sage 3px à 30% opacité, offset géré par focus-visible. Disabled : opacity 0.45, pointer-events:none.

09 · Formulaires

Champs & états

Reconstruction visuelle du formulaire contact (recommandation M9 de l'audit) : un vrai formulaire qui sérialise au submit dans un mailto:. Zéro backend, identité visuelle préservée.

État repos · hover · focus

Prénom & nom

Email Pour vous répondre sous 24h ouvrées.

Type de demande

Textarea & erreur

Email (invalide) Adresse email manquante ou incomplète.

Votre projet

Ouvre votre app email avec un message pré-rempli.

10 · Chips & tags

Status-only · pill autorisé

Conformément au DESIGN.md, les pills sont strictement réservés aux étiquettes de statut éditoriales (catégorie, saison, type). Jamais en bouton.

Saison · printemps Nouveau Édition limitée Champêtre Prestige Plante

11 · Cards

Compositions

4 patterns : produit (catalogue), catégorie (accueil), réalisation (mariages), étape (process). Tous sans bordure visible, padding interne généreux, ombre whisper au repos.

image produit

Le Rennais

Fleurs de saison

55 €

Card produit · catalogue

image catégorie

Bouquets de saison

La fraîcheur du jardin, cueillie pour vous.

Voir la collection

Card catégorie · accueil

Mariages

Château de la Bourdaisière

01

Rencontre & vision

Nous échangeons sur vos envies, votre lieu et l'atmosphère pour définir une palette unique.

12 · Navigation desktop

Header sticky

Backdrop blur à 90% d'opacité, bordure basse en outline soft, hauteur 80px. Au scroll > 80px : shadow-whisper apparaît (5 lignes JS).

Rosa

L'item actif est souligné en sage 1px (jamais en background fill). Le CTA "Commander" reste visible à toutes les résolutions desktop.

13 · Patterns mobile

Drawer · CTA persistant · cards empilées

Recommandation principale (C1) : remplacer le menu mobile basique par un sheet plein écran avec backdrop blur, focus-trap, fermeture ESC + tap backdrop.

Rosa

Poésie végétale & artisanat rennais

Des compositions au rythme des saisons.

Commander sur Instagram

Header mobile — CTA Instagram icône seule + bottom CTA persistant (optionnel).

Poésie végétale

Menu

02 99 XX XX XX [email protected]

Sheet plein écran — backdrop blur, focus-trap, ESC pour fermer, CTA contact intégré.

photo

Le Rennais

Fleurs de saison

55 €

photo

Douceur de Rose

Séchée & éternelle

42 €

Catalogue mobile — 1 colonne, espace généreux entre cartes, prix toujours visible.

Breakpoints recommandés

xs 320–479px — Mobile S — 1 col, sp-mobile = 16
sm 480–767px — Mobile L — 1 col, sp-mobile = 20
md 768–1023px — Tablet — 2 col, sp = 32, nav desktop
lg 1024–1279px — Desktop — 3 col, sp = 48
xl ≥ 1280px — Desktop large — container max 1200px centré, sp = 64

14 · Dividers floraux

Touche poétique réutilisable

Composant <FloralDivider /> proposé en 3 variantes pour ponctuer les transitions de section sans alourdir.

Variante 1 — Wave (existante)

Variante 2 — Stem (nouveau)

Variante 3 — Trio (nouveau)

15 · Accessibilité

Focus visible & contrastes

Anneaux de focus (clavier)

Link focus

Toujours via :focus-visible (jamais :focus seul, sinon le clic affiche un ring). Ring sage 3px à 30% d'opacité, offset 0 (pas d'outline).

Contrastes WCAG AA — texte ≥ 4.5:1

charcoal sur paper · 14.9:1 ✓
charcoal-500 sur paper · 8.9:1 ✓
sage-500 sur paper · 5.4:1 ✓
rose-500 sur paper · 5.2:1 ✓
charcoal-300 (outline) sur paper · 4.3:1 ⚠️ usage non-texte uniquement

Cibles tactiles

Minimum 44×44 px en zone tactile pour tout élément interactif sur mobile (WCAG 2.5.5). La taille MD des boutons (48px) couvre ce minimum, les icônes-boutons utilisent p-2 (16+24+16 = 56px).

16 · Motion

Easing & durées

Aucune animation gratuite. Easing personnalisée cubic-bezier(0.22, 1, 0.36, 1) (out-expo) pour le reveal scroll, easing native ease pour les interactions micros. Toujours respect de prefers-reduced-motion.

Token	Durée	Easing	Usage
`motion-instant`	100ms	ease	State change input (border)
`motion-quick`	200ms	ease-out	Hover button, link color
`motion-base ★`	240ms	ease	Hover background, focus ring
`motion-slow`	400ms	ease-out	Drawer / sheet open
`motion-poetic`	700ms	cubic-bezier(0.22, 1, 0.36, 1)	Image scale hover, reveal scroll

Le langage visuel de Rosa

Fondations

Tokens chromatiques

Échelle & rythme

Échelle 4 / 8 px

Échelle "Soft-Modern"

"Ambient Whisper" — ombres murmurées

Fine-line · 1.5px stroke

Système consolidé

Champs & états

Status-only · pill autorisé

Compositions

Le Rennais

Bouquets de saison

Rencontre & vision

Header sticky

Drawer · CTA persistant · cards empilées

Le Rennais

Douceur de Rose

Touche poétique réutilisable

Easing & durées

Validation puis refonte itérative