Ember.Ember

Composants

Composants

Une fiche par composant de l’application et du site, avec un aperçu vivant, ses états, son anatomie cotée, ses classes réelles et leur source.

Boutons

Un seul langage pour l’application et le site : orange ember-500 pour l’action, ember-700 pour les petits boutons, texte toujours blanc, rayon 12 px, aucune ombre.

Boutons du site

Site
Le gros bouton d’action est ember-500 plein, texte blanc, sans ombre ni icône. Une seule action orange par écran.

Variantes

Boutons du site
RôleHauteurAperçu
Principal48 pxPrincipal
Secondaire48 pxSecondaire
Lien (tertiaire)44 pxLien
CTA du header44 px, 40 px dès 1 024 pxCommencer
Compact (cookies, réservation)44 pxRefuserAccepter

États

Continuer
Repos
Continuer
Survol : ember-600
Continuer
Focus : anneau 2 px ember-700
Désactivé : opacity-60
Chargement : spinner, disabled

Un bouton en cours d’action est disabled et affiche Loader2 h-4 w-4 animate-spin avant son libellé.

Anatomie cotée

Commencer
24 px48 px

min-h-12 · px-6 py-3 · rounded-xl · gap-2 (8 px)

Commencer
16 px44 px

h-11 lg:h-10 · px-4 · rounded-xl (header)

Mesures d’un bouton du site
MesureValeurClasse
Hauteur principal et secondaire48 pxmin-h-12
Hauteur du CTA du header44 px, 40 px dès 1 024 pxh-11 lg:h-10
Hauteur des liens et boutons compacts44 pxmin-h-11
Marge horizontale24 px (16 px header et compact)px-6 px-4
Marge verticale12 pxpy-3
Rayon12 pxrounded-xl
Espace icône et texte8 pxgap-2
Police16 px (hérité) ou 15 px, 600font-semibold
Transition280 ms (150 ms pour le header et le compact)duration-base

Tokens et code

Principal

inline-flex min-h-12 items-center justify-center gap-2 rounded-xl bg-ember-500 px-6 py-3 font-semibold text-white transition-colors duration-base ease-motion motion-reduce:transition-none hover:bg-ember-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60

Secondaire

inline-flex min-h-12 items-center justify-center gap-2 rounded-xl border border-neutral-300 bg-white px-6 py-3 font-semibold text-neutral-900 transition-colors duration-base ease-motion motion-reduce:transition-none hover:border-ember-500 hover:text-ember-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60

Lien

inline-flex min-h-11 items-center font-semibold text-neutral-900 underline decoration-neutral-300 underline-offset-4 transition-colors duration-base ease-motion motion-reduce:transition-none hover:decoration-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2

CTA du header

inline-flex h-11 items-center rounded-xl bg-ember-500 px-4 text-sm font-medium text-white transition-colors duration-fast ease-motion motion-reduce:transition-none hover:bg-ember-600 lg:h-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2

Règles

  • Texte blanc sur tout bouton orange, jamais foncé. Gros bouton (14 px et plus) ember-500, survol ember-600 ; petit bouton (13 px et moins) ember-700, survol ember-800.
  • Pas de logo, d’icône ni d’ombre dans un bouton d’action ; jamais de dégradé.
  • Un seul bouton en surbrillance par écran, réservé à trois boutons : le header, « Choisir Pro » et « Composer mon équipe ». La page n’en montre aucun.
  • 44 px sous 1 024 px ; 40 px au moins au-dessus.

À faire, à ne pas faire

À faire

  • Commencer

    À faire : Un seul bouton principal orange par écran, texte blanc.

  • Voir les tarifs

    À faire : Le bouton secondaire à côté, bordure neutral-300.

À ne pas faire

  • Commencer

    À ne pas faire : Du texte foncé sur un bouton orange.

  • Commencer

    À ne pas faire : Un dégradé ou une icône dans le bouton.

Button de l’application

App
Le composant Button est la référence de tous les boutons de l’app : gros CTA, petits CTA, bouton noir, contour, icône. Sa base : inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors duration-fast ease-motion motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60

Variantes

