< ZERO

PALETTE

BRAND COLORS, TYPOGRAPHY, AND UI SAMPLES

Dark / Light Comparison

Both themes side by side. Dark is the default. Light preserves the brand through monospace type, sharp edges, and the same accent hue family with adjusted contrast.

Dark
Light

Background Variants

The default backgrounds (shown above) were chosen from a set of proposals. These "Blue Charcoal" / "Cool Blue-Gray" variants shift the hue toward neutral blue with lower saturation. Available as alternative options. See issue #1 for the full history.

Dark Default
bg #14102a · L11% · hue 249° · sat 45%
ZERO
The agent wakes up, reads its instructions, and gets to work. A cyan link in the text.
Sample Card
Description text on the panel surface.
TypeScript Agent
void
panel
border
Dark Variant: Blue Charcoal
bg #161622 · L11% · hue 240° · sat 21%
ZERO
The agent wakes up, reads its instructions, and gets to work. A cyan link in the text.
Sample Card
Description text on the panel surface.
TypeScript Agent
void
panel
border
Light Default
bg #eae8f2 · L93% · hue 252° · sat 28%
ZERO
The agent wakes up, reads its instructions, and gets to work. A cyan link in the text.
Sample Card
Description text on the panel surface.
TypeScript Agent
screen
panel
border
Light Variant: Cool Blue-Gray
bg #ecedf3 · L94% · hue 231° · sat 23%
ZERO
The agent wakes up, reads its instructions, and gets to work. A cyan link in the text.
Sample Card
Description text on the panel surface.
TypeScript Agent
screen
panel
border

Core Colors

These adapt to the current theme. Toggle [lt]/[dk] to see them change.

Backgrounds

Void
--bg-void
Panel
--bg-panel

Text

Bright
--text-bright
Body
--text-body
Muted
--text-muted
Dim
--text-dim

Borders

Border
--border
Border Hover
--border-hover

Accent Colors

Magenta headings, primary accent
Cyan links, secondary accent
Green status, active, online
Purple tertiary, keywords
Pink inline code text
Amber warnings, attention
Crimson errors, danger

Typography

JetBrains Mono everywhere. No sans-serif, no serif.

HEADING XL / 800 / MAGENTA
ZERO
HEADING LG / 700 / BRIGHT
Autonomous agent
HEADING SM / 700 / MUTED / UPPERCASE
Section Title
BODY / 400 / BODY COLOR
The agent wakes up, reads its instructions, and gets to work. No prompts needed. It checks what changed overnight, picks the next task, and starts building.
MUTED / 400 / MUTED COLOR
Secondary information, descriptions, and supporting text that doesn't need to grab attention.
DIM / 400 / DIM COLOR
Timestamps, meta information, tertiary labels.

Code

Inline Code

Use env.AI.run() to call the model. The InboxDO class handles persistence. Set NODE_ENV=production before deploying.

Code Block

export class InboxDO extends DurableObject {
  async fetch(request: Request) {
    // Route to the right handler
    const url = new URL(request.url);
    return this.router.handle(url.pathname);
  }
}

Links

Default link: like this one (cyan, glow on hover)
Visited links look the same. No purple shift.
Navigation link: < BACK (dim, cyan on hover)

UI Elements

Status Indicators

Live
Warning
Error

Card

Sample Project

A description of something being built. Hover to see the border and glow transition.

TypeScript Cloudflare SQLite

Selection

Select this text to see the selection color. Dark theme uses a cyan tint. Light theme uses a magenta tint.