---
version: alpha
name: "Pop"
description: "Contornos negros gruesos, sombras duras y amarillo limón. Ruidoso a propósito. Pop es neobrutalismo con buenos modales: una página crema, titulares anchos en Unbounded, contornos negros en todo y sombras sólidas desplazadas que hacen que las tarjetas parezcan pegatinas. El amarillo limón y el coral hacen el ruido, mientras que la cuadrícula y el espaciado se mantienen disciplinados."
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 es neobrutalismo con buenos modales: una página crema, titulares anchos en Unbounded, contornos negros en todo y sombras sólidas desplazadas que hacen que las tarjetas parezcan pegatinas. El amarillo limón y el coral hacen el ruido, mientras que la cuadrícula y el espaciado se mantienen disciplinados.

## Colors

- **primary (#141414):** Negro con texto amarillo en modo claro y amarillo limón en modo oscuro, para la llamada a la acción principal.
- **on-primary (#FFE45C)**
- **secondary (#FF6B4A):** Coral, para pegatinas, bloques destacados y la segunda serie de gráficos.
- **tertiary (#3D7EFF):** Azul vivo, para enlaces dentro de tarjetas, etiquetas y una tercera serie.
- **neutral (#5C5A52):** Gris cálido para el texto de apoyo y los pies de foto.
- **surface (#FFFDF5):** Blanco roto cálido con tarjetas blancas. Secciones enteras pueden cambiar a amarillo limón.
- **on-surface (#141414)**

## Typography

Unbounded con grosor 600 para los titulares, ancha y geométrica, de hasta 72px con un espaciado de -0.03em; Manrope con grosor 500 y 17px para el cuerpo. JetBrains Mono para etiquetas de precio y código.

## Layout

Una cuadrícula de 12 columnas de hasta 1200px con gutters de 24px y una unidad de espaciado de 4px. Las secciones alternan entre crema y bloques de color sólido; las tarjetas de funciones se sitúan en una cuadrícula robusta de dos o tres columnas.

## Shapes

Esquinas de 14px y bordes negros en cada tarjeta, botón e input (bordes crema en modo oscuro). Las sombras son duras: un bloque sólido desplazado hacia abajo y a la derecha, sin desenfoque.

## Components

Los botones son bloques con contorno y una sombra dura que se aplana al pulsarlos. Las tarjetas llevan una franja de color en la cabecera. Las insignias parecen pegatinas y las tablas de precios usan filetes gruesos entre planes.

## Do's and Don'ts

- Da el mismo contorno negro a cada tarjeta, botón e input.
- Elige un color llamativo por sección.
- No desenfoques las sombras; mantenlas sólidas y desplazadas.
- No mezcles degradados pastel ni glassmorphism.