Skip to content
cap.so logo

Cap

cap.so

“Cap embodies a developer-centric, utilitarian aesthetic that prioritizes clarity and speed over decorative flair. The brand feels like a trusted, open-source tool: efficient, transparent, and technically precise, yet approachable through its use of soft blues and generous whitespace.”

utilitarian
developer-first
transparent
efficient
clean
open-source
trustworthy

Color Palette

Colors

#005cb1

primary

#2eb4ff

secondary

#ffffff

background

#ffffff

text

#2eb4ff

accent

#e4e4e4

border

Typography

Fonts

defaultFont

body
400
500
self-hosted

defaultFont Fallback

Instrument Sans

heading
400
self-hosted

Instrument Sans Fallback, ui-sans-serif, system-ui, sans-serif

DM Mono

mono
400
self-hosted

DM Mono Fallback, ui-monospace, monospace

Instrument Sans

body
400
self-hosted

Instrument Sans Fallback

Geist

body
400
500
self-hosted

Geist Fallback, Geist Sans, -apple-system, system-ui, sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

Components

Design System

Login
outline
10px
#202020
See how Cap works
secondary
10px
#ffffff#111111
element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 17, 17, 0.043) 0px 0px 0px 1px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 17, 17, 0.04) 0px 1px 2px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(63, 127, 205, 0.65) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.8) 0px 2px 3px -1px inset, rgba(61, 119, 194, 0.2) 0px -1px 1px 0px inset, rgba(61, 119, 194, 0.2) 0px 1px 2px 0px, rgba(120, 178, 240, 0.55) 0px 10px 24px -10px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(9, 12, 20, 0.6) 0px 10px 28px -8px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(252, 252, 252) 0px 0px 0px 1px, rgb(94, 177, 239) 0px 0px 0px 2px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 1px 3px 0px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

element
box-shadow

rgb(229, 231, 235) 0px 0px 0px 2px, rgb(107, 114, 128) 0px 0px 0px 4px

element
box-shadow

rgba(255, 255, 255, 0.4) 0px 1.5px 0px 0px inset

element
box-shadow

rgba(9, 12, 20, 0) 0px 0px 24px 9999px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(9, 12, 20, 0.65) 0px 28px 70px -18px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 17, 17, 0.35) 0px 30px 60px -40px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 17, 17, 0.04) 0px 0px 0px 1px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(16, 24, 40, 0.5) 0px 8px 20px -10px

button
box-shadow

rgba(0, 0, 0, 0.22) 0px 12px 32px 0px, rgba(0, 0, 0, 0.1) 0px 2px 8px 0px

button
box-shadow

rgb(252, 252, 252) 0px 0px 0px 1px, rgb(59, 130, 246) 0px 0px 0px 3px

gradient

linear-gradient(rgb(245, 250, 254) 0%, rgb(227, 239, 251) 52%, rgb(207, 226, 246...

gradient

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' he...

Voice & Tone

Personality

Visual Energy

6/10

Design Era

contemporary-minimal

Emotional Tone

competent-transparent

Target Audience

Developers, product managers, and technical creators who value efficiency, open-source transparency, and clean UI tools.

Comparable Brands

Linear
Vercel
Notion
Figma

Brand Rules

Dos & Don'ts

Do

  • Use Instrument Sans (400 weight) for all headings in sentence-case, and Geist (400/500 weight) or default self-hosted font for body copy with a fixed 24px line-height.
  • Apply DM Mono (400 weight) exclusively for all code snippets, technical data, and monospaced elements to reinforce the developer-first identity.
  • Style primary action buttons as outlined elements with #202020 text, #202020 border, 10px border-radius, and 0px 20px padding; avoid filled backgrounds for primary CTAs to maintain a lightweight feel.
  • Use the primary brand color #005cb1 for key interactive states and links, and #2eb4ff for secondary accents or highlights, ensuring high contrast against the #ffffff background.
  • Implement subtle, multi-layered shadows on cards and floating elements using rgba(0,0,0,0) base layers and rgba(63,127,255,0.2) for depth, avoiding harsh drop shadows.
  • Utilize soft linear gradients (e.g., from #f5fafb to #cfe2f6) for background sections or hero areas to add depth without clutter, keeping the overall interface flat and clean.
  • Use heavy emoji usage in marketing copy to inject personality, but strictly avoid exclamations in headings and body text to maintain a matter-of-fact tone.
  • Maintain a strict 2px base spacing unit for all margins and paddings, ensuring consistent rhythm across the interface.
  • Use pill-shaped (9999px border-radius) elements for tags, badges, or small interactive components, while keeping cards and buttons at 10px radius.

Don't

  • Do not use title case for headings; always use sentence-case to align with the brand's direct, technical voice.
  • Do not use serif fonts anywhere in the interface; the brand is strictly sans-serif (Instrument Sans/Geist) with mono accents.
  • Do not use filled blue buttons for primary actions; the brand prefers outlined buttons with dark text to reduce visual weight.
  • Do not use exclamations in copy; the tone is enthusiastic but matter-of-fact, avoiding hype-driven punctuation.
  • Do not use sharp corners (0px or 4px radius) for UI elements; the brand consistently uses 10px for buttons/cards and 6px for small elements.
  • Do not use complex or heavy drop shadows; shadows must be subtle, multi-layered, and low-opacity to maintain a clean aesthetic.
  • Do not use vibrant, saturated colors outside the blue spectrum; the palette is limited to blues (#005cb1, #2eb4ff) and neutrals (#202020, #111111).
  • Do not use jargon-heavy language; keep vocabulary simple and accessible, even when addressing technical audiences.

Design Assets

Visual Elements

Design asset
svg98×96
Design asset
svg709×858
Design asset
svg93×93
Design asset
webp1360×765
Design asset
webp48×48

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/cap.so \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free