Al-Razi Hub Design System

• Sharp (4px): Inputs in dense tables

• Medium (6px): Inputs, small buttons (default)

• Large (10px): Cards, banners

• XL (14px): Modals, large surfaces

• Pill (999px): Pills, badges, switches

Alternative scales: [data-radius="sharp"] and [data-radius="soft"].

All easing uses the same in/out curve cubic-bezier(0.2, 0, 0.2, 1). Avoid spring physics — clinical UI must feel deterministic.

• Fast (120ms): Hover, press, state changes

• Base (180ms): Enter / exit, accordions

• Slow (240ms): Slide-over, modal

Tablet-first. The shell scales from a 64px collapsed rail to a 240px expanded rail at desktop widths.

• Collapsed (icons only): 64px — tablet, narrow desktop

• Expanded (labeled): 240px — desktop ≥ 1280px or user-pinned

• Top bar: 36–56px depending on density. Holds brand mark, breadcrumb / title, global search, user menu.

• Active rail item: Primary Soft fill, Primary Ink text, 3px Primary tab on the inline-start edge. Never both background and underline.

• Hovered rail item: Hover background only.

• User chip: rail bottom (margin-block-start: auto). Initials in Accent Soft / Accent Ink to mirror "Mine".

• Main content: max-width 1440px, padding --space-8 (32px) on tablet, --space-10 on desktop.

### RTL readiness

All shell layouts use logical CSS — inline-start/inline-end, padding-inline, margin-inline, border-inline-start for the active-tab indicator. When ` is set, the rail flips to the right, the active indicator flips with it, and chevrons in row actions mirror via the [dir="rtl"]` selector.

### Do

• Use Mono with tabular-nums for patient identifiers, dates of birth, dosages, vitals — they line up vertically across rows or they look untrustworthy.

• Give critical results redundant signaling (color + icon + label + row rule). One signal can fail; three cannot.

• Surface a request id and a timestamp in every error UI. Clinicians copy these to support; without them, every issue becomes a screenshot.

• Make every empty and error state offer at least one action. A clinician should never reach a dead end mid-shift.

• Use explicit destructive verbs in dialogs: Cancel appointment, Discharge, Void order — never just OK.

• Use logical CSS properties everywhere so layouts flip for Phase 2 Arabic RTL without rework.

### Don't

• Don't put two Primary buttons on the same surface.

• Don't use color alone to encode status, validation, or out-of-range values.

• Don't drop below 16px for body text or 48px for touch targets.

• Don't promote Accent (amber) to a second brand color — it only marks "mine".

• Don't suppress focus rings, even in custom controls.

• Don't use spring physics or playful easing — clinical UI must feel deterministic.

```css

:root {

/ surface /

--bg: #F7F5F1;

--surface: #FFFFFF;

--surface-alt: #F1EEE8;

--hover: #EBE7DF;

--border: #E2DED4;

--border-strong: #C9C3B6;

/ ink /

--ink: #1C1A16;

--ink-muted: #55504A;

--ink-subtle: #7A736B;

--inverse: #FFFFFF;

/ primary /

--primary: #0E6F78;

--primary-hover: #0B5E66;

--primary-active: #094B52;

--primary-soft: #D9ECEE;

--primary-ink: #083E44;

/ semantic /

--danger: #B42318; --danger-hover: #9A1C13;

--danger-soft: #FDECEA; --danger-ink: #7A1510;

--success: #1F7A4C; --success-soft: #E3F2EA; --success-ink: #14532D;

--warning: #B54708; --warning-soft: #FDF0E3; --warning-ink: #7C2D12;

--info: #1E5AA8; --info-soft: #E3ECF8; --info-ink: #153E75;

/ accent /

--accent: #A8620A;

--accent-soft: #FBEFDB;

--accent-ink: #6B3D05;

--accent-border: #E5B472;

/ radius /

--r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;

/ shadow /

--shadow-xs: 0 1px 0 rgba(28,26,22,0.04), 0 1px 2px rgba(28,26,22,0.04);

--shadow-sm: 0 1px 2px rgba(28,26,22,0.05), 0 1px 3px rgba(28,26,22,0.06);

--shadow-md: 0 4px 8px -2px rgba(28,26,22,0.06), 0 2px 4px -2px rgba(28,26,22,0.06);

--shadow-lg: 0 12px 24px -8px rgba(28,26,22,0.12), 0 4px 8px -4px rgba(28,26,22,0.06);

--shadow-focus: 0 0 0 3px rgba(14,111,120,0.28);

--shadow-focus-danger: 0 0 0 3px rgba(180,35,24,0.28);

/ motion /

--mo-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1);

--mo-base: 180ms cubic-bezier(0.2, 0, 0.2, 1);

--mo-slow: 240ms cubic-bezier(0.2, 0, 0.2, 1);

/ type /

--font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

--tw-display: 600 32px/40px var(--font-sans);

--tw-h1: 600 26px/34px var(--font-sans);

--tw-h2: 600 22px/30px var(--font-sans);

--tw-h3: 600 18px/26px var(--font-sans);

--tw-body-lg: 400 18px/28px var(--font-sans);

--tw-body: 400 16px/24px var(--font-sans);

--tw-body-strong: 500 16px/24px var(--font-sans);

--tw-meta: 500 14px/20px var(--font-sans);

--tw-eyebrow: 600 12px/16px var(--font-sans);

--tw-mono: 500 15px/22px var(--font-mono);

--tw-mono-sm: 500 13px/18px var(--font-mono);

/ spacing — 4px base /

--space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;

--space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;

--space-10: 40px; --space-12: 48px; --space-16: 64px;

/ touch /

--touch: 48px; / spacious (default) /

--touch-comfy: 44px; / comfortable /

}

[data-radius="sharp"] { --r-md: 4px; --r-lg: 6px; --r-xl: 8px; }

[data-radius="soft"] { --r-md: 8px; --r-lg: 14px; --r-xl: 18px; }

[data-density="comfortable"] { --touch: 44px; }

[data-density="spacious"] { --touch: 48px; }

```