Aller au contenu
SkillCodex
Mis à jour le
Version
v1.3.0
Sources
2 sources
Statut
Publié

Classification terminologique · Mouvement établi

Flat Design

Des aplats simples, des icônes géométriques et aucune matière simulée.

Aussi appelé : flat UI

Aplats simples organisés par la couleur et la typographie.

Comprendre

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.

Reconnaître

Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.

Surface

Aplats unis

Chaque surface utilise une couleur franche sans texture ni reflet.

Profondeur

Aucune profondeur simulée

Biseaux, ombres réalistes et volumes décoratifs sont absents.

Géométrie

Glyphes simples

Icônes et formes sont réduites à une géométrie immédiatement reconnaissable.

Typographie

Hiérarchie typographique

Poids, taille et couleur remplacent le relief pour organiser l’information.

ADN du style

Ce que le style exige, ce qui l’accompagne d’habitude, ce qui peut changer sans en sortir, et ce qui le trahit.

Rapport hebdomadaire

Sessions actives

12 480+8,2 % vs semaine dernière

Dans les clous

Ouvrir la galerie de styles
Même carte, rendue en Flat Design.

Définit le style

  • Chaque surface utilise une couleur franche, sans texture ni reflet.
  • Aucun biseau, aucune ombre réaliste, aucun volume décoratif.
  • Poids, taille et couleur de la typographie organisent l’information à la place du relief.

Soutient le style

  • Des icônes réduites à une géométrie immédiatement reconnaissable.
  • Une grille régulière et des espacements issus d’une échelle simple.
  • Des boutons pleins dont la couleur signale la priorité.

Peut varier

  • La palette, vive ou sobre, tant que chaque couleur reste unie.
  • La densité du contenu : le flat peut être aéré ou très dense.
  • Les coins droits ou arrondis, et une ombre plate unique pour l’élévation.

À éviter

  • Défaut d’accessibilitéDes limites de contrôle supprimées en même temps que les ombres décoratives.
  • Défaut d’accessibilitéUne couleur seule pour porter un état, sans libellé, icône ni état programmatique.
  • CaricatureTous les indices interactifs retirés au nom de la simplicité visuelle.
  • ContradictionUn dégradé matériel, un reflet ou un biseau réintroduits pour « donner du relief ».

Proches cousins

Des styles qui partagent un signal sans partager la règle.

Même carte, quatre styles

Choisir

Bon contexte

  • 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.

Mauvais usage

  • Retirer tous les indices interactifs au nom de la simplicité visuelle.
  • Confondre absence de volume et absence de hiérarchie.

Comparer

Différence décisive avec le voisin le plus proche

Briefs prêts à utiliser

Choisis l’intention qui correspond à ton travail, puis copie ce brief statique dans ton agent.

Créer

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.

Modifier

Conserve la structure et retire progressivement textures, gradients matériels, biseaux et ombres réalistes. Remplace chaque indice de profondeur supprimé par une différence claire de couleur, d’espace ou de typographie.

Réparer

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.

Comprendre → Reconnaître → Choisir → Comparer

Pack pour ton agent

Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

Implémenter correctement

Donne une direction Flat Design cohérente

# 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.

## Quand ne pas utiliser
- 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.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.
  • Prérequis · Tokens, composants et contraintes de marque existants
Pourquoi ça marche
  • Le style est cadré par ses signaux et ses surfaces, pas par une simple référence visuelle.
  • Les états et les fallbacks protègent l’usage quand le mouvement ou une API manque.
  • Les critères d’accessibilité et de performance empêchent l’esthétique de devenir une dette.

À essayer ensuite

Audite Flat Design dans le produit

# Auditer Flat Design sur la surface réelle

## Objectif
Contrôle que Flat Design reste cohérent, accessible et mesuré sur les composants réellement concernés.

## Contrôles
- Compare les états interactifs et les fallbacks.
- Contrôle contraste, focus et réduction de mouvement.
- Signale les effets visuels qui dégradent la hiérarchie ou les performances.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.

sha256:8cb44cff5c677a87532bf211bbe84d8b0d88a56d4fa428412f84ff5135027798

Diagnostiquer un problème

Corrige les écarts de Flat Design

# 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.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.
  • Prérequis · Tokens, composants et contraintes de marque existants
Pourquoi ça marche
  • Le diagnostic compare des signaux observables au lieu de juger le goût.
  • La couche visuelle est isolée pour préserver la structure et les interactions.
  • La correction reste reliée aux fallbacks, au contraste et aux états interactifs.

À essayer ensuite

Stabilise Flat Design dans le design system

# Prévenir les dérives de Flat Design

## Objectif
Transforme la correction visuelle en règle réutilisable et en contrôle ciblé sans figer toute l’interface.

## Contrôles
- Isole les tokens ou variantes responsables.
- Ajoute une preuve ciblée pour les états concernés.
- Compare avec les styles proches avant d’élargir la règle.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.

sha256:54eb7169fe5e5980325cd107f61d6f517bf8182b0b74617dc1c6db400590566b

Fiche complète, enregistrement et provenance

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.

Digest du Pack: sha256:ae86dbd6e06effabec550e312f5bd211c92140a44abf4fa7832bd085369e7a8c

Accessibilité et vérification

  1. 1Ne pas supprimer les limites de contrôle avec les ombres décoratives.
  2. 2Associer la couleur à un libellé, une icône ou un état programmatique.
  3. 3Préserver des états de focus et de survol nettement distincts.

Sources

Révision du contenu
1.3.0
Sources consultées le
2026-07-20
Digest du catalogue source
sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6
sha256-utf8-canonical-json-lf/v1
Ouvrir le catalogue source versionné