94 Möment Score
Vinos de Aragón a la luz de las velas
desde 23 € / persona
Maquetas · Spec 002
Referencia del sistema de diseño
Todo el lenguaje visual de MÖMENTS en una sola página: marca, colores, letras, formas, componentes y navegación. Las piezas son las mismas que usan el resto de maquetas. Solo se muestra el tema claro; la sección oscura (DS-23) aparece al final.
Idea en una frase y marca
MÖMENTS te ayuda a vivir cosas que quieras recordar: más revista de experiencias que catálogo, cálida, elegante y de confianza.
Logotipo provisional sobre fondo claro (DS-17). Los dos puntos de la «ö» son dos chispas: una en coral y otra en el color del texto.
Variante sobre Obsidian: el texto pasa a Ivory y la chispa coral se mantiene.
Símbolo reducido «ö» para el favicon, el botón Crear y el indicador de carga.
Vive momentos que quieras recordar.
Colores
Negro, marfil y coral mandan; lavanda y rosa acompañan sin ocupar más que el coral (DS-4). Cada color viene de assets/tokens.css.
Marca
- Obsidian--color-obsidian · #171717Texto principal, superficies oscuras, foco y chip seleccionado.
- Ivory--color-ivory · #F8F5EFFondo principal; texto dentro de la sección oscura.
- Coral--color-coral · #FF6B5FAcción principal y marca. Solo como fondo de texto Obsidian o como decoración.
- Coral encima--color-coral-hover · #FF5A4DBotón principal al pasar el puntero por encima.
- Coral-ink--color-coral-ink · #C23B30Texto y enlaces en coral sobre fondos claros.
- Lavanda--color-lavender · #8B7CF6Secundario y decorativo; fondo de texto Obsidian.
- Lavanda-ink--color-lavender-ink · #5E4BD4Texto lavanda y color de información.
- Soft Pink--color-pink · #F5D9DCFondos suaves, avatar con iniciales y foto que falta.
- Blanco--color-white · #FFFFFFSuperficie: tarjetas, paneles y campos.
Funcionales
- Texto secundario--color-ink-muted · #6B6560Metadatos, pistas de campo y textos de apoyo.
- Línea decorativa--color-line · #D8D2C8Separadores y bordes de tarjeta. No marca controles, así que no necesita contraste.
- Borde de control--color-control · #8C857CContorno de campos, chips y selector de personas.
- Error--color-error · #B42318Mensajes de error, campo no válido y alérgenos que contiene.
- Aviso--color-warning · #8A5A00Avisos que piden atención sin ser un error.
- Éxito--color-success · #176B45Confirmaciones: reserva hecha, recuerdo guardado.
Pares de texto y fondo
Mínimos de DS-2: 4,5:1 para texto normal y 3:1 para texto grande, iconos con significado y bordes de control. Los valores están calculados con los tokens.
Coral original sobre Ivory no se usa para texto. El texto o los enlaces en coral usan siempre coral-ink (#C23B30), y el texto sobre un fondo coral es siempre Obsidian, nunca blanco ni Ivory.
- Aaink / bg
Obsidian sobre Ivory16.48 - Aaink / surface
Obsidian sobre blanco17.93 - Aaink-muted / bg
Secundario sobre Ivory5.28 - Aaink-muted / surface
Secundario sobre blanco5.74 - Aaon-accent / accent
Obsidian sobre Coral6.42 - Aaon-accent / accent-hover
Obsidian sobre Coral encima5.82 - Aaaccent-ink / bg
Coral-ink sobre Ivory4.87 - Aaaccent-ink / surface
Coral-ink sobre blanco5.30 - Aainfo / bg
Lavanda-ink sobre Ivory5.62 - Aainfo / surface
Lavanda-ink sobre blanco6.12 - Aaerror / bg
Error sobre Ivory6.04 - Aaerror / surface
Error sobre blanco6.57 - Aawarning / bg
Aviso sobre Ivory5.45 - Aasuccess / bg
Éxito sobre Ivory5.98 - Aaink / lavender
Obsidian sobre Lavanda5.39 - Aaink / pink
Obsidian sobre Soft Pink13.52 - control / bg
Borde de control sobre Ivory · no textual, mínimo 33.35 - control / surface
Borde de control sobre blanco · no textual, mínimo 33.65 - focus / bg
Anillo de foco Obsidian sobre Ivory16.48
Tipografía
Dos familias, nada más (DS-3): Manrope para la interfaz y el texto, y DM Serif Display solo para titulares y frases emocionales.
Manrope · 400 a 800
Cata de vinos en El Tubo
Seis vinos de Aragón con la bodeguera Marta, en una cueva del siglo XVI.
Regular 400 · Semibold 600 · Bold 700 · Extrabold 800
DM Serif Display · 400 y cursiva
Un sábado para recordar
Porque sí.
Escala
--text-5xl · 3rem / 1.05 · serif
¿Qué momento quieres vivir?
--text-4xl · 2.25rem / 1.12 · serif
Tu próximo Möment está listo
--text-3xl · 1.875rem / 1.2 · serif
Atardecer sobre el Ebro
--text-2xl · 1.5rem / 1.3 · serif
Para regalar
--text-xl · 1.25rem / 1.45
Hemos preparado este Möment para ti
--text-lg · 1.125rem / 1.55
Tres experiencias que podrían convertirse en un gran Möment.
--text-base · 1rem / 1.6
Kayak tranquilo por el Ebro al caer la tarde y cena a la brasa en el Arrabal. Todo a menos de diez minutos a pie.
--text-sm · 0.875rem / 1.45
El Tubo, Zaragoza · sáb 10 oct · 90 min
Forma: radios, sombras, espaciado y movimiento
Esquinas redondeadas y sombras suaves con base Obsidian: cálido, nunca duro.
Radios
- --radius-control
0.75rem · campos y avisos - --radius-card
1rem · tarjetas y fotos - --radius-sheet
1.5rem · hojas y tarjeta de Möment - --radius-pill
botones y chips
Sombras
- --shadow-card · tarjetas en reposo
- --shadow-raised · encima, hojas, avisos flotantes
Espaciado
Base de 4 px (--spacing: 0.25rem). Pasos habituales:
- × 1 · 4 px
- × 2 · 8 px
- × 3 · 12 px
- × 4 · 16 px
- × 6 · 24 px
- × 10 · 40 px
- × 16 · 64 px
Márgenes de página: 16 px en móvil, 24 px desde 640 px y 40 px desde 1024 px. Ancho máximo del contenedor: 1280 px.
Movimiento
Curva --ease-out: cubic-bezier(0.22, 1, 0.36, 1). Con «reducir movimiento» activado, todo dura como mucho 150 ms (DS-24).
--duration-fast · 150 ms · botones, chips, campos
--duration-base · 250 ms · hojas, avisos, cabecera
--duration-slow · 600 ms · pasos y aparición de contenido
Botones
Una sola acción principal en coral a la vez por pantalla (DS-4). Los botones dicen lo que pasa al pulsarlos.
Los estados encima, pulsado y foco se ven interactuando: pasa el puntero, mantén pulsado o recorre la página con la tecla Tab.
Principal
Normal · deshabilitado · cargando (conserva el tamaño, anuncia «cargando» y no admite un segundo envío).
Secundario
De texto
Tamaños y variantes
Formularios
Etiqueta siempre visible y áreas táctiles de 44 × 44 px (DS-7). Los campos opcionales añaden «(opcional)»; los obligatorios no llevan marca.
Componentes
Las piezas con las que se construyen todas las pantallas.
Chips
¿Qué te apetece? · selección múltiple
Seleccionado: fondo Obsidian y marca de verificación, no solo color (DS-10).
Tarjeta de experiencia
-
-
Nueva
Kayak al atardecer por el Ebro
desde 29 € / persona
-
Taller de cerámica en el Gancho
desde 35 € / persona
Toda la tarjeta es un único enlace. El precio «desde» se redondea al euro hacia arriba. La tercera muestra la foto que falta: Soft Pink con la «ö».
Tarjeta de Möment
Un sábado para recordar
Sábado 10 de octubre · 2 personas · 3 experiencias
- 19:00
- 21:00
- 23:00
Romántico y gastronómico, dentro de vuestro presupuesto y todo a menos de 10 minutos a pie.
70 € / persona
140 € en total para 2
Indicador de pasos
Paso 2 de 5
¿En qué ciudad?
Avisos
No hemos podido completar el pago. Tu tarjeta no se ha cargado. Prueba de nuevo o usa otra tarjeta.
Tu próximo Möment está listo. Te hemos enviado la confirmación a marta@correo.es.
Quedan 2 plazas. La cata del sábado 10 de octubre está casi completa.
La anfitriona confirma las experiencias por solicitud en menos de 24 horas.
Aparece abajo, dura al menos 5 s y no se va con el puntero encima.
Avatar, etiquetas y carga
MG
JR
94 Möment Score
Nueva
90 min
Por solicitud
Confirmada
Diálogo y hoja inferior
En móvil sube desde abajo; desde 640 px se centra. Se cierra con Escape, con la X o tocando fuera, y devuelve el foco al botón.
Sección oscura
Para secciones editoriales o sobre fotografía (DS-23): fondo Obsidian, texto Ivory y los mismos componentes, que ajustan sus colores y su foco.
Para regalar
Regala una experiencia, no un objeto.
Elige un Möment y lo enviamos con una tarjeta para que lo viva cuando quiera.
92 Möment Score
2 h
Dentro de la sección cambian: superficie #222120, texto secundario #CFC8BD, línea #3A3836, borde de control #A59E94, coral para texto #FF8A80 y foco Ivory con halo Obsidian (definidos en base.css).