- Getting started
- Design
- Color system
Color system
Learn how to work with our color system.
dotUI's color system isn’t about quick fixes or cookie-cutter palettes. It's about giving you the tools to build a color system that aligns with your brand and meets the standards of modern design systems.
Most libraries focus on keeping things “safe” and “simple.” Predefined colors slapped into a project often leave developers with generic, uninspiring results. dotUI aims higher: bringing developers designer-level thinking.
Fundamentals
We start from foundational principles to ensure your design system looks intentional, functional, and uniquely yours.
Our color philosophy revolves around three key principles:
- Accessibility: Colors must be perceivable by all users, including those with visual impairments. Accessibility is non-negotiable.
- Purpose: Every color should serve a specific role, enhancing clarity and reducing ambiguity in your interface.
- Uniqueness: Your brand is unique—your colors should be too. dotUI helps you create palettes that stand out while feeling cohesive.
Color roles
| Role | Description |
|---|---|
Neutral | Used for backgrounds, text, and shapes. These are foundational colors in your UI. |
Brand | Represents your brand identity. It’s the face of your product. |
Accent | Highlights key UI elements, like links or actions, adding vibrancy to your design. |
Success | Indicates positive outcomes, like success messages or completed tasks. |
Warning | Signals caution, drawing attention to potential risks or warnings. |
Danger | Represents errors or critical issues that need immediate attention. |
Info | Provides additional context or information, like tooltips or hints. |
Color Palettes
Each color role in dotUI has a well-defined palette with multiple shades. This ensures flexibility and adaptability across various UI elements.
Neutral
Neutral colors form the backbone of your UI. They’re versatile, working well for backgrounds, text, and borders. Neutral colors often convey simplicity and clarity.
Neutral Alpha
Alpha variations of neutral colors provide transparency levels. These are perfect for layering, helping elements like modals and overlays adapt seamlessly to different backgrounds.
Brand
Brand colors are your primary identity markers. They should be bold and distinct, capturing the essence of your brand.
Semantic Colors
Semantic colors convey meaning. They guide users by providing immediate visual feedback.
Accent
Accent colors bring vibrancy and focus to key actions or elements in your design.
Success
Success colors indicate positive outcomes, like a successfully completed action or confirmation message.
Warning
Warning colors alert users to potential issues or require caution, like unsaved changes.
Danger
Danger colors are used for critical states, such as errors or destructive actions.
Info
Info colors provide supplementary information, ensuring users stay informed without feeling overwhelmed.