Citable source utility ledger

A four-source translation layer.

EndWork does not mash four design systems together visually. It extracts specific, documented utility from each system, then expresses that utility through EndWork-owned tokens, components, page rules, and lint checks.

Inspect token contract Inspect verification

Doctrine

Borrow utility. Keep identity.

The visual system remains EndWork. The borrowed layer is behavior: accessibility discipline, modular page structure, civic navigation clarity, multilingual form semantics, and verifiable source posture.

Source proof: Official documentation links appear beside each borrowed utility.
Local proof: File names and selectors show where the utility is implemented.
Lint proof: Rules reject missing systems, broken links, bad spacing, and weak structure.

System breakdown

Each source system has a narrow job.

Source utility ledger
Source system	Citable source utility	EndWork translation	Verifiable local proof
USWDS	Accessibility as a foundation, explicit labels, semantic regions, keyboard focus, captions, tables, and controlled design tokens.	EndWork uses a conservative civic interface grammar: visible labels, legends, captions, focus outlines, and limited token choices.	`site/tokens.css`, `scripts/lint-site.mjs`, `tests/site-coverage.test.mjs`, `.ew-data-table`, and `.ew-r-question-card`.
UAE	Modular components, blocks, patterns, Tailwind-oriented composition, WCAG-centered reuse, and tokenized design values.	EndWork separates page families into reusable route modules: public home, room file, account, locale, support, and build review.	`scripts/ui-lint-rules.json` page matrix, `.ew-lab-page-grid`, `.ew-lab-module-grid`, and locale blocks with `lang="es"`.
Dubai	Dense service headers, login affordances, menu structure, color roles, status colors, and polished civic control states.	EndWork uses a compact public shell, action/status color semantics, clear navigation density, and explicit login/account entry points.	`.ew-site-header`, `.ew-site-tools`, `.ew-status-pill`, `.ew-review-entry`, and color variables in `site/tokens.css`.
Sisdai	Spanish-language component documentation, label-first form fields, visible help text, required-state semantics, and open CSS package posture.	EndWork keeps multilingual routes first-class and gives forms visible label, help, optionality, and state text instead of placeholder-only inputs.	`Spanish public pages`, `.ew-help-text`, `.ew-locale-control`, `.ew-form-card`, and `.ew-lab-inline-form`.

USWDS

Accessibility and evidence discipline.

USWDS is the strongest source for the base contract: interface states must be perceivable, operable, understandable, and robust. EndWork translates that into explicit landmarks, labels, fieldsets, captions, focus rings, and text state.

Skip links point to a focusable main landmark.
Inputs are labeled with real label elements.
Tables carry captions and row or column scope.
Color never carries state without adjacent text.
Token choices are finite and locally named.

Local selectors: .ew-skip-link, .ew-focus-outline, .ew-data-table, .ew-r-question-state.

UAE

Modular page and route composition.

UAE contributes the working method for splitting a government-scale interface into components, blocks, patterns, and reusable token values. EndWork uses that logic to keep visual progress separate from production data.

Route families are named in pageMatrix.
Modules remain static and inspectable.
Locale surfaces use equivalent component structure.
Spacing and layout values stay tokenized.
Thin pages stay inside the public shell.

Local selectors: .ew-lab-page-grid, .ew-lab-module-grid, .ew-lab-section-head.

Dubai

Service shell density and status polish.

Dubai contributes header utility, menu ergonomics, login affordance structure, and crisp color role discipline for information, warning, error, and success. EndWork uses those ideas without copying Dubai branding.

The header groups brand, nav, review, locale, and audit state.
Status colors map to named semantic variables.
Review pins are obvious, compact, and actionable.
Control states use borders, fills, and text.
Buttons stay dense enough for repeated work.

Local selectors: .ew-site-header, .ew-review-pin, .ew-status-pill, .ew-button.

Sisdai

Multilingual form semantics and research readability.

Sisdai contributes Spanish-first component documentation, form labels, examples, help text, optionality, and open-source package discipline. EndWork uses that for bilingual room flows and long-form evidence pages.

Spanish routes are represented in the page matrix.
Form fields show labels and help text.
Textarea-like evidence notes carry visible context.
Long-form room content keeps a stable reading measure.
International design utility is documented, not implied.

Local selectors: .ew-locale-control, .ew-help-text, .ew-r-prose, .ew-form-card textarea.

Token contract

Tokens are the actual interface boundary.

The source systems influence the naming and discipline. The final values belong to EndWork.

Action color

--ew-color-action

Used for primary progress, selected states, links, and active controls.

Danger color

--ew-color-danger

Used for labor-displacement alert emphasis and review pin visibility.

Warning surface

--ew-color-warning-soft

Used for non-final review state, issue entry, and skipped form state.

Focus outline

--ew-focus-outline

Used to keep keyboard navigation visible across controls and review pins.

Aa

Display type

--ew-type-size-display

Used only for true public hero claims and room alerts.

Spacing scale

--ew-space-1 --ew-space-5 --ew-space-10

Used to prevent arbitrary margins and broken section rhythm.

The locked rule.

Layout spacing uses EndWork variables or calc() with EndWork variables. Raw one-off spacing values fail private lint.

padding: var(--ew-space-10) var(--ew-space-8);
gap: var(--ew-module-gap);
outline: var(--ew-focus-outline);

Component contract

Components carry source utility through behavior.

Header and civic shell.

Dubai informs the dense service header. USWDS informs landmark structure. UAE informs reusable block placement.

EndWork.ai

One-question form.

USWDS supplies form accessibility. Sisdai reinforces labels and help text. Dubai supplies compact state polish.

Evidence table.

USWDS supplies table semantics. UAE supplies reusable module discipline. EndWork supplies room-specific evidence language.

Design utility verification table
Utility	Proof	Check
Labels	All inputs require explicit labels.	`scripts/lint-site.mjs`
Captions	All tables require captions.	`npm run lint`
Spacing	Margins and gaps use EndWork tokens.	`ui-lint-rules.json`

Verification contract

The design system page is linted as product surface.

Source presence

sourceSystems

Checks for USWDS, UAE, Dubai, and Sisdai on the page.

Official citations

designSystemRequiredUrls

Checks the official source links used for citable utility.

Local proof

designSystemRequiredPhrases

Checks for token contract, source ledger, verification, and file references.

OKExternal links are allowlisted by host.
OKLocal hash links must target real IDs.
OKDesign page copy rejects placeholder lorem text.
OKSpacing rules still require EndWork tokens.
OKLive verification checks the published `/design-system/` route.

Official source library

The citations are public and inspectable.

USWDS

UAE

Dubai

Sisdai

What the mix means.

The four systems do not create four visual skins. They create one EndWork interface with a documented utility stack: USWDS for accessibility discipline, UAE for modular composition, Dubai for service-shell polish, and Sisdai for multilingual form semantics.

The next UI decision is not which source system wins. The next decision is whether a new component can prove its source utility, local selector, token usage, and lint coverage.