DESIGN SYSTEM / YANN MORICE
Typographie
Clash Display + Inter Display
Accent
Orange vif, usage ciblé
Rayon
16px pour les cards
Layout
Stacks, grilles, grands blancs
01 / COLOR SYSTEM
Le système fonctionne par opposition : surfaces blanches, sections sombres, texte noir et un accent orange utilisé avec parcimonie.
BG / White
Fond principal et sections claires
Dark Grey
Sections sombres et contrastes forts
Orange Accent
CTA, highlights et repères visuels
Text Black
Titres, corps et éléments UI
UI Greys
Bordures, fonds doux, séparateurs
Body Grey
Descriptions et contenus secondaires
02 / TYPOGRAPHY
Clash Display
À utiliser pour les titres héros, grandes accroches, titres de section majeurs et moments de marque.
Inter Display
À utiliser pour les titres de modules, cartes, descriptions courtes, UI, boutons et textes fonctionnels.
Heading 1
Clash Display / 220 → 82
Heading 2 / 3
Clash Display / grandes sections
Body / UI
Inter Display / 10–30px
03 / SPACING & RADIUS
10px — UI compact
20px — rythme standard
34px — padding interne
40px — marge section
50px — grands blocs
80px — rupture majeure
0px — structure
Sections, conteneurs larges et blocs qui doivent rester francs.
16px — card radius
Cartes, modules secondaires, panels, surfaces documentaires.
04 / COMPONENTS
Navigation
Navigation Bar, Menu Items, Menu Link, Header, Footer, Footer Menu.
Buttons
Primary Button, Contact Button, Social Button, Toggle Button, bouton Link.
Tags
Highlighter Tag, Primary Tag, Mini Tag, Expert Tag, Header Tag.
Cards
Work, Client, Process, Service, Pricing, Blog, Testimonial, Video, Text, About, CTA, Award, Experience.
Sections
Client Section XL/S, Pricing Section, Photography Section.
Interactive
Scroll Down Arrow, Stats, Custom Cursor, FAQ, Pricing Switch, Dot Slider, Star Rating, Text Flipper.
05 / USAGE RULES
01
02
03
04