Design System
A comprehensive guide to the typography, colors, and components used across the SaaS application. Updated for a Modern Corporate Blue aesthetic.
Typography
English (IBM Plex Sans)
Heading 1
Heading 2
Heading 3
Heading 4
Body text uses IBM Plex Sans for excellent legibility in UI contexts. The quick brown fox jumps over the lazy dog.
Arabic Preview (Cairo / Geometric)
العنوان الأول
العنوان الثاني
العنوان الثالث
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى.
Note: Using "Cairo" as a visual proxy for "29LT Bukra" (geometric style).
Colors
Primary
Main #1e3a8a
Light #274CB4
Dark #25345F
Secondary
Main #F5F7FA
Light #FFFFFF
Dark #D3DCE9
Accent
Main #F59E0B
Light #FCD34D
Semantic
Success
Warning
Error
Info
Loading States
Loading content...
Components
Buttons
Form Elements
Cards & Surfaces
Standard Card
A standard card component used for displaying content modules. Features subtle shadows and rounded corners.
Learn more →Highlight Card
$12,450
Total Balance
Glass Effect
Used for overlays or floating elements to create depth and context.
ActivePending