Style Guide

Visual identity and design system for Qalam.

Colors

Brand Palette

Cream (Background)

#FFF8F2

Teal

#2A6878

Navy

#191923

Purple (Anatomy UI)

#9D72C5

Blue (Mechanics)

#14ADE5

Olive (Scripts)

#848B3C

Category Colors

Mechanics

How Arabic Works

#14ADE5

Anatomy

Anatomy

#9D72C5

Scripts

Script Styles

#848B3C

Grays

#191923

Black

#6B6B76

Gray 700 (Body text)

#9E9EA5

Gray 400 (Labels)

#E4DDD5

Gray 100 (Borders)

#FAF6F1

White

Typography

ABC Otto (Body & Display)

Aa Bb Cc Dd Ee

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Primary typeface for all body text, headings, navigation, and UI elements. Available in Light, Regular, Regular Italic, Medium, Medium Italic, Bold, and Bold Italic.

font-sans / font-display · "ABC Otto", Georgia, serif

Forma DJR Text (Accent & Hero)

Aa Bb Cc Dd Ee

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Used for the hero subtitle, category headlines, and accent typography. Available in Regular, Italic, Medium, Medium Italic, and Extra Bold.

font-forma · "Forma DJR Text", system-ui, sans-serif

29LT Idris Sharp (Arabic Display)

أ ب ت ث ج ح خ د ذ ر ز

الخط المزيون نزهة للعيون

Used for Arabic titles on entry cards, entry page headings, interactive letter displays, and the footer wordmark. Available in Light, Regular, Medium, Bold, and ExtraBold.

"29LT Idris Sharp [weight]" via Fontstand

29LT Ada Flat (Arabic Display Alt)

أ ب ت ث ج ح خ د ذ ر ز

الخط المزيون نزهة للعيون

Used in the hero Arabic wordmark animation as an alternate display face.

"29LT Ada Flat Bold" via Fontstand

Type Scale

hero-arقلم
hero-titleHeadline
section-titleSection Title
hero-subtitleSubtitle in Forma
card-titleCard Title
text-lgBody Large
text-baseBody Default
text-smSmall / Caption

Spacing & Layout

Container

Max width of 1200px with horizontal padding of 1.5rem (mobile) to 3rem (desktop).

Content Width

Body text is constrained to 38em for optimal line length and readability.

Grid

Entry cards use a responsive grid: 1 column on mobile, 2 columns from sm, 3 columns from lg.

Border Radius

45pxCards
16pxContainers
12pxTiles
fullPills

Components

Related Entry Pills

How Arabic WorksAnatomyScript Styles

Text Selection

Default selection highlight uses #0D7377 (teal) with cream text. Entry pages override with their category color via the --selection-color CSS custom property.

Illustration Style

Line-art characters on pure white backgrounds. How Arabic Works illustrations use teal ink #0D7377; Anatomy illustrations use burgundy ink (e.g. #4B005E). Category UI colors stay separate (blue / purple / olive on cards and nav). No halftone, no gradients, no textures.

Interactive Elements

  • Hero: Nuqta dot field responds to mouse position
  • Category cards: Draggable overlapping cards (desktop)
  • Entry cards: Drag-to-reorder grid (desktop)
  • Play games: Click-to-connect, multiple choice, layout challenges