Carnet de design — Floran Daché

Principes

la règle avant le décor

Papier d’abord

Le quadrillage Seyès, la marge rouge et le blanc cassé forment la surface. Les éléments semblent ensuite posés, collés ou écrits dessus.

Humain, pas brouillon

Caveat et Kalam portent la voix manuscrite. Inter garde les textes longs nets, stables et faciles à parcourir.

Une hiérarchie vivante

Soulignements, ruban adhésif et légères rotations signalent l’important sans nuire à la lecture.

Couleurs

encre, papier, surligneurs

Encre

#1C2540

Texte et traits principaux

Papier

#FBFAF4

Fond du carnet

Crayon rouge

#E0555F

Actions et repères

Surligneur

#FFE24F

Accent éditorial

Menthe

#9BE0B4

Résultats et contraste doux

Ligne Seyès

#DDE7F3

Quadrillage horizontal

Le rouge attire vers les actions et les annotations. Le jaune et la menthe restent des accents ponctuels ; les textes courants utilisent l’encre ou les gris bleutés.

Typographie

trois voix, trois fonctions

Caveat · titres & gestes

Une idée griffonnée devient un projet.

Inter · lecture & interface

Une structure nette donne de la place au contenu. Inter porte les paragraphes, les boutons et les informations qui doivent être comprises sans effort.

Kalam · notes & légendes

un détail utile écrit dans la marge ✎

Grille & rythme

aligné sur les lignes du cahier

Trame de page

Quadrillage horizontal de 30 px, lignes verticales de 30 px et marge rouge à 54–56 px. Le contenu principal est décalé pour laisser respirer cette marge dès les écrans moyens.

Largeurs utiles

820 px pour les pages de lecture, 1000 px pour les études de cas, 1060 à 1120 px pour les grilles et cette documentation.

Espacement fluide

Les grandes marges utilisent clamp(): elles se resserrent sur mobile et s’ouvrent progressivement sur écran large.

Points de rupture

Les compositions basculent selon leur contenu autour de 720, 760, 820 et 900 px, sans imposer une grille rigide unique.

Atomes

les petites pièces du carnet

Action principale Action secondaireBadge éditorial

Surlignement

carte scotchée

Composants & patterns

des pages assemblées, pas décorées

Navigation de carnet

Logo comme point de retour, quelques ancres sur l’accueil et un bouton de contact rouge toujours identifiable.

Carte projet

Visuel au format photo, ruban adhésif, rotation légère, titre, description courte et lien explicite vers l’étude de cas.

Fiche projet

Client, rôle, année, stack, défi et résultats issus du frontmatter MDX, réunis dans un résumé scannable et réutilisé sur chaque projet.

Callout

Bordure colorée ou pointillée, fond blanc ou jaune pâle et annotation manuscrite pour isoler un défi, une preuve ou une information importante.

Mouvement & accessibilité

le cahier prend vie, sans bloquer

Révélation au scroll

Les cartes montent et apparaissent en 600 ms. Les traits SVG se dessinent en 1,1 s et les surligneurs se déploient en 700 ms avec un léger retard.

Mouvement réduit

prefers-reduced-motiondésactive la mise en scène. Un délai de secours rend aussi tout le contenu visible si une animation ou l’observation du viewport échoue.

Contraste et focus

Les textes longs restent en encre ou gris bleuté sur papier. Un contour rouge visible accompagne la navigation au clavier.

Sémantique

Titres ordonnés, vrais liens et boutons, légendes de témoignage, descriptions d’images et ornements SVG masqués des technologies d’assistance.

Stack & fichiers

où retrouver chaque règle

Application: Next.js 16 · App Router · TypeScript strict
Styles: Tailwind CSS v4 · fond et encre dans app/globals.css · valeurs visuelles dans les composants
Polices: Caveat · Inter · Kalam via next/font dans lib/fonts.ts
Contenu: Études de cas MDX dans content/projets/*.mdx
Gabarits: components/ProjectCase.tsx et ProjectSummary.tsx
Mouvement: hooks/useRevealOnScroll.ts

← revenir au portfolio