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

# Krisp · Design System

> Clear, confident AI in a calm product frame

**Theme:** light · **Industry:** ai · **Source:** https://krisp.ai/ · **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._

Krisp pairs a bright, spacious SaaS landing page with deep-indigo product sections and vivid gradient accents. Product-interface imagery, soft neutral panels, and direct calls to action make the page feel polished and practical.

## North star

Use spacious white and warm-neutral breathing room to frame bold indigo product bands, with gradients reserved for high-value emphasis.

## Overview

The page alternates a clean white canvas with large deep-indigo feature bands, then returns to warm beige and pale gray sections for testimonials, workflow cards, and security content. Vivid violet and blue gradients highlight select headline phrases, links, and primary actions rather than covering the whole interface. Plus Jakarta Sans carries the system throughout: headings are bold and sentence-case, while body copy remains readable and understated. A wide centered content frame supports the roomy hero, multi-column feature areas, and product demonstrations. Screenshots of the real interface provide the main visual evidence, with meeting-call imagery and integration logos adding context. Cards use pale fills, rounded corners, and restrained borders; sections rely more on strong color blocks and whitespace than decorative framing. The result balances a friendly, high-contrast technology brand with practical product clarity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Indigo | `#131032` | `--color-midnight-indigo` | brand | Primary dark section background and default heading, navigation, and body text color. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light section background, and text on dark or accent buttons. |
| Signal Violet | `#614efa` | `--color-signal-violet` | accent | Primary CTA fill, link and heading accent, and gradient endpoint. |
| Cloud Hairline | `#e7e7ea` | `--color-cloud-hairline` | neutral | Subtle borders and separators around controls and navigation elements. |
| Oat Canvas | `#f2ece2` | `--color-oat-canvas` | surface | Warm testimonial and workflow-support section background. |
| Mist Panel | `#f7f7f8` | `--color-mist-panel` | surface | Pale feature-card, security-section, navigation, and footer surface. |
| Muted Lavender Gray | `#918f9f` | `--color-muted-lavender-gray` | neutral | Muted copy and secondary link text, especially in dark feature areas. |
| Soft Violet | `#9487fb` | `--color-soft-violet` | accent | Gradient highlight for feature headings and emphasized copy. |
| Clear Sky Blue | `#16a9ff` | `--color-clear-sky-blue` | accent | Blue end of the violet-to-blue gradient used for headline emphasis. |
| Linen Card | `#f7f2e7` | `--color-linen-card` | surface | Warm-tinted workflow feature-card fill. |
| Deep Button Violet | `#5e4ede` | `--color-deep-button-violet` | accent | Minor button-state color recorded on CTA elements. |
| Coral Blush | `#fc9189` | `--color-coral-blush` | semantic | Minor coral gradient detail observed on button artwork, not a dominant interface color. |
| Warm Signal Coral | `#fe6257` | `--color-warm-signal-coral` | accent | Coral gradient highlight in selected feature headings and decorative text. |
| Night Violet | `#2a216b` | `--color-night-violet` | surface | Occasional darker card surface within the product presentation. |
| Soft Pewter | `#d0cfd6` | `--color-soft-pewter` | neutral | Minor muted text and interface details, including link and media artwork. |
| Near-Black Ink | `#1a1a22` | `--color-near-black-ink` | neutral | Minor navigation text color variation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#131032` (Midnight Indigo) · `--color-surface-2` → `#f2ece2` (Oat Canvas) · `--color-surface-3` → `#f7f7f8` (Mist Panel) · `--color-surface-4` → `#f7f2e7` (Linen Card) · `--color-text` → `#131032` (Midnight Indigo) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#918f9f` (Muted Lavender Gray) · `--color-border` → `#e7e7ea` (Cloud Hairline) · `--color-accent` → `#614efa` (Signal Violet) · `--color-accent-2` → `#9487fb` (Soft Violet) · `--color-accent-3` → `#16a9ff` (Clear Sky Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131032` | `#ffffff` | 18.29:1 | AAA |
| `#131032` | `#f2ece2` | 15.57:1 | AAA |
| `#131032` | `#f7f7f8` | 17.09:1 | AAA |
| `#ffffff` | `#131032` | 18.29:1 | AAA |
| `#ffffff` | `#f2ece2` | 1.18:1 | fail |
| `#ffffff` | `#f7f7f8` | 1.07:1 | fail |
| `#918f9f` | `#ffffff` | 3.17:1 | AA-large |
| `#918f9f` | `#131032` | 5.78:1 | AA |
| `#918f9f` | `#f2ece2` | 2.69:1 | fail |
| `#918f9f` | `#f7f7f8` | 2.96:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(148, 135, 251) 0px, rgb(22, 169, 255) 58.73%)`
- `linear-gradient(90deg, rgb(254, 98, 87) 0%, rgb(97, 78, 250) 87.17%)`
- `linear-gradient(90deg, rgb(74, 59, 190) 0%, rgb(190, 115, 250) 77.2%)`
- `linear-gradient(90deg, rgb(97, 78, 250) 0%, rgb(254, 98, 87) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plus Jakarta Sans | `--font-body` | webfont | 400, 600, 500, 700 | All headings, body copy, navigation, buttons, links, and captions. | Manrope |

- **Plus Jakarta Sans:** Use measured weights 400–700; headings are bold and sentence-case, with no added tracking or uppercase treatment.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | normal | 0 | — | Plus Jakarta Sans | Hero headline and the main page-level statement. |
| h2 | 42px | 600 | 1.33 | 0 | — | Plus Jakarta Sans | Major section headings across features, security, and FAQs. |
| h3 | 36px | 600 | 1.5 | 0 | — | Plus Jakarta Sans | Feature headings and nested product-content titles. |
| h4 | 26px | 400 | 1.62 | 0 | — | Plus Jakarta Sans | Supporting subsection and card headings. |
| body | 16px | 400 | 1.75 | 0 | — | Plus Jakarta Sans | Paragraphs, product explanations, and testimonial copy. |
| caption | 14px | 600 | 1.86 | 0 | — | Plus Jakarta Sans | Compact labels, metadata, and small supporting text. |
| button | 16px | 600 | 1.75 | 0 | — | Plus Jakarta Sans | Primary and secondary action labels. |
| nav | 14px | 500 | 1.43 | 0 | — | Plus Jakarta Sans | Header navigation labels and menu items. |
| link | 16px | 400 | 1.75 | 0 | — | Plus Jakarta Sans | Inline links and supporting navigational actions. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 18, 20, 24, 30, 32, 40, 75, 80, 100, 120 px.
- Section rhythm 120px · element gap 16px · card padding 32px · max content width 1280px.

Use a centered content frame capped at the measured 1280px, with generous page margins and a spacious section rhythm. The hero is a left-aligned text block paired with an overlapping product interface composition. Feature sections use dark full-width bands, often with text and product media in split layouts; later light sections use two- and four-column card arrangements. Keep alignment mostly left for product content, switching to centered for testimonials and FAQ. The measured spacing system is based on an 8px unit, with 120px section gaps and 16px element gaps.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `20px` · badge `9999px` · nav `8px` · link `9999px` · xs `6px` · sm `8px` · md `16px` · lg `20px` · xl `24px` · pill `9999px`
- Shadow `md` (other): `rgba(22, 19, 52, 0.8) 0px 0px 20px 0px`
- Shadow `lg` (other): `rgba(97, 78, 250, 0.2) 0px 12px 40px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is mostly flat: section color and whitespace establish hierarchy more than shadows. Use pale, rounded cards with subtle separation and restrained hairlines. Product mockups may overlap or sit above dark backing panels, with measured violet-tinted shadows reserved for selective media emphasis rather than applied across every card.

## Imagery

Favor crisp product screenshots and interface mockups that show meeting participants, transcripts, audio controls, and workspace views. Place interface media beside descriptive copy or layer related panels to suggest a working product, while keeping edges and details legible. Use integration logos and small product illustrations as supporting evidence. Photography appears primarily inside meeting-call interfaces rather than as standalone lifestyle imagery; keep treatments bright and realistic.

## Components

### Primary CTA

Violet fill (#614efa) with white Plus Jakarta Sans semibold text; use concise labels such as “Get Krisp” or “Get Krisp for free”.

### Secondary CTA

Deep indigo (#131032) fill with white text for actions such as “Book a demo,” contrasting with the brighter primary button.

### Feature band

Full-width #131032 section with white or muted copy, gradient-highlighted heading fragments, and prominent product-interface media.

### Feature card

Rounded pale card with #f7f7f8 or warm #f7f2e7 fill, dark text, and ample internal breathing room.

### Navigation

Compact horizontal header on white, with dark links, dropdown indicators, sign-in text, and contrasting demo and product CTAs.

### Product showcase

Large, detailed screenshot or interface mockup paired with explanatory text; allow related panels and badges to overlap selectively.

### FAQ row

Centered FAQ block with clear question text, light separators, and a compact expand affordance.

### Measured component styles

- **Primary button** (“Get Krisp for free”): background #614efa · text #ffffff · radius 0px · padding 8px 20px · 600 16px Plus Jakarta Sans
- **Secondary button** (“Book a demo”): background #131032 · text #ffffff · radius 0px · padding 8px 20px · 600 14px Plus Jakarta Sans
- **Link** (“AI meeting assistant”): transparent background · text #918f9f · radius 0px · padding 0px · 400 16px Plus Jakarta Sans
- **Card** (“With Krisp Noise Cancellation”): background #f7f7f8 · text #131032 · radius 16px · padding 32px · 400 16px Plus Jakarta Sans
- **Badge** (“demo”): background #eafdfa · text #131032 · radius 12px · padding 4px 16px · 400 14px Plus Jakarta Sans
- **Navigation item** (“AI Meeting Assistant Call Center AI Deve”): transparent background · text #131032 · radius 0px · padding 0px · 400 16px Plus Jakarta Sans

## Do

- Keep the main canvas white and alternate it with deep-indigo feature bands.
- Reserve violet and blue gradients for headline emphasis and key actions.
- Use Plus Jakarta Sans consistently across interface text.
- Show real product interfaces as the primary visual proof.
- Give sections and cards generous whitespace.
- Use warm beige panels to distinguish testimonial and workflow content.

## Don't

- Do not turn the whole page into a dark interface.
- Do not use gradients as large, dominant background fills.
- Do not add decorative imagery that competes with product screenshots.
- Do not crowd cards with dense copy or tight spacing.
- Do not use heavy borders or shadows on every component.
- Do not introduce unmeasured colors as core brand tokens.

## Agent prompt

Build a new Krisp-style AI SaaS page with a spacious white canvas, Plus Jakarta Sans, and a centered content frame capped at the measured 1280px. Use Midnight Indigo (#131032) for bold full-width product sections and primary dark text; use Signal Violet (#614efa) for primary actions, with white button text. Keep gradients, using Soft Violet (#9487fb), Clear Sky Blue (#16a9ff), and Warm Signal Coral (#fe6257), to short headline highlights rather than broad backgrounds. Alternate dark bands with Gallery White (#ffffff), Oat Canvas (#f2ece2), and Mist Panel (#f7f7f8) sections. Pair concise explanatory copy with realistic product-interface imagery. Use pale rounded cards, restrained Cloud Hairline (#e7e7ea) dividers, ample section breathing room, and clear action hierarchy. Keep the visual tone polished, calm, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Compact horizontal navigation on a white background. | Product menus, Sign-in access, Demo and product CTAs | Dark text, Dropdown indicators, Violet CTA |
| 2 | logo-cloud | Horizontal client-logo row beneath the hero. | Social proof | Monochrome logos, White canvas |
| 3 | feature-split | Full-width dark band with heading, feature list, and product media. | Feature switching, Demo content, Product exploration | Indigo background, Gradient heading, Interface mockup |
| 4 | product-showcase | Dark full-width section with explanatory heading and product screenshot. | Post-meeting workflow, Feature highlights | Gradient headline, Workspace screenshot, Dark canvas |
| 5 | feature-split | Dark product section with supporting copy beside a wide agenda interface. | Preparation guidance, Recording presets | Indigo band, Feature list, Large interface media |
| 6 | testimonials | Centered testimonial on a warm beige band. | Customer quote, Attribution | Oat background, Quote mark, Profile image |
| 7 | feature-grid | Centered heading above a two-column grid of warm cards. | Workflow benefits, Feature scanning | Beige section, Pale cards, Small icons |
| 8 | feature-split | Dark split section with copy and workspace screenshot. | Product discovery, Book-a-demo action | Indigo background, Violet accent heading, Overlapping interface |
| 9 | feature-grid | Pale gray section with intro copy and four certification columns. | Trust reassurance, Learn more link | Light surface, Certification badges, Four-column layout |
| 10 | integrations | Dark horizontal band with copy and floating app marks. | Integration discovery | Gradient heading, App-logo cluster, Indigo background |
| 11 | feature-split | Two-column white section with mobile copy and phone imagery. | Mobile feature discovery, App download | Light card-like panel, Phone mockup, Store badges |
| 12 | feature-grid | White section with heading and four compact feature cards. | Capture options, Feature comparison | Light cards, Small screenshots, Gradient heading text |
| 13 | stats | Centered review heading and compact review badge. | Third-party validation, Review link | White canvas, Centered badge |
| 14 | faq | Centered title above a single-column question list. | Expandable questions, Quick scanning | White background, Thin separators, Plus affordances |
| 15 | feature-split | Warm beige band with text and full-bleed media. | Capability explanation, Media-led storytelling | Oat background, Wide media, Minimal copy |
| 16 | cta | Centered message and CTA on a dark indigo closing panel. | Start for free, Conversion focus | Dark background, Gradient text accent, Violet button |

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