MAXIMALISM DESIGN SYSTEM

01 — Typography

TIPOGRAFÍA

Display — Bebas Neue

--type-5xl · 180px MXM

--type-4xl · 128px MÁXIMO

--type-3xl · 96px HEADLINE

--type-2xl · 64px SECCIÓN HERO

Serif Expresiva — Playfair Display

--type-xl · 48px · italic Título de página

--type-lg · 32px · bold Subtítulo editorial expresivo

--type-md · 22px Lead introductorio de sección. El texto como imagen.

--type-base · 17px El Maximalismo no es desorden: es abundancia con intención. Cada elemento en la composición tiene algo que decir y lo dice a máximo volumen.

Sans Funcional — Space Grotesk

--type-lg · 32px · 700 DATOS Y UI — 32px Bold

--type-sm · 14px · 400 Body UI, labels, formularios, datos, navegación. Neutral pero con carácter propio.

--type-xs · 11px · 700 MICRO — METADATA — ETIQUETAS — 0.3EM TRACKING

Efectos tipográficos

Gradient Text

VIVID

Outline Text

GHOST

Neon Glow

GLOW

Shimmer Gold

GOLDEN

Glitch

ERROR

Tracking extremo + Mayúsculas

S P A C E D

TEXTO

Texto decorativo — letras gigantes, opacity 0.06

La tipografía como elemento gráfico. Las letras ocupan el espacio, lo definen, lo habitan. No son solo contenedores de significado: son el significado visual mismo.

★ ◆ ✦ ● ▲ ◉ ★ ◆ ✦ ● ▲ ◉ ★ ◆ ✦ ● ▲ ◉

— — — — — — — — — — — — —

· · · · · · · · · · · · · · · · · · · · · · ·

02 — Color & Patterns

PALETA NEON BAROQUE

BG#0D0D0D

Surface#1A1A2E

Neon Pink#FF006E

Neon Cyan#00F5FF

Neon Yellow#FFE500

Neon Purple#BF00FF

Neon Green#39FF14

Gold#FFD700

Text Primary#F0F0F0

Text Secondary#A0A0C0

Gradientes con personalidad

37° Lineal

127° Lineal

213° Lineal

Radial mesh

Cónico

Mesh 4 colores

Patrones de fondo

.bg-dots

.bg-cross

.bg-stripe

.bg-polka

.bg-checker

.bg-memphis

.bg-halftone

.bg-noise

03 — Buttons

BOTONES

Primario — sombra offset + hover shift

Hover: translate(-2px,-2px) + sombra

Secundario — borde→fill en hover

Hover: fondo cyan, texto negro

Ghost — solo glow animado

animation: glow-pulse 2s infinite

Pill — gradiente animado

background-position transition

Sticker — clip-path + rotación

clip-path irregular, rotate ±4°

3D Push — activo simula clic

shadow-layered, :active translate(4px)

04 — Forms

INPUTS & FORMS

Input base — borde inferior

border-bottom: 3px solid neon-pink

Input enmarcado — doble borde dorado

border: 2px double gold

NOMBRE

Label en Bebas Neue 32px flotante

Textarea — borde dashed púrpura

Checkboxes — estrella al marcar Maximalismo aplicado ★ Horror vacui activado Ornamento como función

Toggles — glow al activar

Efectos neón

Modo maximalista extremo

Ornamentación completa

05 — Cards

CARDS

Card base

Borde grueso rosa neón + sombra offset cyan. Doble marco interior con CSS ::before.

★ NEW

Card + sticker badge

Badge flotante rotado con animación float. Color neon-yellow, sombra offset.

Featured

Card neón

Fondo negro profundo. Borde con box-shadow glow. Texto en color neón. Todo en cian eléctrico.

EDITORIAL

Imagen a sangre con overlay gradiente. Texto superpuesto en Bebas.

Card recorte

"Clip-path diagonal — sin bordes convencionales"

COL

LAGE

CARD — COLLAGE — LAYERS

06 — Navigation

NAVEGACIÓN

MAXIMUS

INICIO SISTEMA TIPOGRAFÍA CONTACTO

Hover → underline neon-cyan · Activo → neon-yellow · Fondo: gradiente horizontal con líneas sutiles

07 — Tables

TABLAS

Token	Valor	Familia	Uso	Estado
--type-xs	11px	Space Grotesk	Micro-etiquetas	ACTIVO
--type-sm	14px	Space Grotesk	Body UI	ACTIVO
--type-base	17px	Playfair Display	Cuerpo editorial	ACTIVO
--type-xl	48px	Playfair Italic	Títulos de página	DISPLAY
--type-3xl	96px	Bebas Neue	Headlines hero	IMPACT
--color-neon-pink	#FF006E	—	Protagonista caliente	CORE

08 — Badges & Tags

BADGES & TAGS

PINK CYAN YELLOW PILL PURPLE OUTLINE DOUBLE GOLD ★ NUEVO DIAGONAL

09 — Alerts

ALERTS

✦

OPERACIÓN EXITOSA

El sistema ha procesado la solicitud con máxima expresividad.

▲

ATENCIÓN REQUERIDA

Algunos elementos decorativos pueden saturar el viewport en resoluciones bajas.

◉

ERROR MAXIMALISTA

Exceso de minimalismo detectado. Agregar ornamentación inmediatamente.

◆

INFORMACIÓN DEL SISTEMA

Versión 1.0 — Neon Baroque direction activa. Todos los tokens cargados.

10 — Separators

SEPARADORES EXPRESIVOS

Línea con gradiente

Zigzag SVG

Símbolos repetidos

★ ◆ ✦ ● ▲ ◉ ★ ◆ ✦ ● ▲ ◉ ★ ◆ ✦ ● ▲ ◉ ★

Fade to transparent

Franja diagonal a sangre

Marquee como separador

MAXIMALISMO★ MORE IS MORE◆ NEON BAROQUE✦ HORROR VACUI★ MAXIMALISMO★ MORE IS MORE◆ NEON BAROQUE✦ HORROR VACUI★

11 — Marquee / Ticker

MARQUEE

MAXIMALISM DESIGN SYSTEM★ NEON BAROQUE v1.0◆ MORE IS MORE★ HORROR VACUI◆ MAXIMALISM DESIGN SYSTEM★ NEON BAROQUE v1.0◆ MORE IS MORE★ HORROR VACUI◆

MÁXIMO ORNAMENTO IMPACTO MÁXIMO ORNAMENTO IMPACTO

texto gigante invertido — elemento decorativo

animation-duration: 30s normal / 40s reverse · separator: ★ ◆ · variante: opacity 0.06 como decoración de fondo

12 — Effects & Utilities

EFECTOS VISUALES

.effect-glitch

GLITCH

clip-path alterno en ::before/::after

.effect-gradient-text

VIVID

background-clip: text + shimmer

.effect-outline-text

GHOST

-webkit-text-stroke, fill transparent

.effect-neon-glow

GLOW

text-shadow multicapa + glow-pulse

.effect-shimmer

GOLD

shimmer dorado, background-size 200%

.effect-3d-push

shadow-layered + translate en hover/active

.effect-grain

Textura analógica

SVG feTurbulence overlay, opacity 0.12

Blob animado

BLOB

border-radius morphing + blur filter

13 — Full Composition

MXM

BAROQUE
★

Composición maximalista completa

EL ORNAMENTO
ES LA FUNCIÓN

Abundancia, capas, contradicción. La respuesta visceral al minimalismo.

★ ◆ ✦ ● ▲

13 Secciones del sistema

10+ Familias de color

∞ Posibilidades

Editorial MAXIMAL
ISM

No es desorden. Es abundancia con intención.

Card neón

"Capas sobre capas"

◆

★ NEW

Con sticker

El Maximalismo digital hereda del barroco, del Art Nouveau y del Memphis Group.

FORM

CONTACTO

Nombre

Asunto

Mensaje

Acepto el horror vacui

★ ◆ ★ ◆ ★ ◆ ★ ◆ ★ ◆ ★ ◆ ★ ◆ ★ ◆ ★ ◆ ★

PRINCIPIOS DEL SISTEMA

01MÁS ES MÁS.

02El espacio vacío es una oportunidad que todavía no aprovechaste.

03Tres familias tipográficas. Seis pesos. Cero disculpas.

04El color no organiza. El color GRITA.

05El ornamento no es crimen. El ornamento ES el diseño.

06Cada sección debe poder existir como un cartel autónomo.

07Si no genera una reacción visceral, volvé a empezar.