Brand guide

The mark

ن, the first letter of نُبَيِّن, drawn as an open book with its point above. Everyone sees a book and a point of light; Arab readers also see the letter, a calligrapher’s dot, and a book turning the Arabic way.

• Cuts. Display (nubayin-mark.svg) from 28px tall, where one unit is one pixel. Micro (nubayin-mark-micro.svg) from 14px to 27px: the gutter closes and it is always one colour.
• Colour. Two colours: pages in text, the point in point. One colour for Micro, photographs and lāzaward grounds.
• Clear space. The point’s width, 9 units, on every side.
• Never outline it, round its corners, fill the pages with lāzaward, rotate it, mirror it in right-to-left layouts, or put it in a shape. App tiles and avatar crops are the only containers.
• Edit by coordinates. Every vertex sits on a 2.5-unit grid.

The point

One rhombus cut from the mark, used at every scale: the eyebrow marker, the list bullet, the “now” indicator and the selected state. In lāzaward it marks what has been made clear. It is never drawn as a circle.

The name lockup

NUBAYIN and نُبَيِّن at equal weight, separated by a 1px hairline in rule. The Arabic is set 1.12 times the Latin, its harakat in point in the two-colour lockup. The lockup keeps its order in right-to-left layouts: like the mark, it never mirrors. Until the wordmark is drawn by an Arabic type designer, set it in Kufam 500 as the Lockup card shows. When the wordmark is drawn, its dots take the point’s rhombic shape.

Colour

• Kohl (kohl-*): a fourteen-step neutral ramp tinted toward galena blue-grey. kohl-950 is the cinema canvas.
• Gypsum (kohl-50): the reading canvas and the light text on cinema.
• Lāzaward (lazaward-*): one blue, built on the lapis stone, used through accent, focus and point only.
• The lāzaward rule. It marks what has been made clear: links, focus, selection, the mark’s point and the harakat. It never fills a button, a tab or a selected state, never glows, never forms a gradient. One drench band per page at most.
• Semantic states (success, warning, danger and their tints) are for product surfaces only, always with a word or an icon.
• Never red as a studio accent, gold on black, green with gold, indigo, violet, neon or pure black.

Type

• Display sizes: display-xl 144, display-l 72, title 39, heading 25, label 14, eyebrow 12 (uppercase, +0.12em). Reading: lede 21, body 17, caption 13.
• Arabic is set 1.12 times the Latin beside it, line height 1.4 in display and 1.8 in text, never letter-spaced, never uppercased, never stretched with tatweel.
• Full tashkeel belongs to the name. Running Arabic follows normal usage, as the native writer sets it.
• font-synthesis: none everywhere. Kufam’s Arabic has no italic; emphasis is weight.
• Bilingual meeting title: Latin, a hairline, Arabic, on one baseline grid; stacked below 720px.

Layout

• Maximum width 1240px. Side gutter max(16px, env(safe-area-inset-left)) on each side.
• Bands of canvas alternate between cinema and reading; bands sit section-gap apart.
• radius-0 on every corner. No shadows. 1px rule hairlines separate.
• Frames: frame-scope 2.39:1, frame-wide 16:9, frame-poster 2:3, frame-portrait 4:5.

Don’ts

• Gold geometry, domes, crescents, calligraphy as decoration.
• Lens flares, god rays, haze, nasheed-thumbnail type.
• Aurora, galaxy or lone-silhouette photography.
• Gradients, glows, glass, indigo or violet; a glowing or filled lāzaward.
• Tracked Arabic, a faked italic, Arabic set as a subtitle under English.
• Barakah’s or an artist’s tokens on NUBAYIN’s own surfaces. An artist appears in their own colours only inside their title act, their work card and their released art.
• The retired v0.1 language: the Frequency, the void, signals, avatars.