CalliopeAI Color Palette

Calliope Integration: This component is integrated into the Calliope AI platform. Some features and configurations may differ from the upstream project.

Official Brand Colors

CalliopeAI uses a carefully curated color palette that combines vibrant cyans, deep purples, and sophisticated dark blues to create a modern, professional development environment.

🎨 Primary & Accent Colors

Our hero colors that define the CalliopeAI brand identity.

Hex WAIIDE	Name	Usage
`#0AF0CE`	Electric Cyan	Primary brand accent, highlights
`#3FF1EF`	Bright Cyan	Interactive elements, links
`#00E5B8`	Mint Cyan	Success states, positive actions
`#00E0E4`	Pure Cyan	Main accent, borders, icons
`#00D9A7`	Seafoam	Secondary accents
`#00B1B4`	Deep Cyan	Hover states, depth

🟣 Purple Spectrum

Our secondary color family for depth and sophistication.

Hex WAIIDE	Name	Usage
`#5A4DC7`	Royal Purple	Debugging, special states
`#4B3AB0`	Deep Purple	Focus indicators
`#8786DA`	Lavender	Subtle highlights
`#A9A8E5`	Pale Lavender	Background accents
`#EAEAF9`	Ghost Lavender	Light text on purple

🔵 Cool Tones & Neutrals

Light accent colors for highlights and subtle UI elements.

Hex WAIIDE	Name	Usage
`#D6FCF4`	Ice Cyan	Terminal text, light accents
`#D9FCFA`	Frost	Hover backgrounds
`#97F6E1`	Mint Frost	Selection highlights
`#9EF7F3`	Light Cyan	Active selections

⚫ Dark Neutrals

Our foundation colors for backgrounds and UI structure.

Hex WAIIDE	Name	Usage
`#6F80A0`	Steel Blue	Muted text, disabled states
`#2D4675`	Midnight Blue	Sidebar background
`#1F335D`	Deep Ocean	Editor background, activity bar
`#162345`	Abyss	Status bar, terminal, darkest UI

⚪ Light Neutrals

For text and light UI elements.

Color	Hex WAIIDE	Name	Usage
	`#E6E9EE`	Cloud	Main text color, light elements

Theme Applications

Pergamon Blue Theme

The default CalliopeAI theme uses these mappings:

{
  "statusBar.background": "#162345",          // Abyss
  "statusBar.foreground": "#00E0E4",          // Pure Cyan
  "activityBar.background": "#1F335D",        // Deep Ocean
  "activityBar.foreground": "#00E0E4",        // Pure Cyan
  "sideBar.background": "#2D4675",            // Midnight Blue
  "sideBar.foreground": "#E6E9EE",            // Cloud
  "editor.background": "#1F335D",             // Deep Ocean
  "editor.foreground": "#E6E9EE",             // Cloud
  "terminal.background": "#162345",           // Abyss
  "terminal.foreground": "#D6FCF4"            // Ice Cyan
}

Usage Guidelines

Primary Actions: Use Pure Cyan (#00E0E4) for main CTAs and important UI elements
Success States: Use Mint Cyan (#00E5B8) for positive feedback
Focus/Debug: Use Royal Purple (#5A4DC7) for debugging and focus states
Text Hierarchy:
- Primary text: Cloud (#E6E9EE)
- Secondary text: Steel Blue (#6F80A0)
- Accent text: Pure Cyan (#00E0E4)
Backgrounds: Follow the depth hierarchy from Abyss → Deep Ocean → Midnight Blue

Accessibility Notes

Ensure a contrast ratio of at least 4.5:1 for normal text
Use Pure Cyan (#00E0E4) on dark backgrounds only
Test color combinations for WCAG compliance
Provide alternative indicators beyond color alone

Color Palette Exports

CSS Variables

:root {
  /* Primary & Accent */
  --calliope-electric-cyan: #0AF0CE;
  --calliope-bright-cyan: #3FF1EF;
  --calliope-mint-cyan: #00E5B8;
  --calliope-pure-cyan: #00E0E4;
  --calliope-seafoam: #00D9A7;
  --calliope-deep-cyan: #00B1B4;
  
  /* Purple Spectrum */
  --calliope-royal-purple: #5A4DC7;
  --calliope-deep-purple: #4B3AB0;
  --calliope-lavender: #8786DA;
  --calliope-pale-lavender: #A9A8E5;
  --calliope-ghost-lavender: #EAEAF9;
  
  /* Cool Tones */
  --calliope-ice-cyan: #D6FCF4;
  --calliope-frost: #D9FCFA;
  --calliope-mint-frost: #97F6E1;
  --calliope-light-cyan: #9EF7F3;
  
  /* Dark Neutrals */
  --calliope-steel-blue: #6F80A0;
  --calliope-midnight-blue: #2D4675;
  --calliope-deep-ocean: #1F335D;
  --calliope-abyss: #162345;
  
  /* Light Neutrals */
  --calliope-cloud: #E6E9EE;
}

JavaScript/TypeScript

export const CalliopePalette = {
  primary: {
    electricCyan: '#0AF0CE',
    brightCyan: '#3FF1EF',
    mintCyan: '#00E5B8',
    pureCyan: '#00E0E4',
    seafoam: '#00D9A7',
    deepCyan: '#00B1B4',
  },
  purple: {
    royal: '#5A4DC7',
    deep: '#4B3AB0',
    lavender: '#8786DA',
    paleLavender: '#A9A8E5',
    ghostLavender: '#EAEAF9',
  },
  cool: {
    iceCyan: '#D6FCF4',
    frost: '#D9FCFA',
    mintFrost: '#97F6E1',
    lightCyan: '#9EF7F3',
  },
  dark: {
    steelBlue: '#6F80A0',
    midnightBlue: '#2D4675',
    deepOcean: '#1F335D',
    abyss: '#162345',
  },
  light: {
    cloud: '#E6E9EE',
  },
};

Calliope WAIIDE Agent Configuration Guide CalliopeAI Extensions Build System