Brand System

Color system

Palette, type scale, controls, and logo treatment.

/brand.css
Primary#4A90C2
Secondary#C1674B
Surface#F3F4F6
Neutral#a5836a

Headline

Aa

Body

Spawn, coordinate, and connect AI agents in real-time from TypeScript or Python.

Primary-color logo

The mark has two colors. The wordmark is white.

#75B8E2#3F6A86

Theme

Agent Relay

The default public brand: airy blue, crisp ink, clean UI.

bg

Page background

#08111A

fg

Main text

#EDF4FB

fg-muted

Secondary text

#A8B8C8

primary

Primary brand color (500)

#74B8E2

primary-hover

Button hover (600)

#94CBEF

primary-ink

Deep blue text accent (800)

#234969

secondary

Secondary brand color (500)

#C1674B

surface

Panels and code blocks

#0F1B29

card-bg

Raised cards

rgba(15, 27, 41, 0.84)

Shared Accents

Brand-supporting colors

These show up in the logo, illustrations, terminal chrome, and product demo surfaces.

Logo primary

Primary icon mark

#4A90C2

Logo secondary

Trailing icon facet

rgba(74, 144, 194, 0.5)

Warm accent

Secondary brand color (500)

#C1674B

Warm accent deep

Secondary hover (600)

#B45542

Warm accent soft

Secondary highlight (400)

#CD866A

Status red

Terminal chrome

#FF5F57

Status yellow

Terminal chrome

#FEBC2E

Status green

Terminal chrome

#28C840

Controls

Buttons in every state

How brand tokens render across primary, secondary, ghost, and destructive controls.

Primary

Default
Hover
Active
Disabled

Secondary

Default
Hover
Active
Disabled

Ghost

Default
Hover
Active
Disabled

Destructive

Default
Hover
Active
Disabled

Badges

Status and label variants.

Active
Secondary
Outline

Input and card

Search field and a standard shadcn card shell.

Component Preview

Common UI surfaces

This is the fastest way to judge whether the theme feels usable, not just attractive.

Relay Ready
Live Preview

Primary actions

Buttons, tags, and neutral containers using the semantic palette.

Observer Sessions

12,543

Muted data colors derive from the theme palette.

Planner

Split the rollout into API, UI, and review lanes.

Builder

Theme tokens are wired. Shipping the palette page next.

Message #brand-review
// semantic token example
const palette = {
  primary: '#74B8E2',
  surface: '#0F1B29',
};
export default palette;

Copy/Paste

Theme snippet

Compact version of the theme tokens for quick copy-paste into another project.

:root {
  /* Surfaces */
  --bg: #08111A;
  --bg-elevated: rgba(12, 20, 30, 0.82);
  --surface: #0F1B29;
  --surface-strong: #132234;
  --section-bg: #0B141F;

  /* Text */
  --fg: #EDF4FB;
  --fg-muted: #A8B8C8;
  --fg-faint: #77879A;

  /* Primary */
  --primary: #74B8E2;
  --primary-hover: #94CBEF;
  --primary-bg: #3B789F;
  --primary-fg: #FFFFFF;

  /* Secondary */
  --secondary: #C1674B;
  --secondary-bg: rgba(193, 103, 75, 0.14);
  --secondary-fg: #F0B39F;

  /* Lines and cards */
  --line: rgba(116, 184, 226, 0.18);
  --card-bg: rgba(15, 27, 41, 0.84);
  --card-border: rgba(116, 184, 226, 0.16);
  --card-hover-border: rgba(116, 184, 226, 0.32);

  /* Code */
  --code-bg: #0A182C;
  --code-fg: #DBE5F0;
  --inline-code-bg: rgba(116, 184, 226, 0.14);
  --inline-code-fg: #C6E6FA;

  /* Accents */
  --note-bg: rgba(116, 184, 226, 0.1);
  --link-underline: rgba(116, 184, 226, 0.35);
  --btn-bg: #3B789F;
  --btn-hover: #4D8FB8;
}