Foundation
The Foundation section provides information about the visual language and styles used across VA platforms. Behind every aspect of the language lies an intention: to convey interactivity, provide structure to content, and impart a sense of space and context.
A consistent experience
In order to maintain a cohesive user experience across VA platforms, it is imperative that design choices are applied thoughtfully and consistently as Veterans navigate across products and services.
Accessibility
While this guide will always provide accessible samples and usage guidelines, it is still possible to create inaccessible designs using the components and utilities available in this Design System. Always remember that the audience using VA platforms may not be visual users, may experience color blindness, or have difficulty handling low contrast ratios. Never use color alone as an affordance, always allow users to control automated content, and provide alternative navigation options.
Z-Axis
Global UI and Platform Z-Axis Guidance
| UI | Level | Elevation |
|---|---|---|
| Page content | 0 | 0 |
| Carousels | 1 | 1 |
| Buttons: action, navigation, or special use (Veteran Status Card) | 1 | 2 |
| Permanent navigation: top nav and bottom nav) | 2 | 3 |
| Systems status: offline or maintenance banners | 2 | 3 |
| Floating action button (FAB) | 2 | 3 |
| Page-level modals: bottom sheets (drawers), subtasks (interstitials), WebViews (interstitials)* | 3 | 0 |
| Floating modals: snack bars (toasts), windows | 4 | 4 |
*These modals cover and temporarily replace “0 Page level, vertical overflow” content, they act as interstitials for completing small tasks like filtering, using a combo box, viewing content in a WebView.
Layers
0 Page level, vertical overflow
1 Carousels (horizontal overflow), navigation buttons, action buttons, VCL—items that move with 0 level content but are raised from page (enough drop shadow to move from “floating” to “less-floating” state...)
2 Pinned navigation, top nav and bottom nav, offline and maintenance banners, floating action buttons
3 Modal, drawers, anything that can “overlay” or cover the pinned nav (subtasks)
4 Toasts, feedback, or systems level information
Elevation
0 No drop shadows, things that are “attached” to the background
1 Things that aren’t quite attached to the background, i.e. carousels with horizontal overflow, drop shadows implies that this content is “detached” from the background
2 Thing that are floating a little higher than the least-detached items, i.e. action buttons, these usually require a pressed state—i.e. if I press a button down it’ll be on the same level as a carousel card
3 Pinned nav, floating action buttons, content that generally lives on layer 2 above
4 Content that lives on layer 3 above as needed (i.e. toasts, offline mode redundancy)