Design
System
Langage visuel, tokens, composants et animations du portfolio de Joran Saladin.
Couleurs
Palette
--background
#020202
Page background
--foreground
#ffffff
Primary text
--accent
#DA7757
CTAs, highlights
--accent-dim
rgba(218,119,87,0.15)
Accent backgrounds
--border
rgba(255,255,255,0.10)
Dividers, outlines
--card-bg
rgba(255,255,255,0.04)
Glass panels
--muted-foreground
rgba(255,255,255,0.40)
Labels, captions
--secondary
rgba(255,255,255,0.06)
Subtle surfaces
Typo
Échelle
Design System
Visual Language
Design Tokens
Components
UI Patterns
The quick brown fox jumps over the lazy dog.
Caption · Label · Metadata
UPPERCASE · TRACKING · 0.25EM
Oswald
Titres & affichage
400 · 500 · 600 · 700
var(--font-oswald)
JetBrains Mono
Corps & labels
400 · 500 · 600 · 700
var(--font-jetbrains)
Espacements
Échelle
Composants
Boutons
Tous les boutons utilisent rounded-full — cohérence avec les contrôles circulaires de la nav.
rounded-full
9999px — Boutons, contrôles nav
rounded-sm
2px — Tags, badges
rounded-none
0px — Cards, inputs, panels
Badges
Cards
Glass Panel
Surface glassmorphism — backdrop-blur, fond semi-transparent.
KPI Card
10+
Years of experience
Feature Card
Brackets accent au hover — motif décoratif du UI.
Formulaire
Motion
Tokens
Fast
Micro-interactions, icon swaps
0.2s
easeOut
Default
Hover states, transitions
0.3s
easeOut
Smooth
Panel slides, overlays
0.5s
cubic-bezier(.76,0,.24,1)
Reveal
Scroll-triggered reveals
0.7s
cubic-bezier(.22,1,.36,1)
Stagger
Stagger delay between items
0.15s
easeOut
Spring
3D card tilt (Framer Motion)
—
damping:15 stiffness:150
Glass
Panel
Preview
Glass Panel
Surface réutilisable pour cards, overlays et panneaux.
CSS
.glass-panel {
background: var(--card-bg);
/* rgba(255,255,255,0.04) */
border: 1px solid var(--border);
/* rgba(255,255,255,0.10) */
backdrop-filter: blur(12px);
}Bordures
Default
1px solid var(--border)
Accent
1px solid #DA7757
Accent Dim
1px solid rgba(218,119,87,0.4)
Foreground
1px solid var(--foreground)
Logo
Utilisation
Usages réels sur le site
HeroSection
width=44 height=22 · brightness-0 invert opacity-70
Navbar overlay
width=56 height=28 · brightness-0 invert opacity-60 Toujours sur fond sombre (#020202/97%)
Règles d'utilisation
Monochrome uniquement
Le logo est toujours rendu via filtre CSS. Sur fond sombre : brightness-0 invert (blanc). Sur fond clair : brightness-0 (noir). Jamais en couleur.
Opacité réduite
Le logo n'est jamais affiché à 100% d'opacité. Utiliser opacity-60 à opacity-70 selon le contexte pour une présence subtile.
Fonds autorisés
Fond sombre #020202 (hero, overlay). Sur fond clair #f5f3ef, utiliser brightness-0 sans invert. Jamais sur fond coloré.
Taille minimale
Ne pas descendre sous 22px de hauteur (taille hero). La plus grande utilisation est 28px (nav overlay). Ratio fixe 2:1.
Proportions
Ne jamais étirer ou déformer. Toujours conserver le viewBox d'origine (0 0 378 180). Passer par width/height proportionnels.
Effets interdits
Aucune rotation, ombre portée, dégradé ou colorisation. Le logo reste plat, monochrome, et sans effet de mise en valeur.
Spécifications
Design System
Joran Saladin · UI/Web Designer · v1.0.0