L’éditeur propose un système de design complet permettant la création d’identités visuelles cohérentes. Le module de typographie offre un contrôle granulaire sur l’ensemble des propriétés textuelles : sélection de polices avec preview en temps réel, ajustement des tailles avec unités multiples (px, em, rem, %), configuration des graisses (normal, bold, light), gestion des interlignes et des espacements entre caractères, ainsi que des options d’alignement avancées incluant la justification.

Le système chromatique repose sur une architecture de design tokens avec sept gammes de couleurs principales. Chaque gamme (Primary pour les éléments principaux, Secondary pour les accents, Tertiary pour les variations, Tonic pour les contrastes, Neutral pour les fonds, Gold pour les éléments premium) propose quatre nuances graduées permettant de créer des hiérarchies visuelles subtiles. Cette approche garantit la cohérence chromatique sur l’ensemble du projet tout en offrant suffisamment de variations pour les différents états interactifs.

La gestion des médias intègre une galerie complète avec système de recherche par mots-clés, catégorisation automatique et optimisation des formats. Les utilisateurs peuvent importer leurs propres images, les recadrer directement dans l’interface, et appliquer des filtres de base. Le système gère automatiquement les formats responsives et les optimisations de performance.

Le moteur de layout combine les technologies CSS les plus modernes pour offrir une flexibilité maximale. Le système de grille CSS Grid permet la création de structures complexes avec fusion de cellules, positionnement précis et adaptation automatique au contenu. L’interface propose une représentation visuelle des grilles avec manipulation directe des colonnes et rangées.

L’intégration Flexbox complète cette approche avec des contrôles intuitifs pour la direction des flux (row, column), l’alignement des éléments (start, center, end, stretch), la justification du contenu (space-between, space-around, space-evenly), et la gestion du débordement avec les options de wrap. Ces paramètres sont ajustables en temps réel avec prévisualisation immédiate.

Le système d’espacement utilise une échelle modulaire cohérente pour les marges et paddings. Chaque côté peut être contrôlé indépendamment avec des prévisualisations visuelles montrant l’impact des modifications. Les valeurs peuvent être saisies en unités multiples et sont automatiquement converties selon le contexte responsive.

Les formats prédéfinis couvrent l’ensemble des ratios couramment utilisés dans le design web et mobile : carrés parfaits, rectangles Golden Ratio (1:1.618), formats vidéo (16:9, 4:3), formats mobiles (9:16), formats panoramiques (21:9, 3:1), ainsi que des formes géométriques (cercles, demi-cercles) et des variantes spécialisées pour les interfaces (2:3 pour les cartes produit, 5:4 pour les avatars).

L’approche responsive repose sur un système de breakpoints configurables aligné sur les standards de l’industrie. Quatre points de rupture principaux (SM: 640px, MD: 768px, LG: 1024px, XL: 1280px) peuvent être personnalisés selon les besoins du projet. Chaque breakpoint dispose de ses propres contrôles pour les largeurs, hauteurs, espacements et positionnements.

Le système de largeurs réactives utilise une approche par pourcentages avec fallbacks automatiques. Les développeurs peuvent définir des comportements différents pour chaque taille d’écran : largeur fixe sur desktop, pourcentage sur tablette, pleine largeur sur mobile. L’outil calcule automatiquement les valeurs intermédiaires et génère les media queries appropriées.

La prévisualisation multi-device intègre des émulateurs pour les principales résolutions : smartphones (375px, 414px), tablettes (768px, 1024px), laptops (1366px, 1440px) et écrans larges (1920px+). Les utilisateurs peuvent naviguer entre ces formats en temps réel et observer l’adaptation de leur design. Un mode rotation permet de tester les orientations portrait et paysage.

La sémantique HTML est au cœur de l’approche technique. L’éditeur propose une sélection contextuelle de balises appropriées : article pour les contenus éditoriaux, section pour les divisions logiques, header et footer pour la structure, nav pour la navigation, aside pour les contenus complémentaires. Cette approche garantit l’accessibilité et l’optimisation SEO des pages générées.

Le système de classes CSS offre une flexibilité maximale aux développeurs expérimentés. L’autocomplétion suggère les classes existantes dans le projet, évitant les doublons et maintenant la cohérence. Les IDs sont gérés automatiquement pour éviter les conflits, mais peuvent être personnalisés pour l’intégration avec des scripts externes ou des systèmes de tracking.

La bibliothèque de composants permet la réutilisation et la standardisation. Les éléments créés peuvent être sauvegardés comme composants, modifiés globalement, et partagés entre projets. Le système d’import/export supporte les formats JSON et CSS, facilitant l’intégration avec les workflows existants et les systèmes de design externes.

Les transformations CSS avancées incluent le positionnement précis (absolute, relative, fixed, sticky) avec contrôles visuels, la rotation avec preview en temps réel, la gestion du z-index pour la superposition des couches, et les transformations 2D (scale, skew, translate). Ces outils permettent la création d’animations et d’effets visuels sophistiqués sans code.