Caden App Design System
Overview
The design system was created in tandem with the brand's establishment, built around a few key elements: the logo, color palette, and tone. Its purpose was to translate these core characteristics into the user interface. The design aimed to feel light, airy, and engaging, providing an approachable framework for presenting extensive content about data transparency.
Foundations
Grids & Layouts
The system is built on a 4px grid, forming the foundation for a 6-column layout that offers flexibility to create assets spanning full, half, or one-third widths.
Spacers
Spacers were applied consistently across all components, both vertically and horizontally, ensuring continuity and helping the front-end team achieve pixel-perfect results.
Colors
The bright gradient, a key element of the brand, emphasizes approachability and is used for primary CTAs throughout the app. To balance its vibrancy, the color palette was intentionally kept limited.
Gradient
The gradient posed challenges. One was limited support in third-party integrations which required hardcoding or selective use.
The second was it was not WCAG compliance depending where text fell over it, which was problematic for a primary CTA. To address this, I expanded the gradient from two to four colors, allowing better control over the darkest areas of the pink and purple hues
Typography
We chose two typefaces to complement the brand. Figtree, selected for its round, approachable look, versatility at all sizes, and range of weights, met most needs but fell short on numeric characters, which were critical for the app’s heavy use of numbers. After further exploration, we paired it with DM Sans, which offered simpler numeric characters while complementing Figtree.
Icons & Assets
Navigation
Created simple icons designed to work on small device sizes while maintaining consistent visual weight for a balanced appearance.
Connections
Throughout the app, the user can connect various accounts. The more connections we added the more the interface resembled look logo soup, mhmmm... Creating grounding elements like these helped eliminate that.
Buttons and Links
CTA's
This is a sample of the buttons and links used throughout the app. With the bright primary color, we kept all variations simple, especially in cases with multiple CTAs. Additionally, we created a minimal dark mode library for new features.
Other Components
This is a sample of other components in the design system and great examples of how all the elements above come together.
Illustrations
Some other ways we expanded the brand through out the app.
What's Next?
The design system is a living document that evolves with our product. What you see here is just a snapshot of the full library. It's been rewarding to see it all come together, and I'm excited to continue expanding it in the future.