Action principalePetit CTABouton noirContourSecondaireDiscretLienSupprimer
Variantes du Button de l’app
VarianteClasses
brandbg-ember-500 text-white hover:bg-ember-600
brand-smbg-ember-700 text-xs text-white hover:bg-ember-800
defaultbg-neutral-900 text-white hover:bg-neutral-800
outlineborder border-neutral-300 bg-white text-neutral-900 hover:border-neutral-900
secondarybg-neutral-100 text-neutral-900 hover:bg-neutral-200
ghosttext-neutral-700 hover:bg-neutral-100
linktext-neutral-900 underline decoration-neutral-300 underline-offset-4 hover:decoration-neutral-900
destructivebg-danger-700 text-white hover:bg-danger-800

Tailles

defaultsmlg
Tailles du Button de l’app
TailleClassesHauteur
defaulth-11 px-4 lg:h-1044 px, 40 px dès 1 024 px
smh-11 px-3 lg:h-944 px, 36 px dès 1 024 px
lgh-12 px-848 px
iconh-11 w-11 lg:h-10 lg:w-1044 px, 40 px dès 1 024 px

États

Enregistrer
Repos
Enregistrer
Survol : ember-600
Enregistrer
Focus : anneau 2 px ember-700
Désactivé : opacity-60
Chargement : Loader2, disabled

Le désactivé coupe le pointeur et met l’opacité à 60 %. La prop loading force disabled et ajoute le spinner. Au survol d’un pointeur réel, un bouton rempli monte de 2 px (hover-lift), sans ombre.

Code d’usage

Action principale

<Button variant="brand">Commencer</Button>

Petit CTA, taille sm

<Button variant="brand-sm" size="sm">Envoyer</Button>

Bouton icône

<Button variant="ghost" size="icon" aria-label="Fermer"><X className="h-5 w-5" /></Button>

Champs

Un seul champ pour l’application et le site : 44 px, rayon 12 px, bordure neutral-200, focus ember-700. Le site utilise la taille lg, à 48 px.

Champ

AppSite
Composants Field, Label, Hint, Error et Select.

Aperçu vivant

Aide sous le champ, en 14 px.

Taille par défaut, 44 px.

États

Repos : border-neutral-200
Focus : border et anneau ember-700
Erreur : border-danger-700
Désactivé : bg-neutral-50, opacity-60

Liste déroulante

Anatomie cotée

Nom du dossier
12 px44 px

min-h-11 · px-3 · rounded-xl · texte 14 px

vous@entreprise.fr
16 px48 px

lg : h-12 · px-4 · texte 16 px

Éléments d’un champ
ÉlémentClasses
Champmin-h-11 w-full rounded-xl border border-neutral-200 bg-white px-3 text-sm
Champ lg (site)h-12 px-4 text-[16px]
Zone de texteresize-y py-3 leading-[1.6]
Libellétext-sm font-medium text-neutral-800, astérisque text-neutral-500
Aidemt-2 text-sm text-neutral-600
Erreurborder-danger-700 sur le champ, message mt-2 text-sm text-danger-700 avec role="alert"
Listeappearance-none pr-10 + chevron h-4 w-4 text-neutral-500
Téléphonetexte de 16 px (text-base md:text-sm) : évite le zoom d’iOS
Carte de choixmin-h-[96px] rounded-3xl border bg-white p-5, sélection border-ember-500, aria-pressed
Progression d’un formulaireh-0.5 rounded-full bg-ember-500 sur bg-neutral-200

Code d’usage

Champ

min-h-11 w-full rounded-xl border border-neutral-200 bg-white px-3 text-sm text-neutral-800 placeholder:text-neutral-400 transition-colors duration-fast ease-motion motion-reduce:transition-none focus-visible:outline-none focus-visible:border-ember-700 focus-visible:ring-2 focus-visible:ring-ember-700/25 disabled:bg-neutral-50 disabled:opacity-60

Champ lg (site)

h-12 w-full rounded-xl border border-neutral-200 bg-white px-4 text-[16px] text-neutral-900 placeholder:text-neutral-400 transition-colors duration-fast ease-motion motion-reduce:transition-none focus-visible:outline-none focus-visible:border-ember-700 focus-visible:ring-2 focus-visible:ring-ember-700/25 disabled:bg-neutral-50 disabled:opacity-60

À faire, à ne pas faire

À faire

  • Nom

    À faire : Un libellé visible au-dessus du champ.

