# نظام تصميم مستوحى من OpenAI

> Category: ذكاء اصطناعي ونماذج لغوية كبيرة
> نظام هادئ شبه أحادي اللون يرتكز على أسود-فيروزي عميق مع مساحة بيضاء سخية وطباعة تحريرية.

## 1. الطابع البصري والأجواء العامة

تبدو واجهة منتجات OpenAI كمختبر بحثي ارتدى حلّته للجمهور — دقيقة ومقيّدة وصامتة بتعمّد. خلفية الصفحة بيضاء نقية (`#ffffff`) تتطبّق فوق حبر قريب من الأسود (`#0d0d0d`) مع نبرة فيروزية خفية، بحيث يبدو حتى النص مبرّدًا قليلًا لا داكنًا بشكل صارخ. والنتيجة حيادية لونية تضع مخرجات النماذج والأكواد البرمجية والنصوص في الصدارة، لا الإطار المحيط بها.

السمة المميّزة هي استخدام **Söhne** (أو بديلها النظامي `inter`) بأوزان مقيّدة — 400 للنص الأساسي، 500 للتنقل والتسميات، 600 للتأكيد — مقترنةً بـ **Signifier**، وهو خط مَزيفي معاصر يُستخدم للعناوين التحريرية. بينما تميل معظم علامات الذكاء الاصطناعي نحو المستقبلية، تمنح عناوين OpenAI المزيفية المنتجَ نبرةً أدبيةً هادئة، كأن كل إعلان مقالٌ رصين.

نظام الأشكال موحّد الليونة: نصف قطر 8–12 بكسل، وحبوب 9999 بكسل للعلامات والشرائح، ولا زوايا حادة في أي مكان. تُشار إلى انتقالات الأقسام بالمساحة البيضاء لا بالفواصل؛ وحين تظهر الحدود فهي خطوط `#e5e5e5` بعرض شعرة تُقرأ كغياب اللون لا حضوره.

**الخصائص الجوهرية:**
- لوحة بيضاء نقية (`#ffffff`) مع حبر أسود-فيروزي عميق (`#0d0d0d`)
- Söhne / Inter بأوزان متواضعة (400، 500، 600) — التهذيب على التأكيد
- خط Signifier المزيفي للعناوين التحريرية
- نصف قطر لين 8–12 بكسل في كل مكان؛ حبوب 9999 بكسل للشرائح
- حدود شعرية (`#e5e5e5`) تُستخدم بتقتير؛ المساحة البيضاء هي الفاصل الأساسي
- رسومات أحادية اللون بالفيروزي العميق — لا تدرجات في الشعارات
- ارتفاع سطر سخي (1.55–1.65) وتباعد أحرف يكاد يكون صفرًا

## 2. لوحة الألوان وأدوارها

### الألوان الأساسية
- **أبيض نقي** (`#ffffff`): خلفية أساسية، سطح البطاقات، خلفية الأزرار.
- **أسود الحبر** (`#0d0d0d`): النص الأساسي، الشعار، زر الدعوة إلى الإجراء الأساسي.
- **أسود ناعم** (`#1a1a1a`): العناوين الثانوية، حبر بديل للنصوص غير الحرجة.

### أسطح الخلفية
- **الضباب** (`#fafafa`): خلفية فاصل الأقسام، سطح التذييل.
- **اللؤلؤ** (`#f5f5f5`): سطح البطاقات، اللوح المرتفع.
- **السحاب** (`#ececec`): خلفية العناصر المعطّلة، درجة الفاصل.

### لون العلامة التجارية
- **الفيروزي لـ OpenAI** (`#10a37f`): اللون الأساسي للعلامة التجارية، الروابط، شارة التمييز — اللون الوحيد في نظام محايد.
- **الفيروزي العميق** (`#0a7a5e`): حالة التحويم والضغط للون العلامة التجارية.
- **الفيروزي الناعم** (`#e8f5f0`): درجة السطح لشارات النجاح والمقتبسات المميّزة.

### الألوان المحايدة والنصوص
- **الجرافيت** (`#3c3c3c`): نص الجسم، لون القراءة الافتراضي.
- **الأردوازي** (`#6e6e6e`): النص الثانوي، التعليقات التوضيحية، البيانات الوصفية.
- **الرماد** (`#9b9b9b`): النص الثالثي، النص النائب، التسمية المعطّلة.
- **الحجر** (`#c4c4c4`): الفواصل الزخرفية، الأيقونات الباهتة.

### الألوان الدلالية والحدودية
- **حد شعرة** (`#e5e5e5`): فاصل الخط الشعري المعياري.
- **حد ناعم** (`#ededed`): مخطط البطاقة على السطح الأبيض.
- **الخطأ** (`#ef4146`): التحقق، الإجراء التدميري.
- **التحذير** (`#f5a623`): عنبر ناعم لحالات الإشعار.
- **المعلومات** (`#2563eb`): نبرة رابط معلوماتي (يُستخدم بتقتير؛ الفيروزي يبقى المسيطر).

