IT-RANKS
Multi-brand UI Foundation
One token system, four product brands — IT-RANKS, HRCO, Connect, RPA. Switch brand or theme from the sidebar to see every component re-skin instantly.
Branding
Each brand has a distinct action color. The rest of the role-token layer stays consistent.
Colors
Click any swatch to copy. Primary scale powers brand actions · Gray scale powers surfaces & text.
Primary (Blue)
Greyscale
Semantic
Brand accents
Typography
English: Work Sans · Arabic: Noto Kufi Arabic (auto-switches on dir="rtl").
Spacing
T-shirt-sized scale from sm (4 px) to 10xl (128 px).
Border Radius
Buttons & inputs 8 px · Cards 12 px · Modals 16 px · Pills 9999 px.
Shadows
Cool gray tint at low opacity — works for both light and dark themes.
Buttons
Height 40 px · Radius 8 px · Action color follows the active brand.
Variants
Sizes
With icon
Badges
Inputs
Height 40 px · 8 px radius · focus ring tinted with brand-50.
Checkbox · Radio · Switch
Cards
Onboarding Flow
A six-step employee onboarding journey shipped this quarter.
Attendance Module
Real-time check-in with geo and IP fencing.
RPA Workflow Studio
Drag-and-drop automation runner for internal ops.
Avatars
Alerts
Tables
| Employee | Department | Role | Status | Joined |
|---|---|---|---|---|
| Ahmed Qurany | Engineering | Senior Designer | Active | Mar 2024 |
| Sara Reda | HR | People Partner | Active | Jul 2025 |
| Mona Khaled | Operations | Ops Manager | On leave | Jan 2023 |
| Jad Daoud | Engineering | Backend Engineer | Off-boarded | Sep 2022 |
Tabs
Pagination
Modal
Tooltips
Loading & Empty
Form Pattern
Composite using the components above.