Foundations
Style Guide
Color, typography, spacing, and shape tokens define the base language.
Design System Documentation
This documentation defines the visual and interaction standards for Split Step Solutions. Use it to maintain consistency across product surfaces and implementation teams.
Implementation
Components
Reusable primitives and patterns for navigation, input, feedback, and data display.
Governance
Versioning
Changelog-backed release history to keep system changes transparent and trackable.
Current
v1.3.1
Active documentation reflects the latest component expansion and navigation refinements.
System Structure
The design system is intentionally split into a two-tier information architecture. The left icon rail provides global context (Design System, Style Guide, Components, Versioning) while the secondary rail provides page-level depth such as Colors, Typography, Select, Tabs, Tooltips, and Toasts. This mirrors how implementation teams move from high-level system areas into specific UI decisions.
Begin withStyle Guidefor token and type decisions, then apply those rules inComponentsto keep build output and visual language aligned.
Core Principles In This Build
Token-First Styling
Semantic tokens power primary, success, warning, info, and destructive states across buttons, badges, and toast actions.
Role-Based Typography
Material roles are used consistently with heading-family styles for display/headline/title and body-family styles for body/label.
Compositional Consistency
Inputs and Select share radius, height, border weight, and focus behavior so forms feel like one coherent component family.
Theme Reliability
Light/dark tokens are tuned for legibility, and core interactions preserve clear contrast across both themes.
What Exists Today
The current library includes foundational navigation and utility patterns (Top Nav, Sidebar, Breadcrumb, Pagination), rich content containers (Cards, Table, Lists, Dialog), selection and form input controls (Buttons, Badges, Checkbox, Switches, Select, Text Fields, Tabs), and transient feedback patterns (Toasts, Tooltips).
These pages are not generic examples; they are structured to reflect the same visual language used by the real application shell and core interaction model.
Evolution Workflow
Changes to tokens, component behavior, navigation, or documentation are tracked through Design System versioning. Each change set should include purpose, impacted patterns, and implementation notes to help product and engineering teams adopt updates predictably.
Current design system version isv1.3.1with full release notes inVersioning.