Agentic QADesign system preview

Design system v6 — Agiloft-inspired

Cream, black, blaze orange

Cream canvas with white cards, black buttons that fill blaze-orange on hover, orange secondary actions and navy dark sections — quality-gate pills, A–E ratings, coverage bars, stat tiles. Use the toggle to preview the contract-night dark theme.

Theme

App shell

Ledger left rail + sticky topbar + paper canvas. The dashboard layout composes AppShell, SideNav and TopNav; pages add PageHeader + Tabs like a project header.

acmecheckout-service

Release readiness

staging · recomputed on every run

Warning — 1 approval pending
Quality gateC
AMBER
1 approval pending
CoverageB
82%
threshold 80%
Automation
64%
approved cases scripted
Open defects
2
0 critical · 1 high

Tokens

CSS variables in _design/tokens.css, copied from agiloft.com. Cream canvas with white cards holds contrast; the toggle above re-renders every swatch live.

Canvas--qa-bg
app background
Surface--qa-surface
cards / sidebar / topbar
Surface 2--qa-surface-2
wells / hovers
Border--qa-border
hairlines
Foreground--qa-fg
body text
Muted--qa-muted
≥ 4.5:1 secondary
Accent--qa-accent
links / active
Accent solid--qa-accent-solid
button fill
Blaze--qa-mint
blaze-orange CTA #f9922f
Accent soft--qa-accent-soft
tint bg
Success--qa-success-bg
pass / merged
Warning--qa-warning-bg
amber readiness
Danger--qa-danger-bg
fail / defect
Info--qa-info-bg
flaky / healable
Track--qa-track
coverage track
Display / page title1.875rem
Section heading1.5rem
Card title0.875rem
Body1rem
Secondary / table0.875rem
Caption / badge0.6875rem

Spacing is a 4pt scale (--qa-space-1…16), radii 0 / full (sharp like the reference), shadows flat, motion is 120–180ms ease-out for state changes only.

Measures

Quality visuals: gate pills, A–E ratings, coverage bars, stat tiles. Grades derive from coverage via gradeForCoverage.

Passed — readyWarning — approvalsFailed — do not release
ABCDE
CoverageB
82%
threshold 80% · grade B
Duplicated thinkingA
0
no copy-pasted cases
Flaky
3
labeled, never averaged

Button

Primary for the one main action; secondary and outline for the rest; ghost for table rows; destructive only for revoke/delete.

Input

Label, hint, and error are wired with aria-describedby; errors also use role="alert".

Target environment

Where runs execute.

Must be reachable from GitHub-hosted runners.

Disabled state

Shown while loading.

Badge

QA statuses map to tones in one place (StatusBadge), so a state never changes color between pages. Pills are uppercase 11px.

defaultapprovedpassedamberfailedflaky
draftunverifiedapprovedpassedfailedflakyscript-issueneeds-reviewmerged

Table

The trace chain REQ → TC → script → run → defect, with tabular numerals and a scrollable wrapper on narrow screens. Headers are uppercase 11px on a paper well.

Requirement trace — checkout flow
RequirementCaseScriptLatest runDefect
REQ-007TC-REQ007-02checkout.spec.tsfailedGH-142
REQ-008TC-REQ008-01coupons.spec.tspassed—
REQ-009TC-REQ009-03refunds.spec.tsflaky—

Alert

Title names the situation, body names the recovery. Danger and warning use role="alert".

Heal PR verified

The locator fix passed a re-run against the same commit and is ready for review.

Platform model for chat

Agent chat uses the platform model and sees only requirement, citation, and case text — never repo code.

Card

One container per topic. Actions sit in the header; secondary detail goes in the footer — cards never nest.

Release readiness

Rule-based verdict. It always names its blockers.

Failed

Blocked by GH-142 on REQ-007. All other P1 requirements have a passing approved test.

Coverage 82% · Automation 64% · 1 open high defect

API key issued

Shown once — store it as a CI secret.

aqa_repo_9f2…c41d

EmptyState

Empty states teach the next step instead of reporting nothing.

No repositories linked yet

Link a repo to open the setup pull request. Merge it, and requirements with cited test cases appear here within minutes.

Dialog

Reserved for interruptions that need protected focus — approvals, destructive confirms. Everything else stays inline.