---
name: Coda
description: "This site is a perfect example of how to balance a professional SaaS product with a warm, inviting, and highly readable design system."
version: alpha

colors:
  background: "#FFF6EC"
  primary: "#212121"
  secondary: "#666666"
  tertiary: "#F8AD40"
  neutral: "#8E8E8E"
  bg-soft: "#FFFFFF"
  bg-quiet: "#DBEEFA"
  muted-soft: "#E0E0E0"
  line: "rgba(33, 33, 33, 0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 52px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1.8px"
  headline:
    fontFamily: humanist-sans
    fontSize: 38px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.14px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.14px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

All-in-one collaborative workspace for organized teams.

*A unified command center for team projects.*

## Colors

Warm, approachable foundation with high-contrast, functional dark accents.

- **Background (`#FFF6EC`)** — uses `bg` token
- **Primary text (`#212121`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#F8AD40`)** — uses `accent` token
- **Muted (`#8E8E8E`)** — uses `muted` token
- **Borders (`rgba(33, 33, 33, 0.15)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Heavy weight for primary statements
- Negative letter-spacing for tighter headline tracking
- Inter for all body and UI text

## Layout

Standard top navigation followed by a massive, centered hero section.

*Rhythm:* A consistent 4px base grid with variable padding for interactive elements.

## Elevation & Depth

- 0px 12px 24px -5px rgba(0, 0, 0, 0.06)
- 0px 5px 10px -6px rgba(0, 0, 0, 0.06)
- 8px 8px 0px 0px #000000
- Borders: 1px solid rgb(33, 33, 33) or rgb(224, 224, 224)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High contrast primary button (black bg) and ghost/secondary button (white bg, black border) with rounded corners.
- **card:** Clean white cards with subtle shadows or borders.
- **chip:** Small rounded labels for navigation or tags.
- **input:** Simple border-bottom or full-border input fields.
- **hero:** Large bold text on a warm background with a mockup of the application interface.

## Do's and Don'ts

**Don't:**
- don't use a cold, clinical blue palette — screenshot shows a warm, peachy-beige hero background (#FFF6EC)
- don't use delicate, thin-weight typography for headlines — screenshot shows heavy, bold grotesque-sans headings
- don't use sharp, square corners on all elements — screenshot shows frequent use of 8px and 12px radii
- don't use complex, multi-colored gradients — screenshot shows flat, solid color fills for backgrounds and buttons
- don't use thin, low-contrast borders for primary actions — screenshot shows 1.5px solid borders or solid black fills
- don't use small, cramped spacing between sections — screenshot shows generous vertical whitespace in the hero area

---

## System Prompt (paste into AI agent)

```
Coda is a collaborative workspace tool for teams, positioned as an 'all-in-one' solution to organize work. The design features a warm, approachable aesthetic anchored by a peachy-beige background (#FFF6EC) and high-contrast black (#212121) for text and primary buttons. Typography uses a heavy grotesque-sans for display and a clean humanist-sans (Inter) for body copy, with tight letter-spacing on headlines. Layout is generous with whitespace, focusing on large bold statements and clear, functional UI mockups. Critical donts: avoid cold corporate blues or grays as the primary background; don't use thin or delicate typography for hero statements; and avoid cluttered or cramped layouts, as the site prioritizes clarity and breathing room. The overall feel is refined, productive, and slightly playful through its warm color choices and bold type.
```