Tasarım Sistemi Nedir?
Bir tasarım sistemi, tek bir doğruluk kaynağıdır:
- Renkler
- Tipografi
- Spacing
- Komponentler
- Paternler
Design Tokens
Her şey token’larla başlar:
{
"color": {
"primary": "#6366f1",
"surface": "#18181b",
"muted": "#71717a"
},
"spacing": {
"1": "4px",
"2": "8px",
"4": "16px",
"8": "32px"
}
}Tipografi Ölçeği
Modüler ölçek kullanın (1.25 ratio):
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */Storybook Entegrasyonu
Her komponent, izole bir ortamda dokümante edilmeli:
- Tüm varyantlar
- Edge case’ler
- Accessibility bilgisi
Sonuç
Tasarım sistemi bir kez kurulur, on yıl kullanılır. Yatırıma değer.