هنا فككت الموقع إلى أجزائه: الألوان والخطوط والأزرار والأيقونات، وتلك المسافات التي تربك التنسيق أحياناً. جرّب العناصر وقارن بين المظهرين الفاتح والداكن. وهذه أيضاً ورقة مرجعية للصفحات الجديدة، كي تبدو الأزرار من عائلة واحدة ولا تظهر شاشة جديدة كأنها ضيف ضل الطريق داخل موقعه
الألوان
لون التمييز الأساسي هو #46a758. يستخدم شريط الإعلانات خلفية رمادية #2b2c30 ونصًا أبيض في كلا المظهرين. تستخدم الأزرار الخضراء نصًا داكنًا، وتراعي ألوان الروابط الخلفية.
--color-accent#46a758#46a758--color-background#ffffff#1d1e20--color-background-100#f9f9f9#2b2c30--color-background-200#f3f3f3#2f3035--color-background-300#ececec#38383d--color-background-400#dbdbdb#404046--color-foreground#252525#c7cbd5--color-secondary#686868#9ca0ac--color-contrast#000000#ffffff--color-success#348f3f#348f3f--color-error#ff4c4c#ff4c4c--announcement-background#2b2c30#2b2c30--announcement-foreground#ffffff#ffffffالخطوط
ابتكرت Vercel عائلة Geist بالتعاون مع basement studio ومصمم الخطوط أندريس بريغانتي. في أواخر 2022، طلبت Vercel من الاستوديو تصميم عائلة خطوط مفتوحة لعلامتها التجارية ومجتمع المطورين، وصدر الإصدار الأول في 2023. تستلهم العائلة تقاليد الطباعة السويسرية: أشكال بسيطة وحروف واضحة واهتمام بكيفية ظهورها على الشاشة
Geist Sans
اخترت Geist Sans للنص الأساسي بسبب طابعه الهادئ. فيه تلك الدقة التي أحبها في الواجهات، سواء عند قراءة مقال طويل أو تصفح التسميات بسرعة. يمنح الصفحة ترتيبًا ويترك الاهتمام للنص نفسه
Geist Mono
لخط Geist Mono دور خاص. يشغل كل محرف العرض نفسه: يحصل حرف i الضيق على المساحة نفسها التي يحصل عليها حرف m العريض. من هنا يأتي الإيقاع المنتظم المألوف في الشيفرة وواجهات الطرفية. أحب هذا الطابع الهندسي، لذلك أستخدم Mono في العناوين والتنقل والتسميات التقنية. ومع Sans، يصل بين جانبين من هذا الموقع: التصميم والتقنية
يُحمّل الخطان مباشرة من هذا الموقع. إذا لم يتوفر محرف في ملف الخط، يستخدم المتصفح خطًا من النظام لعرضه. يظهر ذلك خصوصًا في النسختين الصينية والعربية
Geist · 400 / 450 / 550 / 600
Geist Mono · 400 / 450 / 550 / 600
--font-h1 · 2remالتصميم والتقنيات والحياة في دبي
--font-h2 · 1.625remالتصميم والتقنيات والحياة في دبي
--font-h3 · 1.375remالتصميم والتقنيات والحياة في دبي
--font-h4 · 1.25remالتصميم والتقنيات والحياة في دبي
--font-h5 · 1.125remالتصميم والتقنيات والحياة في دبي
--font-h6 · 1remالتصميم والتقنيات والحياة في دبي
--font-large · 1.125remالتصميم والتقنيات والحياة في دبي
--font-medium · .9375remالتصميم والتقنيات والحياة في دبي
--font-small · .875remالتصميم والتقنيات والحياة في دبي
--font-x-small · .75remالتصميم والتقنيات والحياة في دبي
الأيقونات 67
تُطوّر Remix Design مجموعة Remix Icon، ويبدأ تاريخ مستودعها في ديسمبر 2018. أحب الطابع المشترك لهذه الأيقونات: أشكال واضحة ومنطق متسق في التفاصيل. تعتمد المكتبة شبكة 24 × 24، وتتوفر رموز كثيرة بنسختين، خطية وممتلئة. يمكن أن تشترك عناصر التنقل والإجراءات وروابط الشبكات الاجتماعية في أسلوب واحد وتبدو من عائلة واحدة. يستخدم الموقع الإصدار 4.9.1، وهنا تظهر الأيقونات المختارة الست والثلاثون كلها. أربطها بأقنعة CSS محلية: تحدد الأنماط الحجم واللون دون الحاجة إلى خط أيقونات مستقل. حجمها 32 px في الواجهة و16 px في زر Telegram و12 px في البيانات الوصفية. يوضح الإجراء نص مرافق أو اسم مخصص لإمكانية الوصول
Remix Icon 4.9.1 · GitHub · Remix Design · Remix Icon License v1.0
المسافات والزوايا
تستخدم مكوّنات الموقع مقياس المسافات وثلاثة أنصاف أقطار للزوايا. تتبع القيم بوحدة rem إعدادات حجم الخط في المتصفح.
--spacing-1 · .125rem--spacing-2 · .25rem--spacing-3 · .375rem--spacing-4 · .5rem--spacing-5 · .625rem--spacing-6 · .75rem--spacing-7 · 1rem--spacing-8 · 1.25rem--spacing-9 · 1.875rem--spacing-10 · 2.5rem--radius-1
.375rem--radius-2
.625rem--radius-3
.875rem
@nevsky_alexander
على Instagram، دبي بعيدًا عن صور البطاقات البريدية: العائلة والمدينة والاكتشافات والحياة بين المشاريع. وعلى Threads، أفكار بصوت عالٍ عن التصميم والذكاء الاصطناعي. أما YouTube فللفيديوهات التي تحتاج مساحة أكبر من الستوري. تابعوني حيث يناسبكم، ولنبقَ على تواصل