Project Arceus

Circuit Brand Colors

The core brand colors that define the Circuit design system's visual identity. These colors were designed to work harmoniously together and provide excellent contrast ratios.

Circuit Dark Teal

--circuit-dark-teal

#1a4a47

Primary brand color, used for main backgrounds and emphasis

Circuit Mid Teal

--circuit-mid-teal

#2d6a65

Surface backgrounds and secondary elements

Circuit Light Teal

--circuit-light-teal

#4a9b94

Borders, dividers, and subtle accents

Circuit Bright Teal

--circuit-bright-teal

#5dbfb7

Hover states and interactive highlights

Circuit Bright Yellow

--circuit-bright-yellow

#ffcf60

Primary action color and key interactions

Circuit Light Yellow

--circuit-light-yellow

#fff2d1

Primary text color and subtle highlights

Circuit Magenta

--circuit-magenta

#e91e63

Secondary action color and accent elements

Circuit Darker Teal

--circuit-darker-teal

#0f2b29

Deep backgrounds and inverse text

Semantic Colors

Semantic colors provide meaning and context throughout the interface. They adapt to themes while maintaining consistent purpose and accessibility.

Core Semantics

Background

--background

#1a4a47

Main page background color

Foreground

--foreground

#fff2d1

Primary text and content color

Surface Colors

Surface Background

--surface-background

#2d6a65

Cards, panels, and elevated surfaces

Surface Hover

--surface-background-hover

#4a9b94

Surface hover states

Surface Pressed

--surface-background-pressed

#1a4a47

Surface active/pressed states

Surface Emphasis

--surface-background-emphasis

#fff2d1

Emphasized surface backgrounds

Text Colors

Text Primary

--text-primary

#fff2d1

Main body text and headings

Text Secondary

--text-secondary

#fff2d1

Supporting text and labels

Text Inverse

--text-inverse

#1a4a47

Text on light backgrounds

Text Brand

--text-brand

#ffcf60

Brand-colored text and highlights

Interactive Colors

Interactive Primary

--interactive-primary

#ffcf60

Primary buttons and main actions

Primary Hover

--interactive-primary-hover

#ffdc73

Primary button hover state

Interactive Secondary

--interactive-secondary

#e91e63

Secondary actions and accents

Secondary Hover

--interactive-secondary-hover

#f04fa8

Secondary button hover state

Status Colors

Status colors communicate different states and feedback to users. Each status color includes both solid and subtle variants for flexible usage.

Error

--status-error

#e74c3c

Error states and destructive actions

Success

--status-success

#2ecc71

Success states and confirmations

Warning

--status-warning

#ffcf60

Warning states and cautions

Info

--status-info

#4a9b94

Informational states and tips

Supplementary Color Scales

Extended color scales provide additional options for data visualization, complex interfaces, and creative applications. Each scale includes multiple shades for versatile usage.

Blue Scale

Information states, links, and cool accents. Perfect for conveying trust and stability.

Blue 100

--color-blue-100

#e8f4ff

Blue 300

--color-blue-300

#93c5ff

Blue 500

--color-blue-500

#3286f5

Blue 700

--color-blue-700

#1e5daf

Purple Scale

Creative accents, premium features, and secondary branding elements.

Purple 100

--color-purple-100

#f5ebff

Purple 300

--color-purple-300

#c199ff

Purple 500

--color-purple-500

#8c51f5

Purple 700

--color-purple-700

#6636b6

Orange Scale

Warning states, attention-grabbing elements, and energetic accents.

Orange 100

--color-orange-100

#fff2e7

Orange 300

--color-orange-300

#ffb681

Orange 500

--color-orange-500

#f67e22

Orange 700

--color-orange-700

#c15009

Semantic Reds

Error states, destructive actions, and critical alerts.

Red 100

--color-red-100

#ffeaea

Red 300

--color-red-300

#ffb3ba

Red 500

--color-red-500

#e74c3c

Red 600

--color-red-600

#c0392b

Semantic Greens

Success states, positive actions, and confirmation feedback.

Green 100

--color-green-100

#ebffef

Green 300

--color-green-300

#aff4c6

Green 500

--color-green-500

#14ae5c

Green 700

--color-green-700

#008043

Semantic Yellows

Warning states, pending actions, and attention indicators.

Yellow 100

--color-yellow-100

#fffbeb

Yellow 300

--color-yellow-300

#ffe8a3

Yellow 500

--color-yellow-500

#e6a000

Yellow 600

--color-yellow-600

#bf6a02

Alpha Colors

Semi-transparent colors for overlays, shadows, and subtle effects. Available in both white and black variations.

White Alpha Scale

--color-white-100Alpha 10.0%

--color-white-200Alpha 20.0%

--color-white-300Alpha 30.0%

--color-white-400Alpha 40.0%

--color-white-500Alpha 50.0%

--color-white-600Alpha 60.0%

--color-white-700Alpha 70.0%

--color-white-800Alpha 80.0%

--color-white-900Alpha 90.0%

--color-white-1000Alpha 100.0%

Black Alpha Scale

--color-black-100Alpha 10.0%

--color-black-200Alpha 20.0%

--color-black-300Alpha 30.0%

--color-black-400Alpha 40.0%

--color-black-500Alpha 50.0%

--color-black-600Alpha 60.0%

--color-black-700Alpha 70.0%

--color-black-800Alpha 80.0%

--color-black-900Alpha 90.0%

--color-black-1000Alpha 100.0%

Usage Guidelines

Accessibility

• All color combinations meet WCAG 2.1 AA contrast requirements
• Text colors provide at least 4.5:1 contrast ratio against their backgrounds
• Interactive elements have sufficient color contrast in all states
• Never rely on color alone to convey important information

Implementation

• Use CSS custom properties (variables) instead of hard-coded hex values
• Semantic tokens adapt automatically when themes change
• Primitive colors remain consistent across all themes
• Always test color combinations in both light and dark contexts

Design Tokens

• All colors are available as design tokens for Figma import
• Hex values provided for design tools and documentation
• CSS variables ensure consistency between design and code
• Token names follow a consistent semantic hierarchy