Ciridae
غرفة فارغة تنبض بنبضات الجمر المتوهج - كاتدرائية سوداء تقريبًا حيث الصوت الدافئ الوحيد هو خط رفيع من الصدأ، وكل سطح محدد بخطوط دقيقة بدلاً من الظل.
يعمل نظام Ciridae في بيئة خالية من العناصر: لوحة بيضاء (#0b0b0b)، وأزرار تحكم بيضاوية الشكل ذات حدود بالكاد تُرى، وخطوط محصورة بأحرف كبيرة من خط Pragmatica Cond بوزن 400 - بدون خط عريض، أو أحرف كبيرة وصغيرة، أو عناصر زخرفية. اللون الوحيد المستخدم هو #cc6437، وهو لون صدأ دافئ يُستخدم كخطوط رفيعة وعلامات ترقيم صغيرة، وليس كحشو. تطفو الخرائط على خلفية بيضاء (#272a2a) بنصف قطر 10 بكسل وبدون ظلال؛ يتجنب النظام الارتفاع، ويحدد الأسطح من خلال التباين اللوني وأدق الحدود بسمك 1 بكسل. الصور ضبابية للغاية وذات طابع جوي - رخام سائل، دخان، نار - موضوعة خلف النص في وضع ملء الشاشة، لذا تبدو الصور المرئية أقرب إلى الجو منها إلى التوضيح.
تصميم الصفحة بعرض كامل، مع توسيط المحتوى ضمن عرض أقصى يبلغ حوالي ١٤٠٠ بكسل. يُشكّل الجزء الرئيسي تصميمًا داكنًا بعرض كامل، يتوسطه شعار كوكبة محاط بعلامات صغيرة على الجانبين الأيمن والأيسر. تتناوب الأقسام: الجزء الرئيسي الداكن ← شريط فاتح مع طبقات سفلية (لون العظم) ← نص داكن قابل للتحويل ← شبكة داكنة من بطاقات النظام ← تذييل داكن. يُنشئ القسم الفاتح الوحيد انتقالًا لونيًا حادًا. تستخدم شبكة البطاقات ٤ أعمدة، حيث يبلغ عرض البطاقة الأولى ضعف عرض البطاقات الثلاث الأخرى تقريبًا، مما يُنشئ تصميمًا غير متماثل مع التركيز على المحتوى. المسافة الرأسية بين الأقسام واسعة (٨٠ بكسل فأكثر). التنقل بسيط للغاية: شريط أخبار علوي + زر "ابدأ الآن" محاذٍ لليسار وزر "القائمة" محاذٍ لليمين في الشريط العلوي. لا يوجد شريط جانبي ولا قائمة رئيسية ضخمة.
تُهيمن صورٌ آسرة، تملأ كامل مساحة الصفحة، على الشاشة الرئيسية والبطاقات. تتميز هذه الصور بضبابية شديدة (حيث تم رصد قيم ضبابية خلفية تبلغ 50 بكسل و40 بكسل) وتباين عالٍ، وتُصوّر رخامًا سائلًا بدوامات زرقاء حمراء، ودخانًا، وظلالًا داكنة لمناظر طبيعية، وقوامًا من النار والجمر. تُضفي هذه الصور جوًا كئيبًا وداكنًا، وليست نابضة بالحياة، فهي تتشارك نفس النطاق اللوني للخلفية الفارغة بدلًا من أن تبرز عليها. لا توجد صور للمنتجات، ولا صور لأشخاص، ولا لقطات شاشة لواجهة المستخدم. تُساهم هذه الصور في خلق جوٍّ مميز بدلًا من أن تكون محتوى توضيحيًا. يربط تصميم البطاقات كل نظام بمشهدٍ مختلف، مما يسمح للصور بالعمل كمعرّفات بصرية مجردة بدلًا من كونها صورًا حرفية للمنتجات.
لوحة الألوان
ماركة
- Ember Rust
#cc6437— تُعد خطوط التمييز وخطوط الأيقونات وإبرازات النصوص الصغيرة هي اللون اللوني الوحيد في نظام أحادي اللون، وتظهر على شكل بقعة نابضة بالكاد يمكن ملاحظتها بدلاً من كونها تعبئة.
حيادي
- Void Black
#0b0b0b— صور خلفية للصفحة الرئيسية والأقسام؛ أساس النظام بأكمله. - Charcoal Surface
#272a2a— الصور الخلفية المصنوعة من الورق المقوى والألواح الموجودة في المناطق الداكنة أفتح بدرجة واحدة من القماش لخلق فصل بين الأسطح بدون ظلال. - Bone
#edebe7— المناطق الفاتحة من الخلفية والسطح ذات لون كريمي، حيث ينتقل النظام من اللون الداكن إلى الفاتح. - Bone Darker
#dfddd9— لون رقيق يسمى "العظم" للأسطح والعناصر ذات الطبقات المتعددة الفاتحة ذات اللون الدافئ، شبه الأبيض. - Pure White
#ffffff— جميع النصوص الرئيسية والعناوين وحدود الأزرار الشفافة وعناصر التنقل باللون الأساسي بنسبة تباين 19.7:1 على خلفية سوداء فارغة. - Abyss
#050505— خلفية بارزة لشريط الأخبار (شريط الأخبار العلوي) - أغمق بدرجة واحدة من اللوحة الرئيسية لجعل الشريط بارزًا.
الطباعة
من 11 إلى 32 بكسل · 5 خطوات
- Pragmatica Cond — الاستبدال: Oswald · الخطوط العريضة 400 · الخط الأساسي للعرض وواجهة المستخدم هو خط ضيق ومضغوط، بحجم 14 بكسل للأحرف الكبيرة في متن النص، و20 بكسل لعناوين الأقسام، و32 بكسل للنص الرئيسي. يُعدّ استخدام خط ضيق للغاية بحجم 14 بكسل للأحرف الكبيرة في متن النص الحل الأمثل لهذا النظام، حيث يبدو النص أشبه بهمس خط معماري منه بنثر عادي. استبدله بخط Oswald أو Barlow Condensed إذا لم يكن خط Pragmatica Condensed متوفرًا.
- Pragmatica — الاستبدال: Inter · الخطوط العريضة 400 · خط ثانوي أساسي يُستخدم للنصوص الطويلة (مثلاً، وصف بطاقة "نظام تشغيل الذكاء الاصطناعي" بحجم 24 بكسل، ونص الفقرة بحجم 15 بكسل). أعرض قليلاً من خط Pragmatica Cond ليسهل قراءته في الفقرات الطويلة، ولكنه بنفس سماكة 400 - غير غامق. يُستبدل بخط Inter أو Söhne.
- Roboto Mono — الاستبدال: Roboto Mono (free · الخطوط العريضة 400 · خط أحادي المسافة صغير الحجم لعرض الأخبار ("أخبار • ١٥ يونيو ٢٠٢٦ • الوصول المبكر إلى CRUCIBLE متاح الآن"). يُستخدم الخط أحادي المسافة هنا فقط، مما يخلق تمييزًا وظيفيًا واضحًا: هذه بيانات نظام، وليست علامة تجارية.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 16-20px |
| نصف قطر الزر | 1440px |
| نصف قطر البطاقة | 10px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 80px |
| عرض الصفحة | 1400px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Ciridae وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Dala — كوكبة تحوم على مخمل أسود
- Linear — أداة دقيقة في منتصف الليل
- Resend — مخمل أسود بلون نيون أرجواني
- Dovetail — مخطط تحت قمر أسود - خطوط بيانية بالكاد تُرى، خط أبيض، بريق أرجواني واحد
- Neon — غرفة خوادم بعد حلول الظلام. ظلام دامس، حيث يأتي الضوء الوحيد من البيانات وتفاعلات المستخدمين.
- Discord — عالم اللعبة مخفي خلف نافذة دردشة منبثقة - كل قسم عبارة عن بيئة قائمة بذاتها مع إضاءتها الخاصة ومجموعة شخصياتها.
- Aaru — مرصد مجال الجسيمات في منتصف الليل
- Atlas Card — قبو منتصف الليل، بشعاعه الياقوتي الوحيد، هو مساحة سوداء حالكة حيث الشيء الوحيد المهم هو اللون الأزرق الكهربائي العميق.
- Midjourney — محطة طرفية متوهجة بيولوجيًا في أعماق المحيط. عالم أعماق البحار حيث يولد الذكاء نفسه بصريًا في تيارات ASCII، وتظهر عناصر التحكم كأنماط متوهجة خافتة.
- Checkly — مركز التحكم بمهام المدار العميق
- Krea — معرض نوار في منتصف الليل
- Wope — Wope عبارة عن واجهة أفق أرجوانية. تخيل طاولة مرصد مظلمة ينبعث منها ضوء أرجواني من أسفل الزجاج.