17Vie
HoyExotic Dance Party
12 €Entradas
Sistema de diseño · v0.3 · octubre 2026 · Kevin & Lucía
Escaparate del sistema de diseño
Cada elemento de esta página usa solo los tokens de tokens.css. La base es la de la marca actual: negro, blanco y rojos; Tactico, Randrake y Montserrat. Cambia de tema, pausa el movimiento o enciende las guías para ver cajas y distancias.
Pantalla de ejemplo
La home del sitio con datos de ejemplo. Por debajo de 980 px pasa a una columna.
Hoy · Galaxy Dance · 20:30
BAILA
Clases de bachata en Valencia, socials cada semana y una academia online para entrenar desde casa. Con Kevin & Lucía.
4días de clase
2socials por semana
15píldoras online
Valencia
Próxima claseHoy
Bachata · Nivel medio
20:30 · Ciclo de Valencia5 plazas
Esta semana
Ver todos
Academia online
Ver cursos
Pareja9 píldoras · conexión, guía y musicalidad
InicioMedioAvanzado
desde39,99 €
Lady Style3 píldoras · brazos, cadera y estilo
Lady Style
desde39,99 €
Man Style3 píldoras · presencia, marcaje y estilo
Man Style
desde39,99 €
Hoy
HoySemana
19:30
20:30
21:30
Bachata 1
Inicio · Sala 1
8 plazasInicio · Sala 1
20:12
20:30Bachata 2
Medio · Sala 1
5 plazasMedio · Sala 1
Técnica chica
Lady Style · Sala 2
LadyLady Style · Sala 2
Galaxy Dance
Social 80% bachata
CompletoSocial 80% bachata
Colores
Tokens semánticos leídos del tema activo: cambian al pasar de Noche a Día. Debajo, los primitivos de marca de los que salen.
canvasFondo
surfaceTarjetas
surface-mutedInputs, botón secundario
inverseBotón inverso, tab activa
heroTarjeta héroe
text-primaryTexto
text-secondaryDescripciones
text-mutedMetadatos
border-subtleBordes y divisores
on-accentTexto sobre rojo
accentBotón principal, el 4
accent-softTinta suave
accent-inkTexto sobre tinta
lady-softRecorrido Lady Style
man-softRecorrido Man Style
Primitivos de marca
negro
#000000blanco
#F9F9F9rojo
#CF0421rojo-vivo
#E60101granate
#9B030Asangre
#770000lila
#A760FFazul
#1449ABPresupuesto por pantalla: una tarjeta héroe roja, un botón principal rojo y el acento en dos elementos más como mucho. Lila y azul solo identifican Lady Style y Man Style.
Tipografía
Nueve estilos, ninguno más. Tactico para titulares y cifras, Randrake para una sola firma, Montserrat para todo lo demás.
t-cartelTactico · 72–128 · solo en el héroe
BAILAt-h1Tactico · 36–52 · títulos de sección
Esta semanat-h2Tactico · 30 · eventos, precios
Exotic Dance Partyt-firmaRandrake · 40 · una palabra
conmigot-h3Montserrat 17 · 700
Bachata · Nivel mediot-bodyMontserrat 15 · 400
Rotamos durante la clase, así que nadie se queda sin bailar aunque vengas sin pareja.t-body-smMontserrat 13 · 400
Recibirás un email con el acceso a la academia.t-labelMontserrat 13 · 600
Guardar cambiost-captionMontserrat 12 · 500
Vie 17 oct · 19:30 · 5 plazas · 12,00 €Tactico dibuja las letras acentuadas sin tilde (Á sale A) y sus minúsculas son glifos alternativos. Siempre en mayúsculas y con palabras sin tilde; si el título la necesita, usa t-h3.
Randrake no tiene acentos ni ñ. Una sola palabra por pantalla (conmigo, juntos, bachata). Nunca nombres como Lucía.
Espaciado
Escala en base 4 px. El espacio entre hermanos se pone siempre con gap en el contenedor, nunca con márgenes.
Escala
1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
24 · 96px
Distancias por relación
| Icono ↔ texto en chip | 4 | space-1 |
| Icono ↔ texto en botón | 8 | space-2 |
| Etiqueta ↔ campo | 8 | space-2 |
| Tarjeta ↔ tarjeta | 12 / 16 | space-3 / 4 |
| Cabecera ↔ contenido de tarjeta | 16 | space-4 |
| Contenido ↔ acciones de tarjeta | 20 / 24 | space-5 / 6 |
| Bloques del héroe | 24 | space-6 |
| Sección ↔ sección | 48 / 64 | space-12 / 16 |
| Margen lateral de página | 20 / 32 | space-5 / 8 |
Formas y elevación
Esquinas suaves, botones siempre en píldora. En Noche las sombras se convierten en un hilo de borde.
radius-sm · 6px
radius-md · 12px
radius-lg · 20px
radius-xl · 28px
radius-full
shadow-1 · tarjeta
shadow-2 · flotante, hover
hero · sin sombra
Movimiento
Son bailarines: el movimiento es parte de la marca, pero con reglas. Seis efectos, todos a 128 BPM (un tiempo = 470 ms). Con «Quieto» o con «reducir movimiento» del sistema, todo se detiene.
1234
Golpe
Los elementos entran en grupos de cuatro: tres suaves y el cuarto con acento, como el golpe de cadera.
- Duración
- 1 tiempo por elemento, ½ de desfase
- Curva
- ease-paso · ease-golpe en el 4
- Uso
- Entrada del héroe, listas
FocoPasa el cursor
La foto se imprime en trama roja; el cursor es un foco que le devuelve el color. En móvil el foco se mueve solo.
- Duración
- Sigue al cursor · 8 tiempos por vuelta en táctil
- Curva
- lineal
- Uso
- Solo la tarjeta héroe
Eco
La silueta deja una estela que repite el movimiento con retraso, como el cuerpo que sigue a la música.
- Duración
- 1 compás en bucle
- Curva
- ease-ola
- Uso
- Fotos recortadas del héroe
REGISTRO
RegistroPasa el cursor
Una copia roja ligeramente descuadrada, como un cartel de imprenta. Al pasar el ratón encaja.
- Duración
- ½ tiempo
- Curva
- ease-golpe
- Uso
- Solo el t-cartel del héroe
Hoy · 20:30Últimas 3 plazas
Latido
Un pulso por tiempo. Solo para lo que está vivo: eventos de hoy y plazas que se acaban.
- Duración
- 1 tiempo en bucle
- Curva
- ease-golpe
- Uso
- Chips «Hoy» y de plazas
EVENTOS
Telón
Transición entre páginas: cinco bandas rojas y granate caen y se levantan.
- Duración
- 1 compás · 50 ms entre bandas
- Curva
- ease-ola
- Uso
- Navegación entre páginas
Componentes
Las piezas de la pantalla de ejemplo, aisladas.
Chips y estados
HoyÚltimas plazasInicioMedioAvanzadoLady StyleMan StyleCompleto
ClasesEventosAcademia
No hay eventos esta semana
Volvemos a la pista el miércoles 29. Mientras, entrena con la academia.
Ver la academiaIconos
Phosphor, una sola librería. Regular por defecto, Fill para micro indicadores, Duotone para estados vacíos. Cada icono vive en una caja de tamaño fijo.