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: deep teal with a glow, a fine grid, the ribbon motif and a gold hairline, with glass stat tiles. Only the key figure is gold.
PageHeader variant="hero"Phase two: connecting 42 government services to 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 Munjaz mark — the teal ribbon and the rising gold arrow — and the ribbon motif for backgrounds.
Logo · RibbonMotif
MunjazPMO PLATFORMMunjazPMO PLATFORMThe atoms Munjaz screens are built from: health, workflow states, progress against plan, KPIs, money, dual-calendar dates and SLAs. 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 · WatchStarUnified Digital Services Platform
Northern Ring Road Network Development and Urban Plan Integration
Green Government Data Centre
Municipal Asset Management System
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
Unified Digital Services Platform
Northern Ring Road Network Development and Urban Plan Integration
Green Government Data Centre
Municipal Asset Management System
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
Beneficiary 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.
AvatarStackDigital Services Platform team
9 members
Digital Services Platform team
9 members
Digital Services 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.
BudgetMeterNorthern Ring Road Network Development and Urban Plan Integration — Projected overrun
Green Government 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 «Unified Digital Services Platform»
Approval: Noura Al-Qahtani approved CR-014integration scope change request
2026-10-28 11:12Comment: Majed Al-Harbi commented on 1.3.2.2Nafath & SADAD 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.1Beneficiary 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 & SADAD 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.1Beneficiary 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
ExecutionPhase 7 of 11
Next gate:Monitoring & Control17 January 2027
Compact — in a header
ExecutionPhase 7 of 11
Next gate:Monitoring & Control17 January 2027
Compact — a project on hold at the Procurement gate
ApprovalPhase 5 of 11
Next gate:Procurement12 October 2026
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 municipal licensing 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: Licensing 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: Enterprise Project Management Office (EPMO)
Strategy cascade — with selection
2 selected
Work breakdown structure — «Unified Digital Services Platform»
The same tree top-down, in boxes and lines. Departments under an agency 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.
OrgChartEntity
Al-Waha Region Development Authority
1,284 staff
Sector
Planning & Strategy Sector
277 staff
Sector
Projects & Infrastructure Sector
333 staff
Sector
Digital Transformation & Technology Sector
306 staff
Agency
Digital Services Agency
87 staff
Department
E-Services Department
Department
Data & AI Department
Agency
Technology Infrastructure Agency
96 staff
Department
IT Infrastructure Department
Department
Cybersecurity Department
Department
Enterprise Applications Department
Sector
Support Services Sector
242 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
Digital Transformation 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.
AreaLineChartDigital Transformation 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
Unified Digital Services Platform
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
Unified Digital Services Platform
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.
SCurveUnified Digital Services Platform
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
Unified Digital Services Platform · 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
Unified Digital Services Platform
Estimate-at-completion bridge
Unified Digital Services Platform
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Authority Headquarters Building | PRJ-2026-008 | Capital Projects | Dr. Abdullah Al-Harbi | 10Closure | Critical | 186.5M | 92% | 0.74Schedule performance index · 0.74 | 2027-09-2275 days late | ||
| Disaster-Recovery Data Centre | PRJ-2026-020 | Technology & Digital Infrastructure | Eng. Fahad Al-Dosari | 10Closure | Critical | 10M | 96% | 0.60Schedule performance index · 0.60 | 2027-01-0175 days late | ||
| National Talent Qualification Programme | PRJ-2026-032 | Institutional Excellence | Dr. Abdullah Al-Harbi | 10Closure | Critical | 14M | 92% | 0.68Schedule performance index · 0.68 | 2027-12-1375 days late | ||
| Al-Waha Ring Road — Phase 2 | PRJ-2026-005 | Infrastructure | Reem Al-Zahrani | 9Handover | Off track | 142M | 97% | 0.76Schedule performance index · 0.76 | 2028-11-0775 days late | ||
| Government Leadership Academy | PRJ-2026-017 | Institutional Excellence | Eng. Sarah Al-Qahtani | 9Handover | Off track | 11.7M | 93% | 0.80Schedule performance index · 0.80 | 2027-03-1375 days late | ||
| Beneficiary Experience Improvement | PRJ-2026-029 | Digital Transformation | Reem Al-Zahrani | 9Handover | Off track | 15.7M | 97% | 0.88Schedule performance index · 0.88 | 2028-02-2575 days late | ||
| Enterprise Data Warehouse | PRJ-2026-003 | Technology & Digital Infrastructure | Eng. Lama Al-Subaie | 7Execution | At risk | 40.6M | 82% | 0.96Schedule performance index · 0.96 | 2027-06-2230 days late | ||
| Wadi Al-Rummah Bridge | PRJ-2026-006 | Infrastructure | Turki Al-Mutairi | 7Execution | At risk | 38.9M | 84% | 0.88Schedule performance index · 0.88 | 2027-04-1030 days late | ||
| Waterfront Redevelopment | PRJ-2026-010 | Capital Projects | Eng. Khalid Al-Shehri | 4Planning | At risk | 23.5M | 14% | 0.82Schedule performance index · 0.82 | 2027-07-0130 days late | ||
| “Wahati” Citizen App | PRJ-2026-015 | Digital Transformation | Noura Al-Otaibi | 7Execution | 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 | |||
| North City Stormwater Network | Infrastructure | On track | 25.2M | 20% | 1.00Schedule performance index · 1.00 |
| Organisational Excellence & Performance Award | Institutional Excellence | On track | 29.2M | 19% | 1.08Schedule performance index · 1.08 |
| Procurement System Overhaul | Institutional Excellence | On track | 27.9M | 15% | 0.94Schedule performance index · 0.94 |
| 158.3M | avg 12% | avg 0.94 | |||
| Unified Digital Services Platform | Digital Transformation | On track | 23.1M | 12% | 0.98Schedule performance index · 0.98 |
| Waterfront Redevelopment | Capital Projects | At risk | 23.5M | 14% | 0.82Schedule performance index · 0.82 |
| Construction Waste Recycling | Sustainability & Environment | On track | 27.1M | 11% | 1.06Schedule performance index · 1.06 |
| Western Water Treatment Plant | Infrastructure | At risk | 27.5M | 13% | 0.90Schedule performance index · 0.90 |
| AI Traffic Forecasting Platform | Technology & Digital Infrastructure | On track | 25.8M | 7% | 0.92Schedule performance index · 0.92 |
| Smart Parking | Infrastructure | At risk | 31.4M | 12% | 0.98Schedule performance index · 0.98 |
| 129.1M | avg 15% | avg 1.03 | |||
| Integrated Government Services Complex | Capital Projects | On track | 42.7M | 17% | 1.08Schedule performance index · 1.08 |
| Smart Lighting for Main Roads | Infrastructure | On track | 41.1M | 16% | 0.98Schedule performance index · 0.98 |
| Pedestrian & Cycling Paths | Infrastructure | On track | 45.3M | 12% | 1.02Schedule performance index · 1.02 |
| 446.2M | avg 62% | avg 0.92 | |||
| Investor e-Portal | Digital Transformation | On track | 9.5M | 22% | 1.00Schedule performance index · 1.00 |
| Enterprise Data Warehouse | Technology & Digital Infrastructure | At risk | 40.6M | 82% | 0.96Schedule performance index · 0.96 |
| Wadi Al-Rummah Bridge | Infrastructure | At risk | 38.9M | 84% | 0.88Schedule performance index · 0.88 |
| Solar Plant for Public Utilities | Sustainability & Environment | On hold | 9.6M | 18% | 0.83Schedule performance index · 0.83 |
| Urban Greening Programme | Sustainability & Environment | On track | 41M | 88% | 1.00Schedule performance index · 1.00 |
| Enterprise Resource Planning System | Technology & Digital Infrastructure | On track | 13.4M | 20% | 1.08Schedule performance index · 1.08 |
| “Wahati” Citizen App | Digital Transformation | At risk | 39.3M | 90% | 0.82Schedule performance index · 0.82 |
| Enterprise Risk Management Framework | Institutional Excellence | At risk | 43.1M | 92% | 0.92Schedule performance index · 0.92 |
| King Salman Central Park | Capital Projects | On hold | 13.8M | 26% | 0.87Schedule performance index · 0.87 |
| Specialist Hospital — Fit-out | Capital Projects | On track | 44.9M | 86% | 1.08Schedule performance index · 1.08 |
| Unified Staff Digital Identity | Technology & Digital Infrastructure | On track | 11.9M | 24% | 0.98Schedule performance index · 0.98 |
| Water Sustainability Programme | Sustainability & Environment | At risk | 43.2M | 88% | 0.90Schedule performance index · 0.90 |
| Unified Contact Centre 940 | Digital Transformation | At risk | 41.5M | 90% | 0.82Schedule performance index · 0.82 |
| Visitor & Exhibition Centre | Capital Projects | On hold | 12.3M | 30% | 0.77Schedule performance index · 0.77 |
| Central Materials Laboratory | Capital Projects | On track | 43.6M | 94% | 0.94Schedule performance index · 0.94 |
| 81.8M | avg 55% | avg 1.03 | |||
| Cyber Security Operations Centre | Technology & Digital Infrastructure | On track | 26.9M | 50% | 1.08Schedule performance index · 1.08 |
| Building Permit Automation | Digital Transformation | On track | 25.4M | 54% | 0.98Schedule performance index · 0.98 |
| Air Quality Monitoring | Sustainability & Environment | On track | 29.6M | 62% | 1.02Schedule performance index · 1.02 |
| 169.4M | avg 96% | avg 0.81 | |||
| Al-Waha Ring Road — Phase 2 | Infrastructure | Off track | 142M | 97% | 0.76Schedule performance index · 0.76 |
| Government Leadership Academy | Institutional Excellence | Off track | 11.7M | 93% | 0.80Schedule performance index · 0.80 |
| Beneficiary Experience Improvement | Digital Transformation | Off track | 15.7M | 97% | 0.88Schedule performance index · 0.88 |
| 210.5M | avg 93% | avg 0.67 | |||
| Authority Headquarters Building | Capital Projects | Critical | 186.5M | 92% | 0.74Schedule performance index · 0.74 |
| Disaster-Recovery Data Centre | Technology & Digital Infrastructure | Critical | 10M | 96% | 0.60Schedule performance index · 0.60 |
| National Talent Qualification Programme | Institutional Excellence | 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
Unified Digital Services Platform
Investor e-Portal
Enterprise Data Warehouse
Cyber Security Operations Centre
Al-Waha Ring Road — Phase 2
Wadi Al-Rummah Bridge
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-teal 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 «Investor Portal» 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