dev uniquement

styleguide

Chaque composant du design system, dans tous ses états, sur les trois fonds de la charte. Les mises en page complètes ont leur propre page.

typographie

Unbounded 700 en minuscules pour les titres, Outfit pour le reste. Rien sous 14 px, sauf les étiquettes courtes à 13 px.

fond cream

titre de page

titre de section

Chapeau, 19/500 : une phrase qui pose le contexte.

Corps, 17/400. Une pièce unique tournée à la main dans un atelier de Corrèze.

Corps appuyé, 17/600.

Petit texte, 14/400, en couleur secondaire.

Étiquette, 14/600

surtitre

Accent pour petit texte

fond sage

titre de page

titre de section

Chapeau, 19/500 : une phrase qui pose le contexte.

Corps, 17/400. Une pièce unique tournée à la main dans un atelier de Corrèze.

Corps appuyé, 17/600.

Petit texte, 14/400, en couleur secondaire.

Étiquette, 14/600

surtitre

Accent pour petit texte

fond forest

titre de page

titre de section

Chapeau, 19/500 : une phrase qui pose le contexte.

Corps, 17/400. Une pièce unique tournée à la main dans un atelier de Corrèze.

Corps appuyé, 17/600.

Petit texte, 14/400, en couleur secondaire.

Étiquette, 14/600

surtitre

Accent pour petit texte

logo et tuile

Fichiers SVG en currentColor. Le monogramme vit dans une tuile forest.

fond cream

fond sage

fond forest

boutons

Un seul bouton plein terracotta-ink par écran. Un lien quand il navigue, un vrai bouton quand il agit.

fond cream

voir l'atelier voir les créations

ghost-light est réservé au fond forest.

fond sage

voir l'atelier voir les créations

ghost-light est réservé au fond forest.

fond forest

voir l'atelier voir les créations

pilules

Choix rapides avec aria-pressed. Choisie : anneau et coche, pas seulement une teinte.

fond cream

fond sage

fond forest

étiquettes

Non interactives. Le pointillé signale un état vide ou une invitation.

fond cream

céramique pièce unique atelier fondateur pas encore en rayon

fond sage

céramique pièce unique atelier fondateur pas encore en rayon

fond forest

céramique pièce unique atelier fondateur pas encore en rayon

champs

Label lié, aide et erreur annoncées par aria-describedby. Les champs facultatifs le disent.

fond cream

nom de la création

prix

TTC, en euros. Les frais de livraison s'ajoutent.

adresse e-mail

Vérifiez l'adresse : elle doit ressembler à nom@exemple.fr.

métier d'art

un mot pour l'artisan (facultatif)

code postal

fond sage

nom de la création

prix

TTC, en euros. Les frais de livraison s'ajoutent.

adresse e-mail

Vérifiez l'adresse : elle doit ressembler à nom@exemple.fr.

métier d'art

un mot pour l'artisan (facultatif)

code postal

fond forest

nom de la création

prix

TTC, en euros. Les frais de livraison s'ajoutent.

adresse e-mail

Vérifiez l'adresse : elle doit ressembler à nom@exemple.fr.

métier d'art

un mot pour l'artisan (facultatif)

code postal

cases à cocher

fond cream

Recevoir un e-mail quand l'atelier publie une création

Pièce unique

Le stock est alors limité à une pièce.

J'accepte que mes coordonnées servent uniquement à traiter cette commande.

fond sage

Recevoir un e-mail quand l'atelier publie une création

Pièce unique

Le stock est alors limité à une pièce.

J'accepte que mes coordonnées servent uniquement à traiter cette commande.

fond forest

Recevoir un e-mail quand l'atelier publie une création

Pièce unique

Le stock est alors limité à une pièce.

J'accepte que mes coordonnées servent uniquement à traiter cette commande.

options de réception

Dans un fieldset et sa legend. Choisie : anneau et coche.

cartes

Le relief vient de l'alternance cream, sage et forest, jamais d'une ombre.

fond cream

carte sage

bol à thé, grès émaillé