DOSS · Ticket 3
Design system
Tokens dark galaxy et composants de base réutilisables. Cette page sert de référence visuelle pour l'ensemble de la dApp et sera retirée du layout principal au Ticket 4.
Tokens — palette
deep
#0a0a0f
card
#111118
elevated
#16161f
hover
#252535
subtle
#2a2a3a
strong
#3a3a4f
primary
#f5f5fa
secondary
#a0a0b8
muted
#6a6a82
orange
#ff8c42
orange-hover
#ff7a28
green
#10b981
red
#ef4444
purple
#a855f7
teal
#14b8a6
pink
#ec4899
blue
#3b82f6
yellow
#fbbf24
gold
#f5b315
purple-soft
#c084fc
blue-soft
#60a5fa
red-soft
#f87171
pink-soft
#f472b6
Boutons
Variants
Tailles
États
Inputs
Champ de saisie standard
Cliquer sur l'œil pour afficher/masquer
Adresse non reconnue dans la whitelist
Multi-lignes, redimensionnable
Cards
Card par défaut
variant="default"
Fond bg-card, bordure subtile.
Card surélevée
variant="elevated"
Fond bg-elevated + ombre portée.
Card bordée
variant="bordered"
Bordure border-strong visible.
Avec footer optionnel
Modal
Fermeture sur clic overlay ou touche Esc
Toasts
Avatars — dégradé dérivé de l'adresse Minima
Tailles
sm
md
lg
xl
repli
Les sept paires de la palette. Deux adresses différentes tombent sur des dominantes différentes ; la même adresse retombe toujours sur la même paire.
orange → pink
purple → blue
teal → green
pink → purple
blue → teal
green → teal
red → pink
Initiales sur dégradé
Contraste mesuré sur chacun des neuf accents. Cible 4,5:1 ; plancher 3:1 pour du gras d'au moins 14 px — les neuf sont au-dessus de la cible. Les initiales sont sombres partout, par une constante unique du design system.
orange
8,54
green
7,79
teal
7,93
blue
5,37
purple
4,99
pink
5,60
red
5,25
yellow
11,83
gold
10,67
Tuiles d'icône et points de statut
Teintée
Dégradé
Tailles
Points
Halo
Pastilles
Teintée
Pleine
À point
Chiffres-clés
Progression
Barre à marqueur de seuil, sous le seuil. Le marqueur est toujours à mi-course. ⚠️ Aucun repère chiffré sous la barre : l'échelle est une affaire interne, et un nombre sans référent posé à côté d'un solde se lirait comme un plafond.
Le même composant avec un solde seize fois supérieur à l'échelle : le remplissage est écrêté et le marqueur reste à mi-course. Le solde, lui, s'affiche en entier au-dessus de la barre — jamais écrêté.
Sans seuil
Anneaux
Stepper
- Nomination
- Consentement
- Acceptation
- Nomination
- Consentement
- Acceptation
Trois états et seulement trois. Un objet abandonné ne rend AUCUN pas courant — le stepper n'est alors pas rendu du tout, plutôt que d'affirmer une étape qui n'a pas eu lieu.
Cartes — accent, liseré, survol, apparition
Liseré signature
topRule
Orange → rose → violet, le liseré de la carte MERCI des prototypes.
Carte teintée
accent + wash + topRule
La bordure colorée se rend enfin : elle est CHOISIE par le composant, pas empilée par-dessus la bordure discrète.
Cliquable
interactive + appear
Survole-la : remontée de 2 px et ombre. Elle est aussi apparue au montage.
Onglets
Lignes de liste et en-têtes de section
- ClarificationCréation d'une campagne de crowdfunding
- RéactionsTest création de cercle
- AdoptéeProgramme de formation blockchain
Résumé exécutif
Synthèse en quelques lignes de la proposition (objectif, moyens, résultat attendu).
Budget
Détail des postes de dépense et source de financement.
États vides
Aucune proposition pour l'instant.
Les propositions soumises par les membres des cercles que tu as rejoints apparaîtront ici.
Aucune tâche
Seuil de décision
Le seuil affiché partout dans l'application vaut 72 MERCI, et il est lu depuis le module de gouvernance — jamais écrit en dur dans une chaîne. La comparaison passe par le seul opérateur du domaine.