Design Token Nedir? CSS Değişkenleri, Tailwind Teması ve JSON Token'lar

Design token nedir?

Design token, bir tasarım kararının adlandırılmış değeridir. #B8422E bir renktir; color.action.primary ise “birincil aksiyonların rengi” kararını taşıyan bir token'dır. Kodda, tasarım dosyalarında ve DESIGN.md'de aynı ad kullanıldığında karar tek yerden yönetilir: rengi değiştirdiğinde onu kullanan her buton, bağlantı ve simge birlikte değişir.

Token'lar yapay zekâ araçları için de önemlidir. Bir araç “turuncu bir buton” yerine --color-action-primary değişkenini kullandığında, ürettiği kod markanın geri kalanıyla otomatik olarak uyumlu olur.

Token türleri: temel, anlamsal, bileşen

Olgun tasarım sistemleri token'ları üç katmanda düzenler:

Bu katmanlama sayesinde marka rengini değiştirmek için yalnızca temel ya da anlamsal token'ı güncellemek yeter; bileşenler referansla bağlı olduğu için otomatik olarak güncellenir. DESIGN.md spesifikasyonundaki {colors.tertiary} gibi referanslar tam olarak bu mantıkla çalışır.

Hangi kararlar token olmalı?

• Renkler: marka, metin, zemin, kenarlık, durum (başarı, uyarı, hata) renkleri
• Tipografi: yazı tipi aileleri, boyut ölçeği, ağırlıklar, satır yüksekliği, harf aralığı
• Boşluk: 4 ya da 8'in katlarıyla ilerleyen bir ölçek (4, 8, 12, 16, 24, 32…)
• Köşe yarıçapları: küçük, orta, büyük ve “tam yuvarlak” (9999px)
• Gölgeler ve katmanlar: yükseklik seviyeleri
• Hareket: süre ve yumuşatma eğrileri (isteğe bağlı)

Aynı token, dört biçim

MakeMyMD bir tasarım sistemini aynı kararlardan dört biçimde üretir. Aşağıdaki örneklerin hepsi aynı kararları anlatır: birincil ve aksiyon rengi, gövde yazı tipi ve orta köşe yarıçapı.

DESIGN.md (YAML ön bilgi)

colors:
  primary: "#1A1C1E"
  tertiary: "#B8422E"
typography:
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
rounded:
  md: 8px

CSS değişkenleri

:root {
  --color-primary: #1A1C1E;
  --color-tertiary: #B8422E;
  --font-body: "Public Sans", system-ui, sans-serif;
  --radius-md: 8px;
}

.button-primary {
  background: var(--color-tertiary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

Tailwind teması (v4)

Tailwind v4'te tema, CSS içindeki @theme bloğuyla tanımlanır ve her değişken otomatik olarak yardımcı sınıflara dönüşür:

@import "tailwindcss";

@theme {
  --color-primary: #1A1C1E;
  --color-tertiary: #B8422E;
  --font-body: "Public Sans", system-ui, sans-serif;
  --radius-md: 8px;
}

Bu tanımla bg-tertiary, text-primary, font-body ve rounded-md sınıflarını kullanabilirsin.

JSON token (W3C DTCG biçimi)

W3C Design Tokens topluluk grubunun biçiminde her token bir $value ve $type taşır; Style Dictionary gibi token dönüştürücüleri ve birçok tasarım aracı eklentisi bu biçimi okuyabilir:

{
  "color": {
    "primary": { "$value": "#1A1C1E", "$type": "color" },
    "tertiary": { "$value": "#B8422E", "$type": "color" }
  },
  "radius": {
    "md": { "$value": "8px", "$type": "dimension" }
  }
}

Token adlandırma kuralları

1. Görünüşe değil role göre adlandır. color-orange yerine color-action-primary; marka rengi değiştiğinde ad yanlış kalmaz.
2. Tutarlı bir sıra kullan. kategori-rol-varyant-durum: color-text-muted, color-action-primary-hover.
3. Ölçekleri sayı ya da tişört bedeniyle ver. space-4 ya da radius-md; aynı sistemde ikisini karıştırma.
4. Kısaltmalardan kaçın. bg ve fg gibi yerleşik kısaltmalar dışında tam kelime kullan; yapay zekâ araçları da açık adları daha doğru eşleştirir.
5. Her token'ın bir kullanıcısı olsun. Hiçbir bileşende kullanılmayan token'lar sistemi şişirir; DESIGN.md denetimi bunları orphaned-tokens uyarısıyla gösterir.

Token'ları bir markadan nasıl çıkarırım?

Mevcut bir markan varsa sıfırdan başlamana gerek yok. MakeMyMD sihirbazına logonu ya da PDF marka kılavuzunu yüklediğinde renk paleti ve PDF'e gömülü yazı tipleri çıkarılır, ardından boşluk, köşe yarıçapı ve bileşen kararları adım adım belirlenir. Sonuç DESIGN.md, CSS değişkenleri, Tailwind teması ve JSON token olarak indirilir. Tanınmış markaların token'larını incelemek için tasarım sistemleri kütüphanesine göz atabilirsin.

Sık sorulan sorular

Design token ile CSS değişkeni aynı şey mi?

Tam olarak değil. Token bir tasarım kararıdır ve farklı biçimlerde yaşayabilir; CSS değişkeni bu kararın web'deki karşılıklarından biridir. Aynı token iOS, Android ya da tasarım araçlarında başka biçimlerde temsil edilebilir.

Küçük bir proje için token gerekli mi?

Birkaç sayfalık bir proje için bile renkleri ve yazı tiplerini değişken olarak tanımlamak zaman kazandırır. Özellikle yapay zekâ araçlarıyla çalışıyorsan, token'lar üretilen kodun tutarlı kalmasını sağlar.

Tailwind kullanıyorsam DESIGN.md'ye yine de ihtiyacım var mı?

Evet. Tailwind teması değerleri tanımlar ama ne zaman hangisinin kullanılacağını anlatmaz. DESIGN.md bu gerekçeyi ve kuralları ekler; ikisi birlikte en iyi sonucu verir.

DTCG biçimi nedir?

W3C Design Tokens topluluk grubunun geliştirdiği, token'ları JSON olarak tanımlamaya yarayan ortak biçimdir. Tasarım ve geliştirme araçları arasında token alışverişini standartlaştırmayı amaçlar.