Surface
Aplats unis
Chaque surface utilise une couleur franche sans texture ni reflet.
Mouvement établi
Des aplats simples, des icônes géométriques et aucune matière simulée.
Aussi appelé: flat UI
Définition et périmètre
Le Flat Design rend l’interface en deux dimensions. Couleur, taille, espace et typographie construisent la hiérarchie sans texture, reflet, biseau ou imitation de matière.
Périmètre: Le flat gouverne la manière de dessiner les surfaces. Il ne garantit pas une faible quantité de contenu. Une interface peut être plate et très dense.
Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.
Surface
Chaque surface utilise une couleur franche sans texture ni reflet.
Profondeur
Biseaux, ombres réalistes et volumes décoratifs sont absents.
Géométrie
Icônes et formes sont réduites à une géométrie immédiatement reconnaissable.
Typographie
Poids, taille et couleur remplacent le relief pour organiser l’information.
Différence décisive avec le voisin le plus proche
Comprendre → Reconnaître → Choisir → Comparer
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
implementation
# Implémenter Flat Design dans ton agent ## Objectif Crée cette interface en Flat Design avec des aplats unis, une hiérarchie fondée sur taille, espace et typographie, et des icônes géométriques simples. N’utilise ni texture, ni reflet, ni volume décoratif. ## Prérequis - Inspecte les composants, tokens et contraintes de marque existants. - Confirme que ce style convient à la surface et au contenu. - Préserve la structure, la sémantique et les interactions existantes. ## Comportement et surfaces - Aplats unis — Chaque surface utilise une couleur franche sans texture ni reflet. - Aucune profondeur simulée — Biseaux, ombres réalistes et volumes décoratifs sont absents. - Glyphes simples — Icônes et formes sont réduites à une géométrie immédiatement reconnaissable. - Hiérarchie typographique — Poids, taille et couleur remplacent le relief pour organiser l’information. ## États - Couvre les états par défaut, survol, focus, actif, désactivé, chargement et erreur qui existent déjà. - Fournis un état statique lorsque la réduction de mouvement est demandée. ## Accessibilité - Ne pas supprimer les limites de contrôle avec les ombres décoratives. - Associer la couleur à un libellé, une icône ou un état programmatique. - Préserver des états de focus et de survol nettement distincts. ## Non-objectifs - Retirer tous les indices interactifs au nom de la simplicité visuelle. - Confondre absence de volume et absence de hiérarchie. ## Critères d’acceptation - Une application qui doit rester claire, légère et adaptable à plusieurs densités. - Un design system où la hiérarchie doit être portée par des tokens simples.
sha256:b420dc3d4e3206f86715ff0a1855277f8438bf9f428712ecefe7ed2d76e7d7a9
debugging
# Déboguer Flat Design dans ton agent ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Compare la surface aux signaux visuels documentés. - Vérifie contraste, focus, réduction de mouvement et fallback. - Isole la couche visuelle sans modifier la structure fonctionnelle. ## Causes possibles - Le style masque la hiérarchie ou réduit le contraste. - L’effet est appliqué à trop de surfaces ou dépend d’une API absente. - Un état interactif n’est plus perceptible. ## Corrections bornées Répare les affordances devenues ambiguës après aplatissement. Rétablis des bordures, libellés, états et focus visibles sans réintroduire une imitation de matière. ## Vérification finale - Ne pas supprimer les limites de contrôle avec les ombres décoratives. - Associer la couleur à un libellé, une icône ou un état programmatique. - Préserver des états de focus et de survol nettement distincts.
sha256:fa4432b5116debdb3e479bbf6d2a9967b71595900154882e0ae99b9f31259708
Digest du Pack: sha256:1eaded38a9a035ac146bbc7578930f8744820722c70e03e7f78e004a60e66593