Design System
To build out a consistent user experience in the t:connect mobile app, I created a design system of styles, components, patterns, and templates.
Color
The color system in the app utilizes a full ROY G BIV color spectrum of primary hues with supporting tints & shades.
Typography
For the text displayed in the t:connect app, I chose to rely on the mobile operating system font families. Optimized for display on mobile screens, the San Francisco (iOS) and Roboto (Android) typographic systems are clear and legible. Both of these font families support a wide range of hierarchical needs with their extensive size, display, and weight variations.
Components
Adhering to atomic design methodology, I designed each component starting with atoms at the most basic level, then I combined those atoms to create molecules, paired molecules to create organisms, organisms to templates, and templates to pages. The system I built combines elements into complex structures to support the data display needs within the app across iOS & Android in both light and dark modes.