Pillar

Design intelligence, pas slop intelligence.

Comment Eufya choisit fonts, palettes, espacement et motion. Les contraintes éditoriales encodées dans le pipeline — pour que vos pages ressemblent à un travail d'agence française, pas à une démo LLM.

Fonts
5 pairings
Palette
Warm + accent
Motion
≤ 350 ms
Audit
Anti-slop runtime

Le problème avec les AI builders grand public

Ouvrez 10 sites générés par n'importe quel AI website builder grand public en 2026. Vous verrez le même set : gradient violet→cyan, sans-serif rond type Inter ou Plus Jakarta, bordures 16px arrondies, ombres bleues diffuses, icônes Lucide grises, layout 3-column avec stagger animations. C'est ce que la communauté appelle le 'slop' : un look reconnaissable comme 'généré', parce que le modèle a optimisé sur la moyenne mondiale.

Eufya inverse l'optimisation. Au lieu de viser la moyenne, le pipeline impose des constraints éditoriales : Fraunces (serif éditorial chaude) pour le display, Inter pour le body, Space Mono pour le mono. Palette warm paper (#FAF8F3) ou dark espresso (#0F0E0C), accent terra (#C8865F) utilisé avec parcimonie. Pas de bleu SaaS, pas de violet gradient, pas de néon, pas d'AI-startup cliché.

Ces choix ne sont pas inventés à la volée. Ils sont encodés dans le design system Eufya et servent de base immutable, recalibrée seulement quand votre secteur ou votre brand existante l'exige.

Comment Eufya choisit les fonts

Un pairing typographique se compose de 2-3 fonts : display (titres), body (paragraphes), mono (timestamps, code, micro-labels). La règle d'or : contraster les classifications (serif + sans-serif est plus robuste que serif + serif). Eufya applique cette règle automatiquement avec 5 pairings calibrés par secteur.

Pour SaaS B2B : Inter Display + Inter Text (sans-serif geometrico, lecture vite). Pour éditorial / agence / studio : Fraunces + Inter (chaleur + lisibilité). Pour clinique / santé : DM Serif Display + Source Sans (autorité + accessibilité). Pour ecommerce premium : Cormorant + Lato (luxueux + neutre). Pour artisan / construction : Bricolage Grotesque + Inter (caractère + sobriété).

Les tailles, line-heights et letter-spacings sont calculés depuis une échelle modulaire (1.2 / 1.25 / 1.333 selon density) — pas du free-style. Le résultat est typographiquement cohérent, vérifiable au pixel près en audit.

  • 5 pairings calibrés (SaaS, éditorial, santé, ecommerce, artisan)
  • Échelle modulaire — pas de tailles aléatoires
  • Contraste de classifications imposé (serif + sans, jamais 2 serifs)
  • Hostage : fonts auto-hostées ou Google Fonts selon plan

Le système de couleurs et l'anti-slop

La palette par défaut Eufya est paper warm + dark espresso + 1 accent (terra ou sage ou copper). Trois rôles, pas vingt nuances. Pourquoi ? Parce que les sites qui sentent l'agence ont peu de couleurs, utilisées avec discipline. Une page peut être 95% noir-sur-blanc et 5% terra — et c'est ce 5% qui crée la signature.

Les AI builders grand public font l'inverse : ils proposent 12 swatches, des gradients à 3 stops, des dark/light modes interchangeables. Le résultat est visuellement riche mais sans signature — c'est la palette de Material Design dilué par toutes les startups d'Y Combinator entre 2020 et 2024.

Eufya autorise quand même la customisation : vous pouvez locker votre palette de marque existante (RGB ou Hex), Hero Lab adapte tout le reste autour. Mais le défaut est intentionnellement contraint. Mieux vaut une palette stricte qu'une palette généreuse.

Le spacing et la densité éditoriale

Les paddings entre sections sont la deuxième cause de slop visuel après les couleurs. La plupart des AI builders posent 80px ou 100px de padding partout — uniforme, prévisible, sans respiration. Le résultat ressemble à un slide deck PowerPoint converti en site.

Les sites premium utilisent du spacing asymétrique : 96-160px desktop entre sections importantes, 64-96px mobile, et parfois 200px+ avant un changement de chapter. La hiérarchie visuelle ne vient pas seulement du H1/H2 — elle vient du blanc qui isole les sections.

Eufya impose ce spacing depuis le design system. Les tokens contiennent des step values qui forcent les sections à respirer. Vous ne pouvez pas accidentellement coller deux sections à 48px d'écart — le système refuse.

Le motion design : moins, mais juste

Une landing page typique en 2026 a 12-20 animations Framer Motion. La plupart sont du eye candy : éléments qui fade-in au scroll, parallax léger, hover micro-bumps. Cela rend la page 'vivante' — au prix de la performance et souvent de la lisibilité.

Eufya applique une règle simple : chaque animation doit avoir un businessRole. Une animation 'attention' (faire remarquer quelque chose qui sinon serait raté), 'comprehension' (séquencer la lecture pour guider l'œil), 'feedback' (confirmer une action utilisateur). Tout le reste est désactivé.

Le budget motion est strict : max 350ms par animation, prefers-reduced-motion respecté, pas plus de 3 animations simultanées à l'écran. Le résultat ressemble à un site édité par un studio qui sait quand s'arrêter, pas à une démo Webflow qui veut prouver qu'elle peut animer.

  • Chaque animation doit avoir un businessRole identifiable
  • Max 350ms par animation
  • prefers-reduced-motion respecté systématiquement
  • Max 3 animations simultanées à l'écran

Comment ces décisions sont auditées

Une design system décrétée mais pas appliquée ne sert à rien. Eufya passe chaque page générée à travers un Anti-Slop Runtime — un audit qui compte les violations courantes : gradient violet→cyan (penalty), bordures 16px+ partout (penalty), 5+ couleurs distinctes dans une section (penalty), font-family non-listée (penalty), animations sans businessRole tagué (penalty).

Le score Anti-Slop pondère le Quality Gate final. Une page qui a 'l'air généré' ne sort pas — elle revient au builder pour rework automatique. C'est ce qui rend les exemples publics indistinguables d'un travail d'agence à premier coup d'œil.

Constraints

Le design system en chiffres

Pairings typographiques
5
Calibrés par secteur
Couleurs default
3
Paper + espresso + accent
Max animation
350 ms
Budget motion strict
Anti-slop penalties
20+
Check runtime à chaque build
Échelle typo
Modulaire
1.2 / 1.25 / 1.333
Section spacing
96–160 px
Desktop asymétrique
WCAG
AA min
Audit automatique
prefers-reduced-motion
Respecté
Systématique

Questions fréquentes

Lancez un projet

Voir le design system à l'œuvre.

Tester Eufya sur un brief concret — vous verrez Fraunces, Inter, palette warm, motion calibrée. 3 crédits gratuits, aucune CB.