Couleur
Les couleurs raisonnables sont saturées et font vibrer l’interface. Il existe 24 valeurs de 6 teintes. Mais certaines sont plus communes et ont une utilisation spécifique.
Rouge
Le rouge red.400 est propre aux valeurs cœur et carreau .
| Couleur | Nom | Valeur |
|---|---|---|
| red.100 | #fff8f6 | |
| red.200 | #ffddd8 | |
| red.300 | #ff4647 | |
| red.400 | #e0002b | |
| red.500 | #830014 | |
| red.600 | #530003 |
Orange
Les boutons qui suggèrent une action destructive utilisent le orange orange.400. Par exemple, pour quitter un jeu.
| Couleur | Nom | Valeur |
|---|---|---|
| orange.100 | #fff8f5 | |
| orange.200 | #ffded1 | |
| orange.300 | #fd4d00 | |
| orange.400 | #cd3c00 | |
| orange.500 | #752100 | |
| orange.600 | #401600 |
Jaune
En jeu, le jaune yellow.200 signifie qu’un effet est appliqué. Un libellé doit toujours décrire l’effet. La couleur jaune ne peut à elle seule signifier un effet.
| Couleur | Nom | Valeur |
|---|---|---|
| yellow.100 | #fff9e5 | |
| yellow.200 | #ffe53e | |
| yellow.300 | #9c8b00 | |
| yellow.400 | #7d6f00 | |
| yellow.500 | #463d00 | |
| yellow.600 | #292300 |
Ambre
| Couleur | Nom | Valeur |
|---|---|---|
| amber.100 | #fff8ef | |
| amber.200 | #ffe0b2 | |
| amber.300 | #b98300 | |
| amber.400 | #926700 | |
| amber.500 | #523800 | |
| amber.600 | #302100 |
Vert
Les boutons qui suggèrent une action de commencement utilisent le vert green.400. Par exemple, pour commencer un jeu.
| Couleur | Nom | Valeur |
|---|---|---|
| green.100 | #dcffe6 | |
| green.200 | #5dffa2 | |
| green.300 | #00a05a | |
| green.400 | #008147 | |
| green.500 | #004825 | |
| green.600 | #002812 |
Bleu
Les autres boutons sont bleus blue.400. Lorsque les boutons ne sont pas bleus, ils sont contenus dans une boite bleue.
| Couleur | Nom | Valeur |
|---|---|---|
| blue.100 | #f3f3ff | |
| blue.200 | #deddff | |
| blue.300 | #657eff | |
| blue.400 | #0061fc | |
| blue.500 | #00328a | |
| blue.600 | #001649 |
Neutre
La couleur neutre est utile un peu partout.
Comme le rouge, les couleur neutre foncées, ou le noir, sont propres aux valeurs pique et trèfle
| Couleur | Nom | Valeur |
|---|---|---|
| gray.100 | #f6f6f6 | |
| gray.200 | #e2e2e2 | |
| gray.300 | #8b8b8b | |
| gray.400 | #6f6f6f | |
| gray.500 | #3e3e3e | |
| gray.600 | #222222 |