Letters
موعد صباحي في عيادة في الهواء الطلق - طاولة بيضاء معقمة تحت سقف أزرق ناعم، مبعثرة عليها أدوات جراحية زرقاء
Letters هي أداة لكتابة الرسائل الطبية، تبدأ برأسية متدرجة الألوان تُحاكي السماء المفتوحة - شريط أزرق ناعم يضفي جوًا هادئًا ورسميًا - قبل أن تنتقل إلى مساحة عمل بيضاء نقية. صُمم النظام بأسلوب أحادي اللون: خلفية بيضاء نقية، نص أسود تقريبًا (#070709)، أزرار داكنة على شكل حبة دواء، وبطاقات مستديرة تطفو على ظلال خفيفة. لون أزرق فاتح واحد (#2597d0) مخصص لعلامات الترقيم الوظيفية - الرموز، والرسومات الدقيقة، ومشغلات الموجات الصوتية - ولا يُستخدم أبدًا للأزرار أو المساحات الكبيرة. يستخدم الخط Open Runde، وهو خط هندسي إنساني بدون serif يتميز بتباعد سلبي حاد بين الأحرف عند أحجام الشاشات الكبيرة (-0.04em عند 80 بكسل)، مما يضغط الرؤوس في كتل متناسقة. تبدو المكونات خفيفة، مثل أداة طبية: حواف رفيعة، تباعد واسع بين البطاقات، أزرار على شكل حبة دواء، واستخدام دقيق للارتفاع يسمح للرأسية ذات الشكل السماوي بأداء الدور العاطفي.
تتميز الصفحة الرئيسية بتدرج لوني أزرق سماوي يمتد على كامل عرض الصفحة، مع عنوان ونص فرعي في المنتصف، وزر دعوة للعمل أسفله. ينتقل التصميم بسلاسة إلى منطقة محتوى بيضاء بمسافات واسعة بين الأقسام (80-120 بكسل). تستخدم أقسام الميزات شبكة من عمودين من بطاقات كبيرة مستديرة (نصف قطرها 18-32 بكسل) متساوية الأبعاد. عناوين الأقسام دائمًا في المنتصف، في عمود واحد، أعلى شبكة البطاقات. شريط التنقل العلوي أبيض ثابت مع مجموعة روابط في المنتصف وأزرار تسجيل الدخول محاذية لليمين. الإيقاع العام عبارة عن شريط رئيسي واحد أنيق، ثم أقسام بيضاء وأخرى بلون #f5f5f5 بالتناوب مع مساحة رأسية ثابتة. لا يوجد شريط جانبي، ولا قائمة رئيسية ضخمة، ولا تصميمات غير متماثلة - تبدو الصفحة كعمود هادئ ومتناسق.
يركز التصميم المرئي بشكل شبه كامل على واجهة المستخدم للمنتج، فلا صور نمط حياة ولا رسومات ثلاثية الأبعاد تجريدية. تتمحور اللغة البصرية حول بطاقات المنتج التي تعرض واجهة التطبيق الأصلية: مقارنة بين "قبل" و"بعد" المستندات، ومنطقة تحميل بإطار منقط، ومشغل صوت على شكل موجة صوتية. العنصر البصري الوحيد الذي يضفي جوًا مميزًا هو تدرج لون السماء في الصورة الرئيسية. أما الأيقونات فهي مسطحة، أحادية اللون (#2597d0) بخطوط متساوية السماكة، دون أي تدرجات لونية. يتميز أسلوب الرسم بالبساطة: تُعرض نماذج المنتج على خلفية بيضاء، مع تدوير طفيف لإضفاء عمق، دون إمالة حادة. الخط المكتوب بخط اليد (The Doctor) هو العنصر العضوي/المصنوع يدويًا الوحيد، ويُستخدم فقط لاستحضار الخط الطبي الموجود على بطاقة "قبل".
لوحة الألوان
ماركة
- Surgical Blue
#2597d0— تُشكل الأيقونات، وأيقونة الميكروفون، ومشغل الموجات الصوتية، واللمسات الوظيفية الصغيرة نغمة لونية واحدة في جميع أنحاء الواجهة.
حيادي
- Obsidian
#070709— تم اختيار اللون الأسود القريب بدلاً من اللون الأسود النقي لتخفيف التباين مع الخلفية البيضاء، وذلك من خلال نص الصفحة، وأزرار الدعوة إلى اتخاذ إجراء المعبأة، وعناصر واجهة المستخدم الداكنة. - Paper White
#ffffff— تُشكل خلفية الصفحة وأسطح البطاقات ونص الزر اللوحة الرئيسية لجميع الأقسام الموجودة أسفل العنصر الرئيسي. - Cloud Gray
#f5f5f5— تعمل أسطح البطاقات الإضافية وخلفيات الأقسام على فصل الكتل الوظيفية عن اللوحة الرئيسية. - Sky Tint
#d7e6f5— يخلق لون إطار الكرتون واللون الأزرق الخفيف للسطح إحساسًا بالجو العام، بدلاً من اللون الرمادي. - Charcoal
#60606c— نص أساسي، نص ثانوي، وحدود باهتة - لون محايد سائد للمحتوى غير المتعلق بالعناوين. - Slate
#8b8b8b— نص صغير وولايات حدودية غير نشطة - تستخدم للإشارة إلى المواقع وضمان إمكانية الوصول للأشخاص ذوي الإعاقة.
الطباعة
من 12 إلى 80 بكسل · 8 خطوات
- sans-serif — الاستبدال: Inter · الخطوط العريضة 400, 700 · sans-serif - تم العثور عليه في البيانات المستخرجة ولكن لم يتم وصفه بواسطة الذكاء الاصطناعي.
- Open Runde — الاستبدال: Inter Tight · الخطوط العريضة 400, 500, 600, 700, 900 · الخط الأساسي للعناوين والتنقل هو خط هندسي إنساني، يتميز بتباعد ضيق بين الأحرف حتى في الأحجام الكبيرة؛ حيث يؤدي استخدام قيمة -0.04em عند حجم 80 بكسل إلى ضغط العنوان في كتلة واحدة متماسكة. يُنصح باستخدامه لجميع العناوين والتنقل والنصوص الكبيرة.
- Inter — الاستبدال: system-ui · الخطوط العريضة 400, 500 · نص ثانوي للمحتوى وواجهة المستخدم - يُستخدم للعناوين الصغيرة وعناصر التنقل والروابط المضمنة حيث يُفضّل إيقاع قراءة أكثر حيادية. يُستخدم مع خط Open Runde لخلق تباين هرمي.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 12-16px |
| نصف قطر الزر | 100px |
| نصف قطر البطاقة | 18px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 80-120px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Letters وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Integrated Biosciences — مختبر التألق البيولوجي في منتصف الليل
- Mintlify — حديقة سحابية فوق طاولة زجاجية. السماء المرسومة يدوياً والفيلم الوثائقي مؤطران معاً – المكان الوحيد الذي يتصادم فيه اللون والمفهوم قبل أن تتلاشى الصفحة إلى بياض زاهد.
- Gleap — مساحة عمل مزينة بألوان كريمية دافئة مع لمسات من الجرافيت - استوديو تبدو فيه نقاط الحبر الأسود غير اللامع وكأنها تطفو فوق بنية الكتان.
- Render — التصميم مصنوع من الألومنيوم المصقول. تبدو واجهة المستخدم أشبه بوثيقة هندسية أنيقة - مساحة بيضاء، وخطوط رفيعة، وخط أرجواني واحد يلفت الانتباه إلى الحركة.
- Grafbase — رسم هندسي على رخام بارد
- Slash — قبو منتصف الليل ذو دفاتر حسابات مذهبة
- Modal — طرفية فسفورية في غرفة خوادم مظلمة - مصدر الضوء الوحيد هو اللون الأخضر الفاتح
- Whimsical — حبر بلون البرقوق الغني على خلفية بلون الخزامى - دفتر ملاحظات إبداعي للاستوديو يعمل أيضاً كلوحة بيضاء تقنية.
- AgentQL — الشفق القطبي فوق مبنى الركاب ليلاً
- Alveos One — ملاذ دافئ مصنوع من أحجار النهر - غرفة تأمل هادئة ذات إضاءة كريمية حيث يستقر جسم جرافيت واحد في وهج كهرماني ناعم
- GitHub — لوحة تحكم فضائية مزودة بنقاط تحكم مضيئة بيولوجيًا - مساحة عمل مظلمة ذات أجواء مميزة حيث يشير توهج أخضر واحد إلى الطريق إلى الأمام.
- Buddy — رسم هندسي على ورق رسم بياني. سطح الرسم الأبيض مُعلّم بشبكة بالكاد مرئية، مرسومة بحبر أسود تقريبًا، مع علامات خضراء ليمونية فلورية وخطوط متدرجة متقزحة.