design_tokens
8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill design_tokensInstructions
Loading…
8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri.
npxskills add vuralserhat86/antigravity-agentic-skills--skill design_tokensLoading…
Temel tasarım değişkenleri: spacing, typography, colors.
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)
| 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 |
12px - Caption / Helper
14px - Small / Metadata
16px - Body (Base)
20px - Lead paragraph
24px - H4
32px - H3
40px - H2
48px - H1
64px - Hero
| 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 |
400 - Regular (Body)
500 - Medium (Subtle emphasis)
600 - Semibold (Subheadings, buttons)
700 - Bold (Headings)
800 - Extra bold (Hero)
| Tip | Minimum |
|---|---|
| Normal text | 4.5:1 |
| Large text (18px+) | 3:1 |
| UI components | 3:1 |
| AAA ideal | 7:1 |
Primary: 50, 100, 200...900, 950 (10 shade)
Secondary: 10 shades
Neutral: 10 shades
Success/Warning/Error/Info: 5 shades
100% - Default
75% - Disabled
60% - Placeholder
40% - Dividers
20% - Subtle backgrounds
10% - Hover overlays
0px - Sharp
4px - Small (buttons)
8px - Medium (cards) ← Default
16px - Large (feature cards)
9999px - Full (pills, avatars)
Kaynak: W3C Design Tokens Format & Style Dictionary Best Practices
category-type-item-state (örn: action-primary-hover) formatını uygula.Style Dictionary kullanarak tokens'ları CSS, JS ve Swift/Kotlin formatlarına dönüştür.| 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
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).