<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cap.so -->
<!-- Extracted: 2026-09-06T17:49:32.567Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Cap"
description: "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."
colors:
  primary: "#005cb1"
  secondary: "#2eb4ff"
  tertiary: "#2eb4ff"
  surface: "#ffffff"
  on-surface: "#ffffff"
  border: "#e4e4e4"
typography:
  display-lg:
    fontFamily: "Instrument Sans"
    fontSize: "74px"
    fontWeight: "400"
    lineHeight: "72.52px"
    letterSpacing: "-2.22px"
  headline-lg:
    fontFamily: "Instrument Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "52px"
  headline-md:
    fontFamily: "Instrument Sans"
    fontSize: "42px"
    fontWeight: "400"
    lineHeight: "43.68px"
    letterSpacing: "-1.26px"
  body-md:
    fontFamily: "defaultFont"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "6px"
  md: "10px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#202020"
    rounded: "10px"
    padding: "0px 20px"
    fontSize: "15.5px"
    fontWeight: "500"
    borderColor: "#202020"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#111111"
    rounded: "10px"
    padding: "0px 24px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#d3dce6"
    borderWidth: "1px"
---

# Cap — Design System

## Overview

The Cap design system embodies a utilitarian aesthetic rooted in developer-centric efficiency, prioritizing clarity and speed above all decorative considerations. It functions as the digital interface for a trusted, open-source tool: transparent, technically precise, and rigorously structured. The visual language is clean and uncluttered, leveraging generous whitespace to reduce cognitive load and allow content to breathe. This approach mirrors the high-performance standards of comparable brands like Linear, Vercel, and Figma, where interface friction is minimized to accelerate workflow. The emotional register is calm and confident, projecting the stability of The Sage and the constructive energy of The Creator. Users should feel they are interacting with a robust, reliable instrument rather than a consumer product. The design explicitly rejects ornamental trends, skeuomorphism, and excessive animation. It does not seek to entertain or distract; it exists solely to facilitate code creation and management with maximum transparency. Every element serves a functional purpose, reinforcing the brand’s commitment to efficiency and technical integrity.

**Key characteristics:**

- Vibe — utilitarian, developer-first, transparent, efficient, clean, open-source
- Archetypes — The Sage, The Creator
- Comparable to — Linear, Vercel, Notion, Figma
- 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.
- Visual energy — 6/10 (moderate)

## Colors

The palette centers on #005cb1, a deep, authoritative blue that signals trust and technical precision without the aggression of stark black. This primary hue anchors the interface, providing clear visual hierarchy for interactive elements and data emphasis. The #ffffff surface color ensures maximum contrast and readability, reinforcing the brand’s commitment to transparency and clarity. By limiting the color spectrum to this core duo, the system eliminates visual noise, allowing the utilitarian structure of the UI to remain the focal point. This restrained approach mirrors the efficiency of open-source tools, where every pixel must justify its presence through function rather than decoration.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#005cb1` | Cobalt |
| secondary | `#2eb4ff` | Deep Sky Blue |
| accent / tertiary | `#2eb4ff` | Deep Sky Blue |
| background | `#ffffff` | White |
| text | `#ffffff` | White |
| border | `#e4e4e4` | Gainsboro |

## Typography

The type system pairs Instrument Sans for body text with DM Mono for code and data, creating a distinct yet harmonious visual rhythm. Instrument Sans offers a clean, modern sans-serif structure that ensures high legibility across dense interfaces, while DM Mono provides the technical authenticity expected by developers. This combination communicates a dual identity: approachable and clear for general interaction, yet precise and technical for code-heavy tasks. The hierarchy is straightforward, relying on weight and size rather than stylistic flourishes to guide the eye. This utilitarian choice reinforces the brand’s developer-first ethos, ensuring that information is processed quickly and accurately without aesthetic distraction.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| defaultFont | body | self-hosted | 400, 500 |
| Instrument Sans | heading | self-hosted | 400 |
| DM Mono | mono | self-hosted | 400 |
| Instrument Sans | body | self-hosted | 400 |
| Geist | body | self-hosted | 400, 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Instrument Sans | 74px | 400 | 72.52px | -2.22px |
| Heading 2 | Instrument Sans | 16px | 400 | 52px | — |
| Heading 3 | Instrument Sans | 42px | 400 | 43.68px | -1.26px |
| Body | defaultFont | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — DM Mono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `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 | `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 | `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 | `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 | `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 | `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 | `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 | `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 | `rgb(229, 231, 235) 0px 0px 0px 2px, rgb(107, 114, 128) 0px 0px 0px 4px` |
| element | `rgba(255, 255, 255, 0.4) 0px 1.5px 0px 0px inset` |
| element | `rgba(9, 12, 20, 0) 0px 0px 24px 9999px` |
| element | `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` |

### Gradients

- `linear-gradient(rgb(245, 250, 254) 0%, rgb(227, 239, 251) 52%, rgb(207, 226, 246) 100%)`
- `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")`

## Shapes

Border-radius scale:

- `sm` — 6px
- `md` — 10px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#202020`
- Radius — `10px`
- Padding — `0px 20px`
- Font size — `15.5px`
- Font weight — `500`
- Border — `1px solid #202020`
- Sample copy — "Login"

**Secondary**

- Background — `#ffffff`
- Text — `#111111`
- Radius — `10px`
- Padding — `0px 24px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #d3dce6`
- Sample copy — "See how Cap works"

## Do's and 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.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 8/10 | casual |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 6 words
- Vocabulary — simple
- Jargon — some
- CTA style — short, imperative action verbs
- Rhetorical devices — repetition, tricolon, parallelism

### Sample copy

> Record. Edit. Share.

> Screenshots that look designed

> One link does the rest

> The open source alternative to Loom

> Full quality, edited before you share

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/cap.so) | 100% |
| favicon | — | png | [link](brands/cap.so/logo-0.png) | 95% |
| favicon | — | png | [link](brands/cap.so/logo-1.png) | 95% |
| favicon | — | png | [link](brands/cap.so/logo-2.png) | 95% |
| favicon | — | ico | [link](brands/cap.so/logo-3.ico) | 95% |
| favicon | — | png | [link](brands/cap.so/logo-4.png) | 95% |
| favicon | — | png | [link](brands/cap.so/logo-5.png) | 95% |
| logomark | — | svg | [link](brands/cap.so/logo-svg-6.svg) | 90% |

## Sources

- Live brand page — https://extractvibe.com/brand/cap.so
- Raw JSON — https://extractvibe.com/api/brand/cap.so
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cap.so/design.md
- Extracted — 2026-09-06T17:49:32.567Z
- Generator — ExtractVibe vv1
- Quality score — 90/100