# Kit · Design system migration spec

> Source: https://kit.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern, clean SaaS landing page that uses a limited palette and strong typography to build trust and drive conversion.

## 1. Identity DNA

The system's identity is built on the analogy of a streamlined command center for digital creators, a place where the complexity of audience growth is distilled into a clear, actionable interface. It is not merely a tool, but a focused environment, positioning itself as the essential hub for managing an email marketing platform and automating the creator's workflow.

**One-liner:** An email marketing platform designed to automate growth and simplify the creator workflow.
**Keywords:** Creator tools · Email automation · Growth marketing · Simplified workflow · SaaS platform
**Analogy:** A streamlined command center for digital creators to manage audience growth.

## 2. Color

The color system is deliberately restrained, establishing a foundation of warmth and clarity. A palette of warm off-whites and dark grays provides an accessible, neutral canvas, while a single, vibrant blue is reserved exclusively as the accent for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F7F4` | main background |
| `--bg-soft` | `#F2EFE9` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#1E1E1E` | body text |
| `--ink-soft` | `#1E1E1E` | secondary text |
| `--muted` | `#44B1FF` | placeholder |
| `--accent` | `#44B1FF` | single accent |
| `--line` | `rgba(227, 227, 227, 1)` | divider |

**Color principle:** Neutral, warm off-whites and dark grays for a clean, accessible interface, with a single bright blue accent for primary actions.

The core principle is one of purposeful accentuation: a single bright blue (#44B1FF) is the sole signal for interactive commitment, ensuring the user's attention is guided with absolute clarity.

## 3. Typography

Typographic voice is established through a clean, humanist-sans category for both display and body text, avoiding any serif or decorative alternatives. The hierarchy relies on bold weights for primary headlines and tight letter spacing to create a modern, authoritative feel that prioritizes legibility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -1px | Hero headlines |
| h2 | 40px | 1.2 | 700 | -0.5px | Section headlines |
| body | 16px | 1.5 | 400 | -0.16px | General body text |
| caption | 14px | 1.4 | 400 | -0.14px | Supporting text and labels |

**Type rules:**
- Use bold weights (700) for primary headlines to create strong visual hierarchy.
- Maintain tight letter spacing for display typography to enhance modern feel.

## 4. Spacing

A consistent 4px base grid establishes the foundational rhythm for all spacing decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous whitespace to maintain a clean, breathable layout.

## 5. Surfaces

Depth and separation are communicated through restrained, functional elevation. Shadows are applied sparingly, primarily to cards and elevated surfaces, while a consistent 1px border (#E3E3E3) provides subtle delineation where needed.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
  - 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid #E3E3E3

## 6. Layout

The structural skeleton is a clean, 12-column grid with a defined max-width container, ensuring content remains orderly and centered. Responsive breakpoints adapt this framework fluidly for both mobile and desktop contexts, prioritizing readability and a clear visual hierarchy.

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

**Skeleton:** A 12-column grid with a max-width container, using responsive breakpoints for mobile and desktop views.

## 7. Motion & Interaction

Motion is minimal and utilitarian, designed to acknowledge user input rather than decorate it. The philosophy focuses on fast, subtle transitions—typically between 0.1s and 0.3s—that provide immediate feedback for state changes like hover and focus.

- **Durations:** micro 100ms · small 150ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover and focus states.

- **Hover:** Subtle color transitions on interactive elements like buttons and links.
- **Click:** Standard pointer cursor with immediate visual feedback.
- **Transition:** All interactive properties use a 0.1s to 0.3s duration with a standard easing curve.
- **Keyboard:** Standard focus outlines and logical tab order for accessibility.

## 8. Voice & Don'ts

The editorial voice is empowering and straightforward, speaking directly to the creator with a focus on benefits. It employs bold, action-oriented headlines and direct, low-friction calls to action, such as emphasizing a 'free trial' with 'no credit card required'.

- **Tone:** Empowering, straightforward, and creator-focused.
- **Headline style:** Bold, action-oriented statements that highlight benefits over features.
- **CTA style:** Direct and low-friction, emphasizing 'free trial' and 'no credit card required'.
- **Avoid:** Jargon-heavy marketing speak / Aggressive or overly complex sales pitches

### Don'ts
- ❌ Don't use a purely white background for primary content areas — the screenshot shows a warm, off-white (#F9F7F4) is used instead.
- ❌ Don't use a wide variety of accent colors — the design relies on a single, consistent bright blue (#44B1FF) for all primary actions.
- ❌ Don't use serif or decorative fonts for headlines — the screenshot shows all typography is a clean, humanist-sans category.
- ❌ Don't apply heavy drop shadows to all elements — shadows are used sparingly, mainly on cards and elevated surfaces.
- ❌ Don't use square corners for buttons or cards — the design consistently uses rounded corners (8px to 16px or pill shapes).
- ❌ Don't use a dense, cramped layout — the design prioritizes generous whitespace and a clear vertical rhythm.

What it deliberately avoids is any form of jargon-heavy marketing or aggressive sales pitches, maintaining a tone that is helpful and clear rather than pushy.

## System Prompt (paste into AI tool)

```
This design is for a modern SaaS platform for creators, positioning itself as a streamlined tool for email marketing automation. The palette is built on a warm off-white (#F9F7F4) background with dark charcoal (#1E1E1E) text and a single, vibrant blue (#44B1FF) accent for calls-to-action. Typography relies on a clean humanist-sans category for both display and body text, featuring tight letter-spacing for a modern feel. Critical don'ts include: never use a stark white background for main sections, never introduce competing accent colors, and never use serif fonts. The layout is spacious and grid-based, emphasizing clarity and ease of use.
```