Chambre
Liste de naissance
Le design system
Toutes les variantes réellement exposées par les composants, réunies sur une seule page.
Atome typographique
MicroLabel
Le sur-titre en capitales espacées : six tailles, treize interlettrages, quatre tons et un mode vertical pour le ruban « RÉSERVÉ ».
Tailles
Cagnotte
Cagnotte
Cagnotte
Cagnotte
Cagnotte
Cagnotte
Interlettrages
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Réservé
Tons sur crème
Ou un cadeau en particulier
Réservé par
Paragraphe complet
Tons sur fond violet
Sur-titre atténué
Reçu ✓
Réservé
Atome typographique
ToneText
Les textes de ton en Cormorant : huit tailles, cinq interlignes, sept tons, trois alignements et trois largeurs de colonne.
Tailles
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Un mot doux glissé avec le cadeau, écrit à la main.
Interlignes explicites
La cagnotte reste ouverte jusqu’à la naissance, et chaque participation, même modeste, compte pour de vrai.
La cagnotte reste ouverte jusqu’à la naissance, et chaque participation, même modeste, compte pour de vrai.
La cagnotte reste ouverte jusqu’à la naissance, et chaque participation, même modeste, compte pour de vrai.
La cagnotte reste ouverte jusqu’à la naissance, et chaque participation, même modeste, compte pour de vrai.
La cagnotte reste ouverte jusqu’à la naissance, et chaque participation, même modeste, compte pour de vrai.
Tons sur crème
Ton violet de marque.
Ton encre, le plus contrasté.
Ton encre atténué.
Ton tertiaire, le plus discret.
Style, alignement et largeur
Le régime normal de cette police, ici.
Le même texte, sans italique.
Aligné à gauche.
Centré.
Aligné à droite.
Une colonne de 420 pixels : la largeur de l’accroche du héros et de l’intro de la page Messages.
Une colonne de 520 pixels : la largeur de lecture confortable retenue pour les paragraphes un peu plus longs du site.
Une colonne de 620 pixels : la plus large des trois, réservée au corps de l’e-mail de livraison, qui doit tenir en peu de lignes tout en restant lisible sur un écran d’ordinateur.
Merci mille fois pour ce cadeau. On a hâte de vous montrer la chambre.
« On a choisi la gigoteuse, elle est déjà lavée et pliée. »
Tons sur fond violet
Ton secondaire sur violet.
Ton de confirmation sur violet.
Ton crème, à pleine force.
Molécule
SectionHeading
Sur-titre, titre Shrikhand, accroche, seconde ligne d’aide et zone d’action : cinq échelles, deux alignements, deux fonds.
Échelles
Pour la crevette
Une liste, deux façons d’y participer
Choisissez un cadeau, ou glissez quelques euros dans la cagnotte.
Le catalogue
Les cadeaux
Tout ce dont nous avons besoin, classé par pièce de la maison.
Chambre
La veilleuse en bois
Celle qui s’allume d’une pression sur le dessus.
Dernière étape
Confirmer la réservation
Nous prévenons les parents, sans dévoiler votre message.
Espace parents
Cagnotte
Les dons reçus et les paliers déjà atteints.
Alignement, ligne d’aide, action et animation
Merci
C’est envoyé
Les parents recevront votre message le jour de la naissance.
Paliers
Les étapes de la cagnotte, dans l’ordre.
Un palier atteint reste visible, il ne disparaît jamais de la liste.
Espace parents
Catalogue
Quarante-deux cadeaux, dont onze déjà réservés.
Animé
Fondu montant
La même animation que l’entrée du héros.
Sur fond violet
La cagnotte
Le grand biberon
Il se remplit à chaque participation.
Aucun montant n’est affiché publiquement.
Atome
Divider
Le filet de séparation : avec ou sans libellé, deux épaisseurs, quatre espacements, deux fonds.
Sans libellé
Avec libellé
Sans frais
Ou bien
Sur fond violet
Objet
Champ
TextField
Le champ de saisie : trois polices, trois alignements, quatre hauteurs multilignes, trois fonds, plus les états invalide et désactivé.
Polices et alignements
Il ne sert qu’à vous envoyer la confirmation.
Multiligne
Fonds et cadres
États
Ce champ contient une erreur.
Cette adresse ne ressemble pas à une adresse e-mail.
Le nom ne peut pas être vide.
Ce champ est verrouillé une fois la réservation confirmée.
Sur fond violet
Il apparaîtra sur la carte du cadeau.
Ce champ contient une erreur.
Champ
SelectField
La liste déroulante, même grammaire que le champ de saisie : trois fonds, deux tons, état invalide, état désactivé, options désactivables.
Sur crème
L’ordre des catégories se règle dans l’espace parents.
Ce champ contient une erreur.
Choisissez une catégorie avant d’enregistrer.
Sur fond violet
Elle décide de la place du cadeau dans la liste.
Ce champ contient une erreur.
Pastille
CheckDot
La pastille d’état des paliers : quatre diamètres, atteint ou non, sur crème ou sur violet, avec un nom accessible obligatoire.
Diamètres sur crème
Diamètres sur fond violet
Pastille
AvatarInitial
La pastille portant l’initiale du réservataire : deux diamètres, deux fonds. Décorative par défaut, nommée dès qu’on lui donne un aria-label.
Sur crème
Léa
Karim
Léa & Karim
É
Sur fond violet
Étiquette
StatusBadge
L’étiquette de statut en pilule : deux habillages, deux tailles. Le statut est toujours écrit en toutes lettres.
Habillages et tailles
En attente
Reçu ✓
Je l’apporte
Livraison
Mise en page
Panel
L’encart bordé : quatre fonds, deux rayons, quatre espacements, bordure facultative et trois élévations.
Fonds
Fond crème.
Fond crème chaud.
Fond mauve : carte réservée.
Fond violet : bordure crème, texte crème.
Rayons, bordure et espacements
Rayon de carte.
Rayon de grand encart.
Aucune bordure.
Espacement à la charge du parent.
Ligne compacte.
Carte de cadeau.
Grand encart de la cagnotte.
Élévations et sémantique
Aucune ombre.
L’ombre apparaît au survol.
Ombre permanente, dite polaroïd.
Mise en page
PageContainer
La colonne centrée d’une page : trois gabarits de largeur, des gouttières fluides, aucune sémantique — c’est à l’appelant de fournir le main ou la section.
Gabarits
Colonne du site public : centrée, 960 pixels au plus.
Colonne resserrée des modales et des aperçus d’e-mail.
Colonne de l’espace parents : toute la place laissée par la barre latérale.
État
EmptyState
L’état vide : un constat en Marcellus, une phrase de ton facultative, une action de sortie facultative. Ni bordure ni illustration.
Déclinaisons
Aucun cadeau dans cette catégorie.
Aucun message pour l’instant.
Les mots laissés par vos invités apparaîtront ici, au fur et à mesure des réservations.
Aucun cadeau ne correspond à ce filtre.
Essayez une autre catégorie, ou revenez à la liste complète.