Design Codexia

Ce document détaille l'application visuelle et UI de la marque. Direction de base : bento grid + Radix Colors.

Mots-clés visuels

• Net, structuré, modulaire, moderne, lisible, fiable.

Typographie

• Titres : "Space Grotesk" ou "Sora", graisse 600-700.
• Texte : "IBM Plex Sans" ou "Source Sans 3", graisse 400-500.
• Échelle : 12 / 14 / 16 / 18 / 24 / 32 / 40 px.
• Interlignage généreux pour les contenus denses.

Grille et layout

• Grille 12 colonnes, gouttières 24 px.
• Bento layout : cards modulaires, tailles variées, alignements stricts.
• Largeur max contenu : 1200-1280 px.
• Rythme vertical : multiples de 8 px.
• Sections courtes et explicites, titres visibles.

Couleurs (Radix Colors)

• Neutres : Slate 1-12 (fond, surfaces, texte, bordures).
• Primary : Blue 9 (actions, liens, focus).
• Primary hover : Blue 10, active : Blue 11.
• Accent : Cyan 9 (mise en avant ponctuelle).
• Success : Green 9, Warning : Amber 9, Danger : Red 9.
• Focus ring : Blue 8 (alpha ou mix).

Surfaces et élévation

• 0 à 3 niveaux d'élévation max.
• Ombres douces, diffuses, sans contraste dur.
• Rayons : 8-12 px selon le composant.
• Cards sur fond neutre, séparation par bordure légère.

Composants clés

• Boutons : primary plein, secondary outline, ghost pour actions secondaires.
• Champs : label au-dessus, aide courte, erreur claire.
• Cards : modules bento, titre + meta + action ; padding 16-24 px.
• Tableaux : en-tête sticky, zebra léger, actions compactes.

Iconographie

• Icônes linéaires 1.5-2 px, angles légèrement arrondis.
• Style cohérent et minimal, pas d'illustrations complexes.

Motion

• Transitions 150-250 ms, easing "ease-out".
• Préfère les reveals discrets à l'animation gratuite.

Accessibilité

• Contraste texte >= 4.5:1.
• Focus visible (outline 2 px).
• Navigation clavier ok pour tous les parcours.

Applications

• Site vitrine : hero clair, preuves concrètes, cas d'usage.
• Backoffice : densité maîtrisée, actions évidentes, feedback rapide.

Implémentation

Historique des décisions