Design token (tasarım jetonu) nedir?

Design token ne demek

Design Tokens Community Group'un format belgesi tokenı, okunabilir bir ada bağlı bilgi diye tanımlar. En az bir ad ve bir değerden oluşur. Belgedeki örnek şöyle: color-text-primary: #000000.

Türkçede "tasarım jetonu" diye çevrilse de ekiplerde çoğu zaman İngilizcesi kullanılır. Ben de öyle yapıyorum.

Token yoksa aynı turuncu onlarca dosyada #FF6B3D diye yazılır. Rengi değiştirmek için hepsini tek tek bulmanız gerekir. Token varsa tek satırı değiştirirsiniz.

Primitive ve semantic token

Tokenlar genelde iki katmanda tutulur. Primitive token ham değeri adlandırır. Semantic token ise o değerin ne iş gördüğünü söyler.

Bu sitenin kendi dosyası buna bir örnek. src/ds/tokens.css içinde birinci katmanda --c-orange-500: #FF6B3D gibi primitive'ler var. Dosyadaki nota göre bileşenler bunları doğrudan kullanmaz.

İkinci katman semantic: --accent: var(--c-orange-500), --text: var(--c-ink-900), --bg: var(--c-cream-100). Butonlar ve kartlar yalnızca bu adları okur.

Katman	Ad neyi söyler	Bu sitedeki örnek
Primitive	Değerin kendisini	--c-ink-900
Semantic	Değerin görevini	--text

Tema: aynı bileşen, başka değerler

Tema, semantic tokenların başka primitive'lere bağlanmasıdır. Bileşenin kodu değişmez, yalnızca adların arkasındaki değerler değişir.

Bu sitedeki koyu bölümler böyle çalışır. data-mood="inverse" kuralı --bg değerini --c-ink-900, --text değerini --c-cream-100 yapar. Butonun CSS'ine hiç dokunulmaz.

Canlı mini tema

Kargo

Siparişiniz yolda

Tahmini teslim: Perşembe

Kargoyu takip et

Semantik token	Bağlı olduğu primitive
--dtk-bg	--c-cream-0 #FFFDF8
--dtk-text	--c-ink-900 #1A1916
--dtk-accent	--c-orange-500 #FF6B3D

Açık tema gösteriliyor.

Kart bileşeni yalnızca üç semantik tokenı okur. Tema butonları bu tokenların hangi primitive renge bağlandığını değiştirir. Kartın kendi CSS'ine dokunulmaz. Renkler bu sitenin src/ds/tokens.css dosyasındaki primitive'lerdir.

Tema değişince kontrast da değişir. Yeni renk çiftlerini kontrast hesaplayıcıda denemenizi öneririm. Eşikler için WCAG rehberine bakabilirsiniz.

W3C Design Tokens Community Group formatı

Tokenları araçlar arasında taşımak için ortak bir dosya biçimi var. Onu Design Tokens Community Group (DTCG) hazırlıyor. Grup, W3C'nin topluluk grupları çatısı altında çalışıyor.

Design Tokens Format Module 2025.10, 28 Ekim 2025'te "Final Community Group Report" olarak yayımlandı. Belge kendi notunda W3C standardı olmadığını ve standart sürecinde de bulunmadığını yazıyor. Belge kendini kararlı sayıyor ve uygulanmak üzere hazırlandığını yazıyor.

Biçim JSON tabanlı. Önerilen uzantılar .tokens ve .tokens.json. $value alanı olan her nesne bir token sayılır, $type ise isteğe bağlıdır. Bir token, başka bir tokenın değerini {grup.token} yazımıyla kullanabilir.

{
  "color": {
    "orange-500": { "$type": "color", "$value": "#FF6B3D" },
    "accent": { "$type": "color", "$value": "{color.orange-500}" }
  }
}

Açık ve koyu tema gibi farklı bağlamlar için aynı tarihte ayrı bir Resolver Module yayımlandı. Aynı sitede bir de canlı taslak duruyor. Taslak kendini önizleme diye tanımlıyor ve uygulanmamasını istiyor.

Benim notum

Kod tabanlarında en sık gördüğüm durum, aynı rengin birbirine çok yakın birkaç tonunun dağınık yazılması. Böyle bir üründe koyu tema istendiğinde her bileşeni tek tek açmak gerekir.

Benim önerim az sayıda semantic tokenla başlamak: zemin, metin, vurgu, kenarlık. Primitive listesini sonra toparlarsınız. Tasarla ve Yayınla Sprinti'nde tokenları tasarım dosyasından reponuza ben taşıyorum.

Tokenlar arayüzün görünen katmanını düzenler. Arayüzün ne olduğunu UI sözlük sayfasında anlattım.