Identity guidelines — v1
One mark. One hue. Real physics.
The mark is a calligraphic in orbit: the kashida becomes a trajectory, the loop an orbital ring, the crescent a swing-by. It is drawn once, by hand — never redrawn, retraced, or approximated.
Construction
Clearspace and minimum size.
Give the mark room equal to the height of its ring on every side. Below 20px of height, use the favicon tile instead.
112px64px36px20pxColor
Monotone electric.
One chromatic voice — electric cobalt — against ink and paper. Ratios: ~90% ground, ~9% ink, ~1% cobalt. When everything shouts blue, nothing does.
Electric Cobalt
the identity. links, marks, emphasis
Ink
text on paper
Paper
light ground
Abyss
dark ground
Periwinkle
accent on dark
Depth
extrusion walls, shadows of the mark
Gradients
Light moving through water.
Gradients are atmospheres, not decorations: soft, heavily blurred, and strictly inside the blue family.
Cobalt Flow
primary buttons, emphasis surfaces
Signal
gradient text — one phrase per screen, never body copy
Aurora
hero atmospheres, blurred ≥60px, always behind content
Abyss Aurora
dark-mode counterpart
Typography
A precise voice, a terminal accent.
Geist carries the message. Geist Mono carries the instrumentation. IBM Plex Sans Arabic carries the letterform behind the mark.
Geist — display & body
Aa
Continuous physics,
discrete computation.
Headlines -0.02em tracking, weights 500–700. Body 400–500, 1.6–1.75 line height, ≤65ch.
Geist Mono — instrumentation
01
ω = (2.1, 5.4, 1.6) rad/s
Labels, indices, coordinates, readouts. Uppercase, 0.12–0.18em tracking, always small.
IBM Plex Sans Arabic — the letterform
The initial of Hoda.
Reserved for the letterform itself — never for running Arabic text set small.
Section label
Every section label begins with the mark in miniature — the identity signing each heading. It replaced the old // prefix.
Motion
If it moves, it obeys mechanics.
The mark never spins on a keyframe. It tumbles torque-free — Euler's equations, RK4-integrated, angular momentum conserved — the tennis-racket theorem as a brand asset.
Entrances
fade-up 24px, 0.7s, cubic-bezier(.21,.47,.32,.98), once per element
The tumble
ω₀ = (2.1, 5.4, 1.6) rad/s · I = (1, 2.2, 3.2) · preloader only, ≤2.8s, once per session
Respect
prefers-reduced-motion collapses everything to a still frame — no exceptions
Boundaries
Six ways to break it.
Don't.
No recoloring
the mark is cobalt, ink, or white — nothing else
No stretching
scale proportionally, always
No outlines or shadows
the mark is a solid calligraphic object
No static tilts
if it rotates, it rotates under real physics
No busy backgrounds
one aurora, or flat ground — never both at full strength
No rainbow gradients
every gradient lives inside the blue family
In the wild
Applications.
The same object everywhere: browser tab, social card, header, preloader.
