# Knock · Design system migration spec

> Source: https://knock.app  ·  Curated by OpenDesign  ·  en

> A textbook example of a modern, developer-focused SaaS design that balances professionalism with approachability through a clean, functional aesthetic.

## 1. Identity DNA

The Knock design system is a precision instrument for building complex communication systems, where clarity and control are paramount. It treats interface design like engineering a reliable tool, prioritizing functional elegance over decorative flourish. This is a system built for developers who need to see the logic in every pixel.

**One-liner:** A clean, functional, and developer-focused design system that prioritizes clarity and information hierarchy for complex product messaging.
**Keywords:** Developer-first · Messaging infrastructure · AI-native · Composable · Operational
**Analogy:** A precision instrument for building complex communication systems, where clarity and control are paramount.

## 2. Color

A restrained palette uses deep neutrals for optimal readability, anchoring the interface in a clear hierarchy. A single, vibrant warm accent is reserved for primary actions, creating a precise visual signal without competing colors.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F9FB` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#222222` | secondary text |
| `--muted` | `#60646C` | placeholder |
| `--muted-soft` | `#80838D` | weak hint |
| `--accent` | `#E8673C` | single accent |
| `--line` | `rgba(200, 206, 213, 1)` | divider |

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

The principle is restraint: one accent serves as the singular call-to-action against a field of functional neutrals.

## 3. Typography

Typography is split between geometric-sans for headlines, conveying precision, and humanist-sans for body text, ensuring optimal readability at length. Hierarchy is maintained strictly through size and weight, not color, keeping the information structure clear and consistent.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headlines |
| headline | 40px | 1.1 | 500 | -0.5px | Section headings |
| subtitle | 24px | 1.33 | 400 | -0.5px | Section lead text |
| body | 16px | 1.5 | 400 | 0px | Paragraphs, UI text |
| label | 14px | 1.43 | 500 | 0px | Navigation, small UI |

**Type rules:**
- 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.

## 4. Spacing

A consistent 4px base grid establishes a reliable rhythm, with generous whitespace used to separate sections and focus attention.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous whitespace to separate sections and focus attention.

## 5. Surfaces

Surfaces are defined by minimal, functional depth through subtle shadows and crisp, 1px borders. The aesthetic is one of precise elevation, where every element has a clear, logical position in the spatial hierarchy.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 1px 6px 0px
  - rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
- **Borders:** 1px solid #C8CED5

## 6. Layout

The layout skeleton is a structured, column-based system with generous padding that enforces a clear content hierarchy. It provides a stable framework for complex product messaging, ensuring information is grouped and separated with deliberate, whitespace-rich clarity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is minimal and purposeful, focused solely on providing clear UI feedback through smooth transitions. Animations are subtle fades for content appearance and functional transformations for hover states, never serving as decoration.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on interactive elements for feedback.
  - Subtle fade-in animations for content appearance.
  - Transformations for hover states.

- **Hover:** Color or background changes on interactive elements, with a standard cubic-bezier transition.
- **Click:** Immediate visual feedback, often through subtle transform or color shifts.
- **Transition:** Consistent 0.2s - 0.3s transitions for color, background, and transform properties.
- **Keyboard:** Standard focus rings and logical tab order for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative, clear, and technically proficient, speaking directly to developers with declarative, benefit-oriented copy. It uses active verbs and specific commands, avoiding marketing fluff and unexplained jargon.

- **Tone:** Authoritative, clear, and technically proficient. It speaks directly to developers.
- **Headline style:** Direct, declarative, and benefit-oriented. Uses active verbs.
- **CTA style:** Action-oriented and specific, using clear commands like 'Get started' or 'Read our docs'.
- **Avoid:** Marketing fluff / Jargon without explanation / Overly casual tone

### Don'ts
- ❌ 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.

This system deliberately avoids decorative serifs, competing accent colors, and heavy shadows to preserve its functional, developer-focused clarity.

## System Prompt (paste into AI tool)

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