Grille asymétrique
Cartes de tailles variables dans un conteneur unifié. Idéal pour mettre en avant un élément principal.
"I signed up for Denifer, and within 2 days, I had an interview with my current employer"
Le contenu principal occupe deux tiers de l'espace. Le panneau latéral accueille des métriques ou un visuel fort — structure classique, rendu contemporain.
Cartes de tailles variables dans un conteneur unifié. Idéal pour mettre en avant un élément principal.
Serif pour les titres, sans pour le corps.
Espacement généreux. Bordures subtiles. Fond en dégradé léger.
Ink sur fond sombre, accents en blanc pur.
La grille se recompose en colonne unique sans perdre sa hiérarchie interne.
Colonnes égales séparées par des lignes fines. Chaque pilier porte un index en chiffres romains.
Hiérarchie lisible : eyebrow en mono, titre en serif, corps en sans. Rien ne se mélange.
Padding vertical généreux. Le contenu respire entre les séparateurs verticaux.












« La typographie n'est pas de la décoration — c'est la structure invisible qui porte chaque layout. »
Tout ce qu'il faut savoir sur le système Denifer — typographie, layouts, composants et bonnes pratiques.
Denifer est un layout system dark mode construit autour de trois familles typographiques.
Instrument Serif, Geist et Geist Mono — chaque section explore une composition différente tout en partageant la même voix visuelle.
Les eyebrows et labels passent par Geist Mono en capitales espacées.
Les titres principaux utilisent Instrument Serif, souvent avec un em italique grisé. Le corps de texte reste en Geist regular, couleur atténuée.
Oui — chaque section se recompose en colonne unique sur mobile.
Grilles bento, splits asymétriques, colonnes et carrousels verticaux conservent leur hiérarchie interne sans rupture visuelle.
Absolument — boutons, cartes, carrousels et navigation sont modulaires.
Copiez le bloc HTML et les styles dans style.css : les
variables CSS racine garantissent la cohérence des couleurs et espacements.
Toutes les transitions sont désactivées avec prefers-reduced-motion.
L'accordéon FAQ reste pleinement fonctionnel au clavier, avec attributs ARIA complets sur chaque panneau.
Sept layouts distincts, une seule voix typographique. Chaque section explore une composition différente sans rompre la hiérarchie visuelle.
Bandeau pleine largeur, fond en relief. Le call-to-action conclut la page avec le même langage visuel.