---
version: alpha
name: "Pop"
description: "Dicke schwarze Konturen, harte Schatten und Zitronengelb. Absichtlich laut. Pop ist Neo-Brutalismus mit guten Manieren: eine cremefarbene Seite, breite Unbounded-Überschriften, schwarze Konturen um alles und massive versetzte Schatten, die Karten wie Sticker aussehen lassen. Zitronengelb und Koralle übernehmen das Schreien, während Raster und Abstände diszipliniert bleiben."
colors:
  primary: "#141414"
  on-primary: "#FFE45C"
  secondary: "#FF6B4A"
  tertiary: "#3D7EFF"
  neutral: "#5C5A52"
  surface: "#FFFDF5"
  on-surface: "#141414"
typography:
  display-lg:
    fontFamily: "Unbounded"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Unbounded"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Unbounded"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Unbounded"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.55
  body-sm:
    fontFamily: "Manrope"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
rounded:
  sm: 10px
  md: 12px
  lg: 14px
  xl: 18px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Pop ist Neo-Brutalismus mit guten Manieren: eine cremefarbene Seite, breite Unbounded-Überschriften, schwarze Konturen um alles und massive versetzte Schatten, die Karten wie Sticker aussehen lassen. Zitronengelb und Koralle übernehmen das Schreien, während Raster und Abstände diszipliniert bleiben.

## Colors

- **primary (#141414):** Schwarz mit gelbem Text im Hellmodus und Zitronengelb im Dunkelmodus, für den Haupt-Call-to-Action.
- **on-primary (#FFE45C)**
- **secondary (#FF6B4A):** Koralle für Sticker, Hervorhebungsblöcke und die zweite Diagrammreihe.
- **tertiary (#3D7EFF):** Leuchtendes Blau für Links in Karten, Tags und eine dritte Reihe.
- **neutral (#5C5A52):** Warmes Grau für Begleittext und Bildunterschriften.
- **surface (#FFFDF5):** Warmes Off-White mit weißen Karten. Ganze Abschnitte können auf Zitronengelb wechseln.
- **on-surface (#141414)**

## Typography

Unbounded im Schnitt 600 für Überschriften, breit und geometrisch, bis 72px mit -0.03em Laufweite; Manrope im Schnitt 500 und 17px für Fließtext. JetBrains Mono für Preisschilder und Code.

## Layout

Ein 12-Spalten-Raster bis 1200px mit 24px Spaltenabstand und einer 4px-Abstandseinheit. Abschnitte wechseln zwischen Creme und massiven Farbblöcken; Feature-Karten sitzen in einem klobigen zwei- oder dreispaltigen Raster.

## Shapes

14px-Ecken und schwarze Rahmen an jeder Karte, jedem Button und jedem Eingabefeld (im Dunkelmodus cremefarbene Rahmen). Schatten sind hart: ein massiver Block, nach unten rechts versetzt, ohne Unschärfe.

## Components

Buttons sind umrandete Blöcke mit hartem Schatten, der beim Drücken flach wegfällt. Karten tragen einen farbigen Kopfstreifen. Badges sehen aus wie Sticker, und Preistabellen nutzen kräftige Linien zwischen den Plänen.

## Do's and Don'ts

- Gib jeder Karte, jedem Button und jedem Eingabefeld dieselbe schwarze Kontur.
- Wähle pro Abschnitt eine laute Farbe.
- Weiche die Schatten nicht auf; halte sie massiv und versetzt.
- Mische keine Pastellverläufe und keinen Glassmorphism dazu.