A digital services project by FlexionDesign System
A USWDS-aligned design system built with CUBE CSS methodology. Semantic tokens, layout compositions, and accessible components.
Foundations
Tokens
Two-tier token architecture: USWDS palette tokens and semantic role-based tokens.
Typography
Font families, type scale, weights, line heights, measure, and heading hierarchy.
Compositions
Layout primitives from CUBE CSS: stack, cluster, center, sidebar, grid.
Base Classes
Shared CSS properties extracted into multi-selector rules.
Rules
Token rules, component rules, and accessibility invariants.
Data Visualizations
Accessibility-first guidance for charts, graphs, maps, and infographics.
Layout
Page layouts (content, sidebar-start, sidebar-end), breakout tracks, and container contracts that guide layouts toward correctness by default.
Feedback
Change Indicator
Small colored dot (with optional label) marking an item as modified, added, or removed.
Confidence Badge
Compact badge flagging extracted fields that need review. Stays hidden for high-confidence values and surfaces "Review" or "Low confidence" otherwise.
Preview Banner
Full-width warning banner shown on branch-qualified form pages to indicate a non-production preview and that submissions will reference the branch commit.
Semantic Diff
Grouped list of spec changes (added, removed, modified, moved, renamed) with a category badge and human-readable description per change.
Spec Diff Browser
Annotated single-column diff of a form spec. Renders the head tree with inline change badges, before/after rows for modified fields, and base-only entries spliced in for removed pages, groups, and fields. Tops the view with an overview strip of change counts and jump-links.
Variant Callout
Prominent callout announcing which LLM variant will run a task, with affordances to change the selection and see benchmarks.
Navigation
Branch Switcher
Dropdown for switching between branches with a filter and an inline create-branch form.
Spec Browser
Two-pane structured browser for DataCollectionSpec + FormSpec content. Sticky sidebar lists pages and groups; the content pane shows collapsible panels with page summaries and field tables.
Form Controls
Chat Panel
A conversational interface for interactive form filling.