Color System Architecture

Understanding how Focus UI's color system is structured and how to use colors effectively across utility classes, component modifiers, and CSS variables.

Overview

Focus UI's color system is designed to provide a comprehensive, flexible, and accessible color palette for building consistent user interfaces. The system organizes colors into four distinct categories, each serving a specific purpose in your design.

Color Organization

Colors in Focus UI are organized into four categories:

How to Use Colors

Focus UI provides three different ways to apply colors in your projects, each suited to different use cases:

Understanding Color Variants

Most colors in Focus UI come with multiple variants to provide flexibility for different use cases. Here's what each variant means and when to use it:

CSS Variable Architecture

All Focus UI colors are defined as CSS custom properties (variables) following a consistent naming convention:

Using CSS Variables in Custom CSS

You can use these variables in your own stylesheets to maintain consistency with the Focus UI color system:

/* Using color variables in custom CSS */
.my-custom-element {
  background: var(--focus-color-primary-lighter);
  border: 2px solid var(--focus-color-primary);
  color: var(--focus-color-primary-dark);
}

/* Creating gradients */
.gradient-header {
  background: linear-gradient(
    135deg,
    var(--focus-color-primary),
    var(--focus-color-secondary)
  );
}

/* Using with opacity */
.transparent-overlay {
  background: rgba(59, 130, 246, 0.5); /* Or use var with opacity */
}

Overriding Default Colors

You can customize the entire color system by overriding CSS variables in your own stylesheet. Define your custom values in the :root selector after importing Focus UI:

/* Load Focus UI first */
@import 'focus-ui.css';

/* Then override colors */
:root {
  /* Change primary color to your brand color */
  --focus-color-primary: #8b5cf6;
  --focus-color-primary-hover: #7c3aed;
  --focus-color-primary-light: #a78bfa;

  /* Change semantic colors */
  --focus-color-success: #10b981;
  --focus-color-danger: #ef4444;
}

Special Purpose Colors

Beyond the standard color families, Focus UI includes specialized color tokens for specific UI patterns and scenarios.

Dark Theme Colors

A complete set of dark mode color tokens for building dark theme interfaces. These colors are optimized for readability and comfort in low-light environments.

Overlay Colors

Semi-transparent overlay colors for creating modal backdrops, dropdown shadows, and layered UI elements.

Navbar-Specific Colors

Dedicated color tokens for navbar components, providing semantic theming for navigation bars across different visual styles.

Surface & Interaction Colors

Subtle colors for creating depth, surfaces, and interactive feedback in the UI.