À ne pas faire

  • À ne pas faire : Un placeholder à la place du libellé.

Cases, bascules, radios

Composants Checkbox, Switch et radios en cartes, tous en ember pour l’état actif.

Cases à cocher, bascule et radios en cartes

AppSite

Aperçu vivant

Bascule activeInactive
Cases, bascules et radios
ÉlémentClasses
Case à cocherh-4 w-4 accent-ember-500, libellé cliquable min-h-11
Basculerole="switch" ; piste h-6 w-11 rounded-full, bg-ember-500 actif et bg-neutral-300 inactif ; pastille h-5 w-5 rounded-full bg-white, sans ombre
Radios en cartesrole="radiogroup" ; rounded-xl border border-neutral-200 px-4 py-3 ; sélection border-ember-500 bg-ember-50 text-ember-800
Bascule du mode sombrerounded-lg bg-neutral-100 p-2 + Sun ou Moon h-5 w-5

Tous prennent l’anneau de focus commun (ring-ember-700).

À faire

  • À faire : Une case en accent-ember-500 avec un libellé cliquable de 44 px.

À ne pas faire

  • À ne pas faire : Une bascule dont la pastille ne bouge pas : l’état ne se lit que par la couleur.

Pastilles et puces

Petits repères de statut ou de contexte. Une puce orange a un texte ember-800 ; une puce d’état prend son jeu de couleurs.

Pastilles et puces

AppSite

Aperçu vivant

ContexteCompte interneIndisponibleErreurInformationDisponiblePresseMomentSuggestion

Variantes

Pastilles et puces
ÉlémentClasses
Puce orangerounded-full border border-ember-200 bg-ember-50 px-2.5 py-1 text-xs font-semibold text-ember-800
Puce d’étatrounded-full border border-{rôle}-200 bg-{rôle}-50 px-2.5 py-1 text-xs font-semibold text-{rôle}-800
Statut avec pointrounded-full border border-neutral-200 bg-white px-3 py-1 text-[13px] font-medium text-neutral-700 + point h-1.5 w-1.5 bg-{rôle}-500
Presserounded-full bg-ember-700 px-3 py-1 text-xs font-semibold text-white
Étiquette de momentrounded-full border border-neutral-200 bg-neutral-50 px-3 py-1 text-[11px] font-semibold
Suggestion d’accueilrounded-full border border-neutral-200 bg-white px-3.5 py-2 text-sm font-medium text-neutral-600 hover:border-ember-200 hover:bg-ember-50 + icône 16 px text-ember-500
Pièce jointe du composeurrounded-lg px-2.5 py-1.5 text-xs font-medium ; neutre, en envoi neutral-600, en erreur danger
Offrerounded-full bg-ember-700 px-2 py-0.5 text-[11px] font-semibold text-white
Règle
Aucun dégradé dans une puce.

Code d’usage

Puce orange

inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold border-ember-200 bg-ember-50 text-ember-800

Onglets et segmentés

Deux composants : Tabs pour naviguer entre pages, Segmented pour changer de vue. Actifs sans ombre, cibles de 44 px.

Onglets et sélecteurs segmentés

AppSite

Aperçus vivants : cliquez pour changer

Segmented : segmenté gris

Tabs : souligné

Segmented pilule : deux choix

Segmented dans une fenêtre

Puces filtres

Onglets et segmentés
ÉlémentClasses
Tabsrole="tablist" ; onglet min-h-11 px-4 text-sm font-semibold ; filet border-b border-neutral-200 ; actif border-b-2 border-ember-500 text-neutral-950 ; repos text-neutral-500 hover:text-neutral-700
Segmentedpiste rounded-xl bg-neutral-100 p-1 ; segment min-h-11 sm:min-h-9 rounded-lg px-3.5 text-sm font-semibold ; actif border border-neutral-200 bg-white text-neutral-900 ; repos text-neutral-600 hover:text-neutral-900
Segmented pilulepiste rounded-full border border-neutral-200 bg-neutral-100 p-1 ; curseur blanc glissant en duration-base ; segments min-h-11 rounded-full px-4 text-sm font-semibold ; aria-pressed
Puces filtresmin-h-11 rounded-full border px-5 text-sm font-semibold ; actif border-neutral-200 bg-neutral-100 text-neutral-900
Clavierflèches, Début, Fin ; anneau de focus commun
Règle
Aucune ombre sur le segment actif : la bordure neutral-200 suffit.

