Design Tokens — مستندات سیستم طراحی

🎨

رنگ‌ها — Colors

Purple Scale

Dark Scale

Error / Red

Warning / Orange

Success / Green

Soft / Cream

🌈

گرادیان‌ها — Gradients

--gradient-brand

--gradient-world

--gradient-privacy

--gradient-purple-radial

--gradient-magic

--gradient-gold

📐

فاصله‌گذاری — Spacing

--space-2xs2px

--space-xs4px

--space-sm8px

--space-md12px

--space-lg16px

--space-xl24px

--space-2xl32px

--space-3xl40px

📏

عرض‌های لایه‌بندی — Layout Widths

--layout-3xs

24px

--layout-xs

48px

--layout-sm

64px

--layout-md

80px

--layout-lg

128px

--width-content

725px

--width-content-lg

934px

--width-wide

1170px

--width-full

1440px

🔵

گوشه‌های گرد — Border Radius

--radius-xs
4px

--radius-sm
8px

--radius-md
12px

--radius-lg
24px

--radius-xl
48px

--radius-2xl
80px

--radius-3xl
128px

--radius-pill
∞

🔤

تایپوگرافی — Typography

عنوان اصلی / Display--text-4xl · 40px · 600

عنوان بزرگ / Heading 1--text-3xl · 32px · 600

عنوان متوسط / Heading 2--text-2xl · 24px · 500

عنوان کوچک / Heading 3--text-xl · 20px · 500

متن بزرگ / Large Body--text-lg · 18px · 400

متن پایه / Body--text-md · 16px · 400 — base

متن ثانوی / Small--text-sm · 14px · 400

برچسب / Caption--text-xs · 12px · 400

⚡

ترنزیشن — Transitions

--transition-fast

0.15s ease hover / focus

--transition-base

0.20s ease default

--transition-slow

0.30s ease modal / overlay

🪟

سایه‌ها — Shadows

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-purple-sm

--shadow-purple-lg

🎯

توکن‌های معنایی — Semantic Tokens

--text-primary#15141a

--text-secondary#7b7a82

--text-linkpurple-500

--text-link-hoverpurple-400

--bg-pagewhite

--bg-surfacegrey-100

--btn-primary-bgpurple-400

--btn-primary-bg-hoverpurple-500

--text-errorerror

--bg-errorerror-bg

--bg-codesoft-purple-200

--border-defaultgrey-200

✅

کامپوننت‌های نمونه — Components

Buttons

Badges

برچسب موفق خطا هشدار تاریک

Metric Cards

۱۲۴

کل مقالات

۸۷٪

رضایت کاربران

آنلاین

وضعیت سرور

Input