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 gradient with a glow, the Damascus silhouette tone-on-tone along its foot and a fine hairline, with glass stat tiles. Gold only for the marker and small kickers.
PageHeader variant="hero"Phase two: connecting 18 governorate services to the platform, with identity checks against the civil registry and bank 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 Planning and Statistics Authority’s wordmark leads, the system’s name «Munjaz» follows; the Damascus silhouette seen from Qasioun for backgrounds.
Logo · BrandMotif (SkylineMotif · 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 · WatchStarUnified Government e-Services Platform
Hama National Hospital Upgrade & Extension
Government Backup Data Centre, Homs — Phase 2
Ministry of Finance e-Archiving
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 Government e-Services Platform
Hama National Hospital Upgrade & Extension
Government Backup Data Centre, Homs — Phase 2
Ministry of Finance e-Archiving
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
Citizen satisfaction with e-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
131.7SYP bn
+6.2%vs previous period
Projects on track
18
−3vs previous period
of 36 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.
AvatarStackUnified e-Services Platform team
9 members
Unified e-Services Platform team
9 members
Unified e-Services Platform team
7 members
A few people
The Syrian pound as «SYP», 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.
BudgetMeterHama National Hospital Upgrade & Extension — Projected overrun
Government Backup Data Centre, Homs — Phase 2 — Projected saving
Always Gregorian, in Latin digits; the Arabic side spells the Levantine month names.
DayTextOne line
Short · Written out
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 e-Services Platform»
Approval: Reem Al-Qabbani approved CR-014integration scope change request
2026-10-28 11:12Comment: Hamza Al-Hussein commented on 1.3.2.2Identity check & interoperability-framework integration
2026-10-28 09:47New risk: Moaz Kaddour raised a new risk: RSK-031Server delivery delayed by the vendor
2026-10-28 08:30Status change: Tarek Al-Mardini changed the status of 1.3.1Citizen portalIn progressIn review
2026-10-27 16:05Document upload: Hiba Al-Shami uploaded DOC-0233Monthly status report — October
2026-10-27 13:20Milestone: Yasmine Bitar reached the milestone Mobile beta release
2026-10-27 10:00Gate decision: Abdullah Al-Ujaili recorded the gate decision Mid-execution review
2026-10-21 14:30Payment: Abdulrahman Al-Kilani certified PC-0087Payment certificate no. 4
2026-10-20 11:15Compact — side panel
Approval: Reem Al-Qabbani approved CR-014integration scope change request
2026-10-28 11:12Comment: Hamza Al-Hussein commented on 1.3.2.2Identity check & interoperability-framework integration
2026-10-28 09:47New risk: Moaz Kaddour raised a new risk: RSK-031Server delivery delayed by the vendor
2026-10-28 08:30Status change: Tarek Al-Mardini changed the status of 1.3.1Citizen portalIn progressIn review
2026-10-27 16:05Document upload: Hiba Al-Shami 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 the investment-allocation 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: Allocation 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: National Project Management Office (PMO)
Strategy cascade — with selection
2 selected
Work breakdown structure — «Unified e-Services Platform»
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
Planning and Statistics Authority
1,284 staff
Sector
Strategy & National PMO Sector
277 staff
Sector
Economic & Social Planning Sector
342 staff
Sector
Local Development & Governorates Sector
287 staff
Sector
Development Projects Follow-up Sector
306 staff
Sector
Digital Transformation Sector
316 staff
General Directorate
General Directorate of Digital Government Services
77 staff
Directorate
Unified Government e-Services Platform Directorate
Directorate
Data & AI Directorate
General Directorate
General Directorate of Government Digital Infrastructure
86 staff
Directorate
Data Centres & Government Network Directorate
Directorate
Cybersecurity Directorate
Directorate
Government Systems & Integration Directorate
Sector
Finance & Administration Sector
252 staff
Sector
Statistics Sector
354 staff
Sector
Partnerships & Development Finance Sector
262 staff
Sector
Corporate Communication & Publishing
336 staff
Sector
Legal Affairs
327 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
Government 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.
AreaLineChartGovernment e-Services programme — progress
Cumulative to the end of 2026
Monthly portfolio spend
SYP 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
SYP millions a month — actual to October
Portfolio spend position
SYP millions · Long Arabic names
Budget variance by portfolio
SYP millions — positive: under budget
Quarterly spend vs target
SYP 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
SYP millions
SYP 68.7B
Total budget
Projects by health
40
projects
Budget spent
SYP 1.7B
of SYP 2.2B
Unified Government e-Services Platform
Complete
Planned 74%
Benefits realised
SYP 15.8B
of SYP 42.5B
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 3.29 / PV 3.78 million
0.96
On track
Cost performance index (CPI)
EV 3.29 / AC 3.42 million
1.04
On track
SPI — Smart Cities programme
Project progress by dimension
Unified Government e-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 (SYP M) | 790 | |
| 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
Contractor scorecard — Al-Fayhaa General 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 Government e-Services Platform
SYP 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 Government e-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 Government e-Services Platform
Estimate-at-completion bridge
Unified Government e-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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| e-Litigation & Judicial Notification Platform — Release 2 | PRJ-2026-008 | Digital Government Services & Data Portfolio | Huda Al-Dandal | 5Closure | Critical | SYP4.7B | 92% | 0.74Schedule performance index · 0.74 | 2027-09-2275 days late | ||
| Douma Wastewater Treatment Plant | PRJ-2026-020 | Reconstruction & Infrastructure Portfolio | Moaz Kaddour | 5Closure | Critical | SYP250M | 96% | 0.60Schedule performance index · 0.60 | 2027-01-0175 days late | ||
| Government HR System — Employee Self-Service | PRJ-2026-032 | Government Digital Infrastructure & Systems Portfolio | Huda Al-Dandal | 5Closure | Critical | SYP348.8M | 92% | 0.68Schedule performance index · 0.68 | 2027-12-1375 days late | ||
| Government Network Cybersecurity Programme | PRJ-2026-005 | Government Digital Infrastructure & Systems Portfolio | Ola Al-Jandali | 5Closure | Off track | SYP3.6B | 97% | 0.76Schedule performance index · 0.76 | 2028-11-0775 days late | ||
| Ministry of Finance e-Archiving | PRJ-2026-017 | Government Digital Infrastructure & Systems Portfolio | Eng. Rita Ghanem | 5Closure | Off track | SYP292.5M | 93% | 0.80Schedule performance index · 0.80 | 2027-03-1375 days late | ||
| e-Learning Platform & Computer Labs for Raqqa Schools | PRJ-2026-029 | Planning, Statistics & Capability Portfolio | Ola Al-Jandali | 5Closure | Off track | SYP391.3M | 97% | 0.88Schedule performance index · 0.88 | 2028-02-2575 days late | ||
| Government Backup Data Centre, Homs — Phase 2 | PRJ-2026-003 | Government Digital Infrastructure & Systems Portfolio | Abdullah Al-Ujaili | 4Execution | At risk | SYP1B | 82% | 0.96Schedule performance index · 0.96 | 2027-06-2230 days late | ||
| Sheikh Najjar Industrial City Rehabilitation | PRJ-2026-006 | Health, Education & Industrial Recovery Portfolio | Kinan Azzam | 4Execution | At risk | SYP971.3M | 84% | 0.88Schedule performance index · 0.88 | 2027-04-1030 days late | ||
| 20 MW Qalamoun Solar Field | PRJ-2026-010 | Energy & Water Portfolio | Eng. Saleh Al-Bakir | 3Planning | At risk | SYP587.5M | 14% | 0.82Schedule performance index · 0.82 | 2027-07-0130 days late | ||
| Government Services Mobile App — New Release | PRJ-2026-015 | Digital Government Services & Data Portfolio | Joud Hammami | 4Execution | At risk | SYP981.3M | 90% | 0.82Schedule performance index · 0.82 | 2027-10-0130 days late | ||
| Total · 36 | SYP31.9B | 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
| SYP2.1B | avg 18% | avg 1.01 | |||
| Hama National Hospital Upgrade & Extension | Health, Education & Industrial Recovery Portfolio | On track | SYP630M | 20% | 1.00Schedule performance index · 1.00 |
| Latakia University Technical Engineering Faculty Extension | Health, Education & Industrial Recovery Portfolio | On track | SYP728.8M | 19% | 1.08Schedule performance index · 1.08 |
| Digital Signature & e-Verification of Government Documents — Phase 1 | Digital Government Services & Data Portfolio | On track | SYP696.3M | 15% | 0.94Schedule performance index · 0.94 |
| SYP7.2B | avg 13% | avg 0.97 | |||
| Integrated Public Financial Management System — Phase 1 | Government Digital Infrastructure & Systems Portfolio | On track | SYP577.5M | 12% | 0.98Schedule performance index · 0.98 |
| Government Cloud & Ministry Systems Migration | Government Digital Infrastructure & Systems Portfolio | On track | SYP1.1B | 17% | 1.08Schedule performance index · 1.08 |
| 20 MW Qalamoun Solar Field | Energy & Water Portfolio | At risk | SYP587.5M | 14% | 0.82Schedule performance index · 0.82 |
| Damascus–Daraa Highway (Southern M5) — Lighting & Smart Signals | Reconstruction & Infrastructure Portfolio | On track | SYP676.3M | 11% | 1.06Schedule performance index · 1.06 |
| Deir ez-Zor Suspension Bridge Reconstruction | Reconstruction & Infrastructure Portfolio | On track | SYP1B | 16% | 0.98Schedule performance index · 0.98 |
| Population & Housing Census Preparation — Phase 1 | Reconstruction & Infrastructure Portfolio | At risk | SYP686.3M | 13% | 0.90Schedule performance index · 0.90 |
| Suwayda Drinking-Water Network from Al-Ain Dam | Energy & Water Portfolio | On track | SYP643.8M | 7% | 0.92Schedule performance index · 0.92 |
| Al-Mayadin General Hospital | Health, Education & Industrial Recovery Portfolio | On track | SYP1.1B | 12% | 1.02Schedule performance index · 1.02 |
| Maarat al-Numan Infrastructure Rehabilitation — with Idlib Governorate | Reconstruction & Infrastructure Portfolio | At risk | SYP785M | 12% | 0.98Schedule performance index · 0.98 |
| SYP13.2B | avg 61% | avg 0.94 | |||
| Darayya Replacement Housing | Reconstruction & Infrastructure Portfolio | On track | SYP236.3M | 22% | 1.00Schedule performance index · 1.00 |
| Government Backup Data Centre, Homs — Phase 2 | Government Digital Infrastructure & Systems Portfolio | At risk | SYP1B | 82% | 0.96Schedule performance index · 0.96 |
| Aleppo 230 kV Substations Rehabilitation | Energy & Water Portfolio | On track | SYP672.5M | 50% | 1.08Schedule performance index · 1.08 |
| Sheikh Najjar Industrial City Rehabilitation | Health, Education & Industrial Recovery Portfolio | At risk | SYP971.3M | 84% | 0.88Schedule performance index · 0.88 |
| Civil Registry Automation & Governorate Link-up | Government Digital Infrastructure & Systems Portfolio | On hold | SYP240M | 18% | 0.83Schedule performance index · 0.83 |
| Ministries Performance Follow-up & National Dashboards | Planning, Statistics & Capability Portfolio | On track | SYP1B | 88% | 1.00Schedule performance index · 1.00 |
| Unified Government e-Services Platform | Digital Government Services & Data Portfolio | On track | SYP335M | 20% | 1.08Schedule performance index · 1.08 |
| Government Services Mobile App — New Release | Digital Government Services & Data Portfolio | At risk | SYP981.3M | 90% | 0.82Schedule performance index · 0.82 |
| National Statistical Indicators & Open Data Portal | Digital Government Services & Data Portfolio | On track | SYP633.8M | 54% | 0.98Schedule performance index · 0.98 |
| Government Fibre Backbone — Damascus–Homs Segment | Reconstruction & Infrastructure Portfolio | At risk | SYP1.1B | 92% | 0.92Schedule performance index · 0.92 |
| Medium-Term Plan Implementation Tracker (ministries & governorates) | Digital Government Services & Data Portfolio | On hold | SYP345M | 26% | 0.87Schedule performance index · 0.87 |
| Unified Government Contact Centre & AI Assistant | Reconstruction & Infrastructure Portfolio | On track | SYP1.1B | 86% | 1.08Schedule performance index · 1.08 |
| Baniyas Pilot Seawater Desalination Plant | Energy & Water Portfolio | On track | SYP296.3M | 24% | 0.98Schedule performance index · 0.98 |
| Hasakah Wheat Digital Crop Survey | Planning, Statistics & Capability Portfolio | At risk | SYP1.1B | 88% | 0.90Schedule performance index · 0.90 |
| Preparing the 2026–2028 Medium-Term Plan & Governorate Plans | Planning, Statistics & Capability Portfolio | On track | SYP738.8M | 62% | 1.02Schedule performance index · 1.02 |
| National Project Risk & Continuity Framework | Planning, Statistics & Capability Portfolio | At risk | SYP1B | 90% | 0.82Schedule performance index · 0.82 |
| National Development & Reconstruction Forum 2027 | Digital Government Services & Data Portfolio | On hold | SYP306.3M | 30% | 0.77Schedule performance index · 0.77 |
| Madinat al-Salam Drinking-Water Network (Quneitra) | Energy & Water Portfolio | On track | SYP1.1B | 94% | 0.94Schedule performance index · 0.94 |
| SYP9.5B | avg 95% | avg 0.74 | |||
| Government Network Cybersecurity Programme | Government Digital Infrastructure & Systems Portfolio | Off track | SYP3.6B | 97% | 0.76Schedule performance index · 0.76 |
| e-Litigation & Judicial Notification Platform — Release 2 | Digital Government Services & Data Portfolio | Critical | SYP4.7B | 92% | 0.74Schedule performance index · 0.74 |
| Ministry of Finance e-Archiving | Government Digital Infrastructure & Systems Portfolio | Off track | SYP292.5M | 93% | 0.80Schedule performance index · 0.80 |
| Douma Wastewater Treatment Plant | Reconstruction & Infrastructure Portfolio | Critical | SYP250M | 96% | 0.60Schedule performance index · 0.60 |
| e-Learning Platform & Computer Labs for Raqqa Schools | Planning, Statistics & Capability Portfolio | Off track | SYP391.3M | 97% | 0.88Schedule performance index · 0.88 |
| Government HR System — Employee Self-Service | Government Digital Infrastructure & Systems Portfolio | Critical | SYP348.8M | 92% | 0.68Schedule performance index · 0.68 |
| Total · 36 | SYP31.9B | 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
Integrated Public Financial Management System — Phase 1
Darayya Replacement Housing
Government Backup Data Centre, Homs — Phase 2
Aleppo 230 kV Substations Rehabilitation
Government Network Cybersecurity Programme
Sheikh Najjar Industrial City Rehabilitation
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 «e-Litigation & Judicial Notification 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 directorate'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 day written out (weekday, day, month) under it (or beside it), following every pick.
DateFieldLayouts
Picked day: Wednesday 14 October 2026
The day under the box
The day shows here in words once it is picked
The day beside it
For a date in a table or a card: in figures, with the month spelt out on a second line.
DualDateDisplay
One line
2026-10-14Two lines
2026-10-1414 October 2026In a table cell
2026-10-1414 October 2026The new Syrian pound: the Arabic symbol after the figure, «SYP» before it in English. Digits are always Latin.
Money · CurrencySignDisplay
Full
SYP4,850,000Compact
SYP4.9MWith the code
SYP 1,250With the qirsh
SYP312.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 directorate 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