Color System

Semantic design preferences that map to Tailwind CSS classes. Create beautiful, accessible designs with our condensed color-style format.

Atomic MindShift Brand Colors

Default brand colors used across the platform. These serve as the foundation for all theme variations.

Primary

Brand color for CTAs, headers, key elements

sky-vibrant

bg-sky-600

Secondary

Complementary color for cards, sections

sky-soft

bg-sky-200

Accent

Accent color for links, highlights

amber-vibrant

bg-amber-600

Text

Primary text color for readability

slate-strong

text-slate-950

Background

Page background color

white

bg-white

Surface

Surface color for cards, modals

slate-light

bg-slate-100

Atomic MindShift Semantic Colors

Default semantic colors that adapt contextually based on each theme's primary color.

Success

Confirmations, positive feedback

emerald-vibrant

bg-emerald-600

Warning

Cautions, alerts, warnings

amber-vibrant

bg-amber-600

Error

Errors, destructive actions

rose-vibrant

bg-rose-600

Info

Informational messages, help text

sky-vibrant

bg-sky-600

Neutral

Disabled states, inactive elements, placeholders

slate-muted

bg-slate-300

Theme Templates

Complete theme templates showing how colors work together in real UI components. Each template demonstrates typography, buttons, cards, and semantic states.

Minimalist Studio

Clean, sophisticated design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Modern Tech

Contemporary, sleek design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Creative Studio

Bold, artistic design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Wellness Center

Calming, professional design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Culinary Experience

Warm, sophisticated design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Financial Services

Trustworthy, modern design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Luxury Fashion

Elegant, premium design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Learning Platform

Inspiring, modern design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Social Impact

Caring, contemporary design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Midnight Studio

Sophisticated dark design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Gaming Hub

Dynamic, immersive design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Night Vision

Professional dark mode

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Medical Dark

Clinical, trustworthy design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Finance Dark

Secure, professional design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Luxury Dark

Premium, elegant design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Study Dark

Focused, academic design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Impact Dark

Mission-driven, modern design

Color Palette

Primary

Secondary

Surface

Background

Semantic Colors

Sample Component

Button

Secondary

Click to view full example

Typography Demo

Heading Hierarchy

H1: Main Page Title

H2: Section Title

H3: Card Title

H4: Subsection Title

H5: Small Title

Text Colors

text-slate-950 (Strong)

text-slate-700 (Rich)

text-slate-600 (Medium)

text-slate-500 (Muted)

text-slate-400 (Light)

text-blue-600 (Primary)

text-green-600 (Success)

text-amber-600 (Warning)

text-red-600 (Error)

text-slate-400 (Neutral)

Body Text Examples

This is a paragraph with strong text and emphasized text. The line height is comfortable for reading.

This is secondary text that provides additional context or supporting information. It uses a lighter color to create visual hierarchy.

This is small text, often used for captions, footnotes, or metadata. It's subtle but still readable.