Color Palette Exploration

Exploring alternative color combinations for the design system. The active theme uses semantic component variants, while explorations below show alternative color options.

Current Active Theme

This section uses the actual shared component system with semantic variant names. If theme colors change in tailwind.config.ts, these components will automatically reflect the new colors.

Semantic Component Variants

These buttons use semantic variants (brand, info, highlight, emphasis) that map to the current theme colors. Change the theme, and these update automatically.

Brand Accent

Primary brand color for key actions

Info Accent

Secondary color for informational elements

Highlight Accent

Tertiary color for highlights and accents

Exploratory Color Variations

These are alternative color palette explorations using inline styles. They show different color combinations we've considered but haven't integrated into the component system yet.

OPTION 1

Initial Exploration

Our first exploration - bold vermillion, trustworthy blue, creative gold

Primary

Vermillion

#E63946

Secondary

True Blue

#1D70B8

Tertiary

Golden Yellow

#F7B32B

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 2

Nature's Studio

Swap gold for emerald - bringing nature indoors while keeping the energy

Primary

Vermillion

#E63946

Secondary

True Blue

#1D70B8

Tertiary

Emerald

#10B981

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 3

Ocean Breeze

Softer coral with refreshing teal - lighter, more playful feel

Primary

Coral

#FF6B6B

Secondary

Teal

#20C997

Tertiary

Sunset Gold

#FFB84D

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 4

Deep & Rich

Sophisticated burgundy and navy - more formal, premium feeling

Primary

Burgundy

#9B2C2C

Secondary

Navy

#1E3A8A

Tertiary

Amber

#D97706

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 5

Electric Modern

High energy with cyan and lime - very contemporary, tech-forward

Primary

Bright Red

#EF4444

Secondary

Cyan

#06B6D4

Tertiary

Lime

#84CC16

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 6

Warm Earth

Grounded rust with natural tones - organic, approachable feel

Primary

Rust

#C2410C

Secondary

Slate

#475569

Tertiary

Sage

#84A98C

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 7

Bold Primary

True primary colors - confident, clear, classic

Primary

Crimson

#DC2626

Secondary

Cobalt

#2563EB

Tertiary

Sunflower

#FACC15

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 8

Sophisticated Studio

Wine red with indigo and champagne - elegant, refined aesthetic

Primary

Wine

#991B1B

Secondary

Indigo

#4F46E5

Tertiary

Champagne

#FDE68A

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 9

Vibrant Energy

Orange-red with electric blue - maximum energy and excitement

Primary

Orange Red

#FF5733

Secondary

Electric Blue

#3B82F6

Tertiary

Citron

#BEF264

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

OPTION 10

Balanced Neutral

Muted tones with brick and olive - professional, balanced approach

Primary

Brick Red

#B91C1C

Secondary

Steel Blue

#475569

Tertiary

Olive

#A3A380

Component Preview

Example Card

This shows how the palette works in a realistic component.

Tag 1Tag 2Tag 3

Exploratory palettes use inline styles for rapid iteration. The Current Active Theme section above uses the production component system and will update automatically when theme colors change.