Fenêtres et feuilles

Deux composants : Dialog sur bureau, Sheet sur téléphone. Un seul voile, une seule ombre : shadow-modal.

Fenêtre et feuille mobile

AppSite

Aperçu vivant

Anatomie et cotes

Anatomie de la fenêtre
ÉlémentValeur
Voilebg-neutral-900/40, animation motion-backdrop-in ; flou backdrop-blur-[2px] sur les visionneuses
Panneaurounded-2xl bg-white shadow-modal ; motion-sheet-in sur téléphone, motion-dialog-in sur bureau
Feuille mobilerounded-t-2xl ; poignée h-1 w-10 rounded-full bg-neutral-300 ; fermeture par glissement de plus de 80 px
Taillessm max-w-[26rem], md max-w-xl, lg max-w-4xl ; hauteur 90dvh en compact, 100dvh en feuille
Titrefont-satoshi text-xl font-bold text-neutral-900
Piedborder-t border-neutral-100 px-4 pt-3 pb-[max(env(safe-area-inset-bottom),0.75rem)]
Fermetureh-11 w-11 rounded-lg + X h-4 w-4
Accessibilitépiège à focus, Échap, retour du focus, portail vers document.body

Fenêtres du site

Fenêtres du site
FenêtreDétail
Inscriptioncarte max-w-[480px] rounded-3xl border, ombre shadow-modal
Préférences cookiespanneau max-w-[420px] rounded-3xl p-6, titre font-satoshi text-lg font-bold, fermeture size-10 rounded-full
Configurateur Équiperole="dialog", sm:max-w-[640px] sm:rounded-3xl, boutons Minus et Plus de 44 px
Bandeau cookiesfixed bottom-[max(1rem,env(safe-area-inset-bottom))] left-4 right-4 rounded-3xl border border-neutral-200 bg-white p-4 sm:max-w-[360px], sans ombre ; boutons min-h-11 rounded-xl

Infobulles

Un composant Tooltip. Tout bouton qui n’a qu’une icône reçoit une infobulle et un aria-label.

Infobulle

App

Aperçu vivant

Envoyer le messageSecond Cerveau
Anatomie de l’infobulle
ÉlémentValeur
Classesrounded-lg bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-50
Ombreaucune
Apparitionfondu de 150 ms au survol et au focus clavier
Accessibilitérole="tooltip" relié par aria-describedby
Texte tronquél’attribut title natif reste permis

Code d’usage

Infobulle

rounded-lg bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-50

Toasts

Un composant Toast et son fournisseur. Trois secondes, bas centré sur téléphone, bas droite sur bureau.

Toast

App

Aperçu vivant

Dossier enregistréLien copié
Anatomie du toast
ÉlémentValeur
Classesrounded-xl bg-neutral-900 px-4 py-3 text-sm text-white shadow-menu
Rôlerole="status"
Durée3 s
Positionfixed inset-x-4 bottom-4 sur téléphone ; sm:inset-x-auto sm:right-6 sm:w-96 sur bureau
SuccèsCheckCircle2 h-5 w-5 text-success-500
Célébrationmême toast ; confettis aux couleurs de la marque (#ff8c42, #f97316, #ffb374, #ffcfa3, #e7e5e4)

Code d’usage

Toast

rounded-xl bg-neutral-900 px-4 py-3 text-sm text-white shadow-menu

Cartes

Un seul style de carte : bordure neutral-200, sans ombre, sans dégradé. Rayon 24 px sur le site, 12 px dans l’application.

Cartes

AppSite

Aperçu vivant

Carte du site

Bordure neutral-200, sans ombre.

Carte cliquable

Survol : bordure ember-500. Focus : anneau ember-700.

Carte de l’app

Rayon 12 px, p-4, gap-3.

Espacements cotés

p-6 : 24 px
24 px
md:p-8 : 32 px
32 px
app : p-4 : 16 px
16 px
Cartes
CarteClasses
Siterounded-3xl border border-neutral-200 bg-white p-6 md:p-8
Site, cliquablerounded-3xl border border-neutral-200 bg-white p-6 md:p-8 transition-colors duration-base ease-motion motion-reduce:transition-none hover:border-ember-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2
Approunded-xl border border-neutral-200 bg-white p-4
App, cliquable+ hover:border-neutral-300 hover-lift et l’anneau de focus commun
Icône de carteh-11 w-11 rounded-xl bg-ember-50 text-ember-800
Carte de créditsrounded-xl border border-ember-200 bg-ember-50 px-4 py-3.5
Alertevoir Couleurs d’état : rounded-xl border px-4 py-3

Code d’usage

Carte du site

rounded-3xl border border-neutral-200 bg-white p-6 md:p-8

Carte de l’app

rounded-xl border border-neutral-200 bg-white p-4

Tableaux

Un style de tableau pour l’application, le chat compris : cadre de 12 px, en-tête neutral-100, filets neutral-200.

Tableau

App

Aperçu vivant

PosteStatut
MarchéÀ valider
OffreValidé
Anatomie d’un tableau
ÉlémentClasses
Cadreoverflow-hidden rounded-xl border border-neutral-200
En-têtebg-neutral-100 ; cellule px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.05em] text-neutral-600
Cellulepx-4 py-3 text-sm text-neutral-800
Ligneborder-t border-neutral-200 hover:bg-neutral-50
Tableau du chatmême style ; largeur de cellule au plus 250 px

