Krisp

# Krisp — Style Reference
> Deep space command console. Information-dense, with critical functions highlighted by a bright, singular light source against a dark, expansive backdrop.

**Theme:** light

**Site:** https://krisp.ai

Krisp's visual identity balances robust clarity with a subtle, dynamic energy. Dominant neutral whites and a deep, muted indigo base (#131032) provide a stable foundation, allowing a single, vivid violet accent (#614efa) to punctuate interactive elements. The type scale relies on the highly functional Plus Jakarta Sans, with an emphasis on generous line heights and subtle letter spacing for hierarchy, ensuring legibility even for dense information. Rounded elements contrast with the underlying structural precision, adding a soft, approachable quality to the technical focus.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Deep Space Indigo | `#131032` | `--color-deep-space-indigo` | Primary text, darkest surface background (rarely used, mostly for backgrounds of large sections or card headers), borders, prominent icons. Establishes a serious, professional tone. |
| Krisp Violet | `#614efa` | `--color-krisp-violet` | Primary Call-to-Action buttons, active states, key interactive elements. Provides a vibrant, energetic accent against the neutral and dark tones. |
| Indigo Gradient 1 | `#614efa` | `--color-indigo-gradient-1` | Decorative elements, background fills for featured sections, creating a dynamic sense of depth and interaction. |
| Indigo Gradient 2 | `#4a3bbe` | `--color-indigo-gradient-2` | Decorative elements, background fills for featured sections, conveying richness and sophistication. |
| Subtle Accent Teal | `#eafdfa` | `--color-subtle-accent-teal` | Badge backgrounds, subtle accents. A very light, near-neutral tint that hints at freshness. |
| Off White Background | `#ffffff` | `--color-off-white-background` | Page backgrounds, card surfaces, form inputs. Creates a clean, expansive canvas. |
| Pale Gray Surface | `#f7f7f8` | `--color-pale-gray-surface` | Subtle background for secondary sections, borders. Adds visual texture and separation without strong contrast. |
| Muted Gray Text | `#918f9f` | `--color-muted-gray-text` | Secondary text, descriptive elements. Softens informational blocks. |
| Light Gray Border | `#e7e7ea` | `--color-light-gray-border` | Component borders, dividers. Delimits elements with a light touch. |
| Crisp White Text | `#ffffff` | `--color-crisp-white-text` | Text on dark backgrounds, particularly accent buttons. Ensures readability against saturated colors. |
| Vivid Red Accent | `#fe6257` | `--color-vivid-red-accent` | Error states, occasional strong call-out accents. Appears sparingly for high-attention elements. |

## Tokens — Typography

### Plus Jakarta Sans
- **Substitute:** system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10px, 14px, 16px, 18px, 20px, 22px, 26px, 36px, 42px, 48px, 58px
- **Line height:** 1.14, 1.17, 1.2, 1.24, 1.25, 1.33, 1.4, 1.43, 1.45, 1.5, 1.6, 1.62, 1.63, 1.7, 1.73, 1.75, 1.78, 1.86, 1.89, 2, 2.63
- **Letter spacing:** normal
- **Role:** The sole typeface, used across all elements from headings to body text and UI components. Its contemporary geometric sans-serif nature provides a clean, highly legible foundation that scales well from small captions to large display headlines. Weight variation is critical for hierarchy, from light informational text to bold CTAs.

## Tokens — Type Scale

Minor Third (1.2) from 16px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 10px | 1.7 | — |
| body-sm | 14px | 1.6 | — |
| body | 16px | 1.6 | — |
| body-lg | 18px | 1.6 | — |
| subheading | 20px | 1.4 | — |
| heading | 26px | 1.25 | — |
| heading-lg | 36px | 1.2 | — |
| display | 42px | 1.17 | — |
| display-xl | 48px | 1.14 | — |
| display-xxl | 58px | 1.14 | — |

## Tokens — Spacing

- **Max width:** 1280px
- **Section gap:** 64-80px
- **Card padding:** 24px
- **Element gap:** 8px

## Tokens — Radius

- **Buttons:** 8px
- **Cards:** 16px
- **badges:** 12px
- **pill:** 9999px

## Layout

The page employs a max-width 1280px centered content model, with some hero sections extending full-bleed, particularly when using a darker background. The hero typically features a centered headline over a subtle gradient or solid background, followed by descriptive text and CTAs. Sections alternate between Crisp White and Pale Gray backgrounds, creating a clear vertical rhythm. Content is generally arranged in 2-column layouts (text alongside imagery/cards) or 3-column card grids for features. Vertical spacing between sections is generous, around 64-80px. The navigation is a sticky top bar with clearly defined links and primary/secondary action buttons.

## Imagery

The visual language focuses on abstract graphics and conceptual illustrations rather than photography. Imagery features gradients of Deep Space Indigo and Krisp Violet, often with subtle geometric patterns or soft, ethereal glows. Product screenshots, when present, are clean and tightly integrated into the UI. Icons are simple, outlined, and monochromatic, largely in Deep Space Indigo, serving an explanatory role. The overall density is balanced, allowing ample negative space around key text blocks while using graphics to enhance meaning and break visual monotony.

## Components

### Tab Pill Selector + Feature Card

### Feature Cards Grid

### Button Group + Announcement Badge

### Primary Action Button (Violet Filled)
*Call to action*

Solid Krisp Violet (#614efa) background with Crisp White text. Slightly rounded corners at 8px. Padding 8px top/bottom, 20px left/right. Used for primary conversions like 'Get Krisp'.

### Secondary Action Button (Indigo Filled)
*Secondary action*

Solid Deep Space Indigo (#131032) background with Crisp White text. Sharp 0px corners. Padding 8px top/bottom, 20px left/right. Used for actions like 'Book a demo'.

### Pill Button (White Outlined)
*Tertiary action/informational link*

Crisp White background with Deep Space Indigo text and border (#131032). Fully rounded, 48px border-radius creating a pill shape. Padding 12px top/bottom, 16px-20px left/right. Used for attention-grabbing links like 'Vote for Krisp'.

### Feature Card (White Background)
*Content display*

Crisp White background (#ffffff) with rounded corners at 16px. Content padding is typically 24px. Contains headings and body text, occasionally with an icon.

### Navigation Link
*Primary navigation*

Deep Space Indigo text (#131032) at 16px, weight 400. Hover states likely involve a subtle underline or color change, though not explicitly defined by single tokens.

## Guidelines

### Do

- Prioritize Plus Jakarta Sans at all weights for both headings and body text to maintain typographic consistency.
- Use Krisp Violet (#614efa) exclusively for primary call-to-action buttons and key interactive states to maximize impact.
- Establish clear hierarchy with the Deep Space Indigo (#131032) for main headings and text, and Muted Gray Text (#918f9f) for secondary descriptive copy.
- Implement a base border-radius of 8px for most interactive elements, reserving 12px for badges and 9999px for distinct pill-shaped components.
- Leverage the Crisp White Background (#ffffff) and Pale Gray Surface (#f7f7f8) to create clear visual separation between content sections.
- Employ gradients (e.g., linear-gradient(90deg, #614efa 22.93%, #62c8ff 76.42%)) for hero sections or distinct visual components to add dynamism.

### Don't

- Do not introduce new typefaces; rely solely on Plus Jakarta Sans.
- Avoid using highly saturated colors other than Krisp Violet (#614efa) for interactive elements, except for semantic red where appropriate.
- Do not use dark backgrounds for general page content; maintain a light theme with crisp white or pale gray surfaces.
- Avoid excessive use of drop shadows; maintain a flat aesthetic except for intentional elevation of modals or specific cards.
- Do not deviate from the established spacing scale (multiples of 4px) for padding and margins.
- Avoid non-functional decorative elements; every visual choice should serve a purpose in clarity or interaction.

## Agent Prompt Guide

### Quick Color Reference
- Text: #131032 (Deep Space Indigo)
- Background: #ffffff (Off White Background)
- CTA Button: #614efa (Krisp Violet)
- Border: #e7e7ea (Light Gray Border)
- Secondary Text: #918f9f (Muted Gray Text)

### 3-5 Example Component Prompts
1. Create a primary call-to-action button: solid #614efa background, #ffffff text, Plus Jakarta Sans weight 700, 16px size, padding 8px top/bottom, 20px left/right, 8px border-radius.
2. Create an informational badge: solid #eafdfa background, #131032 text, Plus Jakarta Sans weight 500, 14px size, padding 4px top/bottom, 16px left/right, 12px border-radius.
3. Create a feature card: #ffffff background, 16px border-radius, 24px internal padding. Headline 'Transcription & Recording' in Plus Jakarta Sans weight 600, 26px size, #131032. Body text in Plus Jakarta Sans weight 400, 16px size, #918f9f.
4. Create a hero section headline: 'Voice AI for meetings' in #131032 and #614efa, Plus Jakarta Sans weight 700, 58px size, line-height 1.14. Subtext: 'For teams, call centers, and developers' with Plus Jakarta Sans weight 400, 22px size, #918f9f, line-height 1.4.