Cave design system
العربية

Foundations

Typography

Hero for brand moments, Poppins for everything read at length, Almarai for Arabic.

Families

--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

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

Type scale

Each style is shown in its own face. Arabic styles are set right to left.

Display

display-xlSize 64pxLine 68pxWeight 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-lgSize 48pxLine 52pxWeight 400

Software solutions for real-life problems

Hero, English. Section titles.

heading-lgSize 32pxLine 40pxWeight 400

Software solutions for real-life problems

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

heading-mdSize 24pxLine 32pxWeight 400

Software solutions for real-life problems

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

Text

body-lgSize 18pxLine 28pxWeight 400

Software solutions for real-life problems

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

bodySize 16pxLine 24pxWeight 400

Software solutions for real-life problems

Poppins Regular. Default body copy.

body-smSize 14pxLine 20pxWeight 400

Software solutions for real-life problems

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

captionSize 12pxLine 16pxWeight 400

Software solutions for real-life problems

Poppins Regular. Captions and fine print.

body-strongSize 16pxLine 24pxWeight 600

Software solutions for real-life problems

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

labelSize 14pxLine 20pxWeight 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-titleSize 24pxLine 32pxWeight 600

Orders

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

section-titleSize 18pxLine 28pxWeight 600

Recent orders

Poppins SemiBold. Card and dialog titles.

table-headSize 12pxLine 16pxWeight 600

Customer

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

Arabic display

ar-displaySize 56pxLine 76pxWeight 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-headingSize 32pxLine 46pxWeight 300

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

Almarai Light, Arabic. Headings at brand moments.

Arabic text

ar-bodySize 16pxLine 28pxWeight 400

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

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

ar-body-smSize 14pxLine 24pxWeight 400

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

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

ar-body-strongSize 16pxLine 28pxWeight 700

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

Almarai Bold, Arabic. Emphasis and callout titles.

ar-page-titleSize 24pxLine 36pxWeight 700

الطلبات

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

ar-section-titleSize 18pxLine 30pxWeight 700

أحدث الطلبات

Almarai Bold, Arabic. Card and dialog titles.

Guidance

  • 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.