États vides

Un composant EmptyState : cadre en tirets, titre court, texte, une action.

État vide

App

Aperçu vivant

Aucun dossier pour l’instant

Créez votre premier dossier pour retrouver ici vos documents.

Nouveau dossier
Anatomie d’un état vide
ÉlémentClasses
Cadrerounded-2xl border border-dashed border-neutral-300 bg-white px-6 py-10 text-center
Titretext-sm font-medium text-neutral-900
Textemx-auto mt-2 max-w-md text-sm text-neutral-500
Actionun bouton ember-500, 44 px
Grand titre d’état videfont-satoshi text-[22px] md:text-[26px]

Chargements

Spinner, squelettes, indicateurs de travail. Le chargement discret ne montre rien avant 300 ms.

Chargements

AppSite

Aperçus vivants

Spinner Loader2, trois tailles

121620

Trois points

Squelette

« Ember travaille »

Réfléchit…

Chargements
ChargementDétail
SpinnerLoader2 animate-spin : 16 px par défaut, 20 px pour une page, 12 px dans une puce
Squeletteopacité de 0,5 à 1 en 1,6 s sur bg-neutral-100 rounded-lg ou rounded-2xl
Ember travaillelogo de 18 px qui respire, libellé « Réfléchit… » en text-[13px] avec reflet de texte ; repli text-neutral-500 en mouvement réduit
Trois pointsh-1.5 w-1.5 rounded-full bg-ember-500
Réflexionmax-h-24 border-l border-neutral-100 pl-3 text-[13px] text-neutral-500
Chargement discret.motion-delayed-in : rien avant 300 ms

Barre de saisie

Le composeur du Second Cerveau, repris par le champ d’accueil du site : une seule surface de 24 px, de neutral-50 à blanc au focus, avec le même anneau que les champs, sans ombre.

Barre de saisie

AppSite

Aperçu vivant : cliquez dans le champ

Les boutons, de gauche à droite

« + » : bg-neutral-100
Joindre, dicter : text-neutral-500
Dictée active : bg-danger-500 + ring-4
Envoyer, actif : bg-ember-500
Envoyer, inactif : bg-neutral-100
Arrêter : bg-neutral-800

Anatomie et cotes

Anatomie du composeur
ÉlémentClasses
Cadrebg-white px-4 pb-[max(env(safe-area-inset-bottom,0px),12px)] pt-3 md:px-8 ; contenu mx-auto max-w-3xl
Surfacerelative rounded-3xl border border-neutral-200 bg-neutral-50 transition-all duration-base ease-motion focus-within:border-ember-700 focus-within:bg-white focus-within:ring-2 focus-within:ring-ember-700/25
Ligneflex items-end gap-1.5 px-2.5 py-2
Zone de textemin-h-11 lg:min-h-9 flex-1 resize-none bg-transparent px-2 text-base leading-5 text-neutral-800 placeholder:text-neutral-400 md:text-sm ; max-h-[160px]
Texte indicatif animécurseur .composer-typewriter-caret de 1 px, clignotement de 1 s
Boutonsh-11 w-11 lg:h-9 lg:w-9 rounded-full ; icône 16 px, « + » 20 px
Envoyeractif bg-ember-500 text-white hover:bg-ember-600 ; inactif bg-neutral-100 text-neutral-400 ; ArrowUp h-4 w-4 ; mode FYG et site : même bouton
Glisser-déposerborder-ember-400 bg-ember-50/50 ring-2 ring-ember-500/20 ; voile bg-ember-50/80 backdrop-blur-[2px]
Mode sombrele cadre perd fond, bordure et ombre ; le halo est masqué
surface : rayon 24 pxligne : 10 px de marge, 6 px d’écartboutons : 44 px, 36 px dès 1 024 px

Code d’usage

Surface

relative rounded-3xl border border-neutral-200 bg-neutral-50 transition-all duration-base ease-motion focus-within:border-ember-700 focus-within:bg-white focus-within:ring-2 focus-within:ring-ember-700/25

Bulles de conversation

L’utilisateur a une bulle grise à droite. L’assistant n’a pas de bulle : son texte est libre, à gauche.

Messages

App

Aperçu vivant

Prépare mon dossier pour un prêt d’honneur.

Voici le plan que je propose. Les hypothèses restent à confirmer avant l’envoi.

const total = brique + brique;

Retour en bas
Anatomie des messages
ÉlémentClasses
Utilisateurà droite, max-w-[85%] ; whitespace-pre-wrap rounded-xl bg-neutral-100 py-2.5 pl-4 pr-12 text-[15px] text-neutral-800 ; bouton Copier en haut à droite, visible au survol ou au focus
Assistantpas de bulle : max-w-[92%] text-[15px] leading-relaxed text-neutral-800
Cadres de réponse (code, citation)overflow-hidden rounded-xl border border-neutral-300 bg-neutral-50 ; marge 16 px ; sans ombre ni filet orange
Bouton Copier d’un cadrezone de 40 × 40 px, visible au survol, au clavier et toujours sur écran tactile
Code en lignefond #f5f5f4, rayon 4 px, 0,85em, graisse 500, sans orange
Retour en basrounded-full border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700 + ArrowDown h-3.5 w-3.5, sans ombre
Image jointevignette h-24 w-24 rounded-lg object-cover
Actions sous une réponsegrid h-11 w-11 lg:h-8 lg:w-8 rounded-lg text-neutral-500 hover:bg-neutral-100

Cartes email et image

Les livrables du chat : un email à envoyer, une image ou une vidéo générée.

Carte email

App

Aperçu vivant

Email
Àdestinataire
ObjetRendez-vous

Bonjour, voici notre offre. Nous restons disponibles pour en parler.

DéplierEnvoyer
Anatomie de la carte email
ÉlémentDétail
Cadreoverflow-hidden rounded-xl border border-neutral-300 bg-neutral-50
Bandeaumin-h-11, icône Mail h-3.5 w-3.5, libellé de 11 px en majuscules
Feuillefond blanc
En-têtesborder-b border-neutral-200 px-4 py-2 text-[13px] leading-5 ; libellé w-12 text-neutral-500
Corpspx-4 py-4 text-[14px] leading-6 text-neutral-800 ; repli animé en 280 ms, fondu blanc de 48 px
Dépliermin-h-11 rounded-lg px-2 text-[13px] font-medium
Envoyerpetit CTA ember-700 de 32 px, zone tactile de 44 px par pseudo-élément
Squeletteanimate-pulse, barres h-3 rounded bg-neutral-100

Cartes image et vidéo

App

Aperçu vivant

Télécharger
Cartes image et vidéo
CarteClasses
Image généréerounded-xl, max-h-[560px] object-contain, cursor-zoom-in ; téléchargement min-h-9 rounded-full bg-neutral-900/60 px-3 text-xs text-white, visible au survol sur bureau et toujours sur écran tactile
Vidéorounded-xl border border-neutral-200 bg-white ; lecteur bg-neutral-900, lecture h-9 w-9 rounded-full bg-white, progression h-1.5 bg-white/30
Rangées de médias.chat-media-row