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

> Design token'lar; renk, yazı tipi, boşluk ve köşe yarıçapı gibi tasarım kararlarını adlandırılmış değerlere dönüştürür. Temel, anlamsal ve bileşen token'larını; CSS, Tailwind ve JSON karşılıklarıyla örnekliyoruz.

Yazar: Murat Canbaz · Güncellendi: 2026-09-26 · Kaynak: https://www.makemymd.com/rehber/design-token-nedir/

## 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:

| Katman | Ne anlatır | Örnek |
|---|---|---|
| Temel (primitive) | Ham değer paleti | `orange-600: #B8422E` |
| Anlamsal (semantic) | Değerin rolü | `color-action-primary: {orange-600}` |
| Bileşen (component) | Belirli bir bileşendeki kullanım | `button-primary-bg: {color-action-primary}` |

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ı.

![Aynı tasarım sisteminin dört biçimi](/assets/screens/sablon.jpg "Şablon sayfalarında aynı token'lar DESIGN.md, theme.css, variables.css ve tokens.json sekmelerinde yan yana görünür.")

### DESIGN.md (YAML ön bilgi)

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

### CSS değişkenleri

```css
: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:

```css
@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:

```json
{
  "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](/olustur/) 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](/tasarim-sistemleri/) 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.