Column
دفتر حسابات أزرق داكن تحت فجر بارد
يستخدم موقع Column لونًا أزرق داكنًا داكنًا على خلفية بيضاء تقريبًا، مما يُعطي انطباعًا أوليًا بأنه واجهة منتج مصرفي متينة، وثانيًا، بيئة تطوير مفتوحة. لا يقتصر لون العلامة التجارية على لون واحد، بل هو لونان متناسقان: الأزرق الداكن (#111a4a) للهيكل الجاد، والأخضر النعناعي (#44b48b) للبيانات والبرمجيات، مع لون برتقالي دافئ (#ec652b) مخصص للأسطح البارزة مثل بطاقة Brex. يهيمن على التصميم الخطي خط SuisseIntl، وهو خط هندسي بدون serif يُستخدم بكامل أوزانه من 300 (للروابط) إلى 600 (للعرض)، مما يمنح النظام أسلوبًا تحريريًا راقيًا تفتقر إليه معظم شركات التكنولوجيا المالية. تظهر البطاقات على أسطح بيضاء كبيرة مع ظلال خفيفة ومتدرجة؛ معظم عناصر واجهة المستخدم مسطحة، ولا يظهر العمق إلا في الأماكن التي يُفترض أن تُعطي البطاقة إحساسًا بالواقعية (أدوات المعاملات، نماذج المنتجات). تُعرض البرمجيات والبيانات المالية بلون أحادي، كلون زبد البحر، في إشارة بصرية إلى أن هذا بنك صممه مهندسون للمهندسين.
تتميز بنية الصفحة بعرض كامل، مع توسيطها وهوامش جانبية واسعة (من 64 إلى 15 سم على أجهزة سطح المكتب). الشاشة الرئيسية مقسمة إلى قسمين: العنوان وعبارات الحث على اتخاذ إجراء محاذية لليسار عند 25 سم، بينما توجد أداة إتمام المعاملات العائمة على اليمين عند 55 سم على خلفية خريطة بنمط نصف لوني. أسفل الشاشة الرئيسية، تتناوب الأقسام بين الأبيض (4 سم) والقماش الفاتح (5 سم) مع هوامش رأسية بعرض 6 سم. يُرتب المحتوى وفقًا لشبكة واحدة من 6 أعمدة: تشغل كتل النصوص 4 أعمدة (7 سم)، وتشغل بطاقات الصور/المنتجات من 5 إلى 6 أعمدة، مع إزاحة متعمدة عن الشبكة. تستخدم الأقسام التي تصف الميزات تخطيطًا من عمودين: النص على اليسار، والمنتج على اليمين. ينقسم قسم إحصائيات الثقة إلى شبكة من 4 أعمدة على كامل عرض الصفحة. تظهر شعارات العملاء في صف واحد متمركز مع هوامش بعرض 48 بكسل. يتميز التذييل بتخطيط مضغوط من عمودين. تتميز واجهة المستخدم بشريط علوي شفاف ثابت بارتفاع 62 بكسل فوق الشاشة الرئيسية، بخلفية ضبابية تتلاشى إلى اللون الأبيض أثناء التمرير. لا يوجد شريط جانبي أو قائمة رئيسية ضخمة، بل قوائم منسدلة بسيطة على شكل أسهم.
يتميز التصميم البصري بالبساطة والعملية، حيث تتجنب كولوم تمامًا استخدام الصور الجاهزة. وتستند اللغة البصرية إلى ثلاثة مصادر: (1) رسومات بيانات SVG، وتحديدًا خريطة عالمية منقطة بتقنية التظليل النصفي، مُصممة بتدرج لوني من النيلي إلى البرتقالي ثم الفيروزي، مما يخلق جوًا من الاتساع العالمي خلف العنصر الرئيسي؛ (2) تصميمات بطاقات المنتجات - عناصر واجهة مستخدم عائمة تعرض أرصدة الحسابات، وتفاصيل التحويل، ومقتطفات من كود JSON في بطاقات بيضاء ذات ظلال جذابة؛ (3) تمثيلات بيانية - رسوم بيانية شريطية أو شمعية فيروزية اللون بخطوط توصيل رفيعة تُستخدم في قسم الثقة/الإحصائيات. تُعد خريطة التظليل النصفي عنصرًا بصريًا مميزًا، حيث ينتقل تدرجها اللوني من #d65620 (البرتقالي) عبر البنفسجي والأزرق والسماوي والفيروزي والأصفر، مما يخلق طيفًا لونيًا يوحد لوحة ألوان العلامة التجارية بأكملها على سطح زخرفي واحد. تتميز الأيقونات بسماكة موحدة للخطوط الخارجية تتراوح بين 1.5 و2 بكسل في الإصدارين #232730 و#a9acb6، مع تعبئة للحالات النشطة. لا توجد صور نمط حياة، ولا رسومات ثلاثية الأبعاد تجريدية - فالتقليل من التفاصيل مقصود لتركيز الانتباه على المنتج والبيانات.
لوحة الألوان
ماركة
- Indigo Navy
#111a4a— يُستخدم لون العلامة التجارية الأساسي في عبارات الحث على اتخاذ إجراء، وحالات التنقل النشطة، وعنوان الصفحة، والشعار. يمنح اللون البنفسجي المائل للأزرق الداكن الموقع لونًا أسودًا قويًا وغنيًا؛ وعند دمجه مع نص أبيض، يُشكّل الزر الأكثر بروزًا في الموقع. - Seafoam 600
#44b48b— لون الكود والبيانات هو لون العلامة التجارية لمفاتيح JSON والمعرفات والقيم المالية في مقتطفات الكود. كما يُستخدم أيضًا لنقاط البيانات في الرسوم البيانية وتصورات النمو. - Seafoam 700
#167e6c— يُستخدم لون أغمق من لون زبد البحر للخطوط الخارجية وخطوط الرسم البياني وعناصر الأيقونات ضمن سياق البيانات. هذا يُرسّخ مقياس زبد البحر على الخلفية الداكنة. - Seafoam 400
#94efb7— يحتوي جزء الكود المظلل على قيم نصية وعناوين URL ونقاط نهاية API ضمن كتل برمجية. يظهر اللون الأزرق الفاتح كخط أحادي المسافة مع مسحة خضراء. - Deep Sea
#023247— يتميز المخطط الزخرفي واللون المميز للرسم البياني بلون فيروزي غني يستخدم في رسومات SVG وتصورات البيانات، إلى جانب مقياس لون زبد البحر.
حيادي
- Midnight Ink
#011821— سطح داكن ونص بارز - خلفية بطاقة المنتج، نص رئيسي عالي التباين. أقرب إلى الرمادي مع مسحة زرقاء مخضرة باردة؛ يُستخدم كأساس للوضع الداكن عند الحاجة إلى عكس قسم ما. - Slate Ink
#3b3e47— العنوان الثانوي والنص الرئيسي أكثر دفئًا قليلاً من حبر منتصف الليل، حيث تم استخدامهما في أماكن قد يبدو فيها اللون الأسود الخالص قاسيًا جدًا على القماش الفاتح. - Steel
#7c7f88— يهيمن على النص الرئيسي ونصوص الروابط لونٌ هادئ (استُخدم ٢٤٥ مرة في النص الرئيسي). لون رمادي-أزرق محايد يُوحي بالسكينة، ولا يُعطي انطباعًا باهتًا أبدًا. - Fog
#a9acb6— مخططات الأيقونات، والحدود الثانوية، والنص التوضيحي. لون رمادي متوسط يفصل النص دون أن يتداخل معه. - Mist
#cbcccf— النص الرئيسي - التوقيعات وإخلاء المسؤولية والنصوص الصغيرة - قابل للقراءة على خلفية بيضاء، ولكنه أقل وضوحًا من الناحية البصرية. - Silver Lining
#e3e4e8— حدود البطاقات، وحدود حقول الإدخال، والخطوط الفاصلة. يُستخدم هذا اللون الهيكلي الرقيق حيث يلزم فصل سطحين دون ظلال.
الطباعة
من 10 إلى 60 بكسل · 10 خطوات
- SuisseIntl — الاستبدال: Inter · الخطوط العريضة 300, 400, 500, 600 · الخط الأساسي – يُستخدم لجميع العناوين، ونص المحتوى، والأزرار، وقوائم التنقل، والروابط، ونصوص البطاقات. يمنح هذا الخط الهندسي الفريد من نوعه، والذي لا يحتوي على زوائد، منصة Column أسلوبًا تحريريًا مميزًا، مما يميزها عن شركات التكنولوجيا المالية الأخرى التي تعمل حصريًا مع Inter-only. يبلغ وزن الخط 600 بكسل عند عرض 52-60 بكسل للعناوين، و500 بكسل للعناوين الفرعية، و400 بكسل لنص المحتوى، و300 بكسل للروابط ذات التنسيق البسيط.
- SuisseIntlMono — الاستبدال: JetBrains Mono · الخطوط العريضة 400 · خط أحادي المسافة مشابه لخط SuisseIntl، يُستخدم للعلامات التقنية، ومعرّفات واجهة برمجة التطبيقات، والبيانات المضمنة في عناصر واجهة المستخدم. يحافظ على نفس نسب SuisseIntl، لذا تتم محاذاة النصوص أحادية المسافة والنصوص ذات النسب بشكل صحيح في السياقات المختلطة.
- SFMono — الاستبدال: Fira Code · الخطوط العريضة 400 · عرض مقتطفات الشفرة البرمجية – يتم عرضها في أمثلة JSON وكتل توثيق واجهة برمجة التطبيقات. يُستخدم لون أخضر فاتح لتمييز الشفرة البرمجية بصريًا عن نص واجهة المستخدم.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | متوسط |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 8px |
| نصف قطر البطاقة | 8px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 72px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Column وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- dope.security — محطة منتصف الليل مع منارات أرجوانية
- Leonardo — معرض تحريري معكوس. متحف ذو جدران سوداء حيث تعمل العناوين الرئيسية الأرجوانية كتركيبات جدارية، وتتدلى الصور الشخصية المولدة بواسطة الذكاء الاصطناعي في شبكة كثيفة في الأسفل.
- VEED — جدار معرض أبيض بأزرار إضاءة خضراء نيون
- Craft Docs — تصميم رقمي مُجمّع لسجل القصاصات. يشبه التصميم سجل قصاصات مدروسًا وملموسًا، حيث تتحد الملاحظات الرقمية المنظمة مع الأنسجة الناعمة والعضوية.
- Letter — معرض خاص يعرض قطعًا أثرية متلألئة من المخزن. مساحة عرض ذات جدران سوداء تطفو فيها عناوين بخط سيريف فوق منحوتات من الكروم على جدران المعرض الملونة.
- Railway — قطار منتصف الليل الكوني. رحلة هادئة ومثيرة عبر الفضاء المظلم المضاء بالنجوم، مسترشدة بإشارات واضحة.
- Garden Eight — افتتاحية ضخمة على ورق كريمي اللون. عنوان رئيسي بحجم 215 بكسل بخط serif يظهر وحيداً على ورق بردي دافئ، محاطاً بأشكال نحتية عائمة ومساحة سلبية تذكرنا بنسيم البحر - تبدو الصفحة أشبه بغلاف كتاب فني منها بلوحة عدادات.
- Steep — تحليل الخطوط ذات الزوائد على ورق دافئ
- ElevenLabs — مجموعة صور بألوان كريمية دافئة مع عناوين دقيقة. دفتر ملاحظات على طراز باوهاوس - ورق بلون قشر البيض، وحبر أسود، ولمسة واحدة من اللونين الأرجواني والبرتقالي لعرض المنتج.
- Awesomic — شبكة زنك تحريرية بعلامات ترقيم برتقالية تذكرنا بالقصاصات الورقية.
- Monad — مجلة فنية تحريرية حول الرق الدافئ
- AI for Business — صالة عرض تحريرية على الطراز الوحشي بألوان رمادية دافئة