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.
Modal
Dialog overlay with focus trapping, backdrop, and keyboard management.
Site Alert
A page-level alert for system-wide notices, appearing above content.
Summary Box
A bordered callout box for highlighting key information or takeaways.
Tooltip
Hover/focus information popup with positioning and viewport edge detection.
Identity
Banner
Official .gov/.mil banner identifying the site as a government website.
Identifier
Agency identification block with logos, required links, and disclaimers.
Navigation
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.
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.
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.