Tokens

Deux niveaux : les primitives portent les valeurs brutes de COSMIC, les tokens sémantiques portent les rôles. Le bureau n'a qu'une couleur et qu'un arrondi, choisis sous les Réglages.

Les neuf accents de COSMIC

Une seule couleur pour tout le bureau, choisie sous les Réglages. Chaque accent existe en deux versions qui ne se déduisent pas l'une de l'autre : le thème clair prend la profonde, le sombre la vive.

Bleu blue


                                    #00525a


                                    #63d0df

Indigo indigo


                                    #2e496d


                                    #a1c0eb

Violet purple


                                    #68217c


                                    #e79cfe

Rose pink


                                    #86043a


                                    #ff9cb1

Rouge red


                                    #78292e


                                    #fda1a0

Orange orange


                                    #624000


                                    #ffad00

Jaune yellow


                                    #534800


                                    #f7e062

Vert green


                                    #185529


                                    #92cf9c

Gris chaud warm-grey


                                    #554742


                                    #cabab4

Les nuances de l'accent en cours

Elles ne sont pas recopiées mais mélangées à la surface qui les porte : elles restent donc justes quel que soit l'accent, y compris importé d'un thème COSMIC.

subtle

muted

border

accent

strong

text

Les trois arrondis

Trois valeurs et non un curseur : une échelle de rayons se lit par ses rapports — un bouton plus rond qu'une carte —, qu'un réglage continu aplatirait.

Arrondi

Légèrement arrondi

Carré

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 : les couleurs vives de COSMIC, dont les nuances se mélangent à la surface comme celles de l'accent.

Une information de contexte, sans urgence.

L'enregistrement a réussi.

Ce calendrier n'est plus synchronisé depuis trois jours.

Impossible de lire le fichier vCard : ligne 12 invalide.

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.

44px

--oxy-touch-target — appliqué aux boutons, aux lignes de liste, aux champs et aux commandes à icône.