التصميم والواجهة·متوسط

إعداد نظام توكنز تصميم كامل

توكنز 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).
  • بعد التنفيذ، راجع النتيجة على الجوال والسطح المكتبي.
محتوى مرتبط
عودة إلى مكتبة البرومبتات
انضم لمجتمع واتساب