design-system

Overview A design system is the single source of truth for an organization's UI — combining design tokens, component libraries, documentation, and tooling into a cohesive ecosystem. It ensures consistency, accelerates development, and bridges the gap between design and engineering.

Token Architecture Design tokens are the atomic values of a design system — colors, spacing, typography, elevation, motion. They flow through three tiers:

| Global | blue-500: #3b82f6 | Raw palette values | | Alias / Semantic | color-primary: {blue-500} | Intent-based references | | Component | button-bg: {color-primary} | Scoped to a specific component |

يُستخدم عند إنشاء نظام تصميم أو صيانته - المجموعة المنسقة من رموز التصميم ومكتبات المكونات والوثائق والأدوات التي تضمن الاتساق البصري والسلوكي عبر المنتجات. الاستخدام من أجل: تصميم بنية النظام، واختيار تنسيقات الرمز المميز مقابل أطر المكونات، وربط Figma بالرمز، وسير عمل التصميم إلى التطوير، والاتساق متعدد المنصات لا تستخدم من أجل: تأليف رمز مميز محدد (استخدم رموز التصميم)، وسير عمل Figma (استخدم Figma)، وفهرسة المكونات (استخدم كتاب القصص)، وتحويل الرمز المميز (استخدم قاموس النمط)، ومكونات الإطار المتقاطع (استخدم الانقسام) المصدر: tyler-r-kendrick/agent-skills.