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.
Layout
Accordion
An expandable/collapsible content section, borderless or bordered.
Card
A card groups related content in a container with header, body, media, and footer sections.
Collection
A list of structured items with headings, descriptions, and optional metadata.
Icon
SVG icon from the USWDS icon sprite. Scales with text by default.
List
Ordered and unordered lists with USWDS spacing and an unstyled variant.
Prose
Typographic defaults for long-form content with USWDS measure (68ex reading width).
Table
A styled data table with support for bordered, borderless, striped, compact, scrollable, and stacked variants.
Tab Group
A tabbed interface for switching between content panels. Progressively enhanced from stacked content.
Tag
A small label used to categorize or mark items.
Feedback
Alert
A colored alert box for informational, warning, success, error, or emergency messages.
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.
Modal
Dialog overlay with focus trapping, backdrop, and keyboard management.
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.
Site Alert
A page-level alert for system-wide notices, appearing above content.
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.
Summary Box
A bordered callout box for highlighting key information or takeaways.
Tooltip
Hover/focus information popup with positioning and viewport edge detection.
Variant Callout
Prominent callout announcing which LLM variant will run a task, with affordances to change the selection and see benchmarks.
Identity
Banner
Official .gov/.mil banner identifying the site as a government website.
Identifier
Agency identification block with logos, required links, and disclaimers.
Navigation
Branch Switcher
Dropdown for switching between branches with a filter and an inline create-branch form.
Breadcrumb
A trail of links showing the current page location within a site hierarchy.
Footer
Page footer with navigation links, contact info, and agency branding.
Header
Site header with logo, primary navigation, and responsive mobile menu.
In-Page Navigation
A sticky sidebar table of contents auto-generated from page headings, with scroll spy highlighting.
Language Selector
Language switcher with two-language toggle and multi-language dropdown modes.
Link
A styled anchor for navigation with optional external link icon.
Pagination
Navigation for moving between pages of a multi-page content set.
Search
A search form with input field and submit button for finding content.
Side Navigation
A vertical navigation menu for navigating related pages within a section.
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.
Actions
Button
A clickable button for form submissions and actions.
Button Group
Groups buttons horizontally with proper spacing.
Form Controls
Character Count
Attaches to a textarea or text input and shows remaining characters.
Chat Panel
A conversational interface for interactive form filling.
Checkbox
A custom-styled checkbox with tile variant support.
Combo Box
A typeahead/autocomplete select with text input and filterable dropdown list.
Date Picker
A calendar date selector popup from a text input with keyboard navigation and min/max date support.
Date Range Picker
Paired start and end date pickers that coordinate date constraints.
Error Message
An inline error message for form validation.
File Input
File upload control with drag-and-drop, preview, and file type validation.
Form
Form container that provides proper spacing between form groups.
Input Mask
Formatted input overlay showing the expected pattern (phone, SSN, zip+4).
Input Prefix/Suffix
Add-ons that attach to the start or end of a text input to provide visual context.
Label
A label for form controls.
Memorable Date
Three separate inputs for month, day, and year — easier to remember than a date picker.
Radio
A custom-styled radio button with tile variant support.
Range Slider
A styled range input with live value display.
Select
A styled native select with custom dropdown chevron.
Text Input
A single-line text input for form data.
Time Picker
A combo box variant for time selection with configurable time range and step interval.
Textarea
A multi-line text input for longer form content.
Validation
Validation message patterns for inline (per-field) and summary (top of form) error display.
Process
Process List
A numbered vertical step list with headings and content per step, connected by a vertical line.
Step Indicator
A multi-step progress indicator showing completed, current, and remaining steps.