Colors

Colors

The Composio color system. Click any value to copy it to your clipboard.

agent.json

The brand is adaptive — it flips with the surface. On light, the FOR YOU mode, brand is sky blue (#51a2ff). On dark, the DEV mode, it deepens to #0007cd. That flip is the signature; the swatches below show both values side by side.

The adaptive blue and the surfaces below are the core system for product UI. For expressive, broad-brand moments — covers, hero art, social — reach for the gradients at the bottom.

Brand & Surfaces

For You
Dev
Brand
FOR YOU #51a2ff
DEV #0007cd

Primary brand accent — adaptive (sky blue on light, deep blue on dark)

For You
Dev
Brand Hover
FOR YOU #3590f5
DEV #0009f0

Brand hover state

For You
Dev
Brand Active
FOR YOU #1f7ee8
DEV #0005a8

Brand pressed/active state

For You
Dev
Background
FOR YOU #f6f6f6
DEV #0f0f0f

Page background — off-white / warm near-black (never pure)

For You
Dev
Card
FOR YOU #ffffff
DEV #1e1e1e

Card and code surface

For You
Dev
Popover
FOR YOU #fafafa
DEV #2a2a2a

Popover / overlay surface

For You
Dev
Foreground
FOR YOU #0f0f0f
DEV #ffffff

Primary text

For You
Dev
Border
FOR YOU #eaeaea
DEV #2c2c2c

Hairline borders

Semantic

Reserved for their literal meaning — never use as a generic accent. Each value is mode-paired (FOR YOU / DEV).

For You
Dev
Destructive
oklch(0.577 0.215 27.3)
oklch(0.637 0.208 25.3)

Errors, destructive actions

For You
Dev
Success
oklch(0.546 0.16 155.8)
oklch(0.648 0.17 155.8)

Success, confirmation

For You
Dev
Warning
oklch(0.666 0.16 75)
oklch(0.758 0.163 75)

Warnings, caution

Persona Accents

Specialty — outside the brand. Used only to distinguish personas on the learning surface; not part of general UI color.

Orange
#FF8C42
Green
#10B981
Silver
#A0A0A0
Purple
#C7A2FF
Brand Blue
#51a2ff

Gradients

Expressive, broad-brand moments — covers, hero art, social. The Core Gradient is the default; click any value to copy the CSS.

Core Gradient
linear-gradient(135deg, #FDFFC2, #00FFFF, #0089FF)
Deep Blue
linear-gradient(135deg, #02056A, #0007CD)
Blue to Cyan
linear-gradient(135deg, #0007CD, #00FFFF)
Mint to Cyan
linear-gradient(135deg, #3FFFDD, #00FFFF)
Warm Spectrum
linear-gradient(135deg, #FDFFC2, #FFA6AC)
Full Spectrum
linear-gradient(135deg, #02056A, #0007CD, #95A5FD, #3FFFDD, #00FFFF, #FDFFC2, #FFA6AC)