Unified Brand Controller

Universal Brand Style Controller

Adjusting platform colors and typography here propagates instantly across Web Admin, Mobile App, and Email templates without manual code changes.

Primary Color Palette

Brand Primary Color

Used for primary CTAs, main titles, and critical notices

Brand Accent Color

Used for badges, highlights, and secondary glowing buttons

Dark Surface Color

Typography & Visual Geometry

Primary Arabic Typography

Latin Typography Pairing

Corner Radius Style

Live Preview 1: Web Workspace Components

Real-time CSS

Primary BadgeAcknowledgedPending ReviewCritical Action

Typography Sample Box: Cairo & Plus Jakarta Sans

This sample text illustrates how executive announcements and policy guidelines render with the selected font pairing and color hierarchy.

Live Preview 2: Frontline Mobile Feed Card

Android & iOS

Mandatory Safety Ackمنذ 10 دقائق

Field Safety & Maintenance Protocol Update

All shift engineers and field technicians must review the attached standard operating procedure and confirm acknowledgement.

Live Token Output

:root {
      /* Brand Core Hues */
      --brand-primary: #5814EB;
      --brand-primary-hover: #4A0FD3;
      --brand-primary-light: #ECE5FD;
      --brand-primary-rgb: 88, 20, 235;

      --brand-accent: #00D2FF;
      --brand-accent-hover: #00B4DB;
      --brand-accent-light: #E0F9FF;
      --brand-accent-rgb: 0, 210, 255;

      /* Status Feedback Tokens */
      --brand-success: #10B981;
      --brand-warning: #F59E0B;
      --brand-danger: #EF4444;
      --brand-info: #3B82F6;

      /* Dark Mode Surfaces */
      --bg-dark: #0A0D14;
      --surface-dark: #0B0D17;
      --border-dark: #242E49;
      --text-primary-dark: #F8FAFC;
      --text-muted-dark: #94A3B8;

      /* Light Mode Surfaces */
      --bg-light: #FFFFFF;
      --surface-light: #F8FAFC;
      --border-light: #E2E8F0;
      --text-primary-light: #0F172A;
      --text-muted-light: #64748B;

      /* Typography */
      --font-family-latin: Plus Jakarta Sans;
      --font-family-arabic: Cairo;
      --font-family-mono: "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
      --font-size-base: 16px;
      --line-height-normal: 1.5;

      /* Visual & Shape Geometry */
      --radius-brand: 12px;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-full: 9999px;

      /* Elevation and Glow */
      --glow-primary: 0 0 25px rgba(88, 20, 235, 0.45);
      --glow-accent: 0 0 25px rgba(0, 210, 255, 0.45);
    }