خ
Alalaam
Brand guidelines · v1 · July 2026

Alalaam

الأعلام — سِيَرٌ في سياقها

Lives, in context. Alalaam places one historical figure at the centre of their world and draws that world as evidence — who they met, who they may have met, and who they only ever knew through books. These pages define the wordmark, the palette, the type, and — most importantly — the visual grammar of the graph itself.

01

Wordmark & medallion

العلامة والميدالية
خ
Alalaam
الأعلام

The wordmark is set in Newsreader at weight 700 with −2.5% tracking; the Arabic wordmark is Reem Kufi and is never letter-spaced. The medallion beside it carries the glyph of the current subject — خ for al-Khwarizmi.

DoUse a geometric medallion with the subject's initial glyph as the portrait stand-in.
Don'tFabricate a face. No historical figure in Alalaam is ever given an invented portrait.
Don'tRecolor the medallion outside the five category variants defined in section 04.
02

Colour

الألوان
Surfaces — parchment, always
Paper
#F8F5EB
Page ground
Card
#FEFCF6
Panels, sheets
Inset
#F1EDDD
Chips, wells
Line
#DED4B9
Rules, borders
Ink — indigo-night, never pure black
Ink
#101320
Display, body
Ink 2
#262C42
Reading text
Ink 3
#4E556E
Secondary
Ink 4
#898FA6
Captions, hints
Category accents — one hue per kind of person
Brass
#B0822F
The subject · patrons & caliphs · gilding
Lapis
#335E9E
Sources & teachers
Verdigris
#3C7E6E
House of Wisdom peers
Rose
#A14A60
Heirs of the method
Sand
#8A7A55
The wider age

Accents are never decorative: a colour always answers “what kind of person, what kind of link?” New accents must share the chroma and lightness of this row (derive in oklch, vary hue only).

The three moods

One system, three intensities. Editorial is the product default; Museum and Illuminated remain available as presentation moods. All three stay on parchment — Alalaam has no dark surface in product UI.

Editorial · default
High contrast, sharp hierarchy, ornament ≤ 15%
Museum
Quiet, airy, hairline rules
Illuminated
Gilded rules, drop caps, full ornament
03

Typography

الطباعة
Display · Newsreader 600
tracking −2%
The Majlis — every line is a relationship
Reading · Newsreader 400
16px / 1.6
Every line is a relationship; its texture is the evidence. Time is the test of who could have met.
UI · IBM Plex Sans 600
labels track +14–22%
Circle of people · Life & work
Data · IBM Plex Mono
dates, ids, hints
c. 780 – c. 850 CE
Arabic — a first language, not a translation
Display AR · Reem Kufi
المجلس — كل خطٍّ علاقة
Reading AR · Amiri
≈ +1.5px vs Latin
كل خطٍّ علاقة، ونسيجُه هو الدليل. الزمنُ محكُّ من كان يمكن أن يلتقي.
UI AR · Plex Sans Arabic
حلقة الأشخاص · الحياة والعمل
DoRun Arabic sizes ≈1.5px larger than their Latin counterparts; render italics as normal style.
DoUse Eastern Arabic numerals (٧٨٠) in Arabic contexts, including dates on the map.
Don'tLetter-space Arabic text — ever. Tracking is a Latin-only device.
04

Reading the graph

قراءة الخريطة

The Majlis is not a decoration — it is an argument. Every visual property encodes one claim about the historical record, so a reader can reason about certainty at a glance. This grammar is fixed; new features must reuse it, never contradict it.

Rings = distance of certainty
The subject sits at the centre. Each ring outward is a weaker class of evidence: documented colleagues, then plausible contemporaries, then people known only through books.
Line texture = kind of evidence
The dash pattern is the claim; the colour repeats it.
Solid brass documented: met & worked beside him
Long dash possible: shared his lifetime and world
Dots, arrow in a source he read (lapis)
Dots, arrow out an heir who read him (rose)
Weight and opacity are focus, not meaning: the selected relationship draws at full strength, the rest recede.
Medallion colour = category of person
خ
Subject · patronsbrass
ب
Sources & teacherslapis
ح
House of Wisdomverdigris
ع
Heirs of the methodrose
ج
The wider agesand

Medallion size tracks proximity to the subject (inner ring largest); a brass halo marks the current selection. Glyph is always the initial of the figure's Arabic name, set in Amiri.

When several figures share the focus

Focal figures become anchors. People who belong to two or more of their circles gather in the shared centre — the overlap is the point. Each anchor's private circle collapses into a +N badge; a bold brass line between anchors means the record names them in each other's circle. In Compare, a brass-tinted chip always means “this fact is shared by both lives.”

05

Motion

الحركة

Motion explains structure, then gets out of the way. The map assembles once — centre first, then nodes in a ~35ms stagger, then the lines that connect them — so the reader watches the argument being built. Panels rise 10px and fade over ≈400ms.

DoAnimate entrances only; end-states must be the resting style (print- and reduced-motion-safe).
Don'tLoop anything. No ambient pulsing, no perpetual spin — the record is still; the reader moves.
06

Voice

الصوت

Scholarly but warm; certain about uncertainty. We say “may have crossed paths”, never “knew”, when the record only permits maybes. Claims are worded as evidence: “a source he read”, “an heir of his method”.

DoWrite both languages as originals. Arabic copy is composed, not translated word-for-word.
Don'tOverstate: no superlatives about historical figures, no invented anecdotes, no emoji.