Observed constraint
Fictional users reach a dense pricing comparison with weak hierarchy and no clear path for smaller teams.
FICTIONAL DEMONSTRATION · NOT A CLIENT CASE STUDY
The evidence behind a UI delivery.
This page demonstrates the structure and acceptance logic of a SaveX delivery. “Northstar Cloud” is fictional; no conversion, revenue or customer result is claimed.
01 · DECISION RECORD
A choice that can be challenged and traced.
Selected direction
A task-first comparison with one recommended plan, visible limits and progressive disclosure for enterprise detail.
Rejected direction
A minimal two-plan layout reduced visual load but concealed material limits and increased sales dependence.
Acceptance signal
Users can identify the relevant plan, limits and next action without relying on colour or hidden content.
02 · SPECIFICATION AND CODE
The design becomes a repository change.
- TokensSemantic colour, type, spacing, radius, focus and elevation values.
- StatesDefault, hover, focus, selected, unavailable, loading and error behaviour.
- Responsive rulesDocumented behaviour at narrow, medium and wide viewports.
- Draft MRBounded frontend diff, review notes, checks and explicit exclusions.
03 · QUALITY EVIDENCE
Status comes from artifacts, not adjectives.
| Gate | Example evidence | Claim boundary |
|---|---|---|
| Visual QA | Viewport matrix and reviewed screenshots | No unexplained critical mismatch |
| Accessibility | Keyboard path, focus review and automated scan | No unsupported compliance claim |
| Performance | Named route, build and measured environment | No comparison without a baseline |
| GEO/SEO | Metadata, crawl and structured-content review where applicable | Marked not applicable for private surfaces |
Important: the entries above are demonstration criteria only. A real engagement receives results generated from its own repository and environment.