Dark Mode

# Design System
Inspired by Composio

Auto-generated design token catalog from DESIGN.md — Dark Mode

01 / Color Palette

## Color Palette & Roles

### Primary

Composio Cobalt
#0007cd
Core brand color for high-priority interactive elements

### Secondary & Accent

Electric Cyan
#00ffff
Attention-grabbing accent for glows and highlights
Signal Blue
#0089ff
Button borders and interactive focus states
Ocean Blue
#0096ff
CTA button accent borders

### Surface & Background

Pure Black
#000000
Dark mode page background
Void Black
#0f0f0f
Standard page background
Charcoal
#2c2c2c
Secondary button borders and dividers

### Neutrals & Text

Pure White
#ffffff
Primary headings and high-emphasis text
Muted Smoke
#444444
De-emphasized body text, metadata
Ghost White
rgba(255,255,255,0.6)
Secondary body text and link labels
Whisper White
rgba(255,255,255,0.5)
Tertiary button text and placeholders
Phantom White
rgba(255,255,255,0.2)
Subtle button backgrounds and receded UI

### Border System

Border Mist 12
rgba(255,255,255,0.12)
Prominent card edges, content separators
Border Mist 10
rgba(255,255,255,0.10)
Standard container borders
Border Mist 06
rgba(255,255,255,0.06)
Section dividers, subtle groupings
Border Mist 04
rgba(255,255,255,0.04)
Faintest atmospheric separation

02 / Typography Scale

## Typography Rules

Display Hero
Display / Hero — 64px / 400 / 0.87 / normal — abcDiatype
Section Heading
Section Heading — 48px / 400 / 1.00 / normal — abcDiatype
Sub-heading Large
Sub-heading Large — 40px / 400 / 1.00 / normal — abcDiatype
Sub-heading
Sub-heading — 28px / 400 / 1.20 / normal — abcDiatype
Card Title
Card Title — 24px / 500 / 1.20 / normal — abcDiatype
Feature Label
Feature Label — 20px / 500 / 1.20 / normal — abcDiatype
Body Large
Body Large — 18px / 400 / 1.20 / normal — abcDiatype
Body / Button Text
Body / Button — 16px / 400 / 1.50 / normal — abcDiatype
Body Small — used for longer-form content blocks
Body Small — 15px / 400 / 1.63 / normal — abcDiatype
Caption text for descriptions and metadata
Caption — 14px / 400 / 1.63 / normal — abcDiatype
Label Text
Label — 13px / 500 / 1.50 / normal — abcDiatype
TAG / OVERLINE
Tag / Overline — 12px / 500 / 1.00 / 0.3px / uppercase — abcDiatype
const agent = composio.create({ tools: ["github", "slack"] })
Code Body — 16px / 400 / 1.50 / -0.32px — JetBrains Mono
npx composio-cli init --framework langchain
Code Small — 14px / 400 / 1.50 / -0.28px — JetBrains Mono
import { Composio } from "composio-core"
Code Caption — 12px / 400 / 1.50 / -0.28px — JetBrains Mono
CODE OVERLINE
Code Overline — 14px / 400 / 1.43 / 0.7px / uppercase — JetBrains Mono
CODE MICRO TAG
Code Micro — 11px / 400 / 1.33 / 0.55px / uppercase — JetBrains Mono

03 / Button Variants

## Buttons

Primary / White Fill
Cyan Accent CTA
Ghost / Signal Blue
Ghost / Charcoal
Phantom

04 / Card Examples

## Cards & Containers

Standard Card

### Border Mist 08

Standard content card with subtle white border at 8% opacity on pure black surface. Deeper darkness for the dark mode variant.

Brutalist Shadow

### Hard Offset 4px

Hard-offset shadow intensified to 40% opacity on pure black. The brutalist personality cuts deeper against the absolute dark.

Floating + Glow

### Cyan Glow Halo

Soft diffuse shadow at 70% opacity with restrained cyan glow. The deeper black makes the glow more pronounced.

05 / Form Elements

## Inputs & Forms

Default Input
Focus State
Error State
Invalid API key format
Textarea

06 / Spacing Scale

## Spacing System

Base unit: 8px. Scale builds from 1px to 40px.

1px
2px
4px
6px
8px
10px
12px
14px
16px
18px
20px
24px
30px
32px
40px

07 / Border Radius Scale

## Border Radius

0px
Sharp / None
2px
Nearly squared
4px
Subtly rounded
37px
Pill-shaped
9999px
Full round

08 / Elevation & Depth

## Depth & Elevation

Flat
No shadow, no border. Page background and inline text.
Level 0
Contained
Border Mist 04. Background groupings, subtle sections.
Level 1
Card
Border Mist 08. Standard content cards, code blocks.
Level 2
Brutalist
Hard offset shadow (4px 4px, 40% black). Distinctive feature highlights.
Level 3
Floating
Soft diffuse shadow (0px 8px 32px, 70% black). Modals, overlays.
Level 4