Design System

Digital Design Foundations

Core visual elements that form the foundation of the Manateq digital design system.

Color System

Primary Colors

Derived directly from the Corporate Identity Guideline. Click any swatch to copy the hex value.

Manateq Red

#862633

Primary buttons, active links, key highlights

Manateq Gold

#9A8555

Secondary accents, premium highlights

Secondary Colors (Sub-Brands)

Reserved for specific Manateq zones. Not for general corporate communications.

Logistics Green

#046A38

Logistics Parks branding

Industrial Blue

#151F6D

Industrial Zones branding

Souq Brown

#945B3A

Souq Al Haraj branding

Neutral Colors

Digital Extension

A full neutral palette required for building functional user interfaces.

Neutral 900

#231F20

Main text, headings

Neutral 700

#5C5A5B

Secondary text

Neutral 500

#A1A1A1

Borders, disabled text

Neutral 300

#E0E0E0

Input borders, dividers

Neutral 100

#F5F5F5

Section backgrounds

White

#FFFFFF

Page backgrounds

Typography

Typefaces

Script	Primary Typeface	Secondary / Fallback
Roman	Myriad Pro	Calibri, sans-serif
Arabic	GE Thameen	Tahoma, sans-serif

Type Scale

Digital Extension

Role	Size	Weight	Line Height	Preview
Display	48px	Bold	1.2	Aa
Heading 1	36px	Bold	1.2	Aa
Heading 2	28px	Bold	1.3	Aa
Heading 3	24px	Semi Bold	1.4	Aa
Heading 4	20px	Semi Bold	1.4	Aa
Body (Large)	18px	Regular	1.5	Aa
Body (Default)	16px	Regular	1.5	Aa
Small / Caption	14px	Regular	1.4	Aa
X-Small / Legal	12px	Regular	1.4	Aa

Spacing & Layout Rhythm

Digital Extension

All margins, paddings, and layout spacing use multiples of 8px for consistent visual rhythm.

space-1

8px

Small gaps, padding within small components

space-2

16px

Padding in standard components (buttons, inputs)

space-3

24px

Gaps between related components

space-4

32px

Gaps between larger, distinct sections

space-5

40px

Larger separation between content areas

space-6

48px

Page-level margins, significant separation

space-8

64px

Wide separation for visual emphasis

Elevation & Depth

Digital Extension

A subtle shadow system to create depth and hierarchy in digital interfaces.

Level 1

Cards, raised interactive elements

0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)

Level 2

Dropdown menus, popovers

0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)

Level 3

Modals, drawers

0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)

Iconography

Digital Extension

Style

Icons should be solid-fill, with consistent stroke weight and corner radius.

Size

Icons should be designed on a 24x24px grid for consistency and scalability.

Color

Default: Neutral-900. Active/Hover: Manateq-Red.