Hardcoded Değerlerin Yarattığı Kaos

Büyük ölçekli web projelerinde en sık yapılan hata, renk kodlarını (#4f46e5) veya piksel değerlerini doğrudan component içine gömmektir. Müşteri veya tasarımcı renk paletini değiştirmek istediğinde yüzlerce dosyayı düzenlemek zorunda kalırsınız.

Design Token Hiyerarşisi
Katman Örnek Tanım Kullanım Alanı
Global Token --slate-900: #0f172a Temel renk paleti ve ham değerler
Semantik Token --text-primary: var(--slate-900) Anlamsal bağlam (Başlık, Buton, Hata)
Bileşen Token --card-border: var(--border-color) İzole bileşen özellikleri

CSS Değişkenleri ile Tek Merkezden Kontrol

:root {
  --color-primary: #4f46e5;
  --color-success: #059669;
  --color-warning: #d97706;
  --radius-card: 16px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 10px 20px -3px rgba(15, 23, 42, 0.05);
}

.button-primary {
  background: var(--color-primary);
  border-radius: var(--radius-card);
  transition: var(--transition-smooth);
}
Kazançlar: Tek bir CSS satırını değiştirerek tüm sitedeki renk temasını, kart yuvarlaklıklarını ve geçiş efektlerini anında güncelleyebilirsiniz.