## 3. قواعد الطباعة

### مجموعة الخطوط
- **العناوين / التحرير**: `Signifier`، مع احتياطي: `'Source Serif Pro', Georgia, serif`
- **الجسم / الواجهة**: `Söhne`، مع احتياطي: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
- **الكود / العرض الثابت**: `Söhne Mono`، مع احتياطي: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`

### التسلسل الهرمي

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
|------|------|------|--------|-------------|----------------|-------|
| عنوان كبير | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | أبطال تحريريون، عناوين الإعلانات |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | عنوان الصفحة |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | عنوان القسم |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | القسم الفرعي |
| نص كبير | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | فقرات المقدمة |
| نص أساسي | Söhne | 16px (1rem) | 400 | 1.65 | normal | نص القراءة القياسي |
| نص صغير | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | جسم البطاقة، واجهة مكثّفة |
| تعليق | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | البيانات الوصفية، الشارات |
| تسمية | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | حاجب، روابط التنقل بالأحرف الكبيرة |
| كود | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | كتل الكود، مخرجات الطرفية |

### المبادئ
- **التهذيب هوية**: تقف الأوزان عند 600؛ فوق 700 يخرج عن روح العلامة. يأتي التسلسل الهرمي من الحجم واللون لا الوزن.
- **المزيفي للروح، واللا-مزيفي للنظام**: يظهر Signifier فقط في اللحظات التحريرية. واجهة المنتج خالية تمامًا من المزيفي.
- **التباعد السالب على العناوين الكبيرة**: ‎-0.02em على الأحجام الكبيرة؛ يعود التباعد إلى الصفر عند 16px.

## 4. أسلوب المكونات

### الأزرار

**أساسي**
- الخلفية: `#0d0d0d`
- النص: `#ffffff`
- الحشو: 10px 18px
- نصف القطر: 9999px (حبة كاملة) للشرائح، 12px للأزرار المستطيلة
- التحويم: خلفية `#1a1a1a`
- الاستخدام: دعوة أساسية، "جرّب ChatGPT"، "تسجيل الدخول"

**ثانوي**
- الخلفية: `#ffffff`
- النص: `#0d0d0d`
- الحد: 1px solid `#e5e5e5`
- الحشو: 10px 18px
- نصف القطر: 12px
- التحويم: خلفية `#fafafa`، حد `#d4d4d4`

**لون العلامة التجارية**
- الخلفية: `#10a37f`
- النص: `#ffffff`
- الحشو: 10px 18px
- نصف القطر: 12px
- التحويم: `#0a7a5e`
- الاستخدام: دعوة الترقية المميّزة، مسار النجاح

### البطاقات
- الخلفية: `#ffffff`
- الحد: 1px solid `#ededed`
- نصف القطر: 16px
- الحشو: 24px–32px
- الظل: لا شيء بشكل افتراضي؛ عند التحويم `0 4px 16px rgba(13,13,13,0.06)`

### حقول الإدخال
- الخلفية: `#ffffff`
- الحد: 1px solid `#e5e5e5`
- نصف القطر: 12px
- الحشو: 12px 14px
- التركيز: حد `#10a37f`، حلقة `0 0 0 3px rgba(16,163,127,0.12)`

### الحبوب والعلامات
- الخلفية: `#f5f5f5`
- النص: `#3c3c3c`
- الحشو: 4px 10px
- نصف القطر: 9999px
- الخط: 12px / 500

## 5. التباعد والتخطيط

- **الوحدة الأساسية**: 4px. السلّم: 4، 8، 12، 16، 24، 32، 48، 64، 96، 128.
- **الحاوية**: عرض أقصى 1200px، هامش 24px على الجوّال، 48px على سطح المكتب.
- **إيقاع الأقسام**: 96–128px عمودي بين الأقسام الرئيسية؛ 64px على الجوّال.
- **الشبكة**: 12 عمودًا على سطح المكتب، 4 أعمدة على الجوّال، فجوة 24px.

## 6. الحركة

- **المدة**: 150–220ms للتحويم؛ 280–360ms لانتقالات التخطيط.
- **التخفيف**: `cubic-bezier(0.16, 1, 0.3, 1)` (خروج ناعم) للمداخل.
- **التهذيب**: لا تأثير توازي، لا اختطاف للتمرير. تلاشٍ خفيف وإزاحة فقط.

## 7. ضوابط الاستخدام

- احتفظ بالتهذيب التحريري المحايد ونصف القطر اللين والاستخدام النادر للون في آنٍ معًا؛ اللهجات الخضراء وحدها لا تصنع سطحًا بمستوى OpenAI.
- استخدم لحظات العناوين الكبيرة بأسلوب Signifier فقط في التسلسلات التحريرية أو الإعلانية، مع إبقاء عناصر التحكم في النظام على الخط غير المزيفي.
- تجنّب الحركة الزخرفية والظلال الثقيلة والبطاقات الزخرفية المفرطة في الحجم؛ يجب أن يبدو النظام هادئًا وقابلًا للقراءة ومتعمَّدًا.