Color Palette
Expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
Color Palette
If you’re wondering how we automatically generated the 50–950 shades of each color, bad news — color is complicated and to get the absolute best results we picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.
Color Classification
Our color classification simplifies decision-making, aiding both designers and developers in selecting the right hues for various components. Whether you're aiming for a cohesive brand identity or ensuring accessibility, our documentation illuminates the principles guiding our color classification system, empowering you to make informed and aesthetically pleasing design choices within the Plus UI ecosystem.
Default
Explore the nuanced shades of gray within our palette, each thoughtfully classified to cater to specific design elements. From soft undertones to deeper shades, our documentation elucidates how the default gray acts as a unifying force, providing a solid foundation for your design while allowing other colors to shine.
Primary
Elevate your brand presence with Plus UI's primary color—Indigo. Explore the nuanced shades and variations of Indigo within our palette, each carefully classified for specific design contexts
Info
The Info Color blue aligns with accessibility principles, providing a balanced contrast that enhances readability and usability. Whether used in tooltips, notifications, or other informational elements, this shade of blue serves as a reliable beacon, guiding users through your application with clarity and precision.
Success
The Success Color green aligns with accessibility standards, providing not only a visually pleasing experience but also a clear and distinguishable visual cue. Whether used in buttons, notifications, or other success-related elements, this shade of green adds a touch of positivity to your interface, creating a user experience that feels rewarding and encouraging.
Warning
The Warning Color yellow aligns with accessibility standards, providing a clear and attention-grabbing visual cue while maintaining readability. Whether used in form validations, notifications, or other warning elements, this shade of yellow serves as a reliable signal for users to exercise caution without creating undue stress.
Error
The Error Color red aligns with accessibility standards, providing a clear and prominent visual cue while maintaining readability. Whether used in error messages, validation prompts, or other error-related elements, this shade of red serves as a powerful indicator, prompting users to take corrective actions with confidence.
Get help
If you're new to Figma, the platform may initially seem overwhelming, but exploring the interface can be a fun and rewarding experience. Before you can use the Keep Design System in Figma, it's essential to learn the basic tools and functionalities of the platform.
Last updated
Was this helpful?