<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cursor.ai -->
<!-- Extracted: 2026-07-20T02:14:51.589Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "KI-Assistent"
description: "KI-Assistent presents a professional web presence."
colors:
  primary: "#334797"
  secondary: "#727171"
  tertiary: "#f91b24"
  neutral: "#727171"
  surface: "#ffffff"
  on-surface: "#464646"
  border: "#dee2e6"
  link: "#363636"
  error: "#de3e3e"
  warning: "#ffad45"
  success: "#33c15e"
  info: "#f91b24"
typography:
  display-lg:
    fontFamily: "Work Sans"
    fontSize: "11px"
    fontWeight: "500"
    lineHeight: "15.4px"
    letterSpacing: "1px"
  headline-lg:
    fontFamily: "Roboto"
    fontSize: "40px"
    fontWeight: "300"
    lineHeight: "56px"
  headline-md:
    fontFamily: "Roboto"
    fontSize: "30px"
    fontWeight: "300"
    lineHeight: "39px"
  headline-sm:
    fontFamily: "Roboto"
    fontSize: "18px"
    fontWeight: "300"
    lineHeight: "25.2px"
  body-md:
    fontFamily: "Roboto"
    fontSize: "15px"
    fontWeight: "300"
    lineHeight: "24px"
rounded:
  md: "3.51562px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#334797"
    rounded: "0px"
    padding: "14.0625px"
    fontSize: "14.0625px"
    fontWeight: "600"
    borderWidth: "0px 0px 3px"
  button-primary:
    backgroundColor: "#334797"
    textColor: "#ffffff"
    rounded: "3.51562px"
    padding: "14.0625px"
    fontSize: "14.0625px"
    fontWeight: "600"
    borderColor: "#ffffff"
    borderWidth: "2px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#334797"
    rounded: "3.51562px"
    padding: "14.0625px"
    fontSize: "14.0625px"
    fontWeight: "600"
    borderColor: "#334797"
    borderWidth: "2px"
---

# KI-Assistent — Design System

## Overview

KI-Assistent presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 23 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#334797` | Cobalt |
| secondary | `#727171` | Dim Gray |
| accent / tertiary | `#f91b24` | Scarlet |
| background | `#ffffff` | White |
| text | `#464646` | Dark Slate Gray |
| border | `#dee2e6` | Gainsboro |
| link | `#363636` | Charcoal |
| muted | `#727171` | Dim Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#33c15e` | Confirmations, positive states |
| warning | `#ffad45` | Caution, intermediate states |
| error | `#de3e3e` | Failures, destructive actions |
| info | `#f91b24` | Neutral information, tips |

## Typography

Type is set in Roboto, Work Sans, Roboto, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Roboto | body | system | 300 |
| Work Sans | heading | self-hosted | 500 |
| Roboto | heading | system | 300 |
| sans-serif | body | system | 300, 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Work Sans | 11px | 500 | 15.4px | 1px |
| Heading 2 | Roboto | 40px | 300 | 56px | — |
| Heading 3 | Roboto | 30px | 300 | 39px | — |
| Heading 4 | Roboto | 18px | 300 | 25.2px | — |
| Body | Roboto | 15px | 300 | 24px | — |

### Conventions

- Heading case — title-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0) 0px 4px 28px 0px` |
| modal | `rgba(0, 0, 0, 0.3) 0px 30px 70px 0px` |

## Shapes

Border-radius scale:

- `md` — 3.51562px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#334797`
- Radius — `0px`
- Padding — `14.0625px`
- Font size — `14.0625px`
- Font weight — `600`
- Sample copy — "Zustimmung"

**Primary**

- Background — `#334797`
- Text — `#ffffff`
- Radius — `3.51562px`
- Padding — `14.0625px`
- Font size — `14.0625px`
- Font weight — `600`
- Border — `2px solid #ffffff`
- Sample copy — "Alle zulassen"

**Secondary**

- Background — `#ffffff`
- Text — `#334797`
- Radius — `3.51562px`
- Padding — `14.0625px`
- Font size — `14.0625px`
- Font weight — `600`
- Border — `2px solid #334797`
- Sample copy — "Anpassen"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/cursor.ai/logo-0.png) | 95% |
| favicon | — | png | [link](brands/cursor.ai/logo-1.png) | 95% |
| primary | — | — | [link](brands/cursor.ai/logo-2.png) | 85% |
| primary | color | svg | [link](brands/cursor.ai/logo-3.svg) | 85% |
| primary | color | svg | [link](brands/cursor.ai/logo-4.svg) | 85% |

## Sources

- Official brand guidelines — https://cursor.ai/brand
- Live brand page — https://extractvibe.com/brand/cursor.ai
- Raw JSON — https://extractvibe.com/api/brand/cursor.ai
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cursor.ai/design.md
- Extracted — 2026-07-20T02:14:51.589Z
- Generator — ExtractVibe vv1
- Quality score — 65/100