Color System

This guide explains the color system in LamaPress, including theme-based colors, CSS variables, and how to use and customize colors.

Table of Contents

• Overview
• Color Structure
  • Base Colors
  • Theme Colors
• Using Colors
  • Theme Classes
  • Color Utilities
  • CSS Variables
• Color Categories
  • Background Colors
  • Text Colors
  • Signal Colors
• Customizing Colors
  • Adding Base Colors
  • Adding Theme Colors
  • Creating New Themes
• Best Practices
  • 1. Use Theme Classes
  • 2. Semantic Naming
  • 3. Accessibility
• Related Documentation

---

Overview

LamaPress uses a theme-based color system with CSS custom properties. Colors are organized into themes (light, dark) and categories (background, text, signal), making it easy to switch themes and maintain consistent color usage.

Color Structure

Base Colors

Base colors are defined in tailwind/config/colors.js:

export const colors = {
  black: '#000000',
  white: '#FFFFFF',
  grayDark: '#3C3C3C',
  grayLight: '#DEDEDE',
}

These are the foundation colors used across themes.

Theme Colors

Themes map base colors to semantic roles:

export const themes = {
  light: {
    bg: {
      primary: colors.white,
      secondary: colors.grayLight,
    },
    text: {
      primary: colors.black,
      secondary: colors.black,
    },
    signal: {
      primary: colors.grayDark,
      primaryContrast: colors.white,
    },
  },
  dark: {
    // ... dark theme colors
  },
}

Using Colors

Theme Classes

Apply themes using ll-theme-{theme-name}:

<section class="ll-theme-light">
  <!-- Light theme colors -->
</section>

<section class="ll-theme-dark">
  <!-- Dark theme colors -->
</section>

Color Utilities

Use Tailwind color utilities with CSS variables:

<!-- Background colors -->
<div class="bg-primary">Primary background</div>
<div class="bg-secondary">Secondary background</div>

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>

<!-- Signal colors (buttons, CTAs) -->
<button class="bg-signalPrimary text-signalPrimaryContrast">
  Button
</button>

CSS Variables

Colors are available as CSS custom properties:

.custom-element {
  background-color: rgb(var(--bgPrimary));
  color: rgb(var(--textPrimary));
}

Note: Colors use rgb() format for opacity support.

Color Categories

Background Colors

• bg-primary - Primary background color
• bg-secondary - Secondary background color

Usage:

<section class="ll-theme-light bg-primary">
  <!-- Primary background -->
</section>

Text Colors

• text-primary - Primary text color
• text-secondary - Secondary text color

Usage:

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>

Signal Colors

• signal-primary - Primary signal color (buttons, CTAs)
• signal-primaryContrast - Contrast color for signal primary

Usage:

<button class="bg-signalPrimary text-signalPrimaryContrast">
  Call to Action
</button>

Customizing Colors

Adding Base Colors

Edit tailwind/config/colors.js:

export const colors = {
  black: '#000000',
  white: '#FFFFFF',
  grayDark: '#3C3C3C',
  grayLight: '#DEDEDE',
  // Add new base color
  brand: '#FF5733',
}

Adding Theme Colors

Add colors to theme definitions:

export const themes = {
  light: {
    bg: {
      primary: colors.white,
      brand: colors.brand, // New color
    },
    // ...
  },
}

Then use: bg-brand

Creating New Themes

Add a new theme to tailwind/config/colors.js:

export const themes = {
  light: { /* ... */ },
  dark: { /* ... */ },
  // New theme
  brand: {
    bg: {
      primary: colors.brand,
      secondary: colors.grayLight,
    },
    // ...
  },
}

Then use: ll-theme-brand

Best Practices

1. Use Theme Classes

Apply themes at section level:

<section class="ll-theme-light">
  <!-- All children use light theme -->
</section>

2. Semantic Naming

Use semantic color names:

• primary for main colors
• secondary for supporting colors
• signal for interactive elements

3. Accessibility

Ensure sufficient contrast:

• Text on backgrounds: 4.5:1 minimum
• Large text: 3:1 minimum
• Interactive elements: Clear focus states

Related Documentation

• Styling Overview - Styling approach
• Tailwind Configuration - Tailwind setup
• Accessibility - Accessibility standards

---

Next Steps:

• Review Typography System for text styling
• Check Grid System for layout
• See existing components for color usage examples