Internal · Brand

Brand Guide

Last updated

Devplan's visual identity. This page is the canonical reference for logo usage, color, typography, components, and downloadable assets. Bookmark it before designing anything that needs to feel like Devplan.

The Devplan mark pairs a circular dotted glyph with the wordmark set in Geist Medium. Use the full lockup wherever there’s room. Reach for the standalone logomark only when you need a square or small footprint (favicons, app icons, social avatars).

Lockup · ink on paper
Lockup · inverse
Logomark · ink
Logomark · inverse

Clear space

Maintain padding of at least half the height of the logomark on every side. Never let other elements bleed into that zone — including section dividers, photography, or other logos.

Minimum size

  • Lockup: 80px wide on screen / 1 inch wide in print.
  • Logomark: 16px on screen / 0.25 inch in print. Below this, the dotted glyph stops reading cleanly.

Don’ts

  • Don’t stretch, skew, or rotate the lockup.
  • Don’t recolor outside the approved palette (ink #0A0A0B, white #FFFFFF, or cobalt #1F3DFF).
  • Don’t add drop shadows, gradients, glows, or stroke outlines.
  • Don’t place the ink lockup on a busy photo without a vignette or scrim that guarantees contrast.

Color

A near-binary palette: black and white surfaces, ink for type, one accent — cobalt #1F3DFF. Everything else is functional (rules, dim text, warning).

Light surfaces

Paper

#FFFFFF --paper

Paper · Tint

#FBFBFC --paper-tint

Paper · Off

#F7F7F8 --paper-off

Paper · Rule

#ECECEE / #D9D9DD --paper-rule (-strong)

Ink (foreground on light)

Ink

#0A0A0B --ink

Ink 2

#1A1A1C --ink-2

Ink · Dim

#52525A --ink-dim

Ink · Faint

#8A8A92 --ink-faint

Dark surfaces & inverse type

Night

#0A0A0B --night

Night 2

#0F0F11 --night-2

Night · Dim

#A0A0A6 --night-dim

Night · Faint

#5C5C62 --night-faint

Accent — Cobalt

The single brand accent. Reserve it for one thing per surface: a CTA, a chart highlight, an active state, a marketing motif. Don’t bathe a layout in cobalt — its job is to draw the eye.

Cobalt

#1F3DFF --accent

Cobalt · 2

#2D49FF --accent-2

Cobalt · On Dark

#5A77FF --accent-on-dark

Cobalt · Soft

rgba(31,61,255,.10) --accent-soft

Semantic

Warn

#E6A437 --warn

Typography

Two families. Geist for everything readers consume — display, headings, body. JetBrains Mono for eyebrows, labels, code, and technical metadata. Anything that should feel like it came out of a system uses the mono. Anything for human attention uses the sans.

Geist

Display Weight 300 · 400 Letter-spacing −0.035em Line-height 1.0

Everyone in sync, automatically.

H2 Weight 400 Letter-spacing −0.028em Line-height 1.05

A living map of your product.

H3 Weight 400 · 500 Letter-spacing −0.02em

What was intended. What was built.

Body Weight 400 Size 15 – 19px Line-height 1.55

Devplan reads your repos, tickets, chat, and docs continuously into a Product Graph — a real-time graph of intent vs. reality where every decision links back to source.

JetBrains Mono

Eyebrow Weight 500 Size 11px Letter-spacing .18em Uppercase

03 — What Devplan Does

Label / Pill Weight 400 · 500 Size 10.5px Letter-spacing .16em

MCP-NATIVE  ·  CONTEXT GRAPH  ·  PROVENANCE

Code Weight 400 Size 13.5px

devplan clone -c {co} -p {project} -i cursor -f {feature}

Downloads

Wordmark (full lockup)

Wordmark · Ink ↓ SVG · vector Wordmark · White ↓ SVG · vector Wordmark · Ink ↓ PNG · 512 wide Wordmark · Ink ↓ PNG · 1024 wide Wordmark · White ↓ PNG · 1024 wide

Logomark (glyph only)

Logomark · Ink ↓ SVG · vector Logomark · White ↓ SVG · vector Logomark · Ink ↓ PNG · 256 wide Logomark · Ink ↓ PNG · 512 wide Logomark · White ↓ PNG · 512 wide

Favicons & social

Favicon 32 ↓ PNG · 32 × 32 Favicon 16 ↓ PNG · 16 × 16 Apple touch icon ↓ PNG · 180 × 180 Open Graph image ↓ PNG · 1200 × 630 Open Graph source ↓ SVG · editable

Need an asset that isn't here, or have a brand question? Email info@devplan.com — keep the canonical reference on this page rather than spinning up shadow versions.