---
name: Knock
description: "A textbook example of a modern, developer-focused SaaS design that balances professionalism with approachability through a clean, functional aesthetic."
version: alpha

colors:
  background: "#F9F9FB"
  primary: "#000000"
  secondary: "#222222"
  tertiary: "#E8673C"
  neutral: "#60646C"
  muted-soft: "#80838D"
  line: "rgba(200, 206, 213, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 500
    letterSpacing: "0px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, functional, and developer-focused design system that prioritizes clarity and information hierarchy for complex product messaging.

*A precision instrument for building complex communication systems, where clarity and control are paramount.*

## Colors

A restrained palette uses deep neutrals for readability and a single, vibrant warm accent to signal primary actions.

- **Background (`#F9F9FB`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#222222`)** — uses `ink-soft` token
- **Accent (`#E8673C`)** — uses `accent` token
- **Muted (`#60646C`)** — uses `muted` token
- **Borders (`rgba(200, 206, 213, 1)`)** — uses `line` token

## Typography

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

- Use geometric-sans for headlines to convey precision and modernity.
- Use humanist-sans for body text for optimal readability.
- Use monospace for code snippets and technical data.
- Maintain strict typographic hierarchy using size and weight, not color.

## Layout

A structured, column-based layout with generous padding and a clear content hierarchy.

*Rhythm:* Consistent 4px base grid with generous whitespace to separate sections and focus attention.

## Elevation & Depth

- rgba(0, 0, 0, 0.06) 0px 1px 6px 0px
- rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
- Borders: 1px solid #C8CED5

## Shapes

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

## Components

- **button:** Solid primary (coral) and outlined secondary buttons with 4px radius. Clean, functional, and high-contrast.
- **card:** White cards with subtle 1px borders and rounded corners, used to group related information.
- **chip:** A rounded pill-shaped badge used for status indicators like 'New'.
- **input:** Clean text inputs with subtle borders, focusing on function over decoration.
- **hero:** A centered, spacious hero section with a large headline, clear subtext, and two prominent call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use bright, competing accent colors — the screenshot shows one primary coral accent against a neutral palette.
- Don't use decorative serif fonts — the typography is strictly geometric and humanist sans-serif.
- Don't use heavy drop shadows — shadows are minimal and functional, used for subtle elevation.
- Don't use rounded corners larger than 12px on cards — the design uses tight, precise radii.
- Don't clutter the layout — the screenshot shows ample whitespace and a clear visual hierarchy.
- Don't use a dark background for the primary interface — the design is predominantly light, with high contrast text.

---

## System Prompt (paste into AI agent)

```
Knock is a developer-focused SaaS platform for customer engagement, positioned as a clean, precise, and powerful tool. The design DNA is characterized by a restrained light neutral palette (#F9F9FB background, #000000 ink) with a single, high-chroma coral accent (#E8673C) for primary actions. Typography mixes geometric-sans for headlines and humanist-sans for body, all rendered with excellent readability. Key critical donts: never use decorative serifs, avoid competing accent colors, and don't clutter the generous, whitespace-rich layout. The design prioritizes clarity, hierarchy, and functional elegance for technical audiences.
```