---
version: alpha
name: Koenigsegg
description: Megacar precision made digital — an absolute black cinematic canvas, Gustavo display in bold uppercase as the sole voice of scale, Basel Grotesk for functional prose, and pure white as the only ink in a system where engineering photography does all the emoting.

colors:
  # Primary surfaces — the entire site operates on near-absolute black
  background: "#000000"
  surface: "#0a0a0a"           # Raised dark panel — navbars, section dividers
  surface-card: "#111111"      # Vehicle card + content tile substrate
  surface-overlay: "#0d0d0d"   # opaque approx of rgba(0,0,0,0.8) overlay — Google format requires hex

  # White — the only ink and interactive text color
  ink: "#ffffff"
  ink-secondary: "#999999"     # Subdued meta, captions, supporting labels
  ink-muted: "#555555"         # Placeholder, disabled, fine print
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#000000"

  # Interactive — white fills on black; no chromatic brand accent in UI chrome
  primary: "#ffffff"           # CTAs and ghost-button borders are white
  primary-hover: "#d9d9d9"     # Gentle grey shift on hover

  # Borders — hairline only; borderless is the default
  border: "#2a2a2a"
  border-subtle: "#181818"

  # Shadow — depth via photography, not box-shadow; kept as structural fallback
  shadow-soft: "#000000"       # System has no measurable box-shadows; placeholder

typography:
  display-hero:
    fontFamily: "Gustavo, Impact, Arial Narrow, sans-serif"
    fontSize: 133px
    fontWeight: 500
    lineHeight: 0.80
    letterSpacing: 0px
  display:
    fontFamily: "Gustavo, Impact, Arial Narrow, sans-serif"
    fontSize: 101px
    fontWeight: 500
    lineHeight: 0.80
    letterSpacing: 0px
  display-mid:
    fontFamily: "Gustavo, Impact, Arial Narrow, sans-serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 0.90
    letterSpacing: 0px
  heading-section:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 37px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0px
  heading-ui:
    fontFamily: "Gustavo, Impact, Arial Narrow, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 0.90
    letterSpacing: 0.4px
  body-large:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  button-ui:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  caption:
    fontFamily: "Basel Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0px
  label-upper:
    fontFamily: "Gustavo, Impact, Arial Narrow, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 0.90
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 56px
  3xl: 80px
  4xl: 96px

rounded:
  none: 0px       # Default for all structural elements — sharp-edged throughout
  pill: 9999px    # Ghost CTA buttons only

components:
  # Navigation bar — transparent on deep black
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 24px 56px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Primary CTA — white filled, sharp corners
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Ghost button — minimal white outline on black, sharp
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Vehicle card tile — full-bleed photography, zero chrome
  card-vehicle:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"

  # Editorial / spec content card
  card-editorial:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 48px

  # Hero full-bleed section
  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 80px 56px

  # Input — configurator / search
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 20px
  input-focus:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"

  # Tab / model selector
  tab-model:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  tab-model-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Spec / caption block
  caption-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Koenigsegg Design System

## Overview

Koenigsegg's website is an exercise in maximum restraint serving maximum performance. The canvas is absolute black (`{colors.background}`) — not dark grey, not charcoal, but the void itself — and the site operates on the assumption that nothing competes with a 1,600-horsepower carbon-fibre machine. Where Porsche offers photographic abundance, Koenigsegg offers editorial scarcity: each model gets its own hero sequence, shot cinematically in motion, and the UI collapses to the edges to give it total dominion. This is a design language built on the belief that presence requires silence around it.

The type system splits into two distinct personalities. Gustavo — a sharp, condensed, all-caps display face — handles every moment of scale and declaration: hero names like "WORLDS FIRST MEGA GT FOR FOUR" arrive at 133px in tight 0.80 line-height, stacked like a racing decal on a wind tunnel. Basel Grotesk, a rational grotesque, takes the functional prose: specifications, navigation links, body descriptions, captions. The pairing is deliberate contrast — Gustavo announces, Basel Grotesk informs. Both remain white (`{colors.ink}`) on black, and neither ever softens into grey for emphasis; hierarchy comes from size and family, not from tonal concession.

