---
title: "Kit design system"
variant: extended
source: https://kit.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/kit-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Kit · Design System

> Creator tools in a bold, human-centered frame

**Theme:** light · **Industry:** saas · **Source:** https://kit.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Kit pairs a cinematic, near-black opening with bright blue calls to action and spacious white feature sections. Product UI, creator photography, warm neutral bands, and direct editorial typography make the page feel both practical and personal.

## North star

Let bold, readable editorial type and useful product imagery lead, using bright CTA color against calm, spacious section bands.

## Overview

The homepage opens on a deep, near-black blue field with a compact navigation bar, centered oversized headline, muted supporting copy, and a vivid blue primary CTA. A wide, rounded product preview anchors the hero and leads into creator portraits, making the platform feel tangible and community-led. Below, white sections use strong left-aligned headings and alternating product imagery to keep feature stories readable without heavy decoration. Warm cream and peach bands break up the long scroll, while occasional green, coral, and lavender buttons mark secondary actions or promotional moments. KitSansFont gives display headings a compact, distinctive voice; Libre Franklin carries navigation, body copy, and UI labels. The layout moves between two-column feature splits, image-led cards, wide testimonial media, and a dense footer. Rounded corners and fine warm-gray borders define cards, while restrained elevation lets imagery and color blocks do most of the visual work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, feature backgrounds, cards, and reversed text on dark sections. |
| Soft Ink | `#1e1e1e` | `--color-soft-ink` | neutral | Primary text, dark footer, navigation details, and button text. |
| Signal Blue | `#44b1ff` | `--color-signal-blue` | brand | Primary trial buttons and selected accents; the hero mockup also contains related blue imagery. |
| Warm Linen | `#f2efe9` | `--color-warm-linen` | surface | Navigation treatment and broad warm-neutral bands behind feature cards and FAQs. |
| Quiet Sand | `#eae5dc` | `--color-quiet-sand` | neutral | Fine card outlines and low-contrast separators. |
| Stage Black | `#000000` | `--color-stage-black` | semantic | Dark section and media-overlay surfaces, including image treatments; not the primary text color. |
| Lilac Offer | `#e4acff` | `--color-lilac-offer` | accent | Promotional offer button and small decorative accent. |
| Deep Current | `#144264` | `--color-deep-current` | brand | Blue gradient endpoint and dark product-media backgrounds. |
| Peach Studio | `#ffe7d6` | `--color-peach-studio` | surface | Warm app-store integrations section band. |
| Midnight Tide | `#020a0f` | `--color-midnight-tide` | semantic | Near-black gradient start used in dark hero and media imagery. |
| Coral Spark | `#ff7647` | `--color-coral-spark` | accent | Secondary CTA color appearing in the integrations promotion. |
| Fresh Mint | `#65dc8d` | `--color-fresh-mint` | accent | Green secondary CTA visible in the growth section. |
| Harbor Blue | `#0a2940` | `--color-harbor-blue` | semantic | Dark blue gradient imagery in product and media areas. |
| Plum Shade | `#2b1136` | `--color-plum-shade` | semantic | Purple gradient imagery, principally within product or decorative media. |
| Mulberry Glow | `#4a265a` | `--color-mulberry-glow` | semantic | Gradient endpoint inside purple product or decorative media. |
| Mist Gray | `#bfbfbf` | `--color-mist-gray` | neutral | Muted small text, chiefly low-emphasis copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2efe9` (Warm Linen) · `--color-surface-2` → `#000000` (Stage Black) · `--color-surface-3` → `#ffe7d6` (Peach Studio) · `--color-surface-4` → `#1e1e1e` (Soft Ink) · `--color-text` → `#1e1e1e` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#eae5dc` (Quiet Sand) · `--color-accent` → `#44b1ff` (Signal Blue) · `--color-accent-2` → `#e4acff` (Lilac Offer) · `--color-accent-3` → `#144264` (Deep Current) · `--color-on-accent` → `#1e1e1e` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1e1e` | `#ffffff` | 16.67:1 | AAA |
| `#1e1e1e` | `#f2efe9` | 14.53:1 | AAA |
| `#1e1e1e` | `#000000` | 1.26:1 | fail |
| `#1e1e1e` | `#ffe7d6` | 14.01:1 | AAA |
| `#ffffff` | `#f2efe9` | 1.15:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#ffe7d6` | 1.19:1 | fail |
| `#44b1ff` | `#ffffff` | 2.34:1 | fail |
| `#44b1ff` | `#f2efe9` | 2.04:1 | fail |
| `#44b1ff` | `#000000` | 8.98:1 | AAA |

### Gradients

- `linear-gradient(in oklab, rgb(2, 10, 15) 0px, rgb(20, 66, 100) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 35%, oklab(0 0 0 / 0.95) 100%)`
- `linear-gradient(in oklab, rgb(10, 41, 64) 0px, rgb(20, 66, 100) 100%)`
- `linear-gradient(in oklab, rgb(43, 17, 54) 0px, rgb(74, 38, 90) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Libre Franklin | `--font-body` | webfont | 400, 600, 700, 500 | Navigation, body copy, UI labels, buttons, links, and smaller headings. | Inter |
| KitSansFont | `--font-display` | webfont | 500 | Display headlines and primary section headings. | DM Sans |

- **Libre Franklin:** Use regular body text and semibold links or actions; compact slightly tracked copy, with natural sentence case.
- **KitSansFont:** Medium-weight, compact display forms; large headlines are tight and sentence case, not all caps.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 0.95 | 0 | — | KitSansFont | Oversized centered hero headline. |
| h1 | 56px | 500 | 1 | 0 | — | KitSansFont | Primary page or major feature headline. |
| h2 | 40px | 500 | 1.25 | 0 | — | KitSansFont | Feature-section and large editorial headings. |
| h3 | 24px | 700 | 1.25 | -0.007em | — | Libre Franklin | Card titles and emphasized subheadings. |
| h4 | 20px | 600 | 1 | -0.007em | — | Libre Franklin | Compact feature titles and FAQ labels. |
| body | 16px | 400 | 1.5 | -0.01em | — | Libre Franklin | Feature descriptions, supporting copy, and FAQ answers. |
| caption | 12px | 400 | 1.5 | -0.013em | — | Libre Franklin | Small image captions, notes, and metadata. |
| nav | 14px | 400 | 1.43 | -0.011em | — | Libre Franklin | Top navigation links and footer navigation. |
| link | 16px | 600 | 1.5 | -0.01em | — | Libre Franklin | Inline links and emphasized secondary actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 12, 16, 20, 24, 28, 32, 80 px.
- Section rhythm 32px · element gap 16px · card padding — · max content width 1312px.

The page uses a broad centered canvas with a measured maximum width of 1312px, comfortable density, and generous section spacing. The first viewport centers the hero content above a wide media panel; below it, content alternates between two-column feature splits, full-width imagery, and multi-card rows. Headings usually align to the start of their content block, with centered alignment reserved for testimonials and FAQ framing. Warm background bands distinguish selected content groups. The footer shifts to a dark, multi-column link layout.

## Shape & elevation

- Radius: button `14px` · card `12px` · nav `12px` · link `8px` · xs `8px` · sm `10px` · md `12px` · lg `14px` · xl `16px` · 2xl `18px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The measured system is largely flat, with no recorded box shadows. Cards use white surfaces or subtle warm-gray hairline borders and rounded corners; larger media panels and photo cards rely on image contrast and dark overlays for separation. Use layered UI mockups sparingly, keeping borders and surface contrast more prominent than shadow.

## Imagery

Use creator portraits, lifestyle photography, and real-looking product interface screenshots as the main visual material. Frame media in broad rounded rectangles or cards, often paired with concise captions. Hero and testimonial imagery can span much of the content width; product UI previews sit against saturated blue or dark backgrounds. Dark overlays support readable text on photography. Bright colors inside app logos, dashboards, and mockups are illustrative details rather than the core brand palette.

## Components

### Primary CTA

Signal Blue (#44b1ff) button with Soft Ink text; the main trial action uses a broad, rounded treatment, with compact variants elsewhere.

### Offer CTA

Lilac (#e4acff) promotional action with dark text, used in the announcement strip.

### Feature split

Start-aligned headline and supporting copy paired with a product screenshot or media preview; alternate text and image placement across sections.

### Product card

White or transparent card with a Quiet Sand (#eae5dc) outline, rounded corners, dark copy, image, and a compact Learn more link.

### Creator media tile

Rounded photograph or video frame with a restrained dark overlay and readable white title or testimonial copy.

### FAQ row

White rounded accordion row on Warm Linen (#f2efe9), with a concise question and small disclosure icon.

### Footer navigation

Soft Ink (#1e1e1e) surface with white brand mark, muted small labels, and grouped link columns.

### Measured component styles

- **Primary button** (“Start free trial”): background #44b1ff · text #1e1e1e · radius 14px · padding 20px · 600 20px Libre Franklin
- **Secondary button** (“Claim your offer”): background #e4acff · text #1e1e1e · radius 8px · padding 4px 8px · 600 14px Libre Franklin
- **Link** (“Learn more”): background #e1ded9 · text #1e1e1e · radius 8px · padding 4px 8px · 600 14px Libre Franklin
- **Card** (“What is Kit? Kit (formerly ConvertKit) i”): background #ffffff · text #1e1e1e · radius 12px · padding 0px · 400 16px Libre Franklin
- **Navigation item** (“Features Pricing Use Cases Resources Log”): transparent background · text #1e1e1e · radius 0px · padding 0px · 400 16px Libre Franklin

## Do

- Use a cinematic dark opening with strong white headline contrast.
- Make the primary action Signal Blue (#44b1ff) with dark text.
- Keep display headlines compact, prominent, and sentence case.
- Alternate white content with Warm Linen (#f2efe9) and Peach Studio (#ffe7d6) bands.
- Show authentic creator imagery and legible product UI previews.
- Use Quiet Sand (#eae5dc) borders instead of pronounced shadows.

## Don't

- Do not make every section dark or visually heavy.
- Do not replace the creator photography with generic abstract decoration.
- Do not use gradients as the default surface treatment.
- Do not use oversized all-caps headings or dense body paragraphs.
- Do not add heavy drop shadows to cards or buttons.
- Do not treat colors inside app mockups as additional core brand colors.

## Agent prompt

Build a new marketing page in Kit’s creator-first visual style. Start with a deep, near-black hero using Midnight Tide (#020a0f), Soft Ink (#1e1e1e), and crisp white text; center a compact display headline, supporting copy, and a Signal Blue (#44b1ff) primary CTA above a wide product preview. Use KitSansFont or a close substitute for display headings and Libre Franklin or Inter for body and interface text. Structure the rest as spacious white feature splits, product-image cards, and creator photography, with occasional Warm Linen (#f2efe9) and Peach Studio (#ffe7d6) bands. Keep borders subtle in Quiet Sand (#eae5dc), corners rounded, and shadows minimal. Use lilac, coral, or mint only for limited secondary actions. Maintain readable start-aligned copy and finish with a dark, grouped-link footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-width opening with compact navigation and centered headline over wide media. | primary trial action, top navigation, supporting reassurance | near-black canvas, white display type, blue CTA, wide rounded preview |
| 2 | feature-split | Two-column feature story with left-aligned copy and product imagery. | feature exploration links, trial action | white canvas, large heading, workflow screenshots |
| 3 | product-showcase | Feature copy followed by a broad, full-bleed product-interface preview. | feature discovery, trial action | dashboard mockup, white section, dark blue media |
| 4 | integrations | Full-width peach band with headline, actions, and logo imagery. | app-store exploration, trial action | peach surface, colored secondary CTA, logo strip |
| 5 | feature-grid | Start-aligned introduction followed by a staggered row of three image-led offerings. | service discovery, trial action | white canvas, staggered cards, green secondary action |
| 6 | feature-grid | Warm-neutral title band leading into a multi-column feature carousel. | feature browsing, carousel navigation | Warm Linen surface, image cards, compact links |
| 7 | product-grid | Six-column measured feature area with horizontally browsable image cards. | carousel controls, learn-more links | Warm Linen background, rounded media, fine borders |
| 8 | testimonials | Centered quote over wide full-bleed creator media. | social proof, trial action nearby | large photo or video, white overlay text, rounded frame |
| 9 | gallery | Image-led category gallery with varied card sizes and overlay labels. | audience-path discovery, visual browsing | photo tiles, dark text overlays, rounded cards |
| 10 | cta | Centered CTA over a broad photographic media panel on a warm-neutral section. | request a demo, start free trial | dark image overlay, two actions, decorative illustration |
| 11 | faq | Centered title above a two-column grid of accordion rows. | expandable answers, question scanning | Warm Linen surface, white rounded rows, disclosure icons |
| 12 | footer | Dark full-width footer with brand block and grouped multi-column links. | category navigation, trial entry point | Soft Ink background, white brand mark, small grouped links |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/kit-com