Production Environment v1.4

Agency UI
Identity Document

The core architectural framework for Medsolix Agency SaaS solutions — designed for scalability, revenue tracking, and professional service management.

Framework

Tailwind CSS 3.x

Typography

Inter · Cairo

Icons

Lucide (1.5px stroke)

Updated

June 2026

01 Semantic Color Palette
Copy Hex
Copied!

Brand Orange

#ff612f

Primary · CTA · Accent

Copy Hex
Copied!

Brand Slate

#1e293b

Headings · Sidebar

Copy Hex
Copied!

Soft Orange

#fff0eb

Badge BG · Hover Fill

Copy Hex
Copied!

Success Green

#10b981

Verified · Positive KPI

Copy Hex
Copied!

Error Red

#ef4444

Validation · Destructive

Neutral Ramp

f9fafb

BG

f1f5f9

Surface

e2e8f0

Border

cbd5e1

Muted

94a3b8

Subtle

64748b

Body

475569

Secondary

334155

Heading

1e293b

Slate

02 Typography Scale

Business Scale

Inter
Display · 42px · 700

Dashboard

H1 · 28px · 700

Project Overview

H2 · 20px · 600

Account Strategy

Body · 14px · 400 · Relaxed

High-performance agency dashboards require optimized readability for complex data sets and growth metrics.

Caption · 11px · 600 · Uppercase

Revenue Metrics · Q4 2026

Arabic Professional

Cairo
Display · 36px · 700

لوحة القيادة

H1 · 26px · 700

إدارة المشاريع الرقمية

H2 · 20px · 600

استراتيجية العملاء

Body · 14px · 400

تم تصميم نظام Medsolix لضمان تجربة مستخدم سلسة للمكاتب والوكالات في الشرق الأوسط.

Caption · 11px · 600

مقاييس الإيرادات · 2026

03 Iconography Lucide — 1.5px stroke — 20×20
Growth
Projects
Clients
Billing
Launch
Goals
Web
Data
Assets
Direct
Fast
Success
Config
Trust
Schedule
Email
Report
Revenue
Alert
Link
Export
Search
QR Menu
Dashboard
04 Component Library: Buttons

Primary

Production
Tailwind CSS 
bg-[#ff612f] text-white px-6 py-2.5
rounded-[4px] text-sm font-semibold
/* Hover */ hover:bg-[#e85526]
/* Shadow */ shadow-[0_1px_2px_rgba(255,97,47,0.25)]

Secondary & Ghost

Tailwind CSS 
/* Secondary */
bg-white border border-slate-200
text-slate-700 hover:bg-slate-50
/* Ghost Destructive */
text-[#ef4444] hover:bg-red-50

Icon Compositions

05 Input Architecture
Default
Focus
Error

Please enter a valid business email.

Success

Verification code sent.

Disabled
Input States — Tailwind 
/* Base */
h-[44px] bg-white
border border-[#e2e8f0]
rounded-[4px] px-4 text-sm
outline-none transition-all

/* Focus ring */
focus:border-[#ff612f]
focus:ring-4
focus:ring-[#ff612f]/10

/* Error */
border-2 border-[#ef4444]
ring-4 ring-[#ef4444]/8

/* Success */
border-2 border-[#10b981]
ring-4 ring-[#10b981]/8

/* Disabled */
bg-[#f8fafc] text-slate-400
pointer-events-none
06 Agency Analytics Cards
Monthly Growth

Total Managed Revenue

$128,450 +14.2%

vs $112,450 last month

Active

Client Projects

34 +3 new

8 delivery pending this week

Conversion

Lead Close Rate

72% Industry avg 48%

24 qualified leads this cycle

Metric Card — Tailwind 
/* Card wrapper */
bg-white p-7 rounded-[6px]
border border-[#f1f5f9]
shadow-[0_1px_3px_rgba(0,0,0,0.04)]

/* Icon chip */
w-9 h-9 rounded-[4px] bg-[color]/10
flex items-center justify-center

/* KPI value */
text-3xl font-bold tracking-tight text-[#1e293b]

/* Trend pill */
text-xs font-bold px-1.5 py-0.5 rounded-[4px]
bg-emerald-50 text-[#10b981]
07 Professional Agency Lead Form

Project Request

Tell us about your project scope and goals.

Secure

Please enter a valid business email.

Verification code sent.

Lead Form Architecture 
/* Input baseline */
h-[44px] bg-white
border border-[#E2E8F0]
rounded-[4px] px-4 text-sm
outline-none transition-all

/* Focus ring */
focus:border-[#ff612f]
focus:ring-4
focus:ring-[#ff612f]/10

/* Form label */
text-[10.5px] font-bold
uppercase tracking-[0.06em]
text-[#64748b] mb-1.5

/* Submit Button */
h-[46px] w-full
bg-[#ff612f] text-white
rounded-[4px] font-semibold
uppercase tracking-[0.04em]
hover:bg-[#e85526]

/* Card container */
bg-white rounded-[6px]
border border-[#f1f5f9]

/* Error feedback */
border-[#ef4444]
ring-[#ef4444]/8
text-[#ef4444] text-[11px]

/* Success feedback */
border-[#10b981]
ring-[#10b981]/8
text-[#10b981] text-[11px]