The interaction language is similarly severe. There are no rounded corners except on the ghost CTA pills, no decorative borders, no shadow layers. A thin white border on the ghost button and a direct type treatment (`Discover more →`) are the sum total of affordance signalling. Navigation tabs for the model lineup (Gemera, Jesko Attack, Jesko Absolut, CC850) sit in a single horizontal row with no underlines, no active-state fills — only a colour shift from `{colors.ink-secondary}` to `{colors.ink}`. The system communicates through restraint, and the photography — always full-bleed, always cinematic — is the one place where the brand speaks loudly.

**Key Characteristics:**
- Absolute black (`{colors.background}`) canvas throughout — no light panels, no alternating sections
- Gustavo condensed display at weight 500, all-caps, 0.80 line-height — the single loudest voice in the system
- Basel Grotesk as the functional counterpart to Gustavo's declarations — rational, unadorned
- Zero border-radius on structural elements — every card, nav, and section is a hard-edged rectangle
- White-only ink (`{colors.ink}`) — colour lives entirely in the car photography
- Model-tab navigation: a single horizontal row of white text links with no active fill, only a brightness shift
- Ghost CTA buttons with white outline and arrow suffix — the sole interactive affordance pattern
- No box-shadows anywhere — depth is cinematic depth or it does not exist
- Uppercase type treatment on all Gustavo tokens — model names become logotype-scale headline objects
- Generous vertical spacing (80px+ section separation) to let photography breathe as independent frames
- 0.20s nav transitions on transform for model panel slides; 0.17s link opacity for microinteractions
- 8 breakpoints from 480px to 1440px anchoring a fluid responsive layout

## Colors

### Primary Surfaces
- **Absolute Black** (`{colors.background}`): The invariable canvas. Every page and every component rests on this foundation without exception.
- **Raised Dark** (`{colors.surface}`): Fractionally lighter — used for navbar substrate, section panel edges, nav hover surfaces.
- **Card Dark** (`{colors.surface-card}`): The working surface for vehicle tiles and editorial content cards — the deepest visible surface distinction.

### Text & Ink
- **Pure White** (`{colors.ink}`): The sole text color across all contexts — headings, navigation, body, labels.
- **Ink Secondary** (`{colors.ink-secondary}`): Inactive model tabs, supporting captions, and meta text that needs to recede without disappearing.
- **Ink Muted** (`{colors.ink-muted}`): Disabled states and fine legal/footer print.

### Interactive
- **Primary White** (`{colors.primary}`): Filled button background. White on black at maximum contrast — the system's only CTA treatment.
- **Primary Hover** (`{colors.primary-hover}`): Gentle greyscale shift to confirm hover without breaking the monochrome contract.

### Borders
- **Border** (`{colors.border}`): Structural hairlines in navigation separators and spec table rows.
- **Border Subtle** (`{colors.border-subtle}`): Near-invisible surface divisions within dark content panels.

### Depth
No box-shadows exist in the system. Gradient overlays (black-to-transparent, applied directly to hero photography) handle legibility. The monochromatic field makes elevation semantically redundant — if something needs to feel elevated, a photograph does it better than a shadow.

## Typography

### Font Family
- **Display**: `Gustavo` — condensed, all-caps, weight 500. Proprietary face; closest Google fallback is `Impact, Arial Narrow, sans-serif`. Used exclusively at scale and at the `{typography.label-upper}` utility register.
- **Functional**: `Basel Grotesk` — rational grotesque, weights 400 and 700. Handles navigation, body, captions, spec content. Closest Google proxy: `Helvetica Neue, Arial, sans-serif`.
- No OpenType features exposed via the extracted CSS, but Gustavo's condensed proportions read as a custom wide-tracking-suppressed display face.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 133px — cinematic model name hero, 0.80 line-height for stacked uppercase |
| `display` | 101px — section-level display headings and variant callouts |
| `display-mid` | 80px — mid-tier display, sub-hero model callouts |
| `heading-section` | 37px Basel Grotesk 700 — primary section titles |
| `heading-sub` | 28px Basel Grotesk 700 — subsection titles, configurator headers |
| `heading-ui` | 20px Gustavo 500 uppercase — UI-scale model labels, category markers |
| `body-large` | 26px Basel Grotesk 400 — lead paragraphs, feature descriptions |
| `body` | 20px Basel Grotesk 400 — body text, specification descriptions |
| `nav-link` | 19px Basel Grotesk 400 — navigation links, model tabs |
| `button-ui` | 19px Basel Grotesk 400 — CTA label text |
| `caption` | 14px Basel Grotesk 400 — image captions, fine specifications |
| `label-upper` | 20px Gustavo 500 uppercase, 0.4px tracking — UI category labels |

### Principles
- **Dual-personality pairing**: Gustavo shouts in uppercase at display sizes; Basel Grotesk whispers in sentence case at reading sizes. The contrast is non-negotiable — mixing them at similar sizes collapses the system's tension.
- **Weight as family signal**: Bold (700) belongs to Basel Grotesk headings only; Gustavo is always weight 500. Never bold a Gustavo token.
- **Uppercase is not optional for Gustavo**: All Gustavo tokens carry `text-transform: uppercase`. Never set Gustavo in mixed case.
- **Tight line-height at scale**: Gustavo at display sizes uses 0.80 line-height — the letters deliberately stack with negative leading to create a single visual mass, not a readable paragraph.
- **No italic, no decorative variation**: Both faces are used in roman only. Emphasis is achieved through size and family switch.

## Layout

### Spacing System
Base unit: **8px**. The live system shows a strong preference for ~24px and ~56px as structural increments — 23px and 55px appear with high frequency in computed layouts. Scale in YAML above covers xs (4px) through 4xl (96px).

### Grid & Container
- Maximum content width: 1440px (largest tracked breakpoint)
- Hero: Full-bleed photography, edge-to-edge at all breakpoints
- Model lineup: Horizontal model tab row → individual model hero page per click
- Specification sections: Two-column spec-label/value layout within constrained content width
- Footer: Multi-column link grid on the same `{colors.background}` surface

### Whitespace Philosophy
- **Photography needs sovereign space**: Section separation at 80px+ gives each model hero room to read as an independent frame, not a catalog entry.
- **Density is reserved for specs**: Specification tables allow tighter vertical rhythm; everywhere else, breathing room is the signal of luxury.
- **Horizontal margins are structural**: 56px standard side padding creates a consistent gutter that never compresses below 24px even on narrow viewports.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Level 0 (Canvas) | `{colors.background}` flat | Entire page — the only ground |
| Level 1 (Raised) | `{colors.surface}` fill | Navbar surface, panel edges, hover states |
| Level 2 (Photography) | Full-bleed imagery | Cars provide all chromatic and tonal depth |
| Level 3 (Gradient overlay) | Black-to-transparent linear gradient | Text legibility over hero photography |
| Focus Ring | 1px white outline offset | Keyboard focus on dark interactive elements |

**Shadow Philosophy**: Koenigsegg uses zero box-shadows. This is not minimalism as aesthetic choice but logical consequence: a system built around full-bleed photography has no need for synthetic depth cues. The gradient overlay (black at the base fading to transparent at the photo's peak) is the sole depth tool, deployed exclusively for text legibility over dark vehicle imagery. Elevation exists only when a car is going 400 km/h.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything structural — navbars, cards, hero sections, spec rows, inputs |
| `pill` | 9999px | Ghost CTA buttons — the single rounded gesture in the system |

The radius system is maximally binary: sharp rectangles everywhere except the ghost CTA buttons. The pill on buttons is a purely functional signal — it identifies an interactive object as "touchable" against the angular field. No intermediate values (4px, 8px, 16px) exist or should be introduced.

## Components

The complete component spec lives in the `components:` block above.

### Buttons
- **`button-primary`** — White fill, black text, sharp corners, 14px 28px padding. Used for primary purchase/configure CTAs.
- **`button-ghost`** — Black fill with white border implied via CSS outline, white text, sharp corners. Used for "Discover more →" secondary navigation links throughout the site.

### Model Tabs
- **`tab-model`** — Horizontal row, `{colors.ink-secondary}` text, no background, no underline. Used for the model selector (Gemera / Jesko Attack / Jesko Absolut / CC850).
- **`tab-model-active`** — Same layout, text brightens to full `{colors.ink}` white. Active state is brightness-only — no fill, no underline, no border.

### Cards
- **`card-vehicle`** — Zero-chrome photographic tile: no border, no radius, no padding. The image is the card.
- **`card-editorial`** — Dark `{colors.surface-card}` substrate with 48px internal padding. Used for specification, engineering-story, and feature-description sections.

### Navigation
- **`nav-bar`** — Black background continuous with the page canvas, Basel Grotesk 19px white links at 24px 56px padding. No visible separation between nav and hero.

### Inputs
- **`input`** — Dark fill, sharp corners, matching the overall rectilinear aesthetic. Used in configurator and search contexts.

### Hero
- **`hero-section`** — Full-bleed photography, 133px Gustavo uppercase headline, 80px vertical padding, 56px horizontal. The definitive layout pattern.

## Do's and Don'ts

### Do
- Use absolute black (`{colors.background}`) as the sole canvas — no light-mode variant, no alternating surface colours
- Set Gustavo tokens in uppercase only — `text-transform: uppercase` is semantically baked into every Gustavo token
- Use 0.80 line-height for Gustavo at display sizes — the stacked letterform mass is the signature visual gesture
- Apply sharp-corner treatment (`{rounded.none}`) to all structural components — only ghost CTAs get the pill treatment
- Let vehicle photography be the system's colour palette — the UI chrome never introduces chromatic interest of its own
- Maintain `{colors.ink-secondary}` for inactive model tabs and meta labels — the brightness delta communicates state without weight change
- Space sections generously (80px minimum separation) to give photography sovereignty over its frame
- Pair Gustavo at display scale with Basel Grotesk at reading scale — the dual-family contrast is the typographic identity

### Don't
- Don't introduce mid-range border-radius (4px–16px) — the system is strictly binary (`{rounded.none}` or `{rounded.pill}` on ghosts only)
- Don't use Gustavo in mixed-case — lowercase Gustavo destroys the decal-scale authority the font exists to create
- Don't add box-shadows to any component — the photographic depth system makes them semantically incoherent
- Don't introduce chromatic brand accents (gold, orange, carbon-texture gradients) in UI chrome — brand colour lives in the cars themselves
- Don't set body copy in Gustavo — its 0.80 line-height and condensed proportions make it unreadable at body scales
- Don't use `{colors.ink-muted}` for interactive elements — muted is disabled, not subdued
- Don't alternate background sections with light panels — the unbroken black field is what creates the cinematic pacing
- Don't apply letter-spacing to Basel Grotesk at body sizes — only `{typography.label-upper}` (Gustavo, UI scale) carries the 0.4px tracking

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <480px | Single column, stacked hero, hamburger nav, Gustavo scales to ~64px |
| Mobile Large | 480–600px | Wider hero gutter, model tabs scroll horizontally |
| Tablet Small | 600–700px | Two-column spec layout begins |
| Tablet | 700–800px | Full model tab row, slight hero size increase |
| Tablet Large | 800–1000px | Three-column spec grid, nav expands |
| Desktop Small | 1000–1200px | Full horizontal navigation, 4-column spec layout |
| Desktop | 1200–1440px | Full layout — wide hero, multi-column editorial sections |
| Large Desktop | >1440px | Max content width, full-bleed photography at maximum resolution |

### Touch Targets
- Ghost CTA buttons: pill shape with 14px 28px padding — minimum 44px touch height achieved
- Navigation links: 19px text with 8px 16px padding, meeting minimum tap target guidelines
- Model tabs: 8px 16px padding per tab, horizontal scroll on mobile for the full model row

### Collapsing Strategy
- **Navigation**: Full horizontal desktop nav → hamburger icon + slide-in overlay on mobile
- **Model tabs**: Static horizontal row on desktop → horizontally scrollable single row on mobile
- **Hero headlines**: 133px Gustavo display → scales proportionally to ~64px on mobile, preserving uppercase stacking
- **Specification grid**: Two-column label/value → single column stacked on narrow viewports
- **Section spacing**: 80px vertical gaps maintained proportionally down to 40px minimum on mobile

### Image Behavior
- Hero photography: full-bleed `object-fit: cover` at all breakpoints, never cropped arbitrarily
- Vehicle tiles: aspect-ratio locked, typically 16:9 or cinematic 21:9, scales with column width
- Gradient overlay: Black-to-transparent persists at all breakpoints for text legibility over hero imagery
- Lazy loading for below-fold vehicle content

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — absolute black
- All text: `{colors.ink}` — pure white
- Secondary / inactive text: `{colors.ink-secondary}` — mid grey
- CTA fill: `{colors.primary}` — white
- CTA text: `{colors.on-primary}` — black
- Raised surface / hover: `{colors.surface}` — near-black
- Hairline border: `{colors.border}` — subtle dark line

### Example Component Prompts

- "Create a hero section on `{colors.background}` (absolute black) with a full-bleed vehicle photograph covering the entire viewport. Overlay a black-to-transparent gradient from the bottom 50% for text legibility. Position the model name in Gustavo 133px weight 500 all-caps, 0.80 line-height, white (`{colors.ink}`), left-aligned with 56px left padding and 80px bottom padding. Below the headline, a ghost CTA button: Basel Grotesk 19px weight 400 white text 'Discover more →', 14px 28px padding, no border-radius, thin white outline border."

- "Design a model navigation tab row on `{colors.background}`. Four tabs: Gemera, Jesko Attack, Jesko Absolut, CC850. Each tab: Basel Grotesk 19px weight 400, 8px 16px padding, no background fill, no underline, no border. Inactive tabs use `{colors.ink-secondary}` (mid grey). Active tab uses `{colors.ink}` (white). No animated underline, no fill transition — state change is brightness shift only."

- "Build a vehicle specification section: two-column layout (label left, value right) on `{colors.surface-card}` with 48px internal padding. Spec labels in Basel Grotesk 14px weight 400 `{colors.ink-secondary}`, uppercase. Spec values in Basel Grotesk 20px weight 400 `{colors.ink}`. Section heading in Basel Grotesk 37px weight 700 white above the table. No card radius, no box-shadow, no decorative borders — only a thin `{colors.border}` hairline between spec rows."

- "Create a navigation bar on `{colors.background}` with the Koenigsegg wordmark SVG left-aligned at 80px from left edge. Navigation model links in Basel Grotesk 19px weight 400 white, 8px 16px padding each. No border between nav and hero — the nav sits flush on the same black plane. On hover, individual link area gets a `{colors.surface}` background fill. Right side: a ghost CTA button for a primary action."

- "Design an engineering feature card on `{colors.surface-card}` with 48px padding. Feature heading in Gustavo 20px weight 500 all-caps white, 0.4px letter-spacing. Feature description in Basel Grotesk 26px weight 400 `{colors.ink}`, line-height 1.40. Supporting detail in Basel Grotesk 14px weight 400 `{colors.ink-secondary}`. No radius, no shadow. A ghost CTA at the bottom: 14px 28px padding, sharp corners, white outline, white text."

- "Build a footer on `{colors.background}`: multi-column link grid. Section headings in Gustavo 20px weight 500 all-caps white with 0.4px tracking (`{typography.label-upper}`). Footer links in Basel Grotesk 19px weight 400 `{colors.ink-secondary}`, tightening to `{colors.ink}` on hover. Legal fine print in Basel Grotesk 14px weight 400 `{colors.ink-muted}` at the base. No horizontal rule separating footer from page — the black canvas continues unbroken."

### Iteration Guide

1. Start with `{colors.background}` — commit to the absolute black canvas before placing any element. The void is the design.
2. Hero photography is the system's only colour source — full-bleed, cinematic, no cropping. Every page gets one sovereign image.
3. Gustavo uppercase at scale IS the headline — never set it in mixed case, never apply it at body sizes. Size governs what each family does.
4. No border-radius except on ghost CTA pills — sharp corners on everything structural is non-negotiable.
5. White (`{colors.ink}`) is the sole text colour; `{colors.ink-secondary}` signals inactivity or hierarchy without abandoning the monochrome contract.
6. Section separation is 80px minimum — the generous void between sections reinforces the showroom pacing.
7. Interactive affordance is white-on-black contrast only — no coloured accents, no shadows, no fills beyond the ghost-button outline.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Koenigsegg. Brand names and trademarks belong to their respective owners.