AjwaDesign System ← Studio OS
عجوة · Media Production Division

Bringing energy to life.

An original 2026 design system carrying the Aramco soul — the green→blue energy spectrum and precision — reimagined warm, human, simple, and reliable. Light and dark, in parallel.

ManifaPro2 · Hanken Grotesk · JetBrains Mono Warm sand neutrals Energy spectrum
Brand

The energy spectrum

Green → teal → blue. The soul of the system — used as a hero gradient, brand mark fill, and accent moments.

Ajwa Green
#84BD00
Deep Green
#00843D
Teal Bridge
#00A89C
Ajwa Blue
#00A3E0
Deep Blue
#0033A0
Colors

Warm neutrals & status

A sand/stone ramp gives desert warmth; surfaces are warm paper in light, warm near-black in dark. Status colors stay legible in both modes.

50
100
200
300
400
500
600
700
800
900
950
Secondary · functional accents (≤10% of a layout)
Teal
#26A8AB
Purple
#643278
Yellow
#FFC846
Red
#F05F41
Confirmed In review Penciled Blocked Major Film Ongoing
Typography

Type scale

ManifaPro2 for display, Hanken Grotesk for body, JetBrains Mono for data.

54 / DEnergy
33 / DDaily operations
21 / DPicture lock by 21 May
15 / BBody baseline — warm, calm, and easy to read across dense operational screens.
13 / MFPU-2026-014 · i953 · FX3×4
Components

Core primitives

Pill buttons, badges, status pills, cards, inputs, avatars, and segmented tabs — all theme-aware.

Buttons

Status

ConfirmedPenciled
In reviewBlocked

Avatars & tabs

MSAJJL

Input & card

FSGConfirmed
Components · extended

A full kit

Everything a corporate build needs — selection controls, inputs, feedback, data and navigation — all on the same tokens, theme-aware, with restrained motion.

Selection

Inputs

Feedback

Heads upStadium drone window moved to Thursday.
Booking confirmed
Tooltip on brand

Progress & loading

Data table

ProjectGroupStatus
Dhahran LakesMajor FilmConfirmed
Pulse Ep 6SocialPenciled

Navigation

Projects/Major Film/Dhahran Lakes
Signature

Energy, made human

The sign-in moment. A calm, breathing aura confirms a person and restores their session — presence, not surveillance. The energy line stays restrained and alive.

Energy lines · restrained, alive, never loud

Sign-in · welcome

MS
Welcome back
Signed in

Welcome back, Mohammed

You’re signed in to Studio OS as Supervisor, Audio/Visual. Your workspace and today’s schedule are ready.

Restoring your session
100%
Mobile

Mobile screens · iOS

The Ajwa system on a phone — the same tokens, type and spectrum, in a touch-first layout.

Foundations

Radius & elevation

Soft generous radii and warm-tinted shadows — never cold, never bubbly.

9
Radius sm
9px
18
Radius lg
18px
Shadow sm
soft
Shadow md
lifted
Foundations · new

Glass surfaces

Frosted, iOS-26-style elevation for cards, menus and the header — a translucent fill, a soft backdrop blur, a hairline edge and a warm shadow. Plain rgba tokens, so it renders the same on Windows, macOS and Linux. See GLASS-POLISH.md.

Glass card

Translucent surface over the ambient spectrum wash. The blur gives depth; the hairline keeps the edge crisp.

Glass · featured

The stronger fill (--glass-bg-strong) for hover and the live / active card.

--glass-bg
surface
--glass-bg-strong
hover
--glass-border
hairline
--glass-shadow
soft lift