---
version: alpha
name: Cofounder
description: "Light interface measured from cofounder.co: neoris type, vivid blue accents, tonal surfaces and 8px corners."
colors:
  background: "#F5F5F2"
  surface: "#F5F5F2"
  on-surface: "#4F4D4C"
  on-background: "#4F4D4C"
  on-surface-strong: "#454242"
  on-surface-variant: "#646261"
  on-surface-muted: "#757574"
  surface-container-low: "#F1F1EE"
  surface-container: "#FBFBF8"
  surface-container-high: "#DAE9FB"
  surface-container-highest: "#BFBFBF"
  overlay: "#FFFFFF99"
  overlay-strong: "#FFFFFF0D"
  outline: "#0000001A"
  outline-variant: "#2020201A"
  primary: "#1D97E8"
  on-primary: "#000000"
  secondary: "#A3E635"
  tertiary: "#EEC75D"
  success: "#71CE45"
typography:
  headline-display:
    fontFamily: neoris
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.08
  headline-lg:
    fontFamily: neoris
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
  headline-md:
    fontFamily: neoris
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: 0.009em
  headline-sm:
    fontFamily: neoris
    fontSize: 24px
    fontWeight: 460
    lineHeight: 1.5
    letterSpacing: 0.006em
  title-lg:
    fontFamily: neoris
    fontSize: 20px
    fontWeight: 440
    lineHeight: 1.1
    letterSpacing: -0.02em
  body-md:
    fontFamily: neoris
    fontSize: 15px
    fontWeight: 460
    lineHeight: 1.4
    letterSpacing: 0.01em
  body-sm:
    fontFamily: neoris
    fontSize: 12px
    fontWeight: 460
    lineHeight: 1.4
    letterSpacing: 0.01em
  caption:
    fontFamily: neoris
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: neoris
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  code:
    fontFamily: IBM Plex Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.12em
  headline-display-mobile:
    fontFamily: neoris
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.1
  headline-lg-mobile:
    fontFamily: neoris
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
rounded:
  sm: 4px
  md: 8px
  lg: 10px
  full: 9999px
spacing:
  xs: 2px
  sm: 6px
  md: 12px
  lg: 32px
  xl: 40px
  gutter: 12px
  section: 96px
components:
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "#1A1A1A"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px 12px
    height: 41px
  button-ghost:
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px 10px
  card:
    backgroundColor: "{colors.background}"
    textColor: "#171717"
    typography: "{typography.label-md}"
    rounded: 7.14px
    padding: 0px 4px 4px 4px
  link:
    textColor: "#26232380"
---

# Cofounder Design System

## Overview

Cofounder describes itself as: “Cofounder is an AI company operating system for founders, coordinating engineering, sales, marketing, design, finance, and operations agents.” The interface is light, built on **Mist (#F5F5F2)** with **Slate (#4F4D4C)** text, and **Vivid Blue (#1D97E8)** as the main accent.

Type is set in **neoris**, with **IBM Plex Mono** for code. Headlines run large; body text is 15px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 8px.

Measured from [cofounder.co](https://cofounder.co/) on October 30, 2026 at 1440×900 and 390×844 from 288 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 18 roles.

- **Mist (#F5F5F2):** Page background, seen 8 times. Token `background`, CSS `--background`.
- **Slate (#4F4D4C):** Primary text and headings. Token `on-surface`.
- **Graphite (#454242):** Headings and emphasis, seen 5 times. Token `on-surface-strong`.
- **Slate (#646261):** Secondary text, seen 7 times. Token `on-surface-variant`.
- **Slate (#757574):** Muted text and metadata, seen 5 times. Token `on-surface-muted`.
- **Mist (#F1F1EE):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Snow (#FBFBF8):** Cards and panels, seen 2 times. Token `surface-container`.
- **Pale Blue (#DAE9FB):** Hover and pressed fills, seen 1 time. Token `surface-container-high`.
- **Silver (#BFBFBF):** Highest raised elements, seen 1 time. Token `surface-container-highest`, CSS `--color-feature-neutral`.
- **White 60% (#FFFFFF99):** Translucent fill for cards and controls, seen 12 times. Token `overlay`.
- **White 5% (#FFFFFF0D):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Near Black 10% (#0000001A):** Borders and dividers, seen 12 times. Token `outline`.
- **Charcoal 10% (#2020201A):** Secondary dividers, seen 5 times. Token `outline-variant`.
- **Vivid Blue (#1D97E8):** Brand color in logos and imagery. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Lime (#A3E635):** Accent in text, fills and borders, seen 2 times. Token `secondary`.
- **Amber (#EEC75D):** Accent in text, fills and borders, seen 2 times. Token `tertiary`.
- **Green (#71CE45):** Success and positive states, seen 2 times. Token `success`.

## Typography

**neoris** and **IBM Plex Mono** (monospace) share the interface. Fallback stack: `neoris, neoris Fallback, sans-serif`. Other loaded fonts: departureMono.

- **headline-display:** neoris 46px at weight 400, line height 1.08 (34px on mobile). Page title (h1).
- **headline-lg:** neoris 40px at weight 400, line height 1.15 (28px on mobile). Section headings (h2).
- **headline-md:** neoris 36px at weight 400, line height 1.12, tracking 0.009em. Sub-section headings.
- **headline-sm:** neoris 24px at weight 460, line height 1.5, tracking 0.006em. Card and feature titles.
- **title-lg:** neoris 20px at weight 440, line height 1.1, tracking -0.02em. Small titles.
- **body-md:** neoris 15px at weight 460, line height 1.4, tracking 0.01em. Body text.
- **body-sm:** neoris 12px at weight 460, line height 1.4, tracking 0.01em. Secondary and small text.
- **caption:** neoris 10px at weight 400, line height 1.6. Captions and fine print.
- **label-md:** neoris 16px at weight 400, line height 1.5. Buttons, navigation and labels.
- **code:** IBM Plex Mono 11px at weight 400, line height 1.5, tracking 0.12em. Code and technical values.

## Layout

Spacing does not follow a strict grid: 55% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 6px, md 12px, lg 32px, xl 40px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 500px, 639px, 676px, 700px, 760px, 767px, 768px, 900px, 999px, 1000px, 1120px, 1200px, 1920px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#F1F1EE → #FBFBF8 → #DAE9FB → #BFBFBF):

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset`
- `rgba(0, 0, 0, 0.12) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.24) 0px 1px 1px 0px inset`
- `rgb(184, 68, 68) 0px 0.829px 0.829px 0px inset`

A few raised panels add a soft drop shadow: `rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1.5px inset, rgb(255, 255, 255) 0px 2px 0px 0px inset`.

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **md (8px):** 64 elements.
- **sm (4px):** 56 elements.
- **lg (10px):** 48 elements.
- **full (9999px):** 32 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-outline (“Run a company”):** #F1F1EE fill, #1A1A1A text, 16px/400, 8px radius, padding 0px 12px.
- **button-ghost (“Copy Setup Prompt”):** transparent fill, #FFFFFF text, 16px/400, 8px radius, padding 0px 10px.
- **card:** #F5F5F2 fill, #171717 text, 16px/400, 7.142px radius, padding 0px 4px 4px 4px, shadow `rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, 0.08) 0px 0px 0px 0.714px, rgba(0, 0, 0, 0.04) 0px 0px 14.284px 0px, rgba(0, 0, 0, 0.01) 0px 16.427px 19.998px 0px, rgba(0, 0, 0, 0.02) 0px 7.142px 14.284px 0px, rgba(0, 0, 0, 0.03) 0px 2.143px 7.856px 0px`.
- **link:** transparent fill, #26232380 text, padding 0px.

## Do's and Don'ts

- Do use #F5F5F2 for the page and lift surfaces in small steps: #F1F1EE, #FBFBF8, #DAE9FB, #BFBFBF.
- Do keep text in 4 levels: #4F4D4C, #454242, #646261, #757574.
- Do use #1D97E8 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6px, 12px, 32px).
- Do use 8px corners on most elements; larger surfaces also use 4px and 10px.
- Don't use #757574 for body text; it reaches 4.22:1 on #F5F5F2. Keep it for large text or metadata.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond neoris and IBM Plex Mono.
- Don't use #1D97E8 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.2s, 0.06s, 0.14s. Longer ambient animations run 2s.

- **Easing:** `ease`, `ease-out`, `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/cofounder.co/), the free DESIGN.md generator (engine 2026.10.29+bf9d681d83cf).