IDG Design System • Nielsen #4 Standards

نظام التصميم والمعايير الموحدة

المرجع الرسمي الشامل لجميع عناصر الواجهة: رموز الألوان، مقاييس الخطوط، الأزرار، البطاقات، الشارات، حقول الإدخال، والأيقونات الموحدة.

1. Color Tokens & Brand System

#060D1A

Primary 950 (Canvas)

Root background canvas for pages.

#0B172E

Primary 900 (Surface)

Container, modal, card, & panel surface.

#102447

Primary 800 (Borders)

Dividers, sub-containers, interactive borders.

#1D5BD8

Accent 600 (Primary Blue)

Primary CTAs, focus rings, key highlights.

#059669

Status Emerald (Success/Active)

Verified status, active stages, positive metrics.

#D97706

Status Gold (Warning/Pending)

Pending review, risk analysis, alerts.

#DC2626

Status Crimson (Error/Critical)

Errors, validation alerts, source required.

#334155

Neutral Slate (Secondary)

Subtle badges, metadata, secondary elements.

2. Typography Scale (Tailwind Canonical)

H1 · text-4xl / text-5xl · font-blackSovereign Digital Architecture (IDG)

H2 · text-2xl / text-3xl · font-boldNational Single Window & Trade Corridors

H3 · text-xl / text-2xl · font-boldApplied AI Tuning in Kurdish and Arabic

Body · text-base · font-normalTransforming institutional fragmentation into dependable digital capabilities for Iraq through strict governance and data sovereignty.

Small / Meta · text-xs / text-sm · font-mediumISO-27001 Certified · In-Country Sovereign Data Hosting · Erbil Node 01

3. Standard Button Component (`Button.tsx`)

Button Variants

Button Sizes

Icon Positioning

Interactive States

4. Standard Card Component (`Card.tsx`)

Default Card

Standard background (#0B172E) and border (#102447). Used for lists and information sections.

Elevated Card

Includes drop shadow and high contrast. Used for modals, floating dialogs, and emphasized metrics.

Outlined Card

Transparent fill with accent border (#1D5BD8/40). Used for highlighted callouts.

5. Unified Badges (`Badge.tsx` & `SovereignBadge.tsx`)

Sovereign Badges by Variant

Primary AuthorityVerified / ActiveUnder ReviewSource RequiredNeutral Classification

Evidence Verification Badges

موثققيد المراجعةمصدر مطلوب

6. Standard Form Inputs (`.input-base` & Validated)

Raw Input Elements (`.input-base`)

Standard Text Field

Standard Select Dropdown

Standard Textarea

Real-Time Validated Inputs

Institutional Email*

Statement of Purpose *

0/200

7. Standard Lucide Icon Scale

Small (w-3.5 h-3.5)Metadata & Inline Pills

Default (w-4 h-4)Body & Form Fields

Medium (w-5 h-5)Buttons & Modals

Large (w-6 h-6)Section Headers

XL (w-8 h-8)Hero & Major Feature