Una acción por pantalla
Cada vista tiene un único botón protagonista. Comprar hosting debe costar 3 clics, no 30.
Design System v1.0
Todo operativo
Hosting
sin drama.
El sistema visual de servidor: ruidoso por fuera, simplísimo por dentro. Bordes gordos, sombras duras, colores ácidos y cero letra pequeña.
00
Principios
Cuatro reglas que deciden todo lo demás. Si dudas, vuelve aquí.
Calma primero, chispa después
La base es tranquila y legible. La chispa (ácido, sombra dura, un sticker) se reserva para lo que importa.
Contraste brutal
Bordes de 2px en tinta, texto oscuro sobre papel. Contraste alto sin gritar.
Feedback al instante
Cada clic responde: el botón se hunde, aparece un toast, el estado cambia. Nunca silencio.
Haz
- Un titular protagonista por pantalla, en Unbounded.
- Títulos de sección en minúscula normal; mayúsculas solo en etiquetas pequeñas.
- Ácido para la acción principal; el resto, neutro.
- Párrafos de 68 caracteres como máximo y mucho aire entre bloques.
- Mono solo para datos: dominios, IPs, importes.
No hagas
- Mezclar rosa, cian y naranja en el mismo bloque.
- Girar tarjetas, títulos o botones (solo un detalle en el hero).
- Poner sombra dura a todo: si todo destaca, nada destaca.
- Texto hueco en frases largas o titulares de sección.
- Stickers o animaciones continuas en el panel de cliente.
01
Color
Paleta ácida sobre papel crema. Haz clic en cualquier muestra para copiar el hex.
Marca
Superficies y texto (cambian con el tema)
Estado — reservados, siempre con icono + texto
Combinaciones permitidas
Tinta / Ácido
Blanco / Violeta
Tinta / Rosa
Tinta / Cian
Ácido / Tinta
✕ Nunca texto blanco sobre ácido, rosa, cian o naranja: el contraste no llega.
02
Tipografía
Unbounded grita, Space Grotesk explica y JetBrains Mono habla de técnica.
Display
Aa
Unbounded400 · 600 · 800 · 900 — titulares, precios, botones
Texto
Aa
Space Grotesk400 · 500 · 600 · 700 — párrafos, labels, UI
Mono
{}
JetBrains Mono400 · 600 — dominios, IPs, cifras, código
Escala
mega--fs-mega · 900
Bum.
display--fs-display · 900
Tu web, volando
h1--fs-h1 · 800
Elige tu plan
h2--fs-h2 · 800
Tus servidores
h3--fs-h3 · 600
Configuración DNS
lg--fs-lg · 500
Migramos tu web gratis y sin cortes en menos de 24 horas.
base--fs-base · 400
El texto de cuerpo usa Space Grotesk a 16px con interlineado 1.55. Frases cortas, tono cercano, sin jerga.
sm--fs-sm · 400
Texto auxiliar para descripciones de campos y metadatos.
mono--font-mono · 600
mitienda.es → 185.42.117.9
03
Espacio y forma
Escala base 4. Bordes de 2px y sombras duras desplazadas: la firma del sistema, usada con moderación.
Espaciado
Radios
0
--r-none
--r-none
6px
--r-sm
--r-sm
14px
--r-md
--r-md
24px
--r-lg
--r-lg
999px
--r-pill
--r-pill
Sombras duras
2 / 2
--sh-sm
--sh-sm
4 / 4
--sh-md
--sh-md
6 / 6
--sh-lg
--sh-lg
10 / 10
--sh-xl
--sh-xl
Sombras solo en la acción principal y, como mucho, una tarjeta destacada por vista. En oscuro la sombra pasa a ácido.
Separador “hazard”
04
Iconos
Trazo 2.5px, esquinas redondeadas, rejilla de 24px. Pasa el ratón por encima.
05
Botones
Se levantan al pasar y se hunden al pulsar. Pruébalos.
Variantes
Tamaños
Estados
06
Formularios
Campos grandes (52px mínimo), labels siempre visibles, errores que se explican solos.
Componente estrella
Encuentra tu dominio en un segundo
Campos
Te enviaremos la factura aquí.
Mínimo 8 caracteres.
https://
DisponibleSelección
07
Badges y stickers
Badges informan en el producto. Stickers: como mucho uno por pantalla de marketing y nunca en el panel.
Badges
NuevoPro-50%
NVMeBetaPor defecto
Estado (icono + texto, siempre)
Operativo
Degradado
Incidencia
Caído
Stickers
¡Rápido!
SSL gratis
Oferta
Primer mes 1€
Sin permanencia
08
Planes
Tres opciones, una destacada. Precio gigante, lista corta, un único botón.
Chispa
2,99€ /mes
- 1 web
- 10 GB NVMe
- SSL gratis
- 5 emails
Cohete
6,99€ /mes
- Webs ilimitadas
- 50 GB NVMe
- Dominio gratis 1 año
- Backups diarios
- Emails ilimitados
Bestia
14,99€ /mes
- Todo lo de Cohete
- 200 GB NVMe
- 4 vCPU dedicadas
- Soporte prioritario
09
Producto
Piezas del panel de cliente. Aquí baja el volumen: mismo lenguaje, menos fuegos artificiales.
mitienda.es
Plan Cohete · Madrid- IP
- 185.42.117.9
- PHP
- 8.3
- SSL
- Válido · 82 días
- Renueva
- 14 nov 2026
blog-viajes.com
Plan Chispa · Frankfurt- IP
- 91.204.33.180
- PHP
- 8.2
- SSL
- Válido · 12 días
- Renueva
- 2 dic 2026
Tabla — facturas
| Factura | Concepto | Fecha | Estado | Importe |
|---|---|---|---|---|
| SRV-2026-0142 | Plan Cohete · anual | 14 oct 2026 | Pagada | 67,08 € |
| SRV-2026-0131 | Dominio mitienda.es | 02 oct 2026 | Pagada | 9,99 € |
| SRV-2026-0127 | Plan Chispa · mensual | 28 sep 2026 | Pendiente | 2,99 € |
| SRV-2026-0098 | IP dedicada | 11 ago 2026 | Fallida | 4,00 € |
11
Feedback
Alertas, toasts, progreso y confirmaciones. El estado nunca va solo en color.
¡Servidor creado!mitienda.es ya está online. Tardó 47 segundos.
Tu SSL caduca en 12 díasLo renovaremos solos, pero revisa que el dominio apunte aquí.
Latencia alta en FrankfurtEstamos en ello. Tus datos están a salvo.
El pago ha falladoActualiza tu tarjeta para evitar la suspensión el 25 oct.
Toasts y modal
Progreso
Migrando tu web…0%
Cargando (skeleton)
Estado vacío
Aún no tienes webs
Crea la primera en menos de un minuto.
12
Datos
Métricas del panel: cifras grandes, gráficos finos, tooltips al pasar y tabla accesible.
Visitas · 30 días
48,2k
+18% vs mes anteriorUptime · 60 días
99,96%
Dentro del SLATiempo de respuesta
182ms
+24 ms vs ayerTráfico diario (GB)
Últimos 14 días · mitienda.esVer como tabla
| Día | GB |
|---|
Recursos
Uso actual · Plan CoheteCPU42%
RAM2,7 / 4 GB
Disco43,5 / 50 GB · casi lleno
Emails12 / ∞
Estado · últimos 60 días
Cada barra es un díahace 60 díashoy
Operativo
Degradado
Incidencia
Caído
13
Movimiento
Rápido y con rebote. Haz clic en cada pista. Se desactiva con “reducir movimiento”.
--t-fast · 120ms
Hover, press, toggles
--t-base · 220ms
Switches, tabs, tema
--t-slow · 480ms
Modales, toasts, resultados
--ease-snap
cubic-bezier(.2,1.4,.4,1)
14
Tokens
Listo para pegar en app/globals.css de Next.js con Tailwind v4.
@import "tailwindcss"; @theme { /* Marca */ --color-ink: #0a0a0a; --color-paper: #f3f0e8; --color-acid: #c8ff2e; --color-violet: #6b4bff; --color-pink: #ff3d8b; --color-cyan: #22c3ff; --color-orange: #ff6a13; --color-line-soft: var(--line-soft); /* Estado — siempre con icono + texto */ --color-good: #0ca30c; --color-warning: #fab219; --color-serious: #ec835a; --color-critical: #d03b3b; /* Tipografía */ --font-display: "Unbounded", system-ui, sans-serif; --font-sans: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Forma */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px; --shadow-brutal-sm: 2px 2px 0 0 var(--shadow-c); --shadow-brutal: 4px 4px 0 0 var(--shadow-c); --shadow-brutal-lg: 6px 6px 0 0 var(--shadow-c); --shadow-brutal-xl: 10px 10px 0 0 var(--shadow-c); /* Movimiento */ --ease-snap: cubic-bezier(.2, 1.4, .4, 1); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); } /* Semánticos por tema */ :root { --bg: #f3f0e8; --surface: #ffffff; --surface-2: #e9e4d8; --fg: #0a0a0a; --fg-2: #46443f; --fg-3: #77746c; --line: #0a0a0a; --line-soft: #dcd6c8; --shadow-c: #0a0a0a; } .dark { --bg: #0d0d10; --surface: #17171c; --surface-2: #222229; --fg: #f3f0e8; --fg-2: #c3c0b6; --fg-3: #8d8a82; --line: #f3f0e8; --line-soft: #2e2e36; --shadow-c: #c8ff2e; }