Charte graphique

Référence des couleurs, typographies et composants du produit. Les valeurs proviennent directement des tokens de l’application — cette page est le contrat, le code fait foi.

Logo

Le monogramme « M » blanc sur carré noir arrondi est l’icône universelle (favicon, app). Le wordmark s’écrit toujours en capitales espacées.

Icône · fond clair

Icône · fond sombre

MOLEHASHWordmark · tracking 0.16em

Couleurs — fondations

Le produit est sombre par défaut : un noir bleuté profond, des surfaces à peine plus claires, des bordures blanches à 6 % d’opacité. Jamais de gris pur.

Fond

#08080C

arrière-plan global

Carte

#111118

cards, popovers

Surface

#16161E

éléments secondaires, hover

Texte

#F0F0F5

texte principal (sombre)

Texte atténué

#6B6B80

légendes, méta

Couleurs — accents & sémantique

L’émeraude est la couleur d’action de la marque. Les couleurs d’état (en ligne / hors ligne / alerte) sont sémantiques et ne servent jamais à décorer.

Émeraude

#10B981

actions, positif, en ligne

Indigo

#6366F1

primaire sidebar, focus, graphes

Ambre

#F59E0B

avertissement, dégradé

Rouge

#EF4444

erreur, hors ligne, destructif

Violet

#A855F7

graphes (série 4)

Typographie

Deux familles seulement : Geist pour l’interface, Geist Mono pour tout ce qui est donnée — adresses IP, hashrates, numéros de série. Micro-libellés en capitales, espacement large.

Titre · Geist 800 · 28pxFleet Manager

Sous-titre · Geist 700 · 18pxTexas Site A — 24 miners

Corps · Geist 400 · 14pxLe Mole agent scanne votre réseau local et remonte la télémétrie des ASIC vers le dashboard.

Micro-libellé · 700 · 10pxHashrate · Power Demand · Fleet Uptime

Donnée · Geist Mono · tabular359.2 PH/s · 10.0.0.103 · 72°C · v3.276.0

Composants

Rayon de base 10px (--radius: 0.625rem), icônes Lucide, états toujours doublés d’une pastille de couleur.

Boutons

Add RackExport CSVDelete

Badges d’état

onlineofflinewarning

Tuile KPI

0.045 BTC

Daily Est. · lien cliquable vers l’onglet source

Règles d’usage

Fond teinté, jamais opaque : les aplats de couleur s’utilisent en transparence (8–12 %) avec une bordure assortie à ~30 % — jamais en fond plein derrière du texte.
La sémantique d’abord : vert = opérationnel, rouge = hors ligne/erreur, ambre = dégradé. Ne pas réutiliser ces teintes pour décorer.
Mono pour les données : toute valeur mesurée ou identifiant (IP, S/N, hashrate, version) passe en Geist Mono, chiffres tabulaires.
Thème clair : mêmes tokens, valeurs inversées — accents assombris pour garder un contraste AA minimum.
Logo : le « M » reste blanc sur noir dans les deux thèmes ; zone de protection = ½ largeur du carré ; pas de rotation, d’ombre portée ni de dégradé.