نظام تصميم كهف
English

الأساسيات

الخطوط

Hero للحظات الهوية، و Poppins لكل ما يُقرأ طويلًا، و Almarai للعربية.

العائلات

--font-display

Hero

Aa Bb Cc Dd Ee Ff Gg 0123456789

--font-sans

Poppins

Aa Bb Cc Dd Ee Ff Gg 0123456789

--font-ar-display

Almarai Light

أ ب ت ث ج ح خ د ذ ر ز ٠١٢٣٤٥٦٧٨٩

--font-ar-text

Almarai

أ ب ت ث ج ح خ د ذ ر ز ٠١٢٣٤٥٦٧٨٩

سلّم الخطوط

يظهر كل نمط بخطّه. تُكتب الأنماط العربية من اليمين إلى اليسار.

Display

display-xlالحجم 64pxارتفاع السطر 68pxالوزن 400

Software solutions for real-life problems

Hero, English. Page titles and cover lines. Sentence case or capitals, as in the deck's GOAL and SYMBOLS tabs.

display-lgالحجم 48pxارتفاع السطر 52pxالوزن 400

Software solutions for real-life problems

Hero, English. Section titles.

heading-lgالحجم 32pxارتفاع السطر 40pxالوزن 400

Software solutions for real-life problems

Hero, English. Headings, and the text of a SectionTag set in white on teal.

heading-mdالحجم 24pxارتفاع السطر 32pxالوزن 400

Software solutions for real-life problems

Hero, English. Sub-headings. The smallest size at which white text on teal passes.

Text

body-lgالحجم 18pxارتفاع السطر 28pxالوزن 400

Software solutions for real-life problems

Poppins Regular. Lead paragraphs, as in the deck's goal statement.

bodyالحجم 16pxارتفاع السطر 24pxالوزن 400

Software solutions for real-life problems

Poppins Regular. Default body copy.

body-smالحجم 14pxارتفاع السطر 20pxالوزن 400

Software solutions for real-life problems

Poppins Regular. Secondary copy, table cells, footer contact lines.

captionالحجم 12pxارتفاع السطر 16pxالوزن 400

Software solutions for real-life problems

Poppins Regular. Captions and fine print.

body-strongالحجم 16pxارتفاع السطر 24pxالوزن 600

Software solutions for real-life problems

Poppins SemiBold. Emphasis inside body copy and callout titles (the deck uses Poppins Bold for these).

labelالحجم 14pxارتفاع السطر 20pxالوزن 500

CAPITALS LABEL

Poppins Medium, set in capitals with wide tracking. Short labels only, never sentences. The old descriptor line under the wordmark used this treatment.

page-titleالحجم 24pxارتفاع السطر 32pxالوزن 600

Orders

Poppins SemiBold. Page titles inside the products (consoles, POS, app bars). Hero stays for brand moments: landing, sign-in, splash.

section-titleالحجم 18pxارتفاع السطر 28pxالوزن 600

Recent orders

Poppins SemiBold. Card and dialog titles.

table-headالحجم 12pxارتفاع السطر 16pxالوزن 600

Customer

Poppins SemiBold. Table column headers and form section labels, in sentence case.

Arabic display

ar-displayالحجم 56pxارتفاع السطر 76pxالوزن 300

للحلول البرمجية

Almarai Light, Arabic. Titles and brand moments. About 1.18x the size of the English display so the two look equally light; Blue Ocean is far heavier than Hero and made the Arabic look bold beside it.

ar-headingالحجم 32pxارتفاع السطر 46pxالوزن 300

للحلول البرمجية

Almarai Light, Arabic. Headings at brand moments.

Arabic text

ar-bodyالحجم 16pxارتفاع السطر 28pxالوزن 400

للحلول البرمجية

Almarai Regular, Arabic. Body copy and the descriptor line. Set right to left with dir="rtl".

ar-body-smالحجم 14pxارتفاع السطر 24pxالوزن 400

للحلول البرمجية

Almarai Regular, Arabic. Secondary copy and footer contact lines.

ar-body-strongالحجم 16pxارتفاع السطر 28pxالوزن 700

للحلول البرمجية

Almarai Bold, Arabic. Emphasis and callout titles.

ar-page-titleالحجم 24pxارتفاع السطر 36pxالوزن 700

الطلبات

Almarai Bold, Arabic. Page titles inside the products. Brand moments use ar-display (Almarai Light).

ar-section-titleالحجم 18pxارتفاع السطر 30pxالوزن 700

أحدث الطلبات

Almarai Bold, Arabic. Card and dialog titles.

الإرشادات

الإرشادات التفصيلية في هذه الصفحة مكتوبة بالإنجليزية، وهي النص نفسه الذي تُبنى عليه التطبيقات.
  • English: display (Hero) is primary, for titles and tabs. sans (Poppins) is secondary, for everything read at length. Set body copy in body, emphasis in body-strong, secondary copy in body-sm, and short labels in label (capitals, 0.2em tracking).
  • Arabic: ar-display is Almarai Light, for titles at brand moments, set about 1.18x the size of the English display so the two languages look equally light. (Blue Ocean was tried first, but it is far heavier than Hero and made the Arabic look bold beside the English; it stays in the logo lockups and print only.) ar-text (Almarai Regular and Bold) is for body copy. Set Arabic text right to left (dir="rtl"), start-aligned, and never apply the letter-spacing used by label, which breaks Arabic joins.
  • Hero has no Arabic. The family stacks already fall back across Latin and Arabic, so use the stack tokens (--font-display, --font-sans, --font-ar-display, --font-ar-text) and not a face name.
  • Weights available: Poppins Light, Regular, Italic, Medium, SemiBold and Bold; Hero Light and Regular; Almarai Light, Regular, Bold and ExtraBold; Blue Ocean (one weight, logo and print only). Do not request a weight outside these, because browsers fake it. Hero has no bold: emphasise with size, not weight.