أمثلة DESIGN.md
ملفات DESIGN.md حقيقية مستخرجة من مواقع ويب عامة. يلتقط كل ملف ألوان الموقع وخطوطه ومسافاته ومكوناته بالتنسيق الذي يقرؤه وكلاء البرمجة بالذكاء الاصطناعي. افتح أي بطاقة لمعاينة الملف ونسخه إلى مستودعك.
مستخرجة من الصفحات العامة لكل موقع، وليست إرشادات رسمية للعلامة التجارية. جديد على هذا التنسيق؟ اقرأ ما هو ملف DESIGN.md.
Airbnb
تعتمد منظومة التصميم لدى Airbnb على خط متغيّر واحد مملوك، هو Airbnb Cereal VF، وعلى لوحة ألوان محايدة تكاد تكون أحادية اللون، ترتكز على الرمادي الفحمي العميق (#222222) والرمادي الفاتح. ويُخصَّص اللون المرجاني الوردي المميز للعلامة، "Rausch" (#ff385c)، حصراً لأزرار الإجراء الأساسية والشعار. ويقوم التخطيط على شبكة بطاقات صور متجاوبة تتميز بنسب واسعة بين الصورة والنص، مع زوايا مستديرة ناعمة بقياس 20px للبطاقات، ونظام ظلال محيطية متعددة الطبقات يضفي عمقاً خفيفاً دون تباين حاد. أما شريط البحث فحاوية بارزة على شكل كبسولة تجمع في موضع واحد الإجراء الأساسي للمستخدم.
Anthropic
تعتمد منظومة تصميم Anthropic على هوية هادئة ومتحفظة تقودها الطباعة، وتقوم على خطّين مخصّصين هما Anthropic Serif وAnthropic Sans، وتُعرض على خلفية عاجية دافئة (#faf9f5). اللوحة اللونية بسيطة عمدًا: أسود يكاد يكون فحميًا (#141413) على أبيض مائل إلى الكريمي الدافئ، مع درجات حجرية خافتة للنصوص الثانوية والحدود. وتشكّل الخطوط التيترية الكبيرة بطابع Serif جوهر الصوت التحريري، بينما تُحدث الأقسام ذات اللوحة الداكنة (خلفية شبه سوداء مع نص عاجي) تباينًا دراماتيكيًا لافتًا. وتنقل الجمالية العامة جدّية فكرية ورسالة تضع السلامة في المقام الأول، عبر مساحات بيضاء واسعة وتباين طباعي عالٍ وغياب تام للزخارف.
Apple
تم استخراج رموز التصميم من تحليل تكرار CSSOM دون أي تفسير من نموذج لغوي.
Dribbble
ينبني نظام التصميم في Dribbble على كحلي داكن يكاد يكون أسود (#0d0c22) مقترنًا بسطح أبيض ناصع، ويتخلله لون تمييز وردي فاقع مميز (#ea4c89) يُستخدم باعتدال للتأكيد التحريري والعناصر التفاعلية البارزة. ويعتمد النظام الطباعي بأكمله على خط Mona Sans حصريًا عبر جميع الأوزان، فيُبنى التدرج الهرمي بالوزن والحجم وحدهما. وتحدد الأزرار كبسولية الشكل (border-radius: 1e+07px) والبطاقات ذات الزوايا المستديرة (نصف قطر 12px) لغة الهندسة. ويتسم التخطيط بالاتساع مع شبكة أساسية بقياس 8px، وتُنقل درجة الارتفاع عبر ظلال خفيفة بدلًا من الطبقات الكثيفة.
Duolingo - The world’s most popular way to learn
رموز التصميم مستخرجة من تحليل تكرار CSSOM دون أي تفسير بالنموذج اللغوي.
Figma
ملخص أسلوب تصميم موقع Figma التسويقي: يعتمد الموقع نظامًا أحادي اللون صارمًا بالأبيض والأسود، ويرتكز على خط figmaSans المتغير الخاص بالشركة. التصميم موجّه أساسًا بالطباعة، إذ تأتي العناوين الكبيرة بحجم 88px/56px مع تباعد سلبي ضيّق بين الأحرف، في تباين مع نص أساسي خفيف الوزن بقيمة 330. تستخدم أزرار الدعوة إلى الإجراء أشكال حبوب كاملة الاستدارة (border-radius: 9999px) بخلفية سوداء صلبة ونص أبيض. التخطيط قائم على الشبكة بعرض أقصى للمحتوى يبلغ 1440px، مع حشو رأسي سخي للأقسام يبلغ 80px، وخلفية بيضاء نظيفة. العمق محدود جدًا، والظلال خفيفة وقائمة على طبقات oklch. ويظهر لون بنفسجي لافندري مميز #cb9fd2 في شريط الذيل. الأسلوب العام واثق ومتطور طباعيًا ويركز على الهوية.
Harvey
هوية Harvey البصرية مبنية على نظام خطّين مخصّصين: HarveySerifFont للسلطة التحريرية، وHarveySansFont للوضوح الوظيفي. تُعرض هذه الهوية على شريط تنقّل بلون أسود دافئ قريب من الأسود (#0f0e0d) وسطح محتوى بلون العاج الفاتح (#fafaf9). اللوحة أحادية اللون عمدًا، وتعتمد على مقياس متدرّج من الرمادي الدافئ (من gray-50 إلى gray-950) دون أي ألوان مميّزة، بما يعكس الثقة والاتزان المناسبين للأعمال القانونية عالية المخاطر. يُعبَّر عن الارتفاع والطبقات بتباين الأسطح لا بالظلال. يستخدم العنوان الرئيسي في القسم الأول خطًا سيريفيًا كبيرًا بحجم 72px، فيمنح الصفحة حضورًا طباعيًا قويًا من النظرة الأولى، بينما يعتمد النص الأساسي وعناصر الواجهة على الخط المخصّص غير المزخرف. تتبع المسافات شبكة أساس قدرها 8px مع رموز مقياس مسمّاة (xs وsm وmd وxl وxl2x)، وهي: xs وsm وmd وxl و2xl.
IKEA
قامت الصفحة الرئيسية العالمية لموقع IKEA على نظام تصميم جريء ومسطّح يرتكز على اللون الأصفر المميز لـ IKEA (#ffdb00) بوصفه سطح الإجراء الأساسي، والأزرق المميز لـ IKEA (#0058a3) بوصفه لمسة تمييز لشعار العلامة. يُبنى النظام الطباعي بأكمله على خط مخصص واحد هو Noto IKEA، بوزنين 400 و700 ضمن مقياس محدد بإحكام يتراوح من 14 بكسل لنص المتن إلى 51 بكسل للعناوين البارزة. ولا يُعبَّر عن الارتفاع والطبقات بالظلال، بل يعتمد كلياً على تباين الألوان وبنية التخطيط. يستخدم التخطيط حاوية بعرض أقصى قدره 90rem وفجوة شبكة على الشاشات المكتبية قدرها 1.5rem، ورمز نصف قطر حواف ثابت قدره 8 بكسل يُطبَّق على العناصر التفاعلية. ويضفي الخلفية البيضاء المائلة إلى العاجي (#fffefb) دفئاً في مواجهة النص الأسود الصارخ (#111111)، فيخلق تجربة قراءة عالية التباين وسهلة الوصول.
Klarna
يعتمد نظام التصميم لدى Klarna على لون أساسي أزرق داكن راقٍ هو #0b051d، مع ألوان تمييز زاهية، أبرزها اللون الوردي المميز #ffa8cd. يستخدم النظام خطوط Klarna المخصصة إلى جانب خطوط النظام، ويُبرز الزوايا المستديرة إذ تُعد 32px القيمة الأكثر شيوعًا. ويحافظ التصميم على تباين عالٍ لتحقيق إمكانية الوصول، ويوازن بين الطابع المهني والودّ من خلال المسافات الواسعة وتسلسل هرمي واضح للطباعة.
Linear
نظام تصميم Linear يعتمد بالدرجة الأولى على الوضع الداكن، وهو واجهة منتج عالية الكثافة مصممة لفرق الهندسة. تقوم لوحة الألوان للأسطح على أسود قريب من الأسود مثل #08090a و#0f1011، مع تدرجات متراكبة من الرمادي الداكن لتمييز الشريط الجانبي والبطاقات واللوحات. تعتمد الخطوط حصراً على Inter Variable مع تباعد أحرف سالب دقيق في الأحجام الكبيرة، وعلى Berkeley Mono للشيفرة المضمنة. أما لغة الزوايا فصغيرة عن قصد، إذ تتراوح غالباً بين 2 و6 بكسل، وتُخصص الأشكال البيضاوية الكاملة للشارات ورقائق الحالة. ويُعبَّر عن الارتفاع بحدود داخلية رفيعة بسمك 1 بكسل وبظلال خفيفة منخفضة الشفافية، لا بطبقات حادة الظهور. ويظهر اللون الأساسي للدعوة إلى الإجراء، وهو النيلي المميز لـ Linear #5e6ad2، في زر التسجيل وفي الروابط الرئيسية.
Magentix Studio
يرتدي استوديو Magentix Studio زيّ معرض فني مُحرَّر (إيديتوريالي) لاستوديو منتجات يعتمد الذكاء الاصطناعي أولاً.
Neon
نظام تصميم Neon يعتمد الوضع الداكن أولاً، ويقوم على خلفية تكاد تكون سوداء (#000000، #18191b) مع لون أخضر نيوني أساسي (#00e599) ولون أخضر متوسط داعم (#34d59a). يجمع النظام الطباعي بين خط Inter للواجهة والنصوص الأساسية وخط GeistMono للشيفرة والبيانات، مع تباعد أحرف سلبي محكم في الاثنين. يتبع التباعد شبكة أساسها 4 بكسل. نصف قطر الحواف بسيط وموحد عند 4 بكسل. يتحقق العمق عبر تباين الحدود لا عبر الظلال، مع استخدام ظل خفيف محيطي واحد بحذر. يتميز قسم الصورة الرئيسية بخلفية متحركة لتصور البيانات تغطي الشاشة بالكامل، بما يعزز هوية العلامة المرتبطة بقواعد البيانات والبنية التحتية.
Notion
تعتمد الصفحة الرئيسية التسويقية لموقع Notion على قسم بطل بلون كحلي عميق (#02093a) مع جسم صفحة فاتح (#f6f5f4)، وتستخدم خطًا مخصصًا (NotionInter) في جميع أنواع النصوص. يعتمد التصميم على شبكة من 12 عمودًا بفواصل 28px، ولغة مزدوجة لأنصاف الأقطار: 8px للبطاقات و9999px للشرائح الدائرية. كما يعتمد نظام ظلال متعدد الطبقات ومتدرج للعناصر العائمة في الواجهة. يقود الأزرق المميز للعلامة (#2537b1) أزرار الدعوة لاتخاذ إجراء والعناصر المميزة، بينما تنظم سلّم درجات الرمادي الدلالية (من gray-200 إلى gray-900) التسلسل الهرمي لجميع النصوص والأسطح.
Paperclip
Paperclip هي منصة لإدارة وكلاء الذكاء الاصطناعي، وتتميز بتصميم جريء على خلفية داكنة يرتكز على لون الخلفية #0a0a0a القريب من الأسود، ونص أمامي باللون #ffffff. يتألف القسم الرئيسي من رسم توضيحي متدرج بألوان زاهية لأشكال كبسولية متراكمة بالماجنتا والبنفسجي والفيروزي والبرتقالي والأصفر، ما يخلق هوية بصرية نابضة بالحيوية على الخلفية الداكنة. تجمع الطباعة بين Inter Tight بعناوين عريضة مضغوطة وتباعد أحرف سالب، وInter لنصوص الجسم وواجهة المستخدم، وJetBrains Mono للشيفرة وحالات العرض. يستخدم زر الدعوة إلى الإجراء الأساسي شكل كبسولة أبيض على خلفية داكنة. ويُستخدم نظام حالات أخضر دلالي #22c55e للإشارة إلى حالات الوكلاء والمهام عبر واجهة المنتج. أما التنقل فبسيط ومسطح مع حد سفلي خفيف.
PayPal
PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). The navigation is white with black text and two distinct CTA buttons — an outlined "Inloggen" and a filled black "Rekening openen". A dark navy announcement banner sits at the top. The overall language is high-contrast, pill-radius-heavy, and brand-typeface-driven, projecting trust and accessibility for a broad consumer finance audience.
Railway
Railway هو نظام تصميم لمنصة مطوّرين يعتمد الوضع الداكن أولاً، ويرتكز على أسطح كحلية شبه سوداء عميقة (#13111c، #0b0b0f)، ونص أبيض مائل إلى الرمادي عالي التباين (#f7f7f8)، ولون تمييز بنفسجي مميز (#853bce / #553f83). تستخدم الواجهة الرئيسية خط IBM Plex Serif لإضفاء ثقل تحريري، فيما يتولى خط Inter كل نصوص الواجهة، وتُستخدم الخطوط JetBrains Mono و SF Mono في سياقات الشيفرة. يتحقق العمق عبر حدود متوهجة داخلية بيضاء (rgba(255,255,255,0.2) بسماكة 1.5px داخلية) بدلاً من الظلال الخارجية، مما يمنح الواجهة طابع الألواح الزجاجية. يعتمد نظام المسافات على مضاعفات الأربعة بإيقاع واضح من 8 و12 و16 و24 و32. وتكون أنصاف أقطار الحواف صغيرة، إذ يسود قياس 4px، مع استخدام انتقائي لقياسي 8px و16px في البطاقات وحاويات الواجهة الرئيسية.
Shopify
شوبيفاي: تستخدم الصفحة الرئيسية التسويقية لـ Shopify قسمًا رئيسيًا بفيديو يملأ العرض بالكامل وبخلفية شبه سوداء (#02090a)، تتباين بحدة مع شريط التنقل الأبيض أعلاه. ويُستخدم لون التمييز الأساسي للعلامة، وهو أخضر نعناعي زاهٍ (#36f4a4)، باعتدال للتمييز والحالات التفاعلية. أما الخطوط فموزعة بين NeueHaasGrotesk للعناوين العريضة والتحريرية وInter-Variable لنصوص الواجهة الأساسية. تستخدم أزرار الدعوة إلى الإجراء أشكال كبسولة كاملة الاستدارة (border-radius: 9999px). والنظام بأكمله واثق وعالي التباين وطموح، صُمم لتحويل الزوار إلى تجار.
Snapchat
Snapchat في نسخته على الويب يعتمد على سمة فاتحة عالية التباين، ترتكز على اللون الأصفر الأيقوني للعلامة #FFFC00، وعلى أسطح شبه سوداء أساسية بلون #121314، وخلفية صفحة بيضاء نقية. يجمع التصميم بين الخط Avenir Next كخط أساسي والخط Graphik كخط ثانوي، لتحقيق تسلسل طباعي ودود ومنظم في الوقت نفسه. أما عناصر التفاعل، كالأزرار والكبسولات والوسوم، فتستخدم زوايا دائرية كاملة بنصف قطر 100px، بينما تعتمد حقول الإدخال زاوية خفيفة بنصف قطر 5px. وتأتي شريط التنقل على هيئة كبسولة عائمة بظل ناعم. ويُعرض المحتوى في بطاقات وسائط كبيرة مع نص أبيض فوقها، ما يمنح التخطيط طابعاً غامراً يبرز معاينات التطبيق. وتتسم الكثافة العامة بالاعتدال، مع مساحات بيضاء واسعة وتسلسل بصري واضح، يربط بين أعراف واجهات التسويق وواجهات المنتج.
Stripe
يعتمد الموقع التسويقي لشركة Stripe على نظام تصميم محكم يُعرف باسم HDS (Stripe Design System)، ويقوم على الخط المتغير "sohne-var" بأوزان خفيفة تتراوح بين 300 و400، ولوحة ألوان للعلامة التجارية تنتقل من الكحلي العميق إلى النيلي وترتكز على اللون #533afd (Stripe Indigo)، وعلى خلفية تدرج طيفي واسعة تملأ الصفحة في القسم الرئيسي. وتتسم المكونات بزوايا منخفضة الانحناء تتراوح بين 4 و6 بكسل، وبظلال مسطحة أو شبه معدومة، وتُبنى وفق شبكة تباعد أساسية قوامها 8 بكسل. والنبرة العامة حازمة وودودة في آن واحد، إذ تنقل البنية التحتية المالية بطباعة واثقة واستخدام مقتصد للألوان.
Supabase
Supabase يعتمد على نظام تصميم داكن أولاً، يرتكز على خلفية سوداء عميقة قريبة من الأسود (oklch ~0.19) مع لون تمييز أخضر زاهٍ للعلامة التجارية (#3ecf8e / #3fcf8e). يُبنى التخطيط على شبكة بطاقات ميزات متجاوبة، مع استخدام خط Manrope للعناوين الرئيسية وخط Inter للنصوص الأساسية وعناصر الواجهة. ويتولى خط Source Code Pro جميع السياقات ذات الخطوط الأحادية والشيفرات البرمجية. ونظام الألوان مبني على متغيرات CSS مخصصة بصيغة oklch ذات تسميات دلالية. تستخدم البطاقات زوايا بنصف قطر 12px مع معالجة حدود خفيفة، وتستخدم الأزرار زوايا بنصف قطر بين 6px و8px، وتتسم الكثافة العامة بالاعتدال مع شبكة تباعد أساسية بمقدار 8px.
The Onion
لنظام تصميم The Onion طابع صحيفة ساخرة رقمية: عناوين بخط غروتسك ضيّق عريض باللون الأسود، ولون تمييز أخضر غابي مميّز (#006b3a) يُستخدم في عناوين الأقسام وشارات الأكثر تداولًا وأزرار الدعوة إلى الإجراء، وذلك كله على خلفية بيضاء ناصعة أو رمادية فاتحة. الطباعة هي الأداة التصميمية الأساسية، إذ تهيمن على العناوين خطوط Adobe Fonts الغروتسك المضغوطة وشبه المضغوطة مثل tablet-gothic وrocky-condensed، بينما يتولى utopia-std-caption النص الأساسي. والتخطيط كثيف المعلومات، تتوزع فيه بطاقات متقاربة الشبكة، وتفصل بين المقالات حدود سفلية، وتكاد زوايا العناصر البنيوية تخلو من الانحناء. أما العمق فمحدود جدًا، ولا تُستخدم إلا بعض الظلال الخفيفة على الطبقات المتراكبة فقط.
Uber
تجمع لغة تصميم Uber بين البساطة الصارمة والرسوم التوضيحية الملوّنة لتقديم منصة نقل تبدو قريبة من المستخدم وفي الوقت نفسه احترافية. يوفّر الأساس الأسود والأبيض الحاد وضوحًا وسهولة في القراءة، بينما تضيف الرسوم التوضيحية الملوّنة في الواجهات الرئيسية دفئًا وإحساسًا إنسانيًا. تعتمد الطباعة على عائلة الخطوط المخصصة UberMove لتحقيق الاتساق في الهوية، مع مسافات واسعة تمنح الواجهة مساحة للتنفس في كل أجزائها.
WIRED
WIRED-ის დიზაინ სისტემა არის მაღალი კონტრასტის, რედაქციულად მართული მონოქრომული ჩარჩო... Wait, I must answer in Arabic, not Georgian. Correcting: نظام تصميم WIRED إطار أحادي اللون عالي التباين يقوده المحتوى التحريري، ومبني على نظام خطوط خاص (Breve Text وWIRED Mono وWiredDisplay وApercu) ولوحة ألوان شبه خالية من الألوان. يهيمن اللون الأسود (#000000) بعدد 2961 ظهورًا، فيثبّت النصوص والحدود والأيقونات وحالات التفاعل. ويوفر اللون الأبيض (#ffffff) السطح الأساسي. يُستخدم لون التمييز بحذر شديد، فلا يظهر سوى الأزرق العلامة التجارية #057dbc في أزرار الاشتراك. يعتمد التخطيط على شبكة قصص متعددة الأعمدة منظمة، مع مسافات أساسية محكمة بقيمة 8px، وأسطح مسطحة بلا ظلال، وحواف دائرية محدودة بقيمة 4px كمعيار عام. ويُعد الخط الفارق الأساسي: يُستخدم Breve Text بحجم 19px للنص التحريري، ويُستخدم WIRED Mono بأحرف كبيرة وتباعد محسوب لعناوين الأقسام، ويُستخدم WiredDisplay للعناوين الرئيسية الكبيرة. والأسلوب العام سلطوي كثيف المعلومات، ويُعطي الأولوية لتدفق القراءة.
xAI
xAI تستخدم في موقعها التسويقي لوحة أسطح دافئة بلون العاج الفاتح، يرتكز فيها --color-ivory (#f9f8f6) و--color-white (#ffffff)، مع #0a0a0a، وهو أسود داكن قريب من الأسود، كلون نص ومقدمة مهيمن. ينقسم النظام الطباعي بين universalSansDisplay للعناوين الكبيرة (60 إلى 72 بكسل مع تباعد أحرف سلبي وضيق)، وuniversalSans لنص المحتوى وواجهة الاستخدام، وGeistMono للشيفرة وسياقات الطرفية. تهيمن على لغة الحواف أشكال الكبسولة 9999px في أزرار الدعوة إلى الإجراء والوسوم، مع 12 بكسل و6 بكسل للبطاقات والحقول. الارتفاع البصري ضئيل، إذ تستخدم البطاقات ظلاً متعدد الطبقات ناعماً بينما تبقى معظم الأسطح مسطحة. النبرة العامة تقنية وفاخرة: ألوان مقتصدة ومساحات بيضاء واسعة وجمالية قوية للشيفرة ذات الخط الأحادي تُشير إلى مصداقية المطورين.
لا تجد الموقع الذي تحتاج إليه؟
الصق أي رابط لتحصل على ملف DESIGN.md من أي موقع ويب. الألوان والخطوط والمسافات والرموز، جاهزة لسير عملك مع الذكاء الاصطناعي.