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ı

🔤 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

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)

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ı

Design Tokens v1.5 - With Workflow