التصميم والواجهة·متوسط
إعداد نظام توكنز تصميم كامل
توكنز OKLCH موحّدة للألوان والمسافات والحواف والحركة.
نصّ البرومبت
أعد ضبط src/styles.css بنظام تصميم كامل: - ألوان بصيغة oklch كتوكنز: background, foreground, surface, muted, primary, accent, destructive, success, warning, border. - تدرّج مسافات مبني على 4px، ونصف قطر --radius ثابت. - خطوط: sans + serif + mono ضمن @theme. - utilities مخصّصة: container-page, card-elevated, eyebrow. - تأكّد أنّ كل المكوّنات تستهلك التوكنز فقط، بلا bg-white أو text-black.
وسوم
design systemtokens
كيف تخصّصه لفكرتك؟
- استبدل أسماء العناصر والألوان بما يناسب هوية منتجك.
- أضف قيوداً واضحة (مثل: بدون خلفيات متدرّجة، استخدم توكنز styles.css).
- بعد التنفيذ، راجع النتيجة على الجوال والسطح المكتبي.
محتوى مرتبط
التصميم والواجهة · مبتدئ
هيرو تحريري لصفحة هبوط
هيرو مقسّم 8/4 بدون تدرّجات، بأسلوب Stripe/Linear.
التصميم والواجهة · مبتدئ
حالات فارغة مقنعة
بديل عن الشاشات الفارغة يشجّع أوّل إجراء.
التصميم والواجهة · متوسط
تدقيق RTL شامل
مراجعة كل الواجهات لدعم العربية بشكل صحيح.
التصميم والواجهة · متوسط
قائمة أوامر (⌘K) بأسلوب Linear
بحث وتنقّل عالمي بلوحة المفاتيح.
