# Design System — Signal Rail

A visual refresh for the task/project management platform, built on top of Bootstrap 5.3's CSS-variable architecture so it applies across every existing view without touching page markup.

## Why this direction

The app is an internal OT/network operations tool, bilingual (EN/AR, RTL). It previously ran on stock Bootstrap blue with a mismatched font pairing (Segoe UI for EN, Cairo for AR) and no defined tokens. The refresh gives it a distinct, professional identity grounded in the domain: graphite/steel surfaces and a signal-blue accent evoke network infrastructure, and a 3px "signal rail" motif (echoing indicator lights and cable runs) threads consistently through cards, navigation, and status badges.

## Color tokens

| Token | Hex | Role |
|---|---|---|
| `--graphite` | `#141a22` | Sidebar / dark surfaces |
| `--graphite-soft` | `#1b222c` | Secondary dark surface |
| `--steel` | `#2e3947` | Muted dark / table header text |
| `--steel-soft` | `#dde2e7` | Card borders |
| `--mist` | `#f3f5f7` | App background |
| `--signal-blue` | `#2c6e8c` | Primary / brand (maps to `--bs-primary`) |
| `--signal-blue-bright` | `#3a8cb0` | Hover / links / active rail |
| `--amber` | `#d98e2b` | Secondary accent, warnings |
| `--slate-text` | `#232a33` | Body text |

Semantic status colors (success `#2f8f5b`, info `#2c8fa0`, warning = amber, danger `#c24444`) are retinted to sit in the same family, since `tasks/list.php` and the dashboard already rely on Bootstrap's `bg-success` / `bg-warning` / `bg-danger` utilities for status and priority badges.

## Type tokens

- **UI (EN)**: IBM Plex Sans
- **UI (AR)**: IBM Plex Sans Arabic — same type family as EN, replacing the old Segoe UI/Cairo mismatch
- **Mono**: IBM Plex Mono — reserved for task IDs, codes, and other data-like content (`.font-mono`, `code`)

## Signature — Signal Rail

One consistent 3px accent thread runs through the interface:
- Top rail on every `.card`
- Left rail (right in RTL) on the active/hover sidebar nav item
- Small status dot on every `.badge`, using `currentColor` so it always matches the badge's semantic color

## Spacing & radius scale

`--space-1` through `--space-8` (0.25rem–2rem); `--radius-sm` (6px, inputs/buttons), `--radius-md` (10px, cards), `--radius-lg` (14px, reserved for modals/larger surfaces).

## How it applies

Nearly everything is achieved by overriding Bootstrap 5.3's own CSS variables (`--bs-primary`, `--bs-body-font-family`, `--bs-border-radius`, etc.) in `:root`, plus a handful of component rules for the sidebar, cards, tables, and badges. No changes were needed to the ~30 PHP view files — `tasks/list.php`, `dashboard.php`, and the rest inherit the new look through the classes they already use.

## Extending it

- New status/priority colors: add a `--bs-*` override, don't hardcode a hex in a view.
- New data-like fields (IDs, timestamps, codes): add class `font-mono`.
- New card-based UI: just use `.card` — the rail and radius apply automatically.