DESIGN.md · measured October 30, 2026

Cofounder design system

Light interface · neoris · 8px corners

#F5F5F2
#F1F1EE
#4F4D4C
#1D97E8

Download DESIGN.md

From cofounder.co ↗ · 288 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Cofounder

Cofounder color palette

18 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Mist#F5F5F2background · --backgroundPage background · 8×

Mist#F1F1EEsurface-container-lowRaised areas one step from the page · 1×

Snow#FBFBF8surface-containerCards and panels · 2×

Pale Blue#DAE9FBsurface-container-highHover and pressed fills · 1×

Silver#BFBFBFsurface-container-highest · --color-feature-neutralHighest raised elements · 1×

White 60%#FFFFFF99overlayTranslucent fill for cards and controls · 12×

White 5%#FFFFFF0Doverlay-strongStronger translucent fill · 1×

Text

Slate#4F4D4Con-surfacePrimary text and headings

Graphite#454242on-surface-strongHeadings and emphasis · 5×

Slate#646261on-surface-variantSecondary text · 7×

Slate#757574on-surface-mutedMuted text and metadata · 5×

Near Black#000000on-primaryText and icons on primary

Accents

Vivid Blue#1D97E8primaryBrand color in logos and imagery

Lime#A3E635secondaryAccent in text, fills and borders · 2×

Amber#EEC75DtertiaryAccent in text, fills and borders · 2×

Borders

Near Black 10%#0000001AoutlineBorders and dividers · 12×

Charcoal 10%#2020201Aoutline-variantSecondary dividers · 5×

Status

Green#71CE45successSuccess and positive states · 2×

Cofounder fonts and type scale

2 families.

AaneorisWeights 400, 440, 460neoris, neoris Fallback, sans-serif

AaIBM Plex MonoMonospace · Weights 400IBM Plex Mono, IBM Plex Mono Fallback

headline-displayPage title (h1)Cofounder46px · 400 · 1.08
mobile 34px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog40px · 400 · 1.15
mobile 28px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog36px · 400 · 1.12 · 0.009em

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog24px · 460 · 1.5 · 0.006em

title-lgSmall titlesThe quick brown fox jumps over the lazy dog20px · 440 · 1.1 · -0.02em

body-mdBody textThe quick brown fox jumps over the lazy dog15px · 460 · 1.4 · 0.01em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog12px · 460 · 1.4 · 0.01em

captionCaptions and fine printThe quick brown fox jumps over the lazy dog10px · 400 · 1.6

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

codeCode and technical valuesconst ready = true;11px · 400 · 1.5 · 0.12em

Contrast

Text on #F5F5F2

AaAAA7.7:1

AaAAA9.1:1

AaAA5.5:1

AaLarge only4.2:1

Spacing

No strict grid · 55% are multiples of 4px

xs2px

sm6px

md12px

lg32px

xl40px

gutter12px

section96px

Breakpoints: 500px 639px 676px 700px 760px 767px 768px 900px 999px 1000px 1120px 1200px 1920px

Shapes

Corner radii, most used first.

md8px · 64×

sm4px · 56×

lg10px · 48×

full9999px · 32×

Depth

Inset

Shadow

Cofounder UI components

Rebuilt from the measured CSS.

Run a company

button-outlineOutlined button

Copy Setup Prompt

button-ghostText button

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.15s0.2s0.06s0.14s

easeease-out

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

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

Cofounder DESIGN.md235 lines

---
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).

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

Sitepeel sitepeel.dev · Inter

React Bits reactbits.dev · Geist

unfair.so unfair.so · newPixel

HootsuiteBrand hootsuite.com · Montserrat

GrammarlyBrand grammarly.com · matter

SmartSkill smartskill.shop · IRANYekanX

Another site? Make a DESIGN.md from any link.

FAQ

Cofounder design system questions

What font does Cofounder use?

Cofounder’s website uses neoris (weights 400, 440 and 460), with IBM Plex Mono for code. Page titles are 46px at weight 400 (34px on phones) and body text is 15px. Measured on October 30, 2026.

What are the Cofounder colors and hex codes?

On cofounder.co: #F5F5F2 (mist) for the background, #4F4D4C (slate) for text and #1D97E8 (vivid blue) as the main accent, with #A3E635 (lime) and #EEC75D (amber) as other accents. The color palette above lists all 18 colors with their hex codes and where each one is used.

What is the Cofounder design system?

The design system on this page is cofounder.co’s, as measured on October 30, 2026: neoris type, #1D97E8 as the main color and 8px corners, written down as a DESIGN.md. It is not Cofounder’s own documentation.

What is the Cofounder DESIGN.md?

A plain-text file with Cofounder’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Cofounder’s official design system?

No. Sitepeel measured it from cofounder.co’s public page on October 30, 2026. It is an independent analysis, not made or approved by Cofounder.

Can I use Cofounder’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Cofounder’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.