---
title: Color system
description: 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                                                                        |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------- |
| <BadgePalette color="neutral">Neutral</BadgePalette> | Used for backgrounds, text, and shapes. These are foundational colors in your UI.  |
| <BadgePalette color="brand">Brand</BadgePalette>     | Represents your brand identity. It’s the face of your product.                     |
| <BadgePalette color="accent">Accent</BadgePalette>   | Highlights key UI elements, like links or actions, adding vibrancy to your design. |
| <BadgePalette color="success">Success</BadgePalette> | Indicates positive outcomes, like success messages or completed tasks.             |
| <BadgePalette color="warning">Warning</BadgePalette> | Signals caution, drawing attention to potential risks or warnings.                 |
| <BadgePalette color="danger">Danger</BadgePalette>   | Represents errors or critical issues that need immediate attention.                |
| <BadgePalette color="info">Info</BadgePalette>       | 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.

<Palette baseColor="neutral" />

### 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.

<Palette baseColor="neutral-alpha" />

### Brand

Brand colors are your primary identity markers. They should be bold and distinct, capturing the essence of your brand.

<Palette baseColor="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.

<Palette baseColor="accent" />

#### Success

Success colors indicate positive outcomes, like a successfully completed action or confirmation message.

<Palette baseColor="success" />

#### Warning

Warning colors alert users to potential issues or require caution, like unsaved changes.

<Palette baseColor="warning" />

#### Danger

Danger colors are used for critical states, such as errors or destructive actions.

<Palette baseColor="danger" />

#### Info

Info colors provide supplementary information, ensuring users stay informed without feeling overwhelmed.

<Palette baseColor="info" />
