1. Brand Foundation
2. Logo & Lockups
The bilingual TASMU lockup (Arabic above Latin) is the primary mark. It is always used on dark surfaces in the portal.
3. Colour System
TASMU is dark-first. All colour is consumed through semantic tokens defined once in the stylesheet — never hard-coded hex values in components.
Roughly 70% background and surfaces, 20% foreground text, 10% TASMU Yellow. Yellow is reserved for the single primary action, active states and key data highlights on a screen.
4. Typography (EN / AR)
English uses Space Grotesk for display and headings, Inter for UI and body copy. Headline tracking is tightened to -2.5%; body copy sits at -0.5%.
Arabic uses Noto Kufi Arabic for display and headings, with IBM Plex Sans Arabic for body. Arabic is never letter-spaced, never italicised, and never set in all-caps.
| Element | Size / weight / line-height | Sample |
|---|---|---|
| Display / H1 | 60 px · 500 · 1.05 | Smart Nation |
| H2 Section | 36 px · 500 · 1.1 | AI Marketplace |
| H3 Card title | 20 px · 600 · 1.3 | Digital Twin |
| Body | 14 px · 400 · 1.6 | Deploy blueprints in minutes. |
| Caption / meta | 12 px · 400 · 1.5 | Updated 2 hours ago |
| Eyebrow | 11 px · 500 · uppercase · +0.15em | Design System |
When both scripts appear together, set Arabic one step larger (+2 px) than the Latin equivalent so optical weight matches, and increase line-height by 0.15 to accommodate diacritics.
5. Spacing, Grid & Radius
A 4 px base unit drives all spacing. Approved steps: 4, 8, 12, 16, 24, 32, 48, 64, 96. Page gutters are 24 px on mobile and 24 px within a 1280 px max content width on desktop.
6. Iconography & Imagery
Lucide, 1.5 px stroke, 16 px in dense UI, 20 px in navigation, 24 px in feature blocks. Icons inherit text colour; TASMU Yellow is used only for the icon of an active or primary item.
7. Components
Every component below is production code from the portal. Reuse them; do not create alternative variants without Design Authority approval.
Pill-shaped, 40 px tall (32 px compact). One primary action per view.
48 px tall, pill radius, 1 px border, yellow focus border. Labels always visible above the field.
Surface background, 1 px border, 16–20 px radius, 24 px padding, ambient shadow on hover.
Uppercase 11 px muted headers, 1 px row dividers, 12–14 px rows, numerals right-aligned and tabular.
| Service | Status | Usage |
|---|---|---|
| TASMU CIAM | Live | 12,480 |
| GIS APIs | Live | 3,209 |
8. Motion
Motion is functional: it explains where things come from. Never decorative, never longer than 400 ms.
- 120 msHover, colour change
- 220 msEnter / exit, fade-rise
- 400 msPage & wizard transitions
- cubic-bezier(0.22, 1, 0.36, 1)Standard ease-out
- spring(260, 24)Success & celebration
- linearProgress & loaders
Content rises 12 px while fading in. Cards lift 2 px on hover. Wizard steps slide along the reading direction — left-to-right in English, right-to-left in Arabic. All motion is disabled under prefers-reduced-motion.
9. Bilingual & RTL
- Arabic is a first-class language, not a translation layer. Every screen must be reviewed in both scripts.
- Set dir="rtl" on the document root for Arabic — never mirror with CSS transforms.
- Mirror layout, navigation order, icon direction (arrows, chevrons) and progress indicators. Do not mirror logos, media controls or clock icons.
- Numbers, dates and currency use Arabic-Indic or Western digits consistently per tenant setting; currency is always QAR.
- Keep English product names (TASMU CIAM, GIS APIs) in Latin script inside Arabic copy.
- Allow 25–35% text expansion when translating English into Arabic; never truncate a label to fit.
10. Accessibility
- Body text meets WCAG 2.1 AA — 4.5:1 minimum; large display text 3:1.
- TASMU Yellow is only used for text on the dark background, or as a background under near-black text. Never yellow text on a light surface.
- Visible focus ring on every interactive element: 2 px yellow outline with 2 px offset.
- Minimum touch target 44 × 44 px.
- Colour is never the sole carrier of meaning — pair status colour with a label or icon.
- All imagery carries meaningful alternative text in both languages.
11. Do & Don't
- · Use semantic tokens for every colour, radius and shadow.
- · Keep one primary yellow action per screen.
- · Set Arabic in Noto Kufi Arabic with generous line-height.
- · Compose new screens from existing components.
- · Test every layout in both LTR and RTL.
- · Do not introduce new accent colours or gradients.
- · Do not place the logo on light or busy backgrounds.
- · Do not stretch, recolour or outline the logo.
- · Do not letter-space, italicise or capitalise Arabic text.
- · Do not use drop shadows, glows or decorative animation.
12. Assets & Governance
Logo files, the Figma library and the token export are distributed through the TASMU Design Authority. Request access or raise a deviation before shipping anything that departs from this document.