Stylepack

الخطوط

الخطوط التي يستخدمها dropbox.com

يستخدم dropbox.com الخط Sharp Grotesk لعناوينه والخط Atlas Grotesk Web لنصه الأساسي. Sharp Grotesk خط مرخّص يقدّمه الموقع بنفسه. أقرب بديل مجاني على Google Fonts: Inter.

تم القياس من dropbox.com قبل 4 أيام.

افتح حزمة التصميم الكاملةتنزيل الحزمة

عائلات الخطوط

3 عائلات خطوط
Sharp Grotesk
يُستخدم في
h1, h3
المصدر
مستضافة ذاتيًا
البديل المجاني
Inter
Sharp Grotesk 23
يُستخدم في
h2
المصدر
مستضافة ذاتيًا
البديل المجاني
Inter
Atlas Grotesk Web
يُستخدم في
body, label, button
المصدر
مستضافة ذاتيًا
البديل المجاني
Inter

CSS لإعادة إنتاجه

متغيرات الخطوط مع البديل المجاني في سلسلة الخطوط، فيعمل CSS نفسه مع الخط المرخّص أو بدونه.

:root {
  --font-heading: "Sharp Grotesk", "Inter", sans-serif; /* Inter stands in for Sharp Grotesk */
  --font-body: "Atlas Grotesk Web", "Inter", sans-serif; /* Inter stands in for Atlas Grotesk Web */
  --font-size-base: 16px;
}

كيف يُضبط النص

headline-displayQuick brown foxSharp Grotesk / 40px / 500 / lh 48px
headline-lgQuick brown foxSharp Grotesk 23 / 32px / 400 / lh 38.4px
headline-mdQuick brown foxSharp Grotesk / 18px / 500 / lh 21.6px
body-mdThe quick brown fox jumps over the lazy dogAtlas Grotesk Web / 16px / 400 / lh 24px
label-mdThe quick brown fox jumps over the lazy dogAtlas Grotesk Web / 12px / 700 / lh 1.2
buttonThe quick brown fox jumps over the lazy dogAtlas Grotesk Web / 16px / 500 / lh 19.2px
أحجام الخطوط المستخدمة
1214161820263240

لوكلاء الذكاء الاصطناعي

الحزمة نص عادي بلا مفتاح: اجلب DESIGN.md، أو سلّم الحزمة كاملة إلى Claude Code أو Cursor أو Copilot عبر خادم MCP.

curl -s https://stylepack.ai/packs/dropbox.com/DESIGN.md

أسئلة

ما الخط الذي يستخدمه dropbox.com؟

يستخدم dropbox.com الخط Sharp Grotesk, Sharp Grotesk 23, Atlas Grotesk Web. العناوين بخط Sharp Grotesk والنص الأساسي بخط Atlas Grotesk Web، مقاسة من الموقع كما يُعرض فعلًا، لا من ملف الأنماط.

هل خط dropbox.com مجاني الاستخدام؟

لا. Sharp Grotesk خط مرخّص يقدّمه dropbox.com بنفسه. أقرب بديل مجاني هو Inter، متاح على Google Fonts. يضعه كود CSS في هذه الصفحة ضمن سلسلة الخطوط كبديل.

كيف أحصل على الطباعة نفسها التي يستخدمها dropbox.com في مشروعي؟

نزّل حزمة تصميم dropbox.com من Stylepack: تحتوي على سلسلة الخطوط وسلّم الأحجام وكل أنماط النصوص ولقطات الشاشة، بصيغة يستطيع وكيل برمجة بالذكاء الاصطناعي مثل Claude Code أو Cursor البناء منها.