Stylepack

الخطوط

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

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

تم القياس من sweetgreen.com قبل 32 يومًا.

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

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

2 عائلات خطوط
SweetSansText
يُستخدم في
h1, h2, body, label, button
المصدر
مستضافة ذاتيًا
البديل المجاني
Inter
Grenette
يُستخدم في
button
المصدر
مستضافة ذاتيًا
البديل المجاني
Inter

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

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

:root {
  --font-heading: "SweetSansText", "Inter", sans-serif; /* Inter stands in for SweetSansText */
  --font-body: "SweetSansText", "Inter", sans-serif; /* Inter stands in for SweetSansText */
  --font-button: "Grenette", "Inter", sans-serif; /* Inter stands in for Grenette */
  --font-size-base: 18px;
}

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

headline-displayQuick brown foxSweetSansText / 16px / 400 / lh 1
headline-lgQuick brown foxSweetSansText / 24px / 400 / lh 28.8px / 0.72px
headline-mdQuick brown foxSweetSansText / 24px / 400 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogSweetSansText / 18px / 400 / lh 22.5px
label-mdThe quick brown fox jumps over the lazy dogSweetSansText / 24px / 400 / lh 28.8px
buttonThe quick brown fox jumps over the lazy dogGrenette / 48px / 200 / lh 48px / -2.25px
أحجام الخطوط المستخدمة
1618244870

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

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

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

أسئلة

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

يستخدم sweetgreen.com الخط SweetSansText, Grenette. العناوين بخط SweetSansText والنص الأساسي بخط SweetSansText، مقاسة من الموقع كما يُعرض فعلًا، لا من ملف الأنماط.

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

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

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

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