الهوية: العلامة، والشعار النصي، والتركيبة

ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.

العلامة (بلاطة واحدة من النمط، في إطار مربع) بجانب الشعار النصي. مبنية من ملفات SVG في حزمة الشعار (assets/brand/)، ولا يُعاد رسمها أبدًا.

CSS: css/components/brand.css. الأصناف: .al-lockup، .al-lockup--stacked، .al-lockup__product، .al-mark، .al-wordmark.

في صفحته، بالإنجليزية والعربية

البنية

HTML

<a class="al-lockup" href="/" aria-label="Arabesque Labs">
  <svg class="al-mark" aria-hidden="true">…assets/brand/mark.svg…</svg>
  <span class="al-wordmark" lang="en">Arabesque Labs</span>
</a>
<!-- with a product -->
<span class="al-lockup"><svg class="al-mark" aria-hidden="true">…</svg><span class="al-wordmark" lang="en">Arabesque Labs</span><span class="al-lockup__product">hunt</span></span>

ضمّن mark.svg داخل الصفحة مباشرة كي يأخذ currentColor؛ وفي assets/brand/ أيضًا star.svg وwordmark.svg.

وحيث لا تصل العلامة الحية (البريد الإلكتروني، والعروض، والمستندات)، يكتب البناء نسخًا بألوان ثابتة في dist/brand/: mark-ink.svg وstar-ink.svg للخلفيات الفاتحة، وmark-reversed.svg وstar-reversed.svg للداكنة، بلون النص في كل مظهر. وfavicon.svg هي النجمة التي يتغيّر لونها مع إعداد النظام الفاتح أو الداكن: استخدمها أيقونةً للموقع.

الأنواع والأحجام

النوع	الاستخدام
التركيبة (العلامة + الشعار النصي)	الترويسات
مع منتج (· hunt)	ترويسة المنتج نفسه
المكدّسة (.al-lockup--stacked): العلامة فوق الشعار النصي	شاشة البداية، والطباعة
العلامة وحدها	حيث يظهر الاسم أصلًا: التذييل، وأيقونة التطبيق
النجمة وحدها (star.svg، dist/brand/favicon.svg)	بين 16 و24 بكسلًا، حيث يزدحم الإطار

حدّد الحجم بخاصية font-size على التركيبة؛ والعلامة بحجم 1.5em (و2.5em في المكدّسة). لا تصغر العلامة عن 16 بكسلًا، ولا يقل عرض التركيبة عن 120 بكسلًا؛ وتحت 24 بكسلًا استخدم النجمة.

علامة آرابيسك

لنظام التصميم علامته الخاصة: أربع من بلاطات الشركة، اثنتان في اثنتين، في الإطار المربع نفسه (assets/brand/arabesque-mark.svg). وحيث تلتقي أربع زوايا تظهر نجمة كاملة لا تملكها بلاطة واحدة. وهي مرسومة بقاعدة العلامة نفسها (التبليط بنصف مقياس العلامة)، ويتحقق منها اختبار مقابل js/pattern.js؛ وسُمك خطّها 2.4 وحدة مقابل 3.2 في العلامة، كي لا تبدو أربع بلاطات في إطار واحد أثقل من بلاطة واحدة.

النوع	الاستخدام
علامة آرابيسك (arabesque-mark.svg؛ dist/brand/arabesque-mark-ink.svg و-reversed.svg)	حيث يظهر آرابيسك وحده: ملف README، وصفحتا الحزمة والمستودع، والعروض
نجومها الأربع، مصمتة وبلا إطار (arabesque-star.svg؛ dist/brand/arabesque-star-ink.svg و-reversed.svg)	بين 16 و24 بكسلًا
أيقونتها (dist/brand/arabesque-favicon.svg)	أيقونة صفحات آرابيسك نفسه: العناصر، والمستندات، والأمثلة

وبجانبها يُكتب الاسم «آرابيسك» (وبالإنجليزية "Arabesque")، بخط الشعار النصي وتباعده. وحدود حجمها والمساحة الخالية حولها هي حدود العلامة. وفي ترويسة موقع آرابيسك نفسه (العناصر، والمستندات، والأمثلة) تظهر العلامة واسم «آرابيسك» واسم المنتج: «آرابيسك · نظام التصميم». وفي React: ‏<Lockup mark={<ArabesqueMark />} name={…«آرابيسك»…} product="نظام التصميم" />. أما مواقع معامل آرابيسك ومنتجاتها فتُبقي تركيبة الشركة.

الحالات

لون واحد: لون النص (الحبر على الفاتح، والشاحب على الداكن)؛ ولا يكون لون التمييز أبدًا، ولا تدرّجًا لونيًا أبدًا.

لوحة المفاتيح

إن كانت رابطًا، فهي تستقبل التركيز.

ARIA

اسم واحد يُقرأ: «Arabesque Labs»؛ والعلامة aria-hidden.

من اليمين إلى اليسار

لا تنعكس أبدًا. في الصفحات العربية يُكتب الشعار النصي بالعربية، «معامل آرابيسك»، مع lang="ar" ودون تباعد بين الحروف (قيمة --al-tracking-wide صفر في العربية)؛ وتبقى العلامة كما هي، وتأتي التركيبة في البداية (اليمين). وفي الإنجليزية يُكتب «Arabesque Labs» بتباعد بين الحروف.

افعل ولا تفعل

افعل

• اترك حولها مساحة فارغة قدرها ربع حجم العلامة.
• استخدم ملفات SVG كما هي.

لا تفعل

• إعادة رسم العلامة، أو تدويرها، أو تغيير لونها في كل قسم، أو رسمها بخط محيطي، أو وضعها على خلفية مزدحمة (بما في ذلك النمط بكامل قوته).
• الخلط بين البلاطة المحورية الفيروزية في القسم الافتتاحي والشعار: إنها خلية من النمط. والشعار بلون واحد دائمًا.
• عكس التركيبة من اليمين إلى اليسار: إنها صورة ثابتة، تقع في البداية كوحدة واحدة.

الرموز

الرموز التي يستخدمها (7)

--al-color-text، --al-color-text-muted، --al-font-display، --al-text-lg، --al-tracking-wide، --al-weight-medium، --al-weight-regular