Home
// Brand Guidelines

The CMD Brand System.

Logo, color, typography, layout, motifs, and voice — grounded in the live product design tokens. The code is the source of truth; when this page and the code disagree, the code wins.

LogoColorTypeLayoutVoice
// 02 — Color

Monochrome, Plus One Green.

Neutrals carry the layout. Green is reserved for signal — active states, the live indicator, the period on a headline. Use it sparingly and it stays loud. OKLCH values are canonical.

Core Tokens

Light
Dark

Background

--background

Light
oklch(1 0 0)
Dark
oklch(0.145 0 0)

Page background

Light
Dark

Foreground

--foreground

Light
oklch(0.145 0 0)
Dark
oklch(0.985 0 0)

Primary text

Light
Dark

Primary

--primary

Light
oklch(0.532 0.157 131.589)
Dark
oklch(0.768 0.233 130.85)

Accent / signal

Light
Dark

Muted FG

--muted-foreground

Light
oklch(0.42 0 0)
Dark
oklch(0.708 0 0)

Secondary text

Light
Dark

Border

--border

Light
oklch(0.922 0 0)
Dark
oklch(1 0 0 / 10%)

Hairlines

Light
Dark

Destructive

--destructive

Light
oklch(0.577 0.245 27.325)
Dark
oklch(0.704 0.191 22.216)

Errors only

Signal Greens

#9DFF00

Logo accent block

#f1ff57

Electric lime — contact field

#d7ff45

Lime — accent rules

#061006

Deep green-black panel

#041003

Deepest green-black

#080A08

Icon field

// 03 — Typography

Mono Is The Default Voice.

JetBrains Mono carries headings, UI, labels, and numerals. Geist (sans) is the exception, used only for readable body copy. That inversion is what gives CMD its console feel.

// Eyebrow

// Platform Builder

JetBrains Mono · uppercase · tracking-[0.26em] · semibold

Display / H1

Building Platforms.

Mono · uppercase · medium · tracking-[0.12em] · green period

Section / H2

What The Platform Runs

Mono · uppercase · medium · tracking-[0.14em]

Body

Platforms that hold up under audit, connect cross-team workflows, and keep the context behind decisions intact.

Geist (sans) · sentence case · leading-7

Numerals

01 / 02 / 03

Mono · leading-zero indices

// 04 — Layout & Motifs

Sharp, Hairlined, Operational.

Sharp Corners

Panels use rounded-none. Soft corners are the exception.

Hairline Grids

gap-px over a border-colored field draws 1px structural lines.

Grid Texture

Faint CSS grid overlays (28–42px) for the blueprint feel.

Accent Square

size-2 bg-primary marks active points and bullets.

Signature Surface

2px Border + 16px Offset Shadow

Reserved for important surfaces — the contact card, the approach panel. Combined with the Phosphor Plus glyph and the live ping below.

Live
// 05 — Voice & Tone

An Operator Briefing Peers.

Precise, grounded, confident without hype. Eyebrows use the // label syntax. Headlines are uppercase and end on a confident green period.

0101

Operational Vocabulary

Signals, briefs, decisions, tasks, watchlists, sources, intake, escalation, decision gates, provenance.

0202

Concrete Over Abstract

“Platforms that hold up under audit” beats “best-in-class solutions.” Specificity reads as credibility.

0303

Earned, Not Boastful

Authority comes from operating experience, not adjectives. No hype, no exclamation marks, no emoji.

0404

Human-In-The-Loop

AI assists briefing and routing; humans own approvals and decisions. Copy always preserves human control.

Copy Examples

Headline

Avoid

AI-Powered Solutions For The Future

Use

Platforms That Hold Up Under Audit.

CTA

Avoid

Unlock Your Potential Today

Use

Start The Workflow Review

Proof

Avoid

Best-In-Class Enterprise Innovation

Use

Every decision keeps its source, owner, and approval path.

// 06 — Quick Rules

Do & Don't.

Do

  • Set headings in mono, uppercase, with letter-spacing
  • Reserve green for signal — active states, the headline period, accent squares
  • Use sharp corners and hairline borders for structure
  • Honor prefers-reduced-motion on every animation
  • Speak like an operator briefing peers

Don't

  • Set body copy in mono or headings in sans
  • Use green as decorative fill behind content
  • Recolor or relocate the logo accent block
  • Stack buzzwords or use defence / military framing
  • Add drop shadows or outlines to the wordmark