Foundations
10 chapters covering every token, scale, and convention that powers the ePassLive design system.
Foundations are the source of truth for every visual decision in ePassLive. Every color, every spacing value, every elevation level, and every icon size comes from a token defined here. Components consume these tokens — they never redefine them.
Why foundations first?
- One change updates every screen — token-driven theming means dark mode, brand swaps, and density changes touch one file.
- A11y is built in — every contrast ratio, motion duration, and tap target is reviewed against WCAG 2.2 AA at the token level.
- Components stay declarative — molecules and organisms read tokens, they don't ship their own pixel values.
The chapters
Colors
The semantic color tokens that drive every UI surface in the ePassLive design system.
Open chapterTypography
The type scale, font families, line heights, and weight tokens used across the storefront.
Open chapterSpacing
The 4-pt spacing scale and the semantic space tokens that drive layout rhythm.
Open chapterSizing
Fixed and responsive sizing tokens for icons, controls, avatars and content containers.
Open chapterShadows
Elevation tokens for cards, modals, drawers and popovers.
Open chapterRadii
The corner-radius scale, shadow pairings, and containment semantics.
Open chapterZ-Index
The z-index scale that keeps sticky bars, modals, drawers and tooltips predictable.
Open chapterMotion
Duration and easing tokens, plus safe motion patterns for WCAG 2.3.3 compliance.
Open chapterDark Mode
How the token system adapts for dark mode without duplicating component code.
Open chapterIconography
Stroke widths, grid sizes, and naming conventions for every icon shipped.
Open chapter