Stripe
دفتر حسابات مكتوب بحبر نيلي على زجاج مصنفر
يستخدم Stripe لغة أحادية اللون تقريبًا للأدوات المالية: خلفية بيضاء ناعمة وباردة مع عناوين زرقاء داكنة، تكاد تخلو من العناصر الزخرفية الكرومية، ولون نيلي ساطع واحد (#533afd) يمكن استخدامه كإطار لزر أو رابط أو أيقونة. يتميز الخط بنحافته الاستثنائية، حيث يبلغ وزنه 300 نقطة - حتى عند 56 بكسل - مما يمنحه مظهرًا أنيقًا وبسيطًا بدلًا من الطابع الرسمي المبالغ فيه؛ ويتناقص تباعد الأحرف بشكل حاد مع زيادة الحجم. الأزرار صغيرة ومربعة (4 بكسل)، وتستخدم تعبئة أرجوانية أو إطارات أرجوانية رفيعة للغاية. يتجنب النظام الظلال تمامًا؛ ويتم تحقيق العمق من خلال تغيير ألوان الخلفية (أبيض ← #f8fafd ← #e5edf5 ← درجات اللون الأرجواني)، بدلًا من الارتفاع. تعمل واجهة المستخدم بأكملها كدفتر حسابات أو جهاز طرفي: معلومات كثيفة، وخطوط واضحة، ومساحة واسعة بين الأقسام، ولا يظهر اللون إلا عند الحاجة إلى إجراء ما.
يبلغ الحد الأقصى للعرض حوالي 1320 بكسل لعمود محتوى متمركز على خلفية بيضاء. يُعرض النص الرئيسي على شكل كتلة نصية محاذية لليسار بحجم كامل (56 بكسل) مع دعوتين لاتخاذ إجراء أسفلها، دون صورة رئيسية - فالتصميم الطباعي هو العنصر الرئيسي. تُرتب الأقسام عموديًا بمسافات متساوية بينها 96 بكسل وفواصل 1 بكسل بلون #e5edf5؛ ولا توجد خطوط داكنة/فاتحة متناوبة. يتبع كل قسم نمطًا متكررًا: عنوان صغير للقسم بأحرف كبيرة (لون دخاني، 12 بكسل)، ثم عنوان فرعي يتراوح بين 32 و48 بكسل، ثم فقرة 22 بكسل، ثم شبكة من بطاقات المنتجات (3 أعمدة على سطح المكتب) أو كتلة نصية من عمودين مع رسومات. تظهر شعارات العملاء في شريط عمودي ضيق محاذٍ لليسار. أما التذييل فهو عبارة عن شريط عريض بلون #f8fafd يحتوي على قوائم روابط متعددة الأعمدة. الإيقاع العام بطيء ومتأنٍ، ويغلب عليه الطابع النصي - كثافة المعلومات منخفضة، على الرغم من طول التمرير.
الصور بسيطة وذات طابع وثائقي. تظهر الصور كاملة الصفحة فقط في الأقسام التي تعرض دراسات حالة (مثل صور حركة المرور الجوية لشركة هيرتز)، مُلتقطة من الأعلى أو بزوايا مميزة، باستخدام ألوان طبيعية - دون أي معالجة لونية أو ثنائية اللون. تُستخدم لقطات شاشة لواجهة مستخدم المنتج ضمن بطاقات الميزات، مُصممة بزوايا حادة وحدود واضحة، دون إطارات. تُعرض شعارات الشركاء بألوانها الأصلية، دون أي حاويات. لا توجد رسومات توضيحية أو نماذج ثلاثية الأبعاد أو عناصر رسومية تجريدية زخرفية. الأيقونات موحدة: سُمك الخط 1 أو 2 على خلفية بيضاء، مع رسومات خطية هندسية (أشكال متعرجة، أسهم، علامات صح، رموز المستندات). تتكون الصفحة بشكل أساسي من نص ومساحة بيضاء؛ وتشغل الصور أقل من 3% من إجمالي المساحة المرئية.
لوحة الألوان
ماركة
- Indigo Ink
#533afd— يُستخدم اللون الأرجواني للأزرار المعبأة، وحالات التنقل المحددة، ولحظات التحويل التي تعتمد على التركيز. - Indigo Hover
#7389ff— يُستخدم اللون الأرجواني لتسليط الضوء على الروابط والوسوم والعبارات القصيرة. ولا ينبغي استخدامه كلون أساسي لعبارات الحث على اتخاذ إجراء.
حيادي
- Midnight Ink
#061b31— يتميز العنوان الرئيسي ونص الصفحة بلون داكن، يكاد يكون أسود مع مسحة زرقاء باردة، وهو ما يشكل أساس نظام الخطوط بأكمله. - Slate
#64748d— يُبرز النص الرمادي الروابط والوسوم والعبارات القصيرة. - Steel
#50617a— تم وضع النصوص الإضافية والمواد الداعمة بين درجات اللون الرمادي الداكن والأرجواني الباهت المستخدمة في التراخيص الفرعية. - Smoke
#839bc8— بالنسبة للعناوين الزخرفية الكبيرة والنصوص المصاحبة لها، يتم استخدام درجة لون أرجواني باهتة - ولا يتم استخدامها مطلقًا في فقرات المتن. - Pure White
#ffffff— مساحة الصفحة والأسطح المرتفعة للبطاقات؛ الخلفية الافتراضية التي يُقاس عليها كل شيء آخر. - Mist
#f8fafd— خلفية التذييل وفاصل الأقسام عبارة عن لون بارد خفيف يفصل المناطق بدون حدود مرئية.
الطباعة
من 12 إلى 56 بكسل · 9 خطوات
- sohne-var — الاستبدال: Inter Tight (variable · الخطوط العريضة 300, 400 · يُستخدم خط واحد فقط في واجهة المستخدم بأكملها للعناوين، والنصوص الأساسية، وقوائم التنقل، والأزرار، والملصقات. ويبقى وزن الخط 300 سائداً حتى على شاشة بحجم 56 بكسل، وهي ميزة فريدة: فالعناوين تبدو هادئة وواضحة، مما يُضفي عليها طابعاً مميزاً من خلال الرقة والاتزان. أما وزن الخط 400 فيظهر فقط عند حجم 14-16 بكسل لقوائم التنقل ونصوص الأزرار، حيث يتطلب الأمر إضافة حد إضافي لضمان وضوح النص عند الأحجام الأصغر.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | واسع |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 4px |
| نصف قطر البطاقة | 4px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 96px |
| عرض الصفحة | 1320px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Stripe وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Ui — خطة سريرية على ورق غير لامع
- monopo saigon — توهج سائل متقزح الألوان خلف الصمت التحريري - معرض تحريري أحادي اللون يطفو على ضوء منصهر
- Ventriloc — مرصد تحريري للبيانات على ورق دافئ - جمرة برتقالية وحيدة تسلط الضوء على دقة اللون الأحادي
- Hyer Aviation — يحلّ الغسق في قمرة القيادة فوق ورق البرشمان. تلتقي سماء الفجر الباهتة بشعار serif بحجم جسم الطائرة، وتكسر لمسة طينية دافئة واحدة رتابة اللون الأحادي.
- Family — صفحة من حكاية خرافية على ورق بردي كريمي اللون
- OFF+BRAND. — كرة متقزحة الألوان على رق دافئ
- Geniestudio — دفتر ملاحظات ناعم مناسب لضوء النهار - من النوع ذي الهوامش الواسعة وخط قلم سميك واحد
- xAI — لابرادور كريمي دافئ مع حبة سوداء
- Seed — كائن حي تحت زجاج المختبر
- Cosmos — جدار معرض مُبطّن بالكتان ومُعلّق عليه صور بولارويد
- Cal — عملية أحادية اللون، ونهج إنساني. نظام يعطي الأولوية للوضوح والوظائف من خلال لوحة ألوان صارمة بالأبيض والأسود، ولكنه يلطفها بخطوط ودية وأشكال دائرية.
- T1 Energy — رسم لمنشأة إنتاج على ورق بردي دافئ هو مشهد هادئ أحادي اللون حيث يجسد الحجم الصناعي والطباعة الدقيقة العلامة التجارية بأكملها.