3E Eğitim Platformu · Teslimat 2 — Design Token Seti

Tokenlar — "Kırma + Mürekkep" (3a)

Tailwind config'e birebir maplenebilir. Kural: bu tablo dışında serbest renk/spacing kullanılmaz. Katalog: Form · Veri · Grafik · Geri Bildirim · Navigasyon

1 · Renk — nötr skala (ink)

Gri-mavi tek eksen. Tailwind: colors.ink.*

TOKEN

DEĞER

ÖRNEK

KULLANIM

{{ r.t }}

{{ r.v }}

Yüzeyler

surface FFFFFF

kart, input, modal

bg EEF1F3

sayfa zemini

bg-sunken E6EAED

çukur alan, kod

Vurgu (accent) — tek renk

accent-600

oklch(.5 .1 243)

accent-700

hover/pressed

accent-50 E0EBF3

tint, seçili zemin

Aksiyon, link, aktif durum, focus ring. Dekorasyon için asla kullanılmaz.

2 · Semantik renkler

Mavi asla sorun anlatmaz. Her satır: dot / fg / bg / border dörtlüsü — rozet, banner, çubuk, timeline aynı dörtlüyü kullanır.

TOKEN

DÖRTLÜ

ÖRNEK ROZET

KULLANIM

{{ s.hex }}

Data-viz paleti — 8 renk, renk körlüğü güvenli

{{ v.n }}

Sıra sabittir: seri 1 her zaman viz-1'den başlar. Mavi-turuncu ankraj çifti deuteranopia/protanopia'da ayrışır; komşu seriler ton+açıklık farkı taşır.

3 · Tipografi

UI: Archivo (tnum açık) · Kod/ID/hex: IBM Plex Mono. Tüm sayısal kolonlar tabular.

TOKEN

DEĞER

ÖRNEK

display

34/40 · 800 · -1.2px

476

h1

25/32 · 800 · -0.3px

Günaydın, Elif

h2

20/28 · 800 · -0.2px

Eğitim planlama sihirbazı

h3 / kart

15/22 · 800 · -0.2px

Yaklaşan eğitimler

body

13.5/20 · 500 (700 strong)

Tehlikeli Madde Güvenlik Danışmanlığı eğitimi bakanlığa bildirildi.

small

12.5/18 · 500

Kocaeli · Sertifikada Görev 5 ve 6 kapsanır

caption

11.5/16 · 500

Beyanlar zaman damgalıdır ve değiştirilemez.

micro

10.5/14 · 700 · +1.6px · CAPS

SÜRESİ DOLAN PERSONEL

Uzun Türkçe etiket stratejisi: tablo başlığı 2 satıra sarılmaz — kısaltma + title attr tooltip ("Teh. Madde Güv. Danışmanlığı"); rozetlerde 22 karakter üstü kırpılır + tooltip; buton metni fiil + tek nesne ("Bildirimi Yap").

4 · Spacing — 4'lük ızgara

5 · Radius

4 chip

8 input

10 banner

12 kart

full rozet

6 · Gölge — yalnız yüzen katman

kart: gölge yok

popover/menü

modal/drawer

7 · Breakpoint, yoğunluk, erişilebilirlik

sm 375

mobil taban — her akış eksiksiz

md 768

tablet, 2 kolon form

lg 1024

sidebar açılır

xl 1440

tam kokpit düzeni

Tablo yoğunluğu

Kompakt · 40px

satır içi 11px dikey

Rahat · 52px

satır içi 16px dikey

Focus ring & dokunma hedefi

2px accent-600 outline, 2px offset — her etkileşimli öğede.
Dokunma hedefi min. 44px; mobilde input yüksekliği 48px.

WCAG AA: metin kontrastları — ink-800/surface 9.6:1, ink-600 5.9:1, ink-400 3.4:1 (yalnız ≥18px veya dekoratif), semantik fg'ler tint zeminlerinde ≥4.6:1. accent-600 beyaz üzerinde 4.7:1 (buton metni beyaz ✓).