kemu-ui

Design system

Tokens générés depuis Figma. Composants et tokens, light / dark, desktop / mobile.

Button

Figma Action/Button et Action/Icon button. Survol, appui et focus clavier (Tab) sont interactifs.

variantsize=smsize=mdsize=lgdisabledloadingicônes
primary
secondary
outline
ghost
destructive
link

Icon button (aria-label obligatoire)

asChild : un lien habillé en bouton

kemu.re

Input et Field

Figma Form/Input et Form/Field. Survol, focus clavier et saisie sont interactifs.

size=sm

https://
€

size=md

https://
€

size=lg

https://
€

Field : libellé, aide, message, compteur

Nous ne la partagerons jamais.

Disponible.

5/20

Attribuée automatiquement.

Badge

Figma Content/Badge. Non interactif.

size=sm

neutralprimarysecondarysuccesswarningerrorinfoprimary-soliderror-solid
neutralprimarysecondarysuccesswarningerrorinfoprimary-soliderror-solid

size=md

neutralprimarysecondarysuccesswarningerrorinfoprimary-soliderror-solid
neutralprimarysecondarysuccesswarningerrorinfoprimary-soliderror-solid

Dialog

Figma Overlay/Dialog sur Overlay/Scrim. Le voile ferme au clic, sauf en destructive.

Select

Figma Form/Select, Form/Listbox, Form/Option. Clavier : flèches, Entrée, Échap.

size=sm

size=md

size=lg

Card (provisoire)

Pas de composant Figma : surface, bordure et élévation tirées des descriptions des tokens, géométrie du Dialog.

Refonte site

En cours

elevation=1. 24 fichiers, dernière modification il y a 2 h.

Le contenu de la carte est libre : texte, liste, formulaire, tableau.

Refonte site

En cours

elevation=0. 24 fichiers, dernière modification il y a 2 h.

Le contenu de la carte est libre : texte, liste, formulaire, tableau.

Couleurs sémantiques

Chaque pastille lit var(--nom) : elle suit le mode light / dark.

bg

  • bg/defaultwhite / neutral/950
  • bg/subtleneutral/50 / neutral/900
  • bg/surfacewhite / neutral/900
  • bg/surface-raisedwhite / neutral/800
  • bg/overlayblack-alpha/40 / black-alpha/60
  • bg/inverseneutral/900 / neutral/50

text

  • text/primaryneutral/950 / neutral/50
  • text/secondaryneutral/600 / neutral/300
  • text/mutedneutral/500 / neutral/400
  • text/disabledneutral/400 / neutral/600
  • text/inversewhite / neutral/950
  • text/on-primarywhite / white
  • text/on-secondarywhite / white
  • text/on-statuswhite / white
  • text/linkprimary/600 / primary/400

border

  • border/defaultneutral/200 / neutral/800
  • border/subtleneutral/100 / neutral/900
  • border/strongneutral/500 / neutral/500
  • border/focusprimary/600 / primary/400

primary

  • primary/defaultprimary/600 / primary/600
  • primary/hoverprimary/700 / primary/700
  • primary/pressedprimary/800 / primary/800
  • primary/subtleprimary/50 / primary/950
  • primary/subtle-hoverprimary/100 / primary/900
  • primary/borderprimary/200 / primary/800
  • primary/textprimary/700 / primary/300

secondary

  • secondary/defaultsecondary/600 / secondary/600
  • secondary/hoversecondary/700 / secondary/700
  • secondary/pressedsecondary/800 / secondary/800
  • secondary/subtlesecondary/50 / secondary/950
  • secondary/subtle-hoversecondary/100 / secondary/900
  • secondary/bordersecondary/200 / secondary/800
  • secondary/textsecondary/700 / secondary/300

success

  • success/defaultsuccess/700 / success/700
  • success/subtlesuccess/50 / success/950
  • success/bordersuccess/200 / success/800
  • success/textsuccess/700 / success/300

warning

  • warning/defaultwarning/700 / warning/700
  • warning/subtlewarning/50 / warning/950
  • warning/borderwarning/200 / warning/800
  • warning/textwarning/800 / warning/300

error

  • error/defaulterror/600 / error/600
  • error/hovererror/700 / error/700
  • error/pressederror/800 / error/800
  • error/subtleerror/50 / error/950
  • error/bordererror/200 / error/800
  • error/texterror/700 / error/300

info

  • info/defaultinfo/700 / info/700
  • info/subtleinfo/50 / info/950
  • info/borderinfo/200 / info/800
  • info/textinfo/700 / info/300

state

  • state/hover-overlayblack-alpha/5 / white-alpha/5
  • state/pressed-overlayblack-alpha/10 / white-alpha/10
  • state/disabled-bgneutral/100 / neutral/800

shadow

  • shadow/softblack-alpha/5 / black-alpha/20
  • shadow/strongblack-alpha/10 / black-alpha/40

Styles de texte

Classe text-<style>. Taille et interligne changent sous 768 px.

  • text-display-lg

    Portez ce vieux whisky au juge blond qui fume

  • text-display-md

    Portez ce vieux whisky au juge blond qui fume

  • text-heading-h1

    Portez ce vieux whisky au juge blond qui fume

  • text-heading-h2

    Portez ce vieux whisky au juge blond qui fume

  • text-heading-h3

    Portez ce vieux whisky au juge blond qui fume

  • text-heading-h4

    Portez ce vieux whisky au juge blond qui fume

  • text-heading-h5

    Portez ce vieux whisky au juge blond qui fume

  • text-heading-h6

    Portez ce vieux whisky au juge blond qui fume

  • text-body-lg

    Portez ce vieux whisky au juge blond qui fume

  • text-body-md

    Portez ce vieux whisky au juge blond qui fume

  • text-body-sm

    Portez ce vieux whisky au juge blond qui fume

  • text-label-lg

    Portez ce vieux whisky au juge blond qui fume

  • text-label-md

    Portez ce vieux whisky au juge blond qui fume

  • text-label-sm

    Portez ce vieux whisky au juge blond qui fume

  • text-caption

    Portez ce vieux whisky au juge blond qui fume

  • text-overline

    Portez ce vieux whisky au juge blond qui fume

  • text-code

    Portez ce vieux whisky au juge blond qui fume

Élévations et focus

shadow-elevation-N et shadow-focus-ring. Les couleurs d'ombre suivent le mode.

elevation/0
elevation/1
elevation/2
elevation/3
elevation/4

Responsive

Valeurs mobile par défaut, desktop à partir de 768 px (48rem).

  • --font-size-display-lgfont-size/36 → font-size/60
  • --line-height-display-lgline-height/44 → line-height/68
  • --font-size-display-mdfont-size/30 → font-size/48
  • --line-height-display-mdline-height/36 → line-height/56
  • --font-size-heading-h1font-size/30 → font-size/36
  • --line-height-heading-h1line-height/36 → line-height/44
  • --font-size-heading-h2font-size/24 → font-size/30
  • --line-height-heading-h2line-height/32 → line-height/36
  • --font-size-heading-h3font-size/20 → font-size/24
  • --line-height-heading-h3line-height/28 → line-height/32
  • --font-size-heading-h4font-size/18 → font-size/20
  • --line-height-heading-h4line-height/24 → line-height/28
  • --layout-page-paddingspace/16 → space/32
  • --layout-section-gapspace/64 → space/96
  • --layout-gutterspace/16 → space/24
  • --letter-spacing-display-lg-0.72px → -1.2px
  • --letter-spacing-display-md-0.6px → -0.96px
  • --letter-spacing-heading-h1-0.6px → -0.72px
  • --letter-spacing-heading-h2-0.48px → -0.6px
  • --letter-spacing-heading-h3-0.2px → -0.24px
  • --letter-spacing-heading-h4-0.18px → -0.2px