Un sistema de diseño sin concesiones. Crudo, audaz, honesto. Rechaza lo decorativo, abraza lo estructural. El diseño que incomoda es el diseño que se recuerda.
Campo de texto estándar. Borde sólido, fuente monospace.
Border cambia a accent-3 + sombra offset.
Este campo contiene un error crítico.
TEXTAREA & SELECT
Resize vertical permitido.
#
CARDS
IMG
EVENT
CARD CON IMAGEN
Texto secundario en monospace. Describir, no decorar. Cada palabra cuenta.
URGENTE
CARD SOLO TEXTO
Sin imagen. La tipografía como único elemento visual. El peso de las palabras es suficiente.
TAG 1TAG 2
BLUE
INFO
CARD ACENTO
Sombra y borde azul eléctrico. Para elementos destacados.
BADGES / TAGS
DEFAULTYELLOWREDBLUEGREENPINKOUTLINEMINILARGE
ALERTS / BANNERS
ℹ
Información
Este proceso puede tardar hasta 30 segundos. No cierres la ventana.
✓
Éxito
Operación completada sin errores. Los cambios se han guardado correctamente.
!
Advertencia
Esta acción no se puede deshacer. Revisa los datos antes de continuar.
✕
Error Crítico
Fallo en la conexión. Código: 503. Vuelve a intentarlo o contacta soporte.
TABLA DE DATOS
#
COMPONENTE
VERSIÓN
ESTADO
ÚLTIMA ACTUALIZACIÓN
ACCIÓN
01
Button System
v2.4.1
● ACTIVO
2026-04-22
02
Form Inputs
v1.9.0
● ACTIVO
2026-03-15
03
Card Component
v3.1.0
⚠ DEPRECADO
2025-11-08
04
Data Table
v1.0.0
○ BORRADOR
2026-04-01
05
Navigation
v4.0.2
● ACTIVO
2026-04-18
TIPOGRAFÍA
H1 — Anton 120px / Display Hero
HEADLINE
H2 — Anton 80px / Section Title
SECCIÓN
H3 — Anton 54px / Sub-section
SUB-TÍTULO
H4 — Oswald Bold 36px / UI Heading
UI HEADING LEVEL FOUR
H5 — Oswald Bold 24px / Card Title
CARD TITLE — COMPONENT LABEL
H6 — Oswald 24px / Nav Item
NAVIGATION ITEM — BREADCRUMB
BODY — Space Mono 18px / Paragraph
El brutalismo rechaza la comodidad visual. No existen superficies suaves, colores amables ni tipografías neutrales. Cada decisión de diseño es un acto deliberado de tensión. El sistema expone su estructura, no la oculta.
SIN BLUR. SIN SUAVIDAD.
El tooltip brutalista aparece como un bloque sólido con borde duro y fondo negro. Sin sombra difusa, sin transición suave.
Tooltip de error
ERROR CRÍTICO
Este campo contiene un valor inválido. El sistema no acepta concesiones.
// FILOSOFÍA
PRINCIPIOS DEL SISTEMA
01
CRUDEZA INTENCIONAL
No existe "pulido" en este sistema. Los bordes son duros, las sombras son planas, los colores son violentos. Cada elemento comunica exactamente lo que es. Sin capas de ilusión.
02
HONESTIDAD ESTRUCTURAL
Lo que ves es lo que hay. El grid es visible. La jerarquía es evidente. Los límites son explícitos. El diseño no miente sobre su propia naturaleza.
03
TENSIÓN VISUAL
El diseño incomoda. Provoca. Llama la atención. La tensión visual no es un accidente — es el resultado. El usuario nota el diseño porque el diseño exige ser notado.
04
ANTI-MINIMALISMO
Más es más — pero con propósito. No se añade decoración sin función. Cada elemento adicional debe justificar su existencia. La densidad es permitida; el relleno no.
05
TIPOGRAFÍA COMO IMAGEN
El texto no es contenedor — es el diseño. Los titulares son composiciones visuales. La escala tipográfica es drástica. Las MAYÚSCULAS son estructura, no énfasis.
06
CERO BORDER-RADIUS
Las esquinas son rectas. Los píxeles son honestos. El border-radius suaviza, esconde, miente. En este sistema: 0px, siempre. La excepción requiere justificación escrita.
// REGLAS DE USO RÁPIDO
✓ border: 4px solid #000 en todos los componentes ✓ box-shadow: offset duro, sin blur ✓ hover: desplazar sombra + translate(-2px, -2px) ✓ active: comprimir sombra + translate(2px, 2px) ✓ font-family: Anton (display), Oswald (ui), Space Mono (body) ✓ text-transform: uppercase en headings y labels
✕ border-radius > 2px ✕ box-shadow con blur ✕ gradientes suaves o de múltiples pasos ✕ fuentes: Inter, Roboto, Arial, SF Pro ✕ colores grises neutros como fondo base ✕ animaciones con ease-in-out prolongado