Color System

Colors are a critical aspect of our design system. Crafted UI uses a semantic color system that assigns meaning to colors beyond their visual appearance. This approach ensures consistent theming, accessibility, and maintainability across all components.

Our color system is built on three main pillars:

• Semantic Colors: Functional color names that describe purpose rather than appearance
• Status Colors: Specialized colors for communicating state and feedback
• Base Colors: Standard color palette for direct color usage
• Theme Support: Automatic adaptation between light and dark themes

Rather than using color names like “green” or “blue,” we use functional names that describe the purpose. This semantic approach allows for easy theming and ensures colors maintain their meaning across different visual styles.

Borders & Focus Rings

<div class="border border-border rounded-md p-4">
  Element with border
</div>

<button class="focus:ring-2 focus:ring-ring focus:ring-offset-2">
  Focusable element
</button>

Using Semantic Colors

You can access semantic colors through Tailwind utility classes:

<div class="bg-primary text-primary-foreground border border-border">
  This element uses semantic colors
</div>

Crafted UI provides a set of specialized status colors for communicating different states and feedback to users. These colors are designed to be universally understood and accessible.

Using Status Colors

Status colors are available as Tailwind utility classes and can be used directly in your markup:

<p class="text-danger">Error message</p>
<p class="text-warning">Warning message</p>
<p class="text-success">Success message</p>
<p class="text-info">Info message</p>

In addition to semantic and status colors, Crafted UI supports standard base colors derived from Tailwind’s color palette. These colors can be used directly when you need a specific color rather than a semantic one.

Base colors work the same as semantic colors and are available on components that accept the clr prop. Use them when you need a specific color for visual design purposes rather than semantic meaning.

Crafted UI supports both light and dark themes out of the box. All color variables automatically adapt to the current theme, ensuring consistent appearance and proper contrast in both modes.

Light Theme

The light theme uses softer, more neutral colors with appropriate contrast for readability. Background colors are light with darker text, creating a clean and professional appearance suitable for most applications.

Dark Theme

The dark theme inverts the color relationships, using dark backgrounds with light text. It maintains the same semantic color relationships while providing a comfortable viewing experience in low-light environments. Status colors remain consistent but may have adjusted opacity or brightness for optimal contrast.

Theme Implementation

To implement theme switching in your application, toggle the dark class on your root element:

// Toggle theme
function toggleTheme() {
  document.documentElement.classList.toggle('dark');
}

// Set theme based on user preference
function setTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}

All Crafted UI components will automatically adapt to the current theme without any additional configuration.

You can customize any of the color values to match your brand or design requirements. Override the CSS variables in your global styles:

Custom Semantic Colors

:root {
  --primary: hsl(240 100% 50%);     /* Custom blue */
  --secondary: hsl(280 100% 50%);   /* Custom purple */
  --accent: hsl(320 100% 50%);      /* Custom pink */
}

:root[class~="dark"] {
  --primary: hsl(240 100% 60%);     /* Lighter blue for dark mode */
  --secondary: hsl(280 100% 60%);   /* Lighter purple for dark mode */
  --accent: hsl(320 100% 60%);      /* Lighter pink for dark mode */
}

Custom Status Colors

:root {
  --danger: hsl(0 84% 60%);         /* Custom red */
  --warning: hsl(45 93% 47%);       /* Custom orange */
  --success: hsl(120 60% 50%);      /* Custom green */
  --info: hsl(200 100% 50%);        /* Custom blue */
}

Remember to maintain proper contrast ratios for accessibility when customizing colors. Test your color combinations to ensure they meet WCAG guidelines for text contrast.