propuesta a · descartada
Catálogo directo
// hero → precio → características → contacto
Va al grano, pero pide dinero antes de explicar el valor. Y no tenemos precio: tenemos reserva conceptual.
// la marca
Todo parece GitMug.
A propósito.
Cartel promocional, ficha de identidad, mini guía de estilo y la estructura de contenidos que elegimos. Las pruebas de las misiones 1 a 4, en una página.
// m1 — cartel promocional
Entra por los ojos.
Por qué funciona: 6 decisiones
- jerarquía
- Titular de 72 px primero, promesa después y una sola acción al final. El ojo no duda.
- contraste
- Blanco sobre tinta casi negra, con un único acento verde en la palabra clave: «a salvo».
- proximidad
- Fecha de envío y botón de reserva viajan juntos: forman una sola unidad de decisión.
- alineación
- Todo el texto a la izquierda sobre la misma rejilla; el producto, a la derecha, la equilibra.
- equilibrio
- Masa visual del termo frente a masa tipográfica: ningún lado pesa más que el otro.
- aire
- Espacio en blanco generoso alrededor. El vacío también comunica: esto es premium.
// m2 — ficha de identidad
Cinco colores. Dos voces.
Paleta · cada color tiene un trabajo
- Lienzo · #F5F5F2Fondos. Que respire. (En modo claro)
- Tinta · #111315Fondos oscuros y texto.
- Acción · #4F7CFFSolo CTAs y enlaces.
- Passing · #22C55EÉxito y pipeline ok.
- Failing · #EF4444Errores. Nada más.
+ gris secundario (#7C8491) de apoyo para bordes y texto. El verde y el rojo nunca decoran: siempre significan algo.
Tipografías · humana + máquina
Aa
Inter · titulares y texto
Hardware sobrio.
Párrafos limpios con interlineado generoso. Cálida, legible, invisible. Identidad visual en mayúsculas.
Aa
JetBrains Mono · código y etiquetas
// etiquetas, métricas y estado
✓ pipeline passing
Botones · tres y un enlace
Reservar GitMug
Reservar
Restablecer vista
Ver características →
regla: botones principales contundentes. El azul y blanco significan «avanzar».
// m4 — mini guía de estilo
Pocas reglas. Siempre iguales.
Tarjetas
01
Título claro
Borde fino, sin radios excesivos, estilo tech industrial.
Iconos · funcionales
Lineales, sin relleno, estilo dashboard.
Imágenes
- Formatos óptimos: uso de WebP/MP4.
- Alt descriptivo: toda imagen cuenta qué muestra.
- 3D Realtime: el producto físico convertido a WebGL.
Espaciado y forma
4 · 8 · 16 · 24 · 32 px — nada fuera de escala.
sin radios curvos pronunciados · diseño arquitectónico.
// m3 — estructura de contenidos
Dos formas de contarlo. Elegimos una.
elegida
propuesta b · en la web
Historia primero
// hero + claim → 3D → vídeo → integraciones → características → reserva
El usuario entiende el valor antes de actuar. Una narrativa fluida y una sola acción principal: reservar.