Pourquoi un Design System ?
Un design system garantit la coherence visuelle et accelere le developpement. Avec Tailwind CSS v4 et son nouveau moteur base sur Lightning CSS, la creation de tokens de design est plus intuitive que jamais.
Configuration des Design Tokens
Couleurs
/* globals.css */
@theme {
--color-brand-50: #fdf2f0;
--color-brand-100: #fce4df;
--color-brand-500: #d4714b;
--color-brand-600: #c9694a;
--color-brand-900: #5c2a1a;
--color-surface: #faf9f6;
--color-surface-elevated: #ffffff;
--color-text-primary: #1a1a1a;
--color-text-secondary: #666666;
--color-text-muted: #999999;
--color-border: #ebe8e2;
}Typographie
@theme {
--font-display: 'Source Serif 4 Variable', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'SF Mono', 'Cascadia Code', monospace;
--text-display: 3.5rem;
--text-h1: 2.5rem;
--text-h2: 1.75rem;
--text-h3: 1.375rem;
--text-body: 1.0625rem;
--text-small: 0.875rem;
--text-caption: 0.8125rem;
}Composants de base
Le composant Button
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'ghost'
size?: 'sm' | 'md' | 'lg'
}
export function Button({
variant = 'primary',
size = 'md',
className,
children,
...props
}: ButtonProps) {
const variants = {
primary: 'bg-brand-500 text-white hover:bg-brand-600',
secondary: 'border border-text-primary text-text-primary hover:bg-text-primary hover:text-white',
ghost: 'text-text-secondary hover:text-text-primary hover:bg-surface',
}
const sizes = {
sm: 'px-4 py-2 text-small',
md: 'px-6 py-3 text-body',
lg: 'px-8 py-4 text-body font-medium',
}
return (
<button
className={`${variants[variant]} ${sizes[size]} font-medium transition-all duration-200 ${className}`}
{...props}
>
{children}
</button>
)
}Le composant Card
interface CardProps {
children: React.ReactNode
hover?: boolean
className?: string
}
export function Card({ children, hover = false, className }: CardProps) {
return (
<div
className={`
bg-surface-elevated border border-border p-6
${hover ? 'hover:shadow-lg transition-shadow duration-300' : ''}
${className}
`}
>
{children}
</div>
)
}Principes du Swiss International Style
Notre design system s'inspire du Swiss International Style :
- Pas de border-radius : Angles droits partout pour un look net
- Grille stricte : Alignement rigoureux sur une grille de base
- Typographie forte : Hierarchie claire avec serif pour les titres
- Espace blanc genereux : Laisser respirer le contenu
- Couleurs limitees : Palette restreinte avec un accent fort
Le Swiss Style n'est pas minimaliste par manque d'idees, mais par choix delibere de clarte et de fonctionnalite.
Conclusion
Un design system bien construit est un investissement qui se rentabilise rapidement. Tailwind CSS v4 facilite enormement la gestion des tokens et la creation de composants coherents.