CTMS Design System
A calm, precise system for a healthcare platform: warm neutral surfaces, deep navy type and the CTMS purple brand gradient. All tokens live in assets/ctms.css, adapt to dark mode, and use logical properties so every component works in Arabic (RTL).
Colour
Neutrals carry the interface; the brand purple marks action and data; status colours are reserved for meaning.
Typography
Geist for Latin, IBM Plex Sans Arabic for Arabic, Geist Mono for figures and codes. Headings use tight tracking; Arabic resets tracking to zero and opens line height.
Lead · for section introductions, never more than two lines.
Body · 17px / 1.6. Plain, direct sentences.
Small · captions and helper text.
Eyebrow labelKWD 1,284.500 · INV-2026-04812
نظام التشغيل للعيادات الحديثة.
Spacing & radius
A 4px base scale. Cards use 20–24px radius; controls 10–12px; pills are fully round.
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 | --r-xs 8 · --r-sm 12 · --r 20 · --r-lg 24
Buttons
One primary action per view. Secondary for alternatives; ghost for tertiary.
Status & badges
Forms
Helper text sits under the control.
Cards
Standard card
Surface, 1px border, subtle shadow.
Hover card
Lifts 3px on hover for interactive tiles.
Panel
Recessed surface for grouped content.
Tables
| Branch | Revenue | Profit | Status |
|---|---|---|---|
| Salmiya | 24,610 | 8,590 | On target |
| Hawally | 18,340 | 5,470 | On target |
| Jahra | 14,980 | 4,360 | Watch |
Tabs
Accordion
Can CTMS work without internet?
Does CTMS support Arabic?
Tooltip & modal
Product UI kit
Mock screens are built from .ui-* components, not screenshots, so they stay sharp, themeable and translatable.