design-tokens

---

name: design_tokens router_kit: FullStackKit description: 8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri. metadata: skillport: category: design tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, design tokens, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - design-responsive

🎨 Design Tokens

Temel tasarım değişkenleri: spacing, typography, colors.

---

📐 1. Spacing System (8-Point Grid)

Temel Kural

Tüm boşluklar 8'in katları olmalı.

4px   - Minimum (micro)
8px   - XS
16px  - SM (icon-text arası)
24px  - MD (card içi)
32px  - LG (component'ler arası)
48px  - XL (section içi gruplar)
64px  - 2XL (section'lar arası)
96px  - 3XL (major section'lar)
128px - 4XL (hero padding)

Padding Yapısı

Element	Padding
Card/Container	24px veya 32px
Button	12px / 24px (V/H)
Input	12px / 16px (V/H)
Section (Desktop)	64px - 96px
Section (Mobile)	32px - 48px

---

🔤 2. Typography Scale

Font Sizes

12px  - Caption / Helper
14px  - Small / Metadata
16px  - Body (Base)
20px  - Lead paragraph
24px  - H4
32px  - H3
40px  - H2
48px  - H1
64px  - Hero

Line Height

Tip	Oran
Başlıklar (H1-H3)	1.2 - 1.3
Body text	1.5 - 1.6
Small text	1.4
Hero text	1.1

Font Weight

400 - Regular (Body)
500 - Medium (Subtle emphasis)
600 - Semibold (Subheadings, buttons)
700 - Bold (Headings)
800 - Extra bold (Hero)

---

🎨 3. Color System

Contrast Ratios (WCAG)

Tip	Minimum
Normal text	4.5:1
Large text (18px+)	3:1
UI components	3:1
AAA ideal	7:1

Palet Yapısı

Primary:   50, 100, 200...900, 950 (10 shade)
Secondary: 10 shades
Neutral:   10 shades
Success/Warning/Error/Info: 5 shades

Opacity Scale

100% - Default
75%  - Disabled
60%  - Placeholder
40%  - Dividers
20%  - Subtle backgrounds
10%  - Hover overlays

---

📦 4. Border Radius

0px    - Sharp
4px    - Small (buttons)
8px    - Medium (cards) ← Default
16px   - Large (feature cards)
9999px - Full (pills, avatars)

---

🔄 Workflow

Kaynak: W3C Design Tokens Format & Style Dictionary Best Practices

Aşama 1: Audit & Token Hierarchy

• Color/Type Audit: Marka renklerini ve tipografi ölçeğini (Scale) standartlaştır.
• Classification: Tokenlar'ı 3 seviyeye ayır: Primitive (Global), Semantic (Purpose) ve Component-specific.
• Naming Convention: category-type-item-state (örn: action-primary-hover) formatını uygula.

Aşama 2: Definition & Tooling

• JSON Definition: Token'ları merkezi bir JSON dosyasında tanımla.
• Multi-Platform Export: Style Dictionary kullanarak tokens'ları CSS, JS ve Swift/Kotlin formatlarına dönüştür.
• Theme Variation: Dark/Light mode için semantik eşlemeleri yap.

Aşama 3: Consumption & Maintenance

• Implementation: Kod içerisinde hardcoded değerleri token değişkenleriyle değiştir.
• Version Control: Token değişikliklerini merkezi tasarım kütüphanesi üzerinden takip et.
• Governance: Yeni eklenen renk veya boşluk değerlerinin sisteme uygunluğunu denetle.

Kontrol Noktaları

Aşama	Doğrulama
1	Tüm renkler WCAG erişilebilirlik (Contrast) testinden geçti mi?
2	Token isimleri geliştirici ve tasarımcı için aynı anlamı taşıyor mu?
3	Token değişikliği tüm platformlarda otomatik güncelleniyor mu?

---

Design Tokens v1.5 - With Workflow