Brand guide and downloadable assets

01 · Logo

Logo

Use the full lockup when space allows. Use the logomark for favicons, app icons, social avatars, and other small or square placements.

Devplan

Lockup · on light

Devplan

Lockup · on dark

Logomark · on light

Logomark · on dark

Clear space

Keep at least half the logomark's height clear on every side. Do not let type, photography, or dividers enter that space.

Minimum size

Keep the lockup at least 80px wide on screen and the logomark at least 16px. Below that, the detail stops reading cleanly.

Do not

Do not stretch, rotate, outline, add effects, or recolor the logo outside the approved ink, white, and cobalt palette.

02 · Color

Colors

Use black and white for most surfaces. Use cobalt for accents and interactive elements. Click a swatch to copy its value.

Light surfaces

Ink and dark surfaces

Cobalt and semantic color

03 · Typography

Typography

Use the same typography across the product and brand: Geist for headings, body text, labels, and controls. Reserve Geist Mono for code and technical values. Keep the existing logo artwork.

Geist · DisplayRegular 400 · responsive size

Display heading

Geist · HeadingRegular 400 · responsive size

Section heading

Geist · ReadingRegular 400 · 16px / 24px

Use for paragraphs, introductions, and other text people read at length.

Geist · Compact bodyRegular 400 · 14px / 20px

Use for short descriptions and table cells.

Geist · ControlsMedium 500 · 14px / 20px

Navigation · Buttons · Form labels

Geist · MetadataRegular 400 or medium 500 · 12px / 16px

SVG · vector · Last updated October 11

Geist · Small headingSemibold 600 · 16px / 24px (14px / 20px in compact layouts)

Download options

Geist Mono · Code and technical valuesRegular 400 · 14px / 20px (12px / 16px for short values)

--accent-dark: #5A77FF;

Sizes are shown at the default browser text size. Use relative units and let text wrap. Keep 12px text for brief secondary information, not paragraphs or actions.

Use at least 4.5:1 text contrast (3:1 for qualifying large text), and preserve content and controls at 200% enlargement.

These are design defaults, not WCAG minimum font sizes.

04 · Downloads