Color Usage Examples

Practical examples showing how to use Focus UI colors in real components and layouts. Copy the code snippets and see colors in action.

Basic Color Application

Apply colors to any element using utility classes. The most common utilities are background colors (.focus-bg-*) and text colors (.focus-text-*).

White background with border

Light background (page background color)

Primary background with white text

Success lighter background (subtle)

HTML

<div class="focus-bg-white focus-border">White background with border</div>
<div class="focus-bg-light">Light background</div>
<div class="focus-bg-primary focus-text-white">Primary background</div>
<div class="focus-bg-success-lighter">Success lighter background</div>

Text Colors

Primary text color

Secondary text color

Success text color

Danger text color

Warning text color

Info text color

Muted text for secondary information

HTML

<p class="focus-text-primary">Primary text color</p>
<p class="focus-text-secondary">Secondary text color</p>
<p class="focus-text-success">Success text color</p>
<p class="focus-text-danger">Danger text color</p>
<p class="focus-text-warning">Warning text color</p>
<p class="focus-text-info">Info text color</p>
<p class="focus-text-muted">Muted text</p>

Available Text Color Utilities: All brand colors (primary, secondary, tertiary), semantic colors (success, danger, warning, info), accent colors (purple, teal, orange, pink), and neutral colors (white, black, text, text-muted) are available as .focus-text-{color} utilities. Note that text-light and text-dark are only available as CSS variables (var(--focus-color-text-light) and var(--focus-color-text-dark)).

Colored Borders

Apply semantic border colors using .focus-border-{color} utilities. All brand, semantic, and accent colors are available for borders.

Primary Border - Use for primary focus elements

Success Border - Use for successful validations

Danger Border - Use for error states

Warning Border - Use for warnings

Info Border - Use for informational messages

HTML

<div class="focus-border-primary" style="border: 2px solid;">Primary Border</div>
<div class="focus-border-success" style="border: 2px solid;">Success Border</div>
<div class="focus-border-danger" style="border: 2px solid;">Danger Border</div>
<div class="focus-border-warning" style="border: 2px solid;">Warning Border</div>
<div class="focus-border-info" style="border: 2px solid;">Info Border</div>

Pro Tip: Border utilities only set the border-color property. You still need to apply border or border-width styles separately. All brand colors (primary, secondary, tertiary), semantic colors (success, danger, warning, info), and accent colors (purple, teal, orange, pink) are available.

Component Examples

Buttons

Use brand colors for primary actions and semantic colors for specific states:

HTML

<!-- Brand colors for primary actions -->
<button class="focus-btn focus-btn-primary">Primary Action</button>
<button class="focus-btn focus-btn-secondary">Secondary</button>

<!-- Semantic colors for state -->
<button class="focus-btn focus-btn-success">Success</button>
<button class="focus-btn focus-btn-danger">Delete</button>

<!-- Accent colors for variety -->
<button class="focus-btn focus-btn-purple">Purple</button>
<button class="focus-btn focus-btn-teal">Teal</button>

Alerts

Use semantic colors to communicate meaning in feedback messages:

Success! Your changes have been saved successfully.

Error! Something went wrong. Please try again.

Warning! This action cannot be undone.

Info: Here's some helpful information for you.

HTML

<div class="focus-alert focus-alert-success">
  <strong>Success!</strong> Your changes have been saved.
</div>

<div class="focus-alert focus-alert-danger">
  <strong>Error!</strong> Something went wrong.
</div>

<div class="focus-alert focus-alert-warning">
  <strong>Warning!</strong> This action cannot be undone.
</div>

<div class="focus-alert focus-alert-info">
  <strong>Info:</strong> Here's some helpful information.
</div>

Badges

Use accent colors for tags and categories, semantic colors for status:

Primary Secondary Tertiary

Active Inactive Pending Draft

Design Development Marketing Sales

HTML

<!-- Status badges with semantic colors -->
<span class="focus-badge focus-badge-success">Active</span>
<span class="focus-badge focus-badge-danger">Inactive</span>
<span class="focus-badge focus-badge-warning">Pending</span>

<!-- Category tags with accent colors -->
<span class="focus-badge focus-badge-purple">Design</span>
<span class="focus-badge focus-badge-teal">Development</span>
<span class="focus-badge focus-badge-orange">Marketing</span>

Color Combinations

Colored Cards

Use lighter color variants for card backgrounds with darker variants for borders:

Primary Card

Content with primary theme

Success Card

Positive outcome or status

Warning Card

Important information

HTML

<div class="focus-card focus-bg-primary-lighter"
     style="border-left: 4px solid var(--focus-color-primary);">
  <h6 class="focus-text-primary">Primary Card</h6>
  <p>Content with primary theme</p>
</div>

<div class="focus-card focus-bg-success-lighter"
     style="border-left: 4px solid var(--focus-color-success);">
  <h6 class="focus-text-success">Success Card</h6>
  <p>Positive outcome or status</p>
</div>

Colored Table Rows

Use lighter variants for table row backgrounds to show status:

Name	Status	Action
Completed Task	Done
Pending Review	Pending
Failed Process	Failed

HTML

<table class="focus-table focus-table-bordered">
  <tbody>
    <tr class="focus-bg-success-lighter">
      <td>Completed Task</td>
      <td><span class="focus-badge focus-badge-success">Done</span></td>
    </tr>
    <tr class="focus-bg-warning-lighter">
      <td>Pending Review</td>
      <td><span class="focus-badge focus-badge-warning">Pending</span></td>
    </tr>
  </tbody>
</table>

Using CSS Variables

For advanced styling, you can use CSS variables directly in your custom CSS. This is especially useful for gradients, shadows, and complex designs:

Gradient Header

Using CSS variables for gradients

Custom Styled Box

Using CSS variables for full control

HTML

<style>
  .gradient-header {
    background: linear-gradient(
      135deg,
      var(--focus-color-primary),
      var(--focus-color-secondary)
    );
    color: white;
    padding: 2rem;
    border-radius: 0.5rem;
  }

  .custom-box {
    background: var(--focus-color-purple-lighter);
    border: 2px solid var(--focus-color-purple);
    color: var(--focus-color-purple-dark);
    padding: 1.5rem;
  }
</style>

<div class="gradient-header">
  <h4>Gradient Header</h4>
  <p>Using CSS variables for gradients</p>
</div>

Accessibility Patterns

Ensure proper contrast when combining colors. Here are some best practices:

Contrast Guidelines

Use focus-text-white on dark backgrounds (primary, secondary, success, danger)
Use dark text on light backgrounds (-lighter variants)
Warning color may need dark text depending on brightness
Test color combinations for WCAG AA compliance (4.5:1 ratio for normal text)

Good Contrast
White text on primary

Good Contrast
Dark text on light variant

Good Contrast
White text on success

Good Contrast
Dark text on warning

HTML

<!-- Good: White text on dark backgrounds -->
<div class="focus-bg-primary focus-text-white">
  White text on primary
</div>

<!-- Good: Dark text on light backgrounds -->
<div class="focus-bg-primary-lighter">
  Dark text on light variant
</div>

<!-- Good: Appropriate contrast for warning -->
<div class="focus-bg-warning" style="color: #664d03;">
  Dark text on warning background
</div>

Pro Tips

Start with the Color Palette to find the exact color you need
Read about the Color System to understand when to use each variant
Use semantic colors (success, danger, warning, info) for meaning, not just decoration
Use accent colors (purple, teal, orange, pink) for visual variety in non-critical elements
Test your color combinations in different lighting conditions and on different screens