Munjaz design system
This page shows the components every screen in our projects is built from: in Arabic and English, light and dark. What changes here changes on every screen that uses it.
Every screen starts here: a header with breadcrumbs, title and purpose, or a deep hero band for dashboards — then sections and panels as quiet layers instead of white cards scattered on white.
Title, purpose and breadcrumbs come from the route map automatically, with actions and the «working on» chip.
PageHeaderThe enterprise risk register and the probability-impact heat map.
For dashboards: the Authority’s deep green with a glow, the dot grid and dot arrow of its mark tone-on-tone and a fine hairline, with glass stat tiles. Bright green only for the marker and small kickers.
PageHeader variant="hero"Phase two: connecting 18 contractor services to the Muqawil platform, one digital identity and e-payment.
Fiscal year 2026
55%
Planned 66%
A section is a heading, a purpose and actions; a panel is the surface for a chart, list or table. `band` runs a tinted ground full-bleed.
Section · PanelPlanned against actual, fiscal year 2026
By exposure
Approve change order 4 extending the payment-platform integration scope — it affects the December contractual milestone.
Each tab is its own address and the open one follows the URL — for the project workspace sections.
PageTabsThe Saudi Contractors Authority’s official logo leads, the system’s name «Munjaz» follows; the dot grid and dot arrow of its mark for backgrounds.
Logo · BrandMotif (DotArrowMotif · RibbonMotif)
MunjazStrategy & projects
MunjazPMO PLATFORM
MunjazStrategy & projectsMunjazPMO PLATFORMThe atoms Munjaz screens are built from: health, workflow states, progress against plan, KPIs, money, dual-calendar dates and action time limits (OLA). Every word comes from the one shared vocabulary, so a reader never sees a code.
The atoms together as they appear in the project list.
HealthBar · ProgressBar · IndexChip · DueChip · WatchStarMuqawil Platform — Release 4
Saudi Contractors Authority Headquarters, Riyadh, and the Conferences & Exhibitions Building
SCA Backup Data Centre
Contractor Files Archive Digitisation
Five states on a quiet ground with clear ink. Critical is a diamond and on-hold a pause mark, so colour is never the only signal.
HealthDot · HealthPillDots
Pills
Small pills
Bare — for dense tables
Custom words
Overall health, then eight dimensions in one strip; hover any segment to see it. Critical is hatched and on-hold pale.
HealthBarStrip — a table row or card
Muqawil Platform — Release 4
Saudi Contractors Authority Headquarters, Riyadh, and the Conferences & Exhibitions Building
SCA Backup Data Centre
Contractor Files Archive Digitisation
Grid — the project header
The key row under charts and maps, with counts or meanings.
StatusLegendWith counts
With meanings
A subset
One component for every register state, its colour from one map. Settled states are outlined so live work stands out; escalated and overdue carry a mark.
StatusBadgeAll states
With a dot
Small
The phase number then its name; with the track, all eleven phases show.
PhaseBadgeAll phases
Small
With the track
The bar is actual progress; the upright tick is planned to date. Colour follows variance: on plan green, up to ten points amber, beyond that red.
ProgressBarRegular
Planned to date 78%
Planned to date 70%
Planned to date 61%
Thin — in a table
The figure in the centre, the variance below, in three sizes.
ProgressRingLabel, the big figure with its unit, the change coloured by whether it is good, the monthly trend, and the target as a bullet bar. Gold only on the one key tile.
KpiTileStrategic initiatives completion
71.4%
+4.2%vs previous period
Target 80.0%89%
Average change-request approval time
9days
−18%vs previous period
Target 7
Source: portfolio management system
Contractor satisfaction with digital services
86%
+2.4%vs previous period
Target 85%101%
The whole tile is a link
Off-track projects in the portfolio
7projects
+40%vs previous period
Target 3
The light-on-dark version for the hero band: the arrow up turns gold when the news is good.
HeroStatApproved portfolio value 2026
1.84SAR bn
+6.2%vs previous period
Projects on track
41
−3vs previous period
of 64 active projects
Average schedule performance
0.94
0%vs previous period
Overdue actions
17
−22%vs previous period
Avatar, name and title, with a detail card on hover or focus.
PersonChipCompact
Faces overlap; «+3» opens the full team list.
AvatarStackMuqawil Platform team
9 members
Muqawil Platform team
9 members
Muqawil Platform team
7 members
A few people
The riyal with its official sign, Latin digits. Compact «12.4M»; variance coloured by its effect.
MoneyFigureFull
Compact
Favourable variance · Overrun · Cost growth (up is bad)
Headline figure
Approved, committed, spent and estimate at completion on one bar; an overrun is hatched red.
BudgetMeterSaudi Contractors Authority Headquarters, Riyadh, and the Conferences & Exhibitions Building — Projected overrun
SCA Backup Data Centre — Projected saving
Follows the reader’s choice in the header: Gregorian, Hijri or both. Outside the app it shows both.
DayTextBoth
Gregorian only · Hijri only
Two lines
Month spelt out
Time left on a service level: hours under two days, days beyond. A breach is red with a mark.
SlaChip · CountdownSmall
Inside text
How near it is to today (28 October 2026). The day itself is in the tooltip.
DueChipFinished work
A score out of 100 with a small arc in its band colour: excellent, good, fair, weak. Risk score is inverted.
ScoreChipBands
With the band word
Small
The arrow follows the direction, the colour follows the effect: a shorter approval time is good news.
TrendArrowUp is good
Down is good
Plain
Schedule and cost performance: 1 or more is good, 0.9 to 1 to watch, under 0.9 off track.
IndexChipA project or contract code in mono, direction-isolated, with a copy button on hover.
CodeTagInside an Arabic sentence
Contract CTR-2025-007 was awarded to the main contractor.
Label and value pairs in two to four columns; values may be components.
KeyValueGridUnframed
A star that adds the project to your watchlist and confirms with a toast. Gold when on.
WatchStarUncontrolled
Controlled
What gives the work its shape: the activity feed, the phase-and-gate track, a kanban board moved by pointer or keyboard, the risk and priority matrices, the tree and the org chart, and the dependency map. Each starts from the right in Arabic. Wizard steps already live in the kit's Stepper (vertical, numbered, with descriptions), so they are not repeated here.
Who did what to which record, grouped by day (today, yesterday, then the date), an icon per kind with the actor's face, relative time with the exact moment in a tooltip. Two densities: full for a page, compact for a side panel.
ActivityFeedFull — activity on «Muqawil Platform — Release 4»
Approval: Noura Al-Qahtani approved CR-014integration scope change request
2026-10-28 11:12Comment: Majed Al-Harbi commented on 1.3.2.2Nafath & Government Service Bus integration
2026-10-28 09:47New risk: Khalid Al-Shehri raised a new risk: RSK-031Server delivery delayed by the vendor
2026-10-28 08:30Status change: Fahad Al-Otaibi changed the status of 1.3.1Contractor portalIn progressIn review
2026-10-27 16:05Document upload: Reem Al-Zahrani uploaded DOC-0233Monthly status report — October
2026-10-27 13:20Milestone: Lama Al-Subaie reached the milestone Mobile beta release
2026-10-27 10:00Gate decision: Abdullah Al-Ghamdi recorded the gate decision Mid-execution review
2026-10-21 14:30Payment: Turki Al-Anazi certified PC-0087Payment certificate no. 4
2026-10-20 11:15Compact — side panel
Approval: Noura Al-Qahtani approved CR-014integration scope change request
2026-10-28 11:12Comment: Majed Al-Harbi commented on 1.3.2.2Nafath & Government Service Bus integration
2026-10-28 09:47New risk: Khalid Al-Shehri raised a new risk: RSK-031Server delivery delayed by the vendor
2026-10-28 08:30Status change: Fahad Al-Otaibi changed the status of 1.3.1Contractor portalIn progressIn review
2026-10-27 16:05Document upload: Reem Al-Zahrani uploaded DOC-0233Monthly status report — October
2026-10-27 13:20No activity
No activity yet
Comments, approvals and status changes show up here as they happen.
The eleven lifecycle phases with a decision gate between each pair: done is filled, the current phase wears a gold ring with a calm pulse, upcoming is an outline. Each diamond carries its gate decision — go, conditional go (with a small badge), on hold, rework — and its tooltip gives the date, the decision and open conditions.
StageGateTrackFull — the project is in Execution, the Procurement gate was conditional
On the deep band
Strategic project · Digital Transformation Sector
ExecutionStage 4 of 5
Next gate:Closure17 May 2027
Compact — in a header
ExecutionStage 4 of 5
Next gate:Closure17 May 2027
Compact — a project on hold at the Procurement gate
Pre-startStage 1 of 5
Next gate:Initiation14 September 2025
A project sent back to Planning at the Approval gate
Demand stages as columns. Drag a card: it lifts with a shadow and a slight tilt, a dashed slot opens where it will land, and the target column lights up. Or by keyboard: Space picks up, arrows move, Space drops. A column over its WIP limit turns amber.
KanbanBoardTry it: drag «Automate membership-renewal procedures» into «Initial review», or Tab to a card and press Space.
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
No cards here
Drag a card into this column
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
Space picks the card up, the arrow keys move it, Space drops it, Escape cancels.
The code, the priority signal (bars like a phone's signal, a red tile for critical), the title in two lines at most, then due date, cost and owner.
KanbanCard · PrioritySignalThe four priorities, a long title, and a bare card
Probability as rows (almost certain on top), impact as columns from the reading start. A cell's colour is its zone (score = probability × impact), its number the risks in it. Click a cell to see them.
RiskMatrixImpact
Risks in the selected cell
Probability: Likely · Impact: SevereCritical
Dashboard tile
Impact
Points in four quadrants by two 0–100 values — the horizontal axis starts on the right in Arabic. The priority matrix (value × effort) as chips, the stakeholder grid (power × interest) as dots.
QuadrantMatrixDemand priority
Quick wins3
High value / low effort
Strategic bets3
High value / high effort
Fill-ins2
Low value / low effort
Re-assess2
Low value / high effort
Effort
Selected: Membership-renewal automation
Stakeholders
Keep satisfied2
Manage closely3
Monitor1
Keep informed2
Interest
A hierarchy with connector lines that hang from the right in Arabic: expand and collapse, expand all and collapse all, a search that highlights the words and opens their branches, and tick-box selection (a parent shows «mixed» when some children are ticked). Keyboard: arrows, Home, End, Enter, Space.
Tree · HighlightOrganisation — with search
Selected: Project Management Office (PMO)
Strategy cascade — with selection
2 selected
Work breakdown structure — «Muqawil Platform — Release 4»
The same tree top-down, in boxes and lines. Departments under a general directorate stack in a column so the chart stays readable; a folded branch opens from the «+N» pill under its box. It scrolls sideways inside its frame.
OrgChartAuthority
Saudi Contractors Authority
1,284 staff
Sector
Strategy & Institutional Excellence Sector
277 staff
Sector
Regulation & Development Sector
333 staff
Sector
Services & Membership Sector
315 staff
Sector
Qualification & Training Sector
297 staff
Sector
Digital Transformation Sector
279 staff
General Directorate
General Directorate of Digital Platforms
114 staff
Department
Muqawil Platform & e-Services Department
Department
Data & Innovation Department
General Directorate
General Directorate of Information Technology
123 staff
Department
IT Infrastructure Department
Department
Cybersecurity Department
Department
Enterprise Systems & Integration Department
Sector
Corporate Support Sector
335 staff
What waits on what, right-to-left in Arabic: a curve from the end of the source to the start of the target with an arrow, the critical path in red and thicker. Hover a project to light its links.
DependencyLinksCritical path
Munjaz's chart library: SVG with no chart dependency, a fixed, colour-blind-validated series order, thin marks, a recessive grid, a floating tooltip no card can clip, and «Show as table» — the same numbers as a real table. Time runs from the right in Arabic; digits are always Latin.
Title, subtitle, legend, actions and the «Show as table» toggle. Every chart has a loading state and a quiet empty state at its own height, so the card never jumps.
ChartFrame · ChartLegend · ChartTooltip · TipCardCash flow: planned vs actual
Ready — try «Show as table»
Cash flow: planned vs actual
Loading
Muqawil & e-Services programme — progress
No data
No data to show yet
It appears here once the first value is recorded.
Actual is solid, the baseline thin dashed grey, the forecast continues after the «today» marker dashed in the same hue with its range, and the target is gold and named. Hover, or use the arrow keys.
AreaLineChartMuqawil & e-Services programme — progress
Cumulative to the end of 2026
Monthly portfolio spend
SAR millions
Benefits realised
Few values
Grouped or stacked, vertical or horizontal (for long Arabic names), negative values diverging from zero, a target tick per category.
ColumnChartCash flow: planned vs actual
SAR millions a month — actual to October
Portfolio spend position
SAR millions · Long Arabic names
Budget variance by portfolio
SAR millions — positive: under budget
Quarterly spend vs target
SAR millions · With target ticks and value labels
Portfolio spend position
Negative values
Part-to-whole at a glance (six parts at most), the total in the centre, the legend with value and share. «RingStat» is one value of a whole.
DonutChart · RingStatBudget by portfolio
SAR millions
SAR 2.7B
Total budget
Projects by health
40
projects
Budget spent
SAR 38.4M
of SAR 48.5M
Muqawil Platform — Release 4
Complete
Planned 74%
Benefits realised
SAR 31.5M
of SAR 85M
Schedule and cost performance on an arc from 0.6 to 1.4 with green, amber and red zones; the value carries its zone by name, not by colour alone. Concentric rings for several percentages.
Gauge · RadialProgress0.87
Off track
Schedule performance index (SPI)
EV 36.9 / PV 42.4 million
0.96
On track
Cost performance index (CPI)
EV 36.9 / AC 38.4 million
1.04
On track
SPI — Smart Cities programme
Project progress by dimension
Muqawil Platform — Release 4
A word-sized trend for a table cell or a KPI tile. Its colour follows whether the move is good news: fewer open risks is green, a falling SPI is red.
TrendSpark| Indicator | Now | Last 8 periods |
|---|---|---|
| Schedule performance index (SPI) | 0.87 | |
| Cost performance index (CPI) | 0.96 | |
| Open risks | 29 | |
| Benefits realised (M) | 31.5 | |
| Overdue tasks | 14 |
With target band
Risk across, strategic value up, bubble area by budget, colour by portfolio or health. Click a bubble to open its project.
BubbleChartProjects by value and risk
Bubble size = budget
A profile over 3 to 10 axes: PMO maturity current vs target, or a vendor scorecard.
RadarChartPMO maturity
Out of 5
Vendor scorecard — Al-Ufuq Contracting
Out of 5
Project progress by dimension
Few values
Planned value, earned value and actual cost, cumulative to the data date, then the estimate at completion dashed to the end, the budget line, and the SV and CV gaps.
SCurveMuqawil Platform — Release 4
SAR millions — October 2026 data
A grid shaded on one sequential ramp by value, and the 5×5 risk map with its diagonal zones and risk counts. Click a cell to filter the risk register.
HeatMap · RiskHeatMapResource utilisation by department
Share of capacity booked — March to October
Risk map
Open risks across the portfolio
Impact
Showing 2 risks — probability Likely × impact Severe
Risk map
Muqawil Platform — Release 4 · Few values
Impact
From the original budget through each change to the current one; a cost increase is red because it is bad news. Horizontal for the EAC bridge.
WaterfallBudget bridge
Muqawil Platform — Release 4
Estimate-at-completion bridge
Muqawil Platform — Release 4
One register built from the filter bar and the table: a search that understands Arabic spelling, multi-select filters, saved views, bulk selection with a floating bar, and a side sheet that steps between rows with the arrow keys. All in the browser, over demo data.
Try it: sort by clicking a header (Shift for a second sort), tick rows to bring up the bulk actions, click a row to open its details and step with ↑ and ↓, drag a column edge to resize it. Settings are remembered in this browser.
FilterBar + DataTable + useTableStateDisplay options
| Actions | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| SCA Academy Campus, Riyadh | PRJ-2026-008 | Academy & Qualification Centres | Dr. Abdullah Al-Harbi | 5Closure | Critical | 186.5M | 92% | 0.74Schedule performance index · 0.74 | 2027-09-2275 days late | ||
| SCA Backup Data Centre | PRJ-2026-020 | Technology & Enterprise Systems | Eng. Fahad Al-Dosari | 5Closure | Critical | 10M | 96% | 0.60Schedule performance index · 0.60 | 2027-01-0175 days late | ||
| Contracting Workforce Qualification Programmes | PRJ-2026-032 | Institutional Excellence & Governance | Dr. Abdullah Al-Harbi | 5Closure | Critical | 14M | 92% | 0.68Schedule performance index · 0.68 | 2027-12-1375 days late | ||
| Qassim Vocational Qualification Centre | PRJ-2026-005 | Headquarters & Regional Centres | Reem Al-Zahrani | 5Closure | Off track | 142M | 97% | 0.76Schedule performance index · 0.76 | 2028-11-0775 days late | ||
| Irtiqaa Portal — Release 2 | PRJ-2026-017 | Institutional Excellence & Governance | Eng. Sarah Al-Qahtani | 5Closure | Off track | 11.7M | 93% | 0.80Schedule performance index · 0.80 | 2027-03-1375 days late | ||
| Contractor Experience in Service Centres | PRJ-2026-029 | Digital Services & Platforms | Reem Al-Zahrani | 5Closure | Off track | 15.7M | 97% | 0.88Schedule performance index · 0.88 | 2028-02-2575 days late | ||
| Contracting Sector Data Warehouse | PRJ-2026-003 | Technology & Enterprise Systems | Eng. Lama Al-Subaie | 4Execution | At risk | 40.6M | 82% | 0.96Schedule performance index · 0.96 | 2027-06-2230 days late | ||
| Asir Vocational Qualification Centre | PRJ-2026-006 | Headquarters & Regional Centres | Turki Al-Mutairi | 4Execution | At risk | 38.9M | 84% | 0.88Schedule performance index · 0.88 | 2027-04-1030 days late | ||
| Hail Vocational Qualification Centre | PRJ-2026-010 | Academy & Qualification Centres | Eng. Khalid Al-Shehri | 3Planning | At risk | 23.5M | 14% | 0.82Schedule performance index · 0.82 | 2027-07-0130 days late | ||
| Muqawil Mobile App | PRJ-2026-015 | Digital Services & Platforms | Noura Al-Otaibi | 4Execution | At risk | 39.3M | 90% | 0.82Schedule performance index · 0.82 | 2027-10-0130 days late | ||
| Total · 36 | 1.3B | avg 51% | avg 0.92 |
Shorter rows for reading a long register, grouped by phase; each group carries a count and a budget total, and folds with one click.
DataTable defaultDensity='compact' groupingsDisplay options
| 82.2M | avg 18% | avg 1.01 | |||
| Arar Vocational Qualification Centre | Headquarters & Regional Centres | On track | 25.2M | 20% | 1.00Schedule performance index · 1.00 |
| Contracting Excellence Award | Institutional Excellence & Governance | On track | 29.2M | 19% | 1.08Schedule performance index · 1.08 |
| Procurement System Overhaul | Institutional Excellence & Governance | On track | 27.9M | 15% | 0.94Schedule performance index · 0.94 |
| 287.3M | avg 13% | avg 0.97 | |||
| Muqawil Platform — Release 4 | Digital Services & Platforms | On track | 23.1M | 12% | 0.98Schedule performance index · 0.98 |
| Wadi Al-Dawasir Vocational Qualification Centre | Academy & Qualification Centres | On track | 42.7M | 17% | 1.08Schedule performance index · 1.08 |
| Hail Vocational Qualification Centre | Academy & Qualification Centres | At risk | 23.5M | 14% | 0.82Schedule performance index · 0.82 |
| SCA Buildings Energy Retrofit (ESCO) | Building Rehabilitation & Sustainability | On track | 27.1M | 11% | 1.06Schedule performance index · 1.06 |
| Smart Test-hall Proctoring | Headquarters & Regional Centres | On track | 41.1M | 16% | 0.98Schedule performance index · 0.98 |
| Electronic Skills-test Halls Roll-out | Headquarters & Regional Centres | At risk | 27.5M | 13% | 0.90Schedule performance index · 0.90 |
| Project Tracking Platform — National Phase | Technology & Enterprise Systems | On track | 25.8M | 7% | 0.92Schedule performance index · 0.92 |
| Secure Enterprise Network | Headquarters & Regional Centres | On track | 45.3M | 12% | 1.02Schedule performance index · 1.02 |
| Unified Operations Centre | Headquarters & Regional Centres | At risk | 31.4M | 12% | 0.98Schedule performance index · 0.98 |
| 528M | avg 61% | avg 0.94 | |||
| Wifaq Dispute Settlement — Release 2 | Digital Services & Platforms | On track | 9.5M | 22% | 1.00Schedule performance index · 1.00 |
| Contracting Sector Data Warehouse | Technology & Enterprise Systems | At risk | 40.6M | 82% | 0.96Schedule performance index · 0.96 |
| Cyber Security Operations Centre | Technology & Enterprise Systems | On track | 26.9M | 50% | 1.08Schedule performance index · 1.08 |
| Asir Vocational Qualification Centre | Headquarters & Regional Centres | At risk | 38.9M | 84% | 0.88Schedule performance index · 0.88 |
| Solar Power for SCA Buildings & Centres | Building Rehabilitation & Sustainability | On hold | 9.6M | 18% | 0.83Schedule performance index · 0.83 |
| Al-Jouf Training Centre Rehabilitation | Building Rehabilitation & Sustainability | On track | 41M | 88% | 1.00Schedule performance index · 1.00 |
| SCA ERP System | Technology & Enterprise Systems | On track | 13.4M | 20% | 1.08Schedule performance index · 1.08 |
| Muqawil Mobile App | Digital Services & Platforms | At risk | 39.3M | 90% | 0.82Schedule performance index · 0.82 |
| Membership Certificate & Renewal Automation | Digital Services & Platforms | On track | 25.4M | 54% | 0.98Schedule performance index · 0.98 |
| Enterprise Risk & Business Continuity Framework | Institutional Excellence & Governance | At risk | 43.1M | 92% | 0.92Schedule performance index · 0.92 |
| Eastern Region Vocational Training Centre | Academy & Qualification Centres | On hold | 13.8M | 26% | 0.87Schedule performance index · 0.87 |
| Training & Test Hall Fit-out — Jeddah Branch | Academy & Qualification Centres | On track | 44.9M | 86% | 1.08Schedule performance index · 1.08 |
| Unified Staff Digital Identity | Technology & Enterprise Systems | On track | 11.9M | 24% | 0.98Schedule performance index · 0.98 |
| Khamis Mushait Training Centre Rehabilitation | Building Rehabilitation & Sustainability | At risk | 43.2M | 88% | 0.90Schedule performance index · 0.90 |
| Indoor Air Quality in Training Halls | Building Rehabilitation & Sustainability | On track | 29.6M | 62% | 1.02Schedule performance index · 1.02 |
| Unified Contractor Contact Centre | Digital Services & Platforms | At risk | 41.5M | 90% | 0.82Schedule performance index · 0.82 |
| Tabuk Training Centre Rehabilitation | Academy & Qualification Centres | On hold | 12.3M | 30% | 0.77Schedule performance index · 0.77 |
| Contractor Records Archive Building | Academy & Qualification Centres | On track | 43.6M | 94% | 0.94Schedule performance index · 0.94 |
| 379.8M | avg 95% | avg 0.74 | |||
| Qassim Vocational Qualification Centre | Headquarters & Regional Centres | Off track | 142M | 97% | 0.76Schedule performance index · 0.76 |
| SCA Academy Campus, Riyadh | Academy & Qualification Centres | Critical | 186.5M | 92% | 0.74Schedule performance index · 0.74 |
| Irtiqaa Portal — Release 2 | Institutional Excellence & Governance | Off track | 11.7M | 93% | 0.80Schedule performance index · 0.80 |
| SCA Backup Data Centre | Technology & Enterprise Systems | Critical | 10M | 96% | 0.60Schedule performance index · 0.60 |
| Contractor Experience in Service Centres | Digital Services & Platforms | Off track | 15.7M | 97% | 0.88Schedule performance index · 0.88 |
| Contracting Workforce Qualification Programmes | Institutional Excellence & Governance | Critical | 14M | 92% | 0.68Schedule performance index · 0.68 |
| Total · 36 | 1.3B | avg 51% | avg 0.92 |
The same register as cards, for narrow screens or visual browsing; selection, details and paging work as in the table.
DataTable renderCard defaultView='cards'Display options
Muqawil Platform — Release 4
Wifaq Dispute Settlement — Release 2
Contracting Sector Data Warehouse
Cyber Security Operations Centre
Qassim Vocational Qualification Centre
Asir Vocational Qualification Centre
Before anything is added: a quiet message that says what will appear here.
DataTable rows={[]} empty={…}Display options
No projects in this portfolio yet
Projects appear here as soon as the first request in the portfolio is approved.
The filters exclude every row: it says so plainly and offers «Clear filters».
DataTable filtered onClearFiltersDisplay options
No results match the filters
Try another word or loosen the filters to see more.
Skeleton rows while fetching, and an error state whose «Try again» really reloads.
DataTable loading error={{ onRetry }}Display options
| Project | Code | Phase | Health | Budget | Progress |
|---|
The Copilot’s voice on screens: what it noticed, why, the evidence and its confidence — with a button to continue in the Copilot panel.
A gold-to-brand shimmering edge, a folded «why?», evidence links into screens and a confidence bar.
AiInsightCardAI insight
The project is on track today, but the SPI trend, the task close rate and the open risks point to a slip of the «second service release» milestone.
AI insight
The «Wifaq Platform» project has 35% unused integration capacity in November.
AI insight
The bond on contract CTR-2025-007 expires 18 days before the forecast handover.
Global layers any screen can open: Copilot with a ready question, the command palette (Ctrl/⌘ K), the notification center and a quick risk log.
useShell()Colour, type and corners, then the smallest pieces every screen is built from: buttons, badges, avatars and hints.
Every colour on screen is one of these names, never a hand-typed code. Click a colour to copy its name.
tokens · ColorSwatchTwo colours make a project its own: the brand and the accent, plus the ink. The three are written in ONE block at the top of the stylesheet, and everything shown here is derived from them — light and dark alike. Change that block and every screen changes.
Brand
Accent
Ink steps
Surfaces
Lines
The four status tones
| Tone | Soft | Solid | When |
|---|---|---|---|
Brandbrand | Sample | Sample | The main action, links, selection |
Neutralneutral | Sample | Sample | Drafts, secondary actions |
Accentaccent | Sample | Sample | What deserves a gentle look |
Successsuccess | Sample | Sample | Approved, complete, on time |
Warningwarning | Sample | Sample | Close to due, needs a change |
Dangerdanger | Sample | Sample | Late, delete, reject |
Infoinfo | Sample | Sample | In review, a note |
Status tones are fixed: they never follow a rebrand, so red is red in every project.
Gradient and the deep shade
Signature gradient
For the ONE key action on a screen
bg-signatureGlow
For a page hero or an empty state
bg-glowDeep shade
The sidebar and tooltips
bg-deepEight sizes are enough for every screen. Figures are always Latin digits and line up in columns.
text-*text-4xl36pxThis week's report is ready for review
A big figure in a page header
text-3xl30pxThis week's report is ready for review
Screen title
text-2xl24pxThis week's report is ready for review
Section title
text-lg18pxThis week's report is ready for review
Card title
text-[15px]15pxThis week's report is ready for review
Lead paragraph
text-sm14pxThis week's report is ready for review
Body text
text-xs12pxThis week's report is ready for review
A hint under a field
text-2xs11pxThis week's report is ready for review
A small label over a group
One base corner (10 px) the others derive from, and five shadows for elevation. In dark mode the shadows go deeper.
rounded-* · shadow-*Corners
sm · 6md · 8lg · 10xl · 142xl · 18full · ∞Shadows
xssmmdlgxlbrandSix shapes, each taking any tone. The signature shape is for the ONE key action of a screen.
ButtonButtons joined in one frame, or a spaced row. The group's size and tone apply to every button in it.
ButtonGroupJoined
Spaced
A square button with only its icon. Its name is required, and shows as a tooltip on hover or focus.
IconButtonShapes
Sizes
A main action with an arrow beside it that opens the alternatives. The menu floats above everything, is never clipped, and Escape closes it.
SplitButtonShapes
States
Copies the text and says «Copied» right where it was pressed, for two seconds. This is house's own button, in the library's colours.
CopyButtonhttps://house.example/invite/7Q2KA short word for a state: soft, solid or outlined, with a dot or an icon.
BadgeSoft
Solid · Outline
Sizes
A tag that toggles when pressed (for filters), is removed with its button, or carries a person.
Tag · ChipFor filtering
Removable
People
A small number in a bubble that reads «99+» past its limit, and a dot that breathes for what is live now.
Count · StatusDotShapes
States
Two initials in a colour fixed to the name everywhere, or the photo when there is one, with a presence dot.
Avatar · AvatarGroupSizes
States
Group
A short word on hover or keyboard focus. It even tells why a disabled button is disabled.
TooltipWith a shortcut
On a disabled button
Key caps (⌘ on Apple devices, Ctrl elsewhere) and a separating line, with or without a word.
Kbd · SeparatorKbd
Separator
Every field here is built on house's Field: the label above the box, its message under it, one height and one border for every box. Lists and the calendar open over the page and nothing clips them.
The label, the control, and its own message under it. Every field in the library goes through it.
FieldStates
We only send the sign-in link there.
Enter a valid address, like name@example.org.
One line, with an icon, a prefix or a suffix, and a character counter when needed.
TextField · InputStates
Empty
Filled
Another project already uses this name.
Disabled
Read only
Checking
Extras
Accepted
Shown at the top of the report.0 / 40
Sizes
Grows with the text up to a limit, then scrolls; counts characters when the text has a maximum.
TextAreaField · TextareaStates
Sent to the reviewer with the request.86 / 200
Write the reason so the requester knows what to fix.
The − and + buttons (hold to keep going), the arrow keys, a minimum and a maximum; digits typed on an Arabic keyboard read as Latin.
NumberFieldStates
From 0 to 80, in half-hour steps.
The smallest allowed number is 1.
Disabled
A clear button appears as you type, Esc clears, and a keyboard shortcut puts the cursor in it.
SearchFieldStates
The eye shows what was typed. The box runs left to right in both languages.
PasswordInputStates
At least twelve characters.
The password is too short.
Disabled
Every choice from a list goes through it. A short list opens as it is; a long one (seven options or more) has a search box that understands Arabic spelling.
SearchSelectStates
Short list
Long list with search
Choose the branch's city.
Disabled
Typed or picked from the calendar. Accepts 25/2/2027 and Arabic digits and turns them into year-month-day.
DateInputStates
This month or the next only.
Enter the whole date.
The same date box, with the same day in the Umm al-Qura calendar under it (or beside it), following every pick.
DateFieldLayouts
Hijri: 3 Jumada I 1448 AH
Hijri under the box
The Hijri date shows here once a day is picked
Hijri beside it
For a date in a table or a card: Gregorian and Hijri, on one line or two, with the governing calendar emphasised.
DualDateDisplay
One line
2026-10-143 Jumada I 1448 AHTwo lines
2026-10-143 Jumada I 1448 AHHijri governs
2026-10-143 Jumada I 1448 AHThe official riyal sign (SAMA), drawn, before the figure in both languages. Digits are always Latin.
Money · RiyalSignDisplay
Full
4,850,000Compact
4.9MWith the code
SAR 1,250With halalas
312.50Groups the thousands as you type, and turns Arabic digits into Latin ones.
MoneyInputStates
Stored value: nothing yet
The amount is above the approved budget.
Disabled
A fixed-length code sent by text or email. Typing moves to the next box, pasting fills them all, Arabic digits read as Latin. Not the same as the two-step sign-in box below.
OtpInputStates
Empty
Complete
The code is wrong or has expired.
Split 3 + 3
One box that takes an authenticator app code (six digits) or a backup code shaped XXXXX-XXXXX.
CodeInputStates
Drop or browse; the files are listed under it with their size and a remove button. It draws progress only for a real upload the screen reports.
FileDropStates
Attach a signed copy of the contract.
On or off, and «some» when a group is partly chosen.
CheckboxStates
House's own checkbox (for a form posted as is)
Several options under one label, with «select all».
CheckboxGroupStates
Choose at least one channel.
A vertical or horizontal list, with a line of explanation per option.
RadioGroupLayouts
Choose how often the report reaches you.
For a decision where each option needs a sentence.
RadioCardsFor a setting that applies at once, with no save button.
SwitchStates
Sizes
Always one choice among a few, such as how a list is shown.
SegmentedControlStates
Layouts
Several choices switched on and off, with an optional count.
ToggleChipsStates
Sizes
One value or a range, with marks under it and a bubble with the value while dragging.
SliderStates
Everything that appears over the page: windows, the side panel, the confirm question, toasts, menus and anchored panels — and with them the page’s quiet states: empty, loading, progressing. Every list and calendar here opens whole above the window that holds it, and Escape closes only the top layer.
A window over the page for a short task: a form, details, or a decision. Escape, a click outside or the close button closes it, and focus returns to the button that opened it. On a phone it rises from the bottom edge.
Dialog · DialogCloseSizes
A form inside a dialog
A panel that slides in from the screen’s end (the right in English) for longer things: filters, a record’s details, settings. Same fields; their lists open whole above it.
SheetAsks before something that cannot be undone. A click outside does not close it — the answer is yes or no. It can ask for a word to be typed first, and run the work inside itself until it finishes. It opens from anywhere, even from inside an open dialog.
AlertDialog · useConfirmTones
A short word in the screen’s corner about something that happened elsewhere or in the background. It leaves by itself, its timer stops while the pointer is over it, and it shows above any open window.
toast · ToasterTones
Cases
Verbs under a button. It opens under or above it depending on the room, and no table, card or dialog clips it. Arrows move, a first letter jumps, and Escape closes it and returns focus to the button.
DropdownMenuEvery kind of item
«⋯» at a row’s end — the menu grows towards the start
A small panel under a button: a quick filter, a two-field form, a piece of information. Focus moves into it; a click outside or Escape closes it.
PopoverQuick filter
Applies to the list below it.
Shows when the pointer rests on a name or a link, or when the keyboard reaches it, after a short moment. For previews only — no buttons in it.
HoverCardA note about the whole screen: a refusal, an absence, a standing condition. Not where a field’s error goes — that is written under the field itself.
CalloutWhile a result is on its way, the place it will appear says so: the button spins until the new data is really on screen, and the list dims in place instead of being replaced.
components/PendingA button and a list sharing one pending state
The list never disappears and keeps its scroll: it only dims until the new row arrives.
A panel with nothing to show yet
The spinner on its own
A small drawing, a title, one line of help, and the next step. Four kinds: nothing yet, no results, all done, and failed to load.
EmptyStateNobody here yet
Add the first person to the branch and the list will appear here.
No results for “senior accountant”
Try a shorter word, or clear the filters.
Nothing is waiting for you
You have reviewed every request. We will tell you when a new one arrives.
Could not load the list
The connection to the server dropped. Nothing was lost.
Small — inside a card or a table
No results for “senior accountant”
Try a shorter word, or clear the filters.
The shape of what is coming, with a calm light crossing it in the reading direction. For a first load only: what is already shown and refreshing stays put and dims.
Skeleton · SkeletonText · SkeletonAvatar · SkeletonCard · SkeletonTable · SkeletonTableRowBlocks and lines
A card
A table
How far along something measurable is: a file uploading, a wizard’s steps, a share of a target. Digits are always Latin.
Progress · SegmentedProgress · ProgressRingThe bar
Nearly full — delete old attachments.
Steps
Step 2 of 4 · Attachments
The ring
The figures that matter, in a tile, and the charts that explain them. Their colours come from the chart slots in the brand block, their digits are Latin, and under Arabic time runs from the right.
A label, a figure, the change against the last period, and a small trend. The change is coloured by whether it is good news, not by its sign: fewer failed sign-ins is green.
StatCardActive people
1,284
+12%against last month
Failed sign-ins
37
−18%fewer is better
Sign-ins today
412
+6%against yesterday
On-time attendance
92%
target 95%
Requests waiting
8
0%same as last week — the whole tile is a link
A comparison between categories: columns for months, stacked when made of parts, or horizontal rows for long Arabic names. Hover to see the details.
BarChartStacked columns
Horizontal rows
A trend over time, one line or more, with a filled area under the first and a dashed target line.
LineChartThe parts of one whole. It turns from the top in the reading direction; hover a part to see its figure and share in the middle.
Donut80
requests
A trend without axes, beside a figure or inside a tile. It ends on a dot at the last value.
SparklineExplains a chart’s colours. The eight slots follow the brand and the dark theme; no colour is written by hand.
ChartLegendThe eight chart slots
With values