Factory Studio — design-system alignment¶
Target
This page describes intended behaviour or structure. No implementation is claimed unless a section is explicitly marked Current implementation or Evidence.
The design system prototype (ConnectSoft Design System.dc.html: 20 sections, 7 status colours, 29 primitives, 18 SaaS and 19 Factory compositions) and the Developer Handoff prototype name tokens differently. This page fixes one spine — the --cs-* tokens this site already uses (S1) — and maps the status palette to the state families so a colour never carries two meanings.
Token spine¶
| Token | Light | Dark | Used for |
|---|---|---|---|
--cs-bg |
#F4F5F7 |
#08090A |
page background |
--cs-surface |
#FFFFFF |
#121315 |
cards, tables, sheets |
--cs-text |
#111827 |
#FFFFFF |
primary text |
--cs-primary |
#2563EB |
#0052FF |
primary actions, active rail entry |
--cs-link |
#2563EB |
#4D8BFF |
links |
--cs-radius-sm/md/lg |
4 / 8 / 12 px | same | controls, cards, sheets |
| Fonts | Inter, Heebo (Hebrew), JetBrains Mono | same | text, RTL text, code |
Developer Handoff names (--color-*) are aliases of these; the Design System's names are canonical; both prototypes should be corrected to the spine when they are next revised (recorded as drift for the prototypes' owner).
Status palette, one family per vocabulary¶
| Status colour | Hex | State family | Values it may colour |
|---|---|---|---|
| Running | #0052FF |
run | Accepted, Resolving, Running |
| Passed | #059669 / #10B981 |
delivery, asset readiness | Merged, Released, Verified; Published |
| Failed | #EF4444 |
run, delivery, fleet | Failed; RolledBack; Degraded |
| Review | #A855F7 |
approval, asset readiness | Pending, InReview |
| Blocked | #D97706 / #F59E0B |
usage, run | Uncertain; WaitingApproval, Paused |
| Live | #06B6D4 |
deployment availability, fleet | Active; Running (instance) |
| Idle | #64748B |
freshness and terminal states | Stale, Unknown; Cancelled, Deprecated, Retired |
Every badge carries its text and an icon; colour never stands alone (WCAG 1.4.1).
State components¶
| Component | Renders | States |
|---|---|---|
StatusBadge |
one value of one family | all families |
FreshnessStrip |
per-source lag and last observation | freshness |
ApprovalCard |
proposal version, expiry, decider eligibility | approval |
UsageByStatus |
five figures, never a single total | usage |
RunTimeline |
steps, attempts, receipts with links | run, freshness |
GateList |
ordered gates with outcomes and evidence | delivery |
WaveProgress |
rollout waves with bake countdown and guards | fleet |
ScopeSwitcher |
org, tenant, project, environment with class badge | — |
DegradedSource |
a source the composition could not reach | freshness |
ClassConfirmation |
confirmation sheet naming the side-effect class and approval | approval |
Component reuse map to ConnectSoft.Blazor.UIKit¶
| Need | UIKit component | Notes |
|---|---|---|
| Dense tables with sticky headers, sort, saved views | CsDataGrid |
pagination caps per directory page size |
| Dialogs and sheets | CsDialog, CsSheet |
full-screen on mobile; focus restoration |
| Forms with validation | CsForm, CsField |
messages tied to fields; localized |
| Navigation rail and palette | CsRail, CsCommandPalette |
RTL mirrored |
| Badges and chips | CsBadge |
status palette tokens only |
| Charts | CsChart |
accessible data table alternative |
| Timeline and graph | new CsTimeline, CsRunGraph |
proposed additions to the UIKit |