---

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

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

---

🔤 2. Typography Scale

Font Sizes

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

Line Height

Font Weight

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

---

🎨 3. Color System

Contrast Ratios (WCAG)

Palet Yapısı

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

Opacity Scale

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

---

📦 4. Border Radius

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

---

Design Tokens v1.5 - With Workflow