Dealix Styleguide — مكتبة التصميم الموحّدة

01 · Color Tokens

رموز الألوان

رموز معرّفة في styles.css (foundation) و design-system.css (component layer). كل صفحة تستخدمها مباشرة عبر var(--token-name).

--accent#0ea5e9

--accent-2#22d3ee

violet#a855f7

--ink-900#0b1220

--ink-700#1e293b

--ink-300#94a3b8

--success#22c55e

--warn#fbbf24

--danger#dc2626

02 · ds-banner

شريط الترحيب · Hero banner

يُستخدم في رأس صفحات العرض الكبيرة. عربي أولاً (العنوان)، الإنجليزية ثانياً (subtitle).

<div class="ds-banner">
  <h1 class="ds-banner__title">عنوان</h1>
  <p class="ds-banner__subtitle">subtitle</p>
</div>

03 · ds-status

شارات الحالة · Status pills

حالات نقاط النهاية الحيّة. تُحدَّث ديناميكياً عبر JS بناءً على رمز HTTP.

OK DEGRADED ERROR LOADING

<span class="ds-status ds-status--ok">OK</span>
<span class="ds-status ds-status--degraded">DEGRADED</span>
<span class="ds-status ds-status--error">ERROR</span>
<span class="ds-status ds-status--loading">LOADING</span>

04 · ds-mode (Action modes — Constitution Article 5)

أنماط الإجراء · Action mode pills

5 أنماط ثابتة من دستور Dealix. لا يوجد نمط سادس — أيّ إجراء خارجي يجب أن يُصنّف إلى أحدها.

suggest_only draft_only approval_required approved_manual blocked

<span class="ds-mode ds-mode--suggest">suggest_only</span>
<span class="ds-mode ds-mode--draft">draft_only</span>
<span class="ds-mode ds-mode--approval">approval_required</span>
<span class="ds-mode ds-mode--approved">approved_manual</span>
<span class="ds-mode ds-mode--blocked">blocked</span>

05 · ds-pulse

نقطة النبض الحيّة · Live pulse

مؤشّر دائم للتحديث الذاتي / المراقبة المستمرّة.

تحديث تلقائي كل ٦٠ ثانية · auto-refresh every 60s

<span class="ds-pulse"></span>

06 · ds-card + ds-grid

بطاقات + شبكة تكيّفية

بطاقة عامّة قابلة لإعادة الاستخدام (طبقات Beast، أدوار، رتب الخدمة، مؤشّرات أداء). شبكة تتكيّف تلقائياً (auto-fit).

🌱 Growth Beast OK

محرّك النمو الذاتي · self-growing engine

💰 RevOps OK

الحقيقة الماليّة · revenue truth

👥 Role Command LOADING

٩ أدوار يوميّة · 9 daily roles

<div class="ds-grid">
  <div class="ds-card">
    <h4 class="ds-card__title">العنوان <span class="ds-status ds-status--ok">OK</span></h4>
    <p class="ds-card__sub">subtitle</p>
  </div>
</div>

07 · ds-kpi

مؤشّرات الأداء · KPI tiles

رقم كبير + تسمية صغيرة. يستخدم العنوان gradient متناسق مع شريط الترحيب.

7طبقات تشغيل

9أدوار يوميّة

8بوّابات صلبة

499 SAR7-Day Sprint

<div class="ds-kpi">
  <span class="ds-kpi__num">7</span>
  <span class="ds-kpi__label">طبقات تشغيل</span>
</div>

08 · ds-endpoint, ds-chip, ds-gate

شارات صغيرة · Tags & chips

عناصر مدمجة لإظهار مسارات API، إشارات الدستور، والبوّابات الصلبة.

GET /api/v1/founder/beast-command-center POST /api/v1/growth-beast/offer/match

Article 2 — Golden Loop Article 5 — 5 Action Modes Article 8 — Revenue Truth

NO_LIVE_SEND NO_FAKE_REVENUE NO_COLD_WHATSAPP

<span class="ds-endpoint">GET /api/v1/...</span>
<span class="ds-chip">Article 2</span>
<span class="ds-gate">NO_LIVE_SEND</span>

09 · ds-section + ds-list-clean

قسم منسّق · Titled section + list

رأس قسم بعنوان + بيانات وصفيّة، مع قائمة نظيفة بدون نقاط رصاصيّة.

السلّم الخدمي · 5-Rung Service Ladder

Article 9 · 5 rungs

Mini Diagnostic — مجاني
7-Day Growth Proof Sprint — 499 SAR
30-Day Growth Beast OS — recommended
Monthly Retainer
Strategic Partner

10 · ds-code

كتلة كود · Pre-formatted block

يستخدم لإظهار مسارات الـ Golden Loop والمخرجات API.

1.  Market Signal           → /growth-beast/signals/evaluate
2.  ICP Score (90/100)      → /growth-beast/targets/rank
3.  Offer Match (499 SAR)   → /growth-beast/offer/match
4.  Warm Route (draft_only) → /growth-beast/warm-route/draft
6.  Diagnostic (7-day plan) → /company-growth-beast/diagnostic
13. Weekly Experiment       → /growth-beast/experiment/next

11 · Spacing scale

سُلَّم المسافات · 8px grid

رموز الفراغات معرّفة بمضاعفات ٤ بكسل (٤، ٨، ١٢، ١٦…)، ما يضمن إيقاعاً بصرياً متّسقاً عبر كلّ الصفحات.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-7 · 32px

--space-8 · 40px

--space-9 · 56px

--space-10 · 72px

--space-11 · 96px

12 · Typography scale

سُلَّم الطباعة

سلم Modular يربط أحجام النص بمواقع التراتب البصري. الأحجام الكبرى تستخدم clamp() لتتكيّف مع شاشة كل جهاز.

العنوان البطل · Hero --fs-5xl

عنوان رئيسي · Headline --fs-4xl

عنوان فرعي · Section title --fs-3xl

عنوان كرت · Card title --fs-xl

فقرة قياديّة · Lede paragraph --fs-lg

نصّ عام مستخدم في الفقرات والأوصاف. --fs-md

نص مساند · meta / hint --fs-sm

13 · ds-btn

أزرار · Buttons

أربعة أنماط (primary · ghost · subtle · danger) بثلاثة أحجام، مع حالات focus + hover + disabled كاملة.

<button class="ds-btn">احجز تجربة</button>
<button class="ds-btn ds-btn--ghost">المزيد</button>
<button class="ds-btn ds-btn--lg">كبير</button>

14 · ds-link

روابط مع تسطير متحرّك

رابط نصي مع شريط تسطير ينمو من اليمين إلى اليسار (RTL) أو العكس (LTR) عند المرور.

رابط رئيسي رابط هادئ

<a class="ds-link" href="#">رابط رئيسي</a>
<a class="ds-link ds-link--quiet" href="#">رابط هادئ</a>

15 · ds-input

حقول الإدخال

الاسم الكامل سيظهر على الفاتورة. البريد الإلكتروني تنسيق غير صحيح — استخدم name@domain.com

16 · ds-skeleton + ds-spinner

حالات التحميل

عناصر مدمجة لإظهار التحميل دون قفز التخطيط (CLS = 0).

17 · ds-feature

بطاقة قدرة · Feature card

🌱

نموّ ذاتي مُثبت

تجارب أسبوعيّة محكومة، لا scraping، لا cold blast — كل خطوة بموافقة المؤسس.

🛡️

امتثال PDPL

٨ بوّابات صلبة مقفلة، action policy في كل router، صفر إرسال حيّ بدون موافقة.

💰

حقيقة الإيراد

مسوّدة فاتورة ≠ إيراد. لا ادعاءات بدون دليل دفع موثَّق.

18 · ds-stat

مؤشّرات أداء مع دلتا

٧ طبقات تشغيل ↗ +1 طبقة (V12.5)

٨/٨ بوّابات مقفلة — ثابت (Article 4)

٤٩٩ SAR سعر البايلوت ↗ first paid offer live

19 · ds-quote

اقتباس / شهادة

لا نَعِد بشيء لا نقدر نُثبته. كل خطوة فيها evidence. هذا الفرق بين Tier-1 و الباقي.

سامي العسيري · مؤسّس Dealix

20 · ds-faq

أسئلة شائعة · accordion

يستخدم <details> الأصلي — متوفّر دون JS، يدعم لوحة المفاتيح والتقنيّات المساعدة.

هل Dealix يرسل رسائل تلقائياً؟

لا. كل إرسال خارجي يحتاج موافقة المؤسس (NO_LIVE_SEND). نولّد مسوّدات جاهزة أنتَ تُرسلها يدوياً.

كيف تتعاملون مع PDPL؟

طبقة Compliance v12 تتحقق من كل action قبل أن يصير suggest_only/draft_only — مع redaction للـ PII قبل التخزين.

متى يفتح الـ 30-Day Sprint؟

يفتح آلياً بعد أوّل بايلوت ٤٩٩ ريال ناجح ومُثبَت. لا ترقية بدون evidence (Article 8).

21 · ds-tabs

تبويبات · Tabs

22 · ds-breadcrumb

مسار التنقّل · Breadcrumb

23 · Typography utilities

عناوين الصفحات الجاهزة

Constitution Article 9

سلّم الخدمات — ٥ درجات

من Mini Diagnostic مجّاني إلى Strategic Partnership — كلّ درجة تفتح فقط بعد إثبات ناجح للدرجة قبلها.

24 · ds-glass + ds-hover-lift

سطح زجاجي + رفع عند المرور

سطح زجاجي · backdrop-blur

حرّك الفأرة فوقي ↑

25 · Accessibility primitives

إمكانيّة الوصول · A11y

كلّ صفحة Tier-1 يجب أن: تدعم لوحة المفاتيح، تحترم prefers-reduced-motion، توفّر skip-link، تستخدم HTML دلالي، وتحقّق تباين WCAG AA.

<a class="ds-skip-link" href="#main">تخطّ</a> — أوّل عنصر تركيز يقفز للمحتوى
<main id="main"> — landmark دلالي يحدّد المنطقة الرئيسيّة
aria-live="polite" — يُعلم قارئ الشاشة بالتحديثات الحيّة
:focus-visible — حلقة تركيز ذات تباين ٢ بكسل + halo (تطبَّق آلياً عبر .ds-focus-ring)
@media (prefers-reduced-motion: reduce) — يوقف ds-pulse + ds-spinner + الانتقالات

26 · How to use

طريقة الاستخدام

أيّ صفحة جديدة في landing/: اربطي ملفّين، استخدمي الفئات.

<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="/assets/css/design-system.css">
<html lang="ar" dir="rtl" data-theme="dark">
<body>
  <a class="ds-skip-link" href="#main">تخطّ</a>
  <main id="main" class="ds-container">
    <div class="ds-banner">…</div>
    <div class="ds-grid">
      <div class="ds-card">…</div>
    </div>
    <span class="ds-mode ds-mode--draft">draft_only</span>
  </main>
</body>

مكتبة تصميم Dealix