Design Zetamind · Révision 6
Système des applis et pages livrées à Cédric
24
composants du kit, repris de Moon Morning. Gravé le 4 octobre 2026, sans révision plus récente trouvée.
- Un écran, une chose.Ce qui n'aide pas à décider disparaît.
- Une appli d'actions.Chaque bouton ouvre une page dédiée.
- Images avant mots.Visuel héros et grand chiffre.
- Une seule action visible.Bouton principal 52 px (blanc en sombre, noir en clair), zone du pouce.
- Noir, blanc, gris.Couleur = fil spectral, pour le vivant.
- Pas de cartes.Espace ou filet 9 %.
- Tout à 1 toucher.Pas de niveaux « ‹ Section ».
- Tout se manipule.Appui long, glisser, toucher.
- Annuler plutôt que confirmer.« Annuler » pendant 5 s.
- Données réelles.Sinon « non instrumenté » en gris.
Écrans de référence
Captures réelles de Moon Morning (skill zetamind-design).
Couleurs et typographie
Révision 6 : clair et sombre. La page suit le réglage du système ; la bascule force un thème (mémorisé). Chaque jeton garde son rôle dans les deux ; ce qui est blanc en sombre (bouton principal) devient noir en clair.
Sombre
#000#f5f5f7#98989d#7c7c80#1c1c1eblanc 9 %#30d158#ff453aClair
#fff#1d1d1f#58585d#6e6e73#f2f2f7noir 9 %#1f9d41#d70015Fil spectral, seule couleur vive : 22e4ff · 3d7bff · 8b5cf6 · c026d3 · ff4fa3 · ff8a3d · ffd84d · 5cffb0 ; en clair, mêmes teintes assombries : 0099ae · 3d7bff · 8b5cf6 · c026d3 · ff3395 · ec5e00 · ac8600 · 00a053
Police du système, jamais de 700, de capitales espacées ni de monospace décoratif. Marges 20 px, colonne 640 px, cibles ≥ 44 px, icônes Lucide trait 1,5.
Héros, anneaux, graphes
Les visuels de Moon Morning reproduits depuis le code (aura-kit/ui et pages réelles). Un visuel signature par écran, blanc fin sur noir ; le fil spectral seulement pour ce qui est en cours. Toutes les valeurs affichées sont des exemples.
FilSpectralanneau · contour · trait · 1 px, 12 s par tour
Vivant seulement : mini-anneau Accueil, anneau d'une action en cours, bouton qui travaille, pilule en cours.
AnneauProgresvaleur 0–1 · null = pointillés · actif = fil qui tourne
Arc --texte (blanc en sombre, noir en clair) sur piste --surface, trait 2 px ; exemple : tâches du jour.
Halolueur radiale blanche · 8 % par défaut, 12 % au plus · aucun halo en clair
Posé par PageDediee derrière le héros, jamais coloré ; à gauche 8 %, à droite 12 %.
EnTeteHeros4 variantes réelles · chiffre 56 ou 44, poids 300 · 2 à 4 stats
Messages · chiffre, légende, anneaux
Toucher une source filtre la liste ; les autres s'atténuent. Exemple.
Services · anneau et chiffre
Un point par service : vert, rouge, gris = sans sonde. Stats touchables. Exemple.
Agenda · surtitre et rangée d'icônes
Charge de la journée, courbe et frise ; exemple du samedi 3 octobre.
Machines · visuel et verdict
Verdict « en ligne » sous le visuel ; Cerveau suit le même ordre (constellation plus bas). Exemple.
PageDedieeen-tête 44 px · héros sur halo · contenu · bouton blanc collé en bas
accueil (maquette)
Services
Services
1 hors ligne- sauvegardehors ligne
- serveur principalen ligne
- transcriptionen ligne
- imprimantesans sonde
Source : serveur, 16:30 (exemple)
Maquette interactive : ✕ ou le mini-anneau referment, « Rafraîchir » montre le bouton qui travaille.
GrapheBarresbarres 2 px · courant en --texte (blanc en sombre, noir en clair) · null = point pâle
Semaine · éléments par jour
Processeur sur 24 h · %
Minutes de voix par jour
Point pâle = non mesuré ; toucher un jour le met en blanc. Exemple.
GrapheCourbecourbe monotone · lueur 10 % · repère « maintenant » · futur atténué
En haut : charge d'une journée, exemple. En bas : moins de 2 points, rien d'inventé.
Frise AxeTempssegments sur un axe horaire · point « maintenant »
Rendez-vous en blanc, tâches planifiées en gris, 7 h à minuit. Exemple.
Cadranalarme · 24 h, minuit en haut · deux molettes
Faire défiler les molettes (ou flèches) : l'arc blanc = temps avant de sonner. Maintenant fixé à 16:30, exemple.
Matrice MiniMatricetâches · 2 × 2 · anneau du jour au croisement
Toucher une case filtre la liste ; MiniMatrice dit où une tâche est rangée. Exemple.
ConstellationCerveau · 8 composants autour du cœur · verdict
Un composant débranché : trait en pointillés, point rouge. Exemple.
HistoMachinesprocesseur · mémoire · disque, par machine
Barre blanche = mesure la plus chargée ; hors ligne : points pâles. Exemple.
AnneauEnregistrementEnregistrer · anneau 216 · prêt, en cours, envoyé
Niveau du micro simulé pour la démonstration ; chrono réel.
Listes, gestes, formulaires, états
Les composants du kit de Moon Morning (aura-kit/ui), reproduits avec leurs props et leurs règles. Toucher, appui long (ou clic droit), glisser une ligne : tout fonctionne. Toutes les valeurs affichées sont des exemples.
IconeCercleicône cerclée · 44 / 56 px
Trait 1 px --trait-icone (blanc 24 % en sombre, noir 28 % en clair), 64 % pour l'élément courant ; icône 20 px jusqu'à 48 px de cercle, 24 px au-delà. Purement visuelle : le bouton qui l'entoure porte le libellé. Le fil seulement si ça travaille.
PucePucesdéclencheurs 44 px · rangée qui défile
Enregistrer : actif (le déclencheur tourne) · Agent : désactivé · toucher pour basculer
variante filtre (page Messages) : choisi = surface #1c1c1e et trait 64 %
Icône + verbe, jamais d'icône seule. Le fil seulement pour un déclencheur qui tourne ; un filtre choisi prend la surface, jamais le fil. La rangée défile sans changer de page.
PointsIconesdecouperEnPointsjamais de pavé
decouperEnPoints(pavé) → PointsIcones
avec icône et ligne grise (exemple)
- Idée : un résumé vocal de 2 minutes avant 8 h
- Revenu : 40 € par mois et par clientestimation
Au-delà de 3 lignes, des points. Découpe : puces existantes, sinon paragraphes, sinon phrases ; le texte est gardé mot pour mot, 8 points au plus (le reste rejoint le dernier).
TexteRepliecoupé à 3 lignes, « Lire tout »
texte long (exemple) : le bouton apparaît
texte court : rien à déplier, pas de bouton
Le bouton n'existe que si le texte dépasse vraiment : mesuré, puis re-mesuré quand la largeur change. Les retours à la ligne sont gardés.
LigneElementla ligne standard · 56 px, 64 avec visuel
toucher une ligne, ou appui long 450 ms (clic droit sur ordinateur)
Un seul visuel à gauche : icône cerclée, heure, vignette, pastille ou libre. Toucher = détail (› si une cible) ; appui long = feuille d'actions, titrée par la ligne ; glisser = actions de côté. Valeur à droite en gris 15, sous-valeur 12.
LigneGlissablela ligne suit le doigt
glisser → fait, reporter · ← supprimer · appui long : plus
Vers la droite : la suite (Fait, Reporter, Rappel, Alarme, Répondre). Vers la gauche : la fin (Supprimer, Vu). Actions monochromes de 72 px, la principale au bord extérieur ; relâcher au-delà de 40 % de la largeur l'exécute. Une seule ligne ouverte à la fois. Supprimer seul est rouge, la ligne sort et « Annuler » reste 5 s.
ListeMetadonneesmétadonnées en lignes, jamais en phrase
Ligne 48 px : icône 20 px grise, libellé 12 px au-dessus, valeur 16 px. › si on peut toucher, ↗ si ça sort de l'appli. Une valeur vide : la ligne disparaît.
Interrupteurligne façon Réglages
Toute la ligne est la cible (52 px). Monochrome : piste --surface à l'arrêt, --texte en marche (blanche en sombre, noire en clair). Jamais de vert.
Sectionen-tête de section du gabarit Page héros
Services
1 hors ligneavec « Tout voir » : tout l'en-tête est le bouton · sans : en-tête simple, compte gris à droite
Icône cerclée 44 + titre 17/500 + compte gris 13 + « Tout voir › ». Le même en-tête partout : une page qui le réinvente est un défaut.
CarteActionune action prête à partir
L'action est le verbe, pas la description. Bouton « Lancer » en pilule #1c1c1e ; lancé, il devient « En cours » avec le fil et se désactive. Pas de fond ni de bordure de carte.
PiluleEnCoursstatut du système toujours visible
dans l'appli : flottante au-dessus des 3 points de page ; ici posée dans la page. Suit les cartes ci-dessus.
Une seule à la fois, priorité appel, enregistrement, agent, podcast. Contour fil, mini-anneau 20 px, libellé, chrono, arrêt 44 px. Rien en cours : elle se cache.
BandeauMajmise à jour de l'APK
version 3.5 : exemple
Pilule sobre, jamais blanche. Fermée, elle ne revient que pour une version plus récente. Rien hors de l'APK.
EtatVideerreur · chargement · vide · compact
erreur, avec Réessayer
chargement
Chargement…
vide
Rien pour aujourd'hui.
compact (légende d'un héros)
Données indisponibles · Serveur indisponibleUne seule formulation pour une même panne sur toutes les pages. Erreur = point rouge 6 px, jamais de texte rouge. « Réessayer » en pilule #1c1c1e : le bouton blanc reste unique à l'écran.
BoutonPrincipalblanc, 52 px, zone du pouce
repos (toucher : il travaille 2 s)
travaille : noir, contour fil
désactivé : 35 %
Une seule action pleine par écran, blanche en sombre, noire en clair (ici trois états côte à côte pour la référence). Les autres actions sont des pilules --surface, du texte ou des lignes.
champsaisie du pied de page Tâches
essayer « Appeler Marc » puis « RDV dentiste 14h » · la tâche ajoutée rejoint la liste ci-dessous
Champ pilule #1c1c1e, 52 px, texte 17. Envoyer : rond blanc, 35 % tant que c'est vide ; pendant l'envoi, noir avec le fil. Une heure ou « rdv » dans le texte : une ligne grise prévient.
LigneElementgauche = casechecklist de la page Tâches
Aujourd'hui
glisser → fait, reporter · ← supprimer · appui long : plus
Faites aujourd'hui
tâches et créneaux : exemples · à droite, la mini-matrice (case de priorité)
La case est le visuel gauche libre de la ligne (cercle 22 px dans une cible de 44). Cochée : blanche, titre barré ; faite : surface grise. Un créneau planifié par Claudia montre son heure à la même place.
tabletableau sobre · prix, temps
| Action | Temps | Coût |
|---|---|---|
| Résumé du matin | 3 min | 0,04 € |
| Podcast du jour | 12 min | non instrumenté |
| Veille des sources | 6 min | 0,11 € |
| Rappel par Claudia | 1 min | 0,01 € |
| Total mesuré | 22 min | 0,16 € |
Filets 9 % entre les lignes, aucun fond, aucune colonne colorée. Chiffres à droite, à chasse fixe. Ce qui n'est pas mesuré s'écrit « non instrumenté » en gris, et n'entre pas dans le total.
Lecteur de podcast
La page Podcast de Moon Morning : un grand anneau de lecture, trois commandes rondes, un seul bouton blanc. Le son survit à la page ; ailleurs, la pilule « en cours » le rappelle.
Exemple, pas de son : la lecture est simulée par une minuterie. Visuels d'exemple générés.
Podcast
épisode du jour
Podcast indisponible
Ton avis
Sujets
5Épisodes précédents
3Exemple · épisode du 16/10 · serveur · anneaux : écouté sur ce téléphone · appui long sur un sujet ou un épisode : plus d'actions
États de l'anneau
Le même anneau dit si l'épisode est prêt, joue, attend ou manque. La couleur n'apparaît que lorsque ça joue.
Pilule « en cours »
Hors de la page Podcast, la lecture reste visible au-dessus des points de page. Une seule pilule à la fois : appel, puis enregistrement, puis agent, puis podcast. Pause, fin ou erreur la retirent.
Fiche technique
- Anneau de lecture
- 200 px · trait 2 px · piste #1c1c1e · arc blanc ; fil spectral pendant la lecture
- Centre
- avant : minutes · ensuite : position 52 px poids 300 + « reste »
- Statistiques
- date · sujets · part écoutée sur ce téléphone, icône 16 px, filets
- Commandes
- rond 56 px trait 24 % · libellé 12 px · vitesse ≠ 1× : trait 64 %
- Vitesses
- 1× · 1,25× · 1,5× (cycle du code réel)
- Action principale
- blanc 52 px : Écouter, Pause, Reprendre ; contour fil pendant le chargement
- Gestes
- toucher = ouvrir · appui long 450 ms = feuille d'actions
- Pilule
- 48 px · contour fil · mini-anneau 20 px · chrono = position · arrêt 44 px
Vignettes vidéo
Toujours une vignette, jamais une URL nue. L'image remplit le cadre 16:9 en cover, centrée : ni bande noire, ni déformation. Sans image, l'icône du type prend la place.
Visuels d'exemple générés, durées d'exemple.
États
Cover centré, quel que soit le format
À gauche, l'image reçue ; le cadre pointillé montre la partie gardée. À droite, la vignette 16:9 obtenue.
En ligne
Dans une liste (Veille), la vignette 104 px tient la place du visuel gauche ; le statut vivant reste à droite.
- Relier ses machines sans ouvrir de portanalyse…YouTube · à l'instant
- Les petits modèles locaux reviennentidée clé en une lignetechno-exemple.fr · hier
Fiche technique
- Cadre
- 16:9 · coins 10 px (14 px en grand) · fond #1c1c1e
- Image
- background-size: cover · background-position: center
- Pastille lecture
- vidéo seulement · rond 32 px noir 60 % · en bas à gauche, 10 px
- Durée
- 12 px sur noir 60 % · en bas à droite · seulement si connue
- Repli
- icône cerclée 44 px grise : lecture, journal ou globe
- Accessibilité
- vignette décorative ; le libellé est porté par le lien parent
Lecture vidéo
Pendant la lecture, la vignette devient l'écran : elle remplit tout le fond en cover centrée, sous un voile noir uniforme qui garde le texte lisible. Le bouton prend le fil spectral tant que ça joue.
Exemple, pas de vidéo : lecture simulée. Visuel d'exemple généré.
Agents de code : ce qui tient en production
16:9 · la vignette telle quelle, coins 14 px
Agents de code : ce qui tient en production
Sujet du podcast du 16/10
9:16 · même image, recadrée au centre
Fiche technique
- Fond
- la vignette · cover · center · jamais étirée
- Voile
- noir 40 % uniforme, sans dégradé
- Lecture / pause
- rond 64 px noir 45 % · trait blanc 40 % ; en lecture : fil spectral 2 px
- Progression
- trait 2 px blanc 24 % · rempli blanc · poignée 12 px · cible 44 px (sur la vidéo : toujours clair, zone data-theme="dark")
- Texte
- titre 15 px (17 px plein écran) · temps 12 px chiffres tabulaires
Aperçu de lien
Un lien partagé s'affiche en vignette : grande image 16:9 avec titre et domaine, ou ligne compacte 64 × 40. Sans image, l'icône lien cerclée ; pendant le chargement, un trait gris tient la place du titre.
Titres, domaines et visuels d'exemple.
Version image
Revue de code assistée : garder la main sur la qualitéYouTube IA Act : le calendrier des obligations pour les PMEPresse exemple · presse-exemple.frVersion compacte
Agents de code : ce qui tient en productionYouTube Les petits modèles locaux reviennenttechno-exemple.fr blog-exemple.frnotes/reseau-mailleFiche technique
- Image
- 16:9 · coins 14 px · largeur max 360 px · titre 15 px sur 2 lignes · domaine 12 px
- Compacte
- vignette 64 × 40 · coins 10 px · ligne ≥ 48 px
- YouTube
- lecture centrée : rond 44 px (24 en compact) noir 45 % · trait blanc 40 %
- Sans image
- icône lien cerclée 44 px + titre + chemin
- Chargement
- icône lien cerclée + trait #1c1c1e aux deux tiers à la place du titre (YouTube : miniature tout de suite)
Sources
Lues le 16 octobre 2026 : DESIGN.md Révision 4 et kit aura-kit/ui (water, 03–04/10), pages réelles de Moon Morning (copie du code, 03–06/10 : Podcast, Veille, Tâches, Messages, Services, Machines, Agenda, Alarme, Enregistrer, Cerveau), lib/lecteurPodcast.ts. Copies dans zetamind-design/references.
Les composants sont redessinés en HTML pour la démonstration, pas importés du kit React. Constellation et HistoMachines sont reconstruits d'après les commentaires (fichiers absents de la copie). Toutes les valeurs, titres et visuels sont des exemples ; les images sont générées sur place (canvas), sans réseau.