Tokens
Trois niveaux : les primitives portent les valeurs brutes, les tokens sémantiques portent les rôles, et chaque application ne déclare qu'une teinte dont tout le reste est dérivé.
Accent par application
Une teinte et une saturation par application. Les six nuances ci-dessous en sont calculées, et le thème sombre ne redéfinit que des clartés.
data-app="home"
data-app="calendar"
data-app="contact"
data-app="todo"
data-app="note"
data-app="recipe"
data-app="photo"
data-app="weather"
data-app="calculator"
data-app="settings"
Surfaces et texte
Les rôles que consomment les composants. Ils basculent seuls entre thème clair et sombre.
canvas
surface
surface-raised
surface-sunken
border
border-strong
text
text-muted
États
Danger, avertissement, succès, information : mêmes formules de dérivation que l'accent, sur des teintes fixes.
Typographie
L'échelle part de 15 pixels : 16 force des retours à la ligne trop tôt dans les listes denses, 14 fatigue en lecture longue.
4xl
Trois heures avant le dîner
3xl
Trois heures avant le dîner
2xl
Trois heures avant le dîner
xl
Trois heures avant le dîner
lg
Trois heures avant le dîner
base
Trois heures avant le dîner
sm
Trois heures avant le dîner
xs
Trois heures avant le dîner
2xs
Trois heures avant le dîner
Rayons et élévation
xs
sm
md
lg
xl
2xl
shadow-sm
shadow-md
shadow-lg
Ergonomie tactile
44 pixels est le plancher en deçà duquel une cible devient inconfortable au pouce. Toute commande interactive l'atteint, au besoin par une zone débordant son dessin.
--oxy-touch-target — appliqué aux boutons, aux lignes de liste,
aux champs et aux commandes à icône.