AbiWorkers OS v2.0

Token-based color system

All colors moved to CSS variables: --bg-*, --text-*, --border-*, --accent-* with light/dark pairs

Unified typography scale

h1/h2/h3/body/caption enforced across every screen — no random pixel values

Abi* component library

AilysiCard, AilysiButton, AilysiBadge, AilysiAvatar, AilysiTable, AilysiProgressBar, AilysiInput, AilysiTabs, AilysiSearch, AilysiAlert, AilysiEmptyState

Radius token system

--radius-sm (6px), --radius-md (10px), --radius-lg (14px) mapped to rounded-sm/md/lg

Skeleton loading system

CardSkeleton, MetricSkeleton, TextSkeleton for all loading states

Dashboard Template

Metric cards, activity feed, AI insights, upcoming tasks, quick actions

Jobs Template

Job list/table, candidate pipeline, offer management, job detail with tabs

Talent Pool Template

Worker directory with search, filters, stats, candidate profile with AI match, experience, activity timeline

Applicant Lifecycle Template

11-stage lifecycle, documents, experience/skills, compliance — with mobile accordion + StageCard row

Partner Portal Template

Dashboard, agreement flow, pipeline, compliance, team — all tabs with AI insights

Sponsor Dashboard

Worker profile with data masking, pipeline tracker, quote engine, compliance HUD, payment

Deployment Pipeline Tracker

Country-aware, 4-stage tracker with desktop horizontal + mobile vertical modes

Dynamic Pricing Engine

Nationality-based pricing, VIP/Warranty/WhiteGlove upgrades, live invoice summary

Compliance HUD

Worker rights, sponsor safeguards, live alerts for visa/insurance/contract expiry

Black Box Logger

Live session activity log with auto-scroll and accordion collapse

MOHRE framework display

Worker statutory rights + sponsor legal safeguards across all portals

AI compliance suggestions

AilysiAISuggestion blocks for visa renewals, document checks, audit reports

Compliance status blocks

MOHRE/DMW/Visa blocks with bulleted status items and colored status dots

Safe area padding

pb-24 lg:pb-6 on every page for bottom navigation

Touch target sizing

All interactive elements min-h-[44px] (primary buttons min-h-[48px])

Responsive grids

grid-cols-1 → grid-cols-2 (sm) → grid-cols-3/4 (lg) pattern

Table → card collapse

All data tables collapse to stacked card lists on < lg breakpoint

Mobile accordions

StageAccordion for lifecycle, replacement for horizontal stage rails

Sticky bottom CTAs

Fixed "Next Step" button on lifecycle page with safe-area-bottom

Focus rings

focus-visible:ring-2 on every interactive element

ARIA attributes

aria-label, aria-expanded, aria-current, aria-hidden, role="list"/"feed"/"region"

Keyboard navigation

Tab-order logical, Escape dismiss on tooltips

Explain tooltips

AiExplainTooltip per-stage guidance on lifecycle and portal templates

Quick action buttons

AiQuickActionButton with toast feedback — "Do this for me" on every template

Contextual suggestions

AilysiAISuggestion panels for missing documents, compliance reminders, pipeline opportunities