# Kvass.no Design System

> High-contrast architectural clarity meeting warm Nordic materiality through deep teal foundations and soft coral accents.

**Source:** https://kvass.no | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kvass.no utilizes a sophisticated "Dark Blue" (#022c38) as its primary structural anchor, providing a high-contrast base for both text and button backgrounds. This architectural weight is balanced by a warm "Beige" (#fbecd9) and "Light Beige" (#fdf4e8) surface system that replaces standard whites for a more premium, tactile feel. The brand's energy is injected via a "Light Coral" (#ff978f) accent used exclusively for primary conversion points. Typography is strictly **Cofo Sans Variable**, ranging from heavy 700 weight 48px displays to highly legible 18px body text, maintaining a clean, sans-serif authority throughout.

## Signature DNA
1. **The Deep Teal Anchor** (The use of `#022c38` as a primary background and text color creates a distinct "ink" feel that is softer than black but more authoritative than standard navy. Seen across all pages.)
2. **Coral Conversions** (Primary CTAs use `#ff978f` with a 12px radius, creating a warm, approachable focal point against the cooler teal and beige backgrounds. Seen on `button#submit-trial`.)
3. **Beige Canvas** (The rejection of pure white in favor of `#fbecd9` and `#fdf4e8` for section backgrounds gives the digital product a physical, paper-like quality. Seen in `Surface` components.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--kvass-colors-dark-blue` | `#022c38` | Primary text, button backgrounds, dark section surfaces | 330 | 1 | Computed Style |
| `--kvass-colors-white` | `#ffffff` | Page background, input fields, button text on dark | 18 | 1 | Computed Style |
| `--kvass-colors-darker-blue` | `#0b232b` | Deep footer backgrounds, secondary dark surfaces | — | 1 | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--kvass-colors-light-coral` | `#ff978f` | Primary CTA backgrounds, highlight surfaces | 27 | 1 | Computed Style |
| `--kvass-colors-beige` | `#fbecd9` | Secondary section backgrounds, warm canvas | 99 | 1 | Computed Style |
| `--kvass-colors-light-beige` | `#fdf4e8` | Tertiary section backgrounds, card backgrounds | 15 | 1 | Computed Style |
| `--kvass-colors-dark-red` | `#511629` | Decorative section backgrounds (low frequency) | 3 | 1 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| cofo-sans-variable | 400, 700 | All headlines, body, and UI | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display-xl}` | 48px | 52.8px | normal | 700 | Main Hero Headline | `h1.kvass-headline--level-1` |
| `{typography.display-lg}` | 40px | 60px | normal | 400 | Sub-hero / Intro text | `span` |
| `{typography.heading-md}` | 32px | 48px | normal | 700 | Section Headlines | `h2` |
| `{typography.heading-sm}` | 24px | 26.4px | normal | 400 | Subsection / Card titles | `span.kvass-headline--level-3` |
| `{typography.body-lg}` | 18px | 27px | normal | 700 | Emphasized body text | `strong` |
| `{typography.body-md}` | 18px | 27px | normal | 400 | Standard body copy | `div#form-trial` |
| `{typography.button}` | 16px | 16px | 0.8px | 400 | CTA Labels | `button#submit-trial` |
| `{typography.body-sm}` | 14px | 21.6px | normal | 400 | Captions / Warnings | `div.k-elements-vimeo__blocked-warning` |

### Principles
1. **Tight Display Leading:** Large headlines use a 1.1x line-height ratio (48px/52.8px) to maintain visual density.
2. **Generous Body Tracking:** Button text uses 0.8px letter spacing to ensure legibility on colored backgrounds.
3. **Weight Contrast:** System relies on the jump from 400 to 700 weight for hierarchy, skipping intermediate weights.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.xs}` | 8px | 3 |
| `{spacing.sm}` | 16px | 81 |
| `{spacing.md}` | 32px | 27 |
| `{spacing.lg}` | 48px | 39 |
| `{spacing.xl}` | 64px | 6 |
| `{spacing.section}` | 128px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 297 occurrences |
| `{radius.control}` | 8px | Content cards | 27 occurrences |
| `{radius.input}` | 10px | Form text inputs | 6 occurrences |
| `{radius.button}` | 12px | Primary/Secondary buttons | 12 occurrences |
| `{radius.panel}` | 32px | Large decorative containers | 39 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | Standard cards and surfaces | Default state |
| Floating | `rgba(0, 0, 0, 0.25) 0px 0px 30px 0px` | Overlays / Modals | `Surface` component (3 occurrences) |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background `{colors.light-coral}` (#ff978f) or `{colors.dark-blue}` (#022c38) / Text `{colors.dark-blue}` or `{colors.white}` / Radius 12px / Padding 12px 32px / Typography 16px 400
**States observed:** Default: Captured | Hover: Not captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#000000` / Border 2px `#ffffff` / Radius 10px / Padding 12px / Typography 18px
**States observed:** Default: Captured | Focus: Not captured

### Tier 2: Patterns

#### Card
**Role:** Feature display and pricing tiers
**Pages observed:** All
**Spec:** Background `{colors.beige}` (#fbecd9) / Radius 8px / Padding 32px / Typography 18px
**States observed:** Default: Captured

#### Surface
**Role:** Full-width section banding
**Pages observed:** All
**Spec:** Background `{colors.light-beige}` (#fdf4e8) or `{colors.dark-blue}` (#022c38) / Radius 0px / Padding 48px 0px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Video Consent Overlay
**Role:** Privacy gate for embedded media
**Pages observed:** All
**Spec:** Background `{colors.beige}` (#fbecd9) / Border 1px `{colors.dark-blue}` / Shadow `0px 0px 30px rgba(0,0,0,0.25)` / Padding 21.6px 28.8px
**States observed:** Default: Captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1440px (implied by screenshots) |
| Section Padding (Vertical) | 48px to 128px |
| Card Grid Gap | 32px |

## Do's
- Use `#022c38` for primary text to maintain brand depth.
- Apply a 12px border radius to all interactive buttons.
- Use `#fbecd9` as the default background for content-heavy sections.
- Ensure all primary CTAs use the `#ff978f` coral accent.
- Maintain 700 weight for all H1 and H2 headlines.

## Don'ts
- Do not use pure black (#000000) for text; use `--kvass-colors-dark-blue`.
- Do not use sharp corners on buttons; always use `{radius.button}` (12px).
- Do not place coral buttons on coral backgrounds.
- Avoid using pure white (#ffffff) for section backgrounds; prefer the beige scale.
- **Wrong:** Using `#ff978f` for body text. **Right:** Use `#022c38`. **Reason:** Coral is reserved for interactive accents and lacks sufficient contrast for long-form reading.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kvass-dark-blue: #022c38;
  --kvass-light-coral: #ff978f;
  --kvass-beige: #fbecd9;
  --kvass-light-beige: #fdf4e8;
  --kvass-font-main: 'cofo-sans-variable', sans-serif;
  --kvass-radius-button: 12px;
}
```

## Agent prompt examples
- "Create a hero section with a `#022c38` background, a 48px Cofo Sans headline in white, and a 12px rounded button using `#ff978f`."
- "Design a feature grid using cards with `#fbecd9` backgrounds, 8px border radius, and 32px internal padding."
- "Generate a contact form with 10px rounded inputs and a full-width `#ff978f` submit button."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific navigation transitions were not fully documented.
- Explicit "Success" and "Error" semantic tokens were not present in the analyzed pages.