Cofounder

---
version: alpha
name: Cofounder
description: Run an entire company with agent orchestration and specialized departments
colors:
  primary: "#171717"
  tertiary: "#b2e7ff"
  neutral: "#f5f5f2"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: neoris
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.08
  headline-md:
    fontFamily: neoris
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.05
  headline-sm:
    fontFamily: neoris
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: neoris
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0.008em
  body-md:
    fontFamily: neoris
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
rounded:
  sm: 7.1px
  md: 8px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 32px
  xl: 60px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#202020"
    rounded: "{rounded.md}"
    padding: 14px 22px
    height: 44px
  button-secondary:
    backgroundColor: "#202020"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 14px 22px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 4px 4px
---

# Cofounder: Pixel Park Hero and Frost-Blue Primary CTAs

## Overview

A light, approachable system for a technical AI platform. Tone is confident and practical, with playful illustration balanced by sober typography. Density stays moderate: generous white space, compact body copy, and a single accent blue for action. When tokens are missing, prefer clarity, calm color, and small radii over heavy decoration.

## Colors

- **primary (#171717):** Core ink for headings, body text, and icons. Highest-contrast color against the light surface.
- **tertiary (#b2e7ff):** Accent for primary actions, highlights, and interactive emphasis. Used on the main CTA buttons.
- **neutral (#f5f5f2):** Page background and card fill; keeps the interface soft and bright.
- **surface (#f5f5f2):** Alias of neutral; use wherever a surface token is required.
- **on-surface (#171717):** Text and affordance color placed on neutral/surface backgrounds.

## Typography

Neoris is the single family across headings and body. It is custom/self-hosted (not Google Fonts), so agents should not attempt to fetch it.
- headline-lg (Neoris 46px/1.08/400): Hero and section titles.
- headline-md (Neoris 35px/1.05/400): Secondary headers and marquee callouts.
- headline-sm (Neoris 26px/1.19/400, -0.015em): Feature headings, card titles.
- headline-xs (Neoris 20px/1.38/400, +0.008em): Subheads and compact titles.
- body-md (Neoris 15px/1.4/400, +0.01em): Paragraphs, captions, and metadata.
Substitutes (freely available): Inter, Manrope, or Plus Jakarta Sans provide a modern grotesk feel with similar x-height and weight options.

## Layout

Spacing uses a short, even scale: 6, 14, 24, 32, 60px. Build vertical rhythm with 24–32px gaps inside sections and 60px between major blocks. Cards and tiles cluster content; copy tends to sit in a left column with illustrative UI on the right at desktop, collapsing to a single column on mobile. Keep body lines short and rely on spacing—not rules—to separate groups.

## Elevation & Depth

The system is largely flat. Measured shadows are minimal: a tiny white highlight (sm) and an inner composite shadow for subtle insets. There are no medium/large drop shadows; hierarchy is created with contrast (#171717 on #f5f5f2), spacing, and card boundaries. Use the inner shadow for soft-pressed chips or tiles when separation is needed without hard borders.

## Shapes

Two radii drive the language: 7.1px (cards) and 8px (buttons). The result feels friendly but not pill-shaped. Links remain square (0px) to distinguish text actions from buttons. Keep radius consistent per component type—don't mix sm and md within the same element.

## Components

Buttons and cards are standardized:
- Button primary: #b2e7ff background, #202020 text, 44px height, 14×22px padding, 8px radius. Main calls to action.
- Button secondary: #202020 background, #171717 text, 44px height, 14×22px padding, 8px radius. Use sparingly and ensure sufficient contrast with surrounding surface.
- Button link: Text-only action in #171717 with 0px radius.
- Card: #f5f5f2 background, #171717 text, 7.1px radius, padding 0 4 4; pair with the provided inner shadow when you need tactile separation.

### Floating navigation bar
Neutral (#f5f5f2) container with rounded 7.1px corners, small inner shadow for an inset edge. Text in #171717 and a right-aligned primary CTA.

### Hero with pixel landscape
Left-aligned headline at 46px (headline-lg) over the surface background, supporting body at 15px, and a two-button stack (primary then secondary). Section padding ~60px top and bottom.

### Task toast
Compact chip overlaid on hero imagery to show "Task Completed/Running." Use card styling with 7.1px radius and body-md text; accent or success states can rely on layout/context since no success tokens exist.

### Partner logo cards
Row of small cards for "activegraph," "VEERY," "LearnPath," and "Valence OS." Use card token with inner shadow; center logos and keep outer gaps at 24–32px.

### Three-up feature list
"Agentic departments / Human in the loop / Fully extensible" in a three-column block. Titles at 26px (headline-sm), copy at 15px, 32px column gutters, and 60px section spacing.

### How-to chapter cards
Clickable tiles for Chapters I–IV. Use card token, headline-xs for titles, body-md for meta, and 24px internal spacing. Primary button brings users to "Put the guide to work."

### KPI analytics group
Cluster of numeric KPIs ("Sign ups," "Daily active users," "Monthly active users") set in headline-xs for labels and large numerals styled as headline-md. Keep 32px gaps and group on a neutral surface.

## Do's and Don'ts

Do
- Use #b2e7ff for the main CTA and keep it 44px tall with 8px radius.
- Keep text in #171717 on #f5f5f2 backgrounds for high readability.
- Space major sections with 60px and interior elements with 24–32px.
- Apply the inner shadow to tiles when you need separation instead of heavy drops.

Don't
- Introduce new shadow sizes or colored shadows—md/lg/xl are none.
- Mix radii within a component; choose 7.1px (cards) or 8px (buttons) and stay consistent.
- Shrink body text below 15px or stretch lines excessively.
- Add new accent colors; actions should rely on #b2e7ff.

## Agent Prompt Guide

Quick color reference: text #171717 / background #f5f5f2 / border #171717 / accent #b2e7ff

1) Build the hero
- Background: #f5f5f2. Container padding: 60px top/bottom.
- Typography: Inter as substitute for Neoris; H1 46px, line-height 1.08, weight 400; body 15px/1.4.
- Buttons: Primary (#b2e7ff bg, #202020 text, height 44px, padding 14px 22px, radius 8px). Secondary (#202020 bg, #171717 text, same sizing).

2) Floating navbar
- Bar background #f5f5f2 with 7.1px radius and a subtle 1px inset border effect (use a light inner shadow). Links #171717, right CTA uses the primary button spec above. Horizontal padding 24–32px, vertical 14px.

3) Three-up feature list
- Section padding 60px. Each column: title 26px/1.19, body 15px/1.4. Use 32px gutters and 24px vertical spacing inside each card or column.

4) Partner logo cards row
- Use card spec: background #f5f5f2, text #171717, radius 7.1px, padding 4px bottom and sides as needed, plus inner shadow. Keep 24–32px gaps and center logos.

5) KPI analytics block
- Background #f5f5f2. Labels 20px/1.38; values 35px/1.05. Arrange three KPIs with 32px gaps; actions use the primary button.

## Similar Brands

- Notion — light surfaces, crisp typography, and restrained shadows; Cofounder is friendlier with playful illustration and blue CTAs.
- Vercel — monochrome UI with subtle depth; Cofounder adds an ice-blue action color and more tactile inset cards.
- Linear — disciplined spacing and minimalist components; Cofounder is softer and uses rounder 7–8px radii.
- Retool — product UI front and center; Cofounder similarly shows working dashboards but with a brighter palette and whimsical hero.

:root {
  /* Colors */
  --color-primary: #171717;
  --color-tertiary: #b2e7ff;
  --color-neutral: #f5f5f2;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 46px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.08;
  --text-headline-md-size: 35px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.05;
  --text-headline-sm-size: 26px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.015em;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.38;
  --text-headline-xs-tracking: 0.008em;
  --text-body-md-size: 15px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: 0.01em;
  --font-neoris: "neoris";

  /* Rounded */
  --radius-sm: 7.1px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 60px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #202020;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 14px 22px;
  --button-primary-height: 44px;
  --button-secondary-background-color: #202020;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 14px 22px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 0px 4px 4px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Run an entire company with agent orchestration and specialized departments",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.09,
          0.09,
          0.09
        ],
        "hex": "#171717"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.698,
          0.906,
          1
        ],
        "hex": "#b2e7ff"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.961,
          0.961,
          0.949
        ],
        "hex": "#f5f5f2"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.961,
          0.961,
          0.949
        ],
        "hex": "#f5f5f2"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.09,
          0.09,
          0.09
        ],
        "hex": "#171717"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 60,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 7.1,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "neoris",
        "fontSize": {
          "value": 46,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "neoris",
        "fontSize": {
          "value": 35,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "neoris",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.015,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "neoris",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.008,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "neoris",
        "fontSize": {
          "value": 15,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.01,
          "unit": "em"
        }
      }
    }
  }
}