This page contains a few UI components to test colors, surfaces and other aspects of my design system.
Colors
These colors are inspired by some of my favorite things. Instead of picking tones as incremental lightness steps from each other, I decided to pick each shade manually, with slightly warmer hues towards the darker shades, and colder hues towards the light ones.
Main colors
Neutral
The neutral pallette was inspired by an early sunrise sky at the beach, just before the sun’s warmth tints the landscape. It’s the only set of colors that has one additional shade, for better constrast.
Accent
The main, or accent color (as of the time of this writing, I’m not quite sure) is a dark purple-ish tone that I picked to resemble jabuticaba, one of my favorite fruits.
Functional colors
Functional colors were picked to express meaning on their own, so I just tried to match them to the previous colors and keeping the complete pallette balanced.
Success
Warn
Error
Surfaces
Surfaces were created with a very subtle Glassmorphism in mind, except for dark mode, which works better with a flat design approach.