Página interna. Muestra la paleta con sus ratios de contraste, la escala tipográfica y todos los componentes en todos sus estados. Después de cambiar cualquier token, esta página se actualiza.
Todos los datos de proveedor, precio y comuna de esta página son de ejemplo y salen de la documentación del proyecto. Ningún proveedor real, ninguna familia real, ningún número de contacto real.
1 · Color
Verde institucional
#0A3B37
vita-verde-900
Fondos oscuros y pie de página
#0D4F4A
vita-verde-800
Institucional: títulos, logo, botón secundario
#116B63
vita-verde-700
Enlaces, acento sobre claro, anillo de foco
#158B80
vita-verde-600
Iconos y bordes. Nunca texto pequeño
#DCEDEA
vita-verde-100
Insignias y estados seleccionados
#EFF7F5
vita-verde-50
Fondos de sección suaves
Terracota de acento
#8F3B1C
vita-terra-800
Texto de acento sobre fondo claro
#A8481F
vita-terra-700
Botón primario presionado
#C2542E
vita-terra-600
Fondo del botón primario, con texto blanco
#FAE7DD
vita-terra-100
Fondos suaves y resaltados
#FDF3EE
vita-terra-50
Fondos de sección cálidos
Neutros cálidos
#FBF8F3
vita-crema
Fondo principal del sitio
#FFFFFF
vita-blanco
Tarjetas y modales
#F1EEE8
vita-arena
Fondos alternativos, píldoras, deshabilitados
#E3DED4
vita-linea
Bordes y divisores
#1B211F
vita-tinta
Texto de cuerpo
#4E5956
vita-tinta-2
Texto secundario
#646E6A
vita-tinta-3
Metadatos y fechas
Estado
#15803D
vita-exito
Confirmado, verificado, completado
#A85B00
vita-alerta
Pendiente, requiere atención
#B4231C
vita-error
Error, cancelado, rechazado
Contraste verificado
AA exige 4.5:1 en texto normal y 3:1 en texto grande. AAA exige 7:1 en texto normal. Estos ratios son los de la tabla de la skillmercadovita-design: si acá aparece un número distinto, uno de los dos está desactualizado.
Ratios de contraste verificados de la paleta
Combinación
Ratio
Cumple
tinta sobre crema
15.44:1
AAA
tinta sobre blanco
16.36:1
AAA
tinta-2 sobre crema
6.87:1
AA
tinta-2 sobre arena
6.28:1
AA
tinta-3 sobre crema
4.98:1
AA
tinta-3 sobre arena
4.56:1
AA
verde-800 sobre crema
8.87:1
AAA
verde-800 sobre verde-100
7.76:1
AAA
verde-700 sobre crema
5.99:1
AA
terra-800 sobre crema
7.05:1
AAA
terra-800 sobre terra-100
6.24:1
AA
terra-700 sobre crema
5.49:1
AA
blanco sobre verde-900
12.40:1
AAA
blanco sobre verde-800
9.40:1
AAA
blanco sobre terra-600
4.56:1
AA
verde-900 sobre verde-100
10.24:1
AAA
error sobre blanco
6.57:1
AA
alerta sobre blanco
5.05:1
AA
exito sobre blanco
5.02:1
AA
Las 5 combinaciones prohibidas
Las cinco se ven perfectamente legibles y ninguna de las cinco cumple. El ojo no mide contraste; por eso hay tabla.
terra-600 como color de texto sobre claro — 4.31:1
En vez de eso: terra-800 (7.05) para texto terracota
verde-600 en texto pequeño — 3.94:1
En vez de eso: verde-700 (5.99) o verde-800 (8.87)
exito sobre verde-100 — 4.14:1
En vez de eso: verde-900 sobre verde-100 (10.24)
exito sobre arena — 4.33:1
En vez de eso: fondo blanco (5.02), o texto tinta-2 sobre arena (6.28)
alerta sobre arena — 4.36:1
En vez de eso: fondo blanco (5.05), o texto tinta-2 sobre arena (6.28)
2 · Tipografía
Dos familias y ninguna tercera. Fraunces para los títulos, con los ejes SOFT 30 y WONK 0; Figtree para el texto y la interfaz. El tamaño base es 18px, no 16px, y eso es una decisión de accesibilidad.
text-xs
14px · Figtree
Metadatos y notas legales. Nunca contenido
Cuidado en casa para tus papás
text-sm
16px · Figtree
Etiquetas de formulario, texto de apoyo
Cuidado en casa para tus papás
text-base
18px · Figtree
Cuerpo por defecto
Cuidado en casa para tus papás
text-lg
20px · Figtree
Texto destacado, bajadas
Cuidado en casa para tus papás
text-xl
24px · Fraunces
H4, títulos de tarjeta
Cuidado en casa para tus papás
text-2xl
30px · Fraunces
H3
Cuidado en casa para tus papás
text-3xl
36px · Fraunces
H2
Cuidado en casa para tus papás
text-4xl
44px · Fraunces
H1 en móvil
Cuidado en casa para tus papás
text-5xl
56px · Fraunces
H1 en escritorio
Cuidado en casa para tus papás
Reglas de aplicación
El cuerpo va en Figtree 400 sobre vita-tinta, con un ancho máximo de 65 caracteres, alineado a la izquierda y nunca justificado. Un enlace dentro de un texto va en verde-700 y siempre subrayado, como este de acá: un enlace que solo se distingue por color no es accesible.
Texto secundario en vita-tinta-2. Los botones y las etiquetas van en Figtree 600, en minúscula con inicial mayúscula, nunca en versalitas: las mayúsculas se leen más lento y este público lee bajo presión.
3 · Forma, sombra y medida
rounded-card · 16px
rounded-btn · 12px
rounded-pill · 999px
shadow-card
shadow-card-hover
shadow-modal
toque · 48px, el área mínima de todo control
max-w-content · 1120px
Es el ancho de esta misma página. El bloque de lectura usa max-w-prose, que son 65 caracteres, y es otra cosa.
4 · Primitivas
Botón · 4 variantes
Uno primario por pantalla. Si hay dos botones terracota compitiendo, uno de los dos está mal.
Botón · 3 tamaños
Botón · estados
El deshabilitado no depende de la opacidad: cambia el fondo a arena y el texto a tinta-3. Y sigue recibiendo el tabulador, para que quien navega con teclado se entere de que existe. El de carga siempre dice con palabras qué está pasando.
Enlace con pinta de botón
Cuando la acción es navegar, el elemento correcto es un enlace, no un botón. Se ve igual.
Etiqueta siempre visible sobre el campo. Nunca flotante ni marcador de posición usado como etiqueta: desaparece justo cuando se necesita.
Entre 1 y 12 horas.
Falta el número de la calle. Lo necesitamos para calcular qué proveedores llegan a tu dirección.
Se define al elegir el perfil de cuidado.
Por ejemplo, si hay un perro en la casa o si el portón se abre por el costado.
Selector y casilla
Elige una categoría. Con eso sabemos qué proveedores mostrarte.
Te escribimos al correo. Puedes desactivarlo cuando quieras.
Necesitamos que aceptes los términos para poder crear tu cuenta.
Etiqueta, mensaje de error, insignia y avatar
No pudimos guardar el cambio. Vuelve a intentarlo en un momento; lo que escribiste se conservó.
Insignia verdeInsignia terracotaInsignia neutra
CCC
40, 56 y 72px. La variante con fotografía se ejercita en el bloque 3.B, cuando exista Vercel Blob.
5 · Composición
Tarjeta y encabezado de sección
Próximos turnos
Lo que viene esta semana, ordenado por fecha.
Pantalla sin resultados
Nunca “0 resultados”. Se dice qué pasó, qué se hizo al respecto y qué se puede hacer ahora.
Todavía no hay nadie disponible en Til Til para ese día
Ampliamos la búsqueda a 25 km y encontramos 4 personas en comunas cercanas. También podemos avisarte apenas haya alguien disponible más cerca de tu casa.
Una por árbol de rutas. Bajo 1024px de ancho el listado se guarda en el menú. Los enlaces de los tres portales llevan a rutas que todavía no existen: los layouts se crean en el bloque 2.E.
MercadoVitaMercadoVitaMercadoVitaCuidado en casa para tus papás
MercadoVitaCuidado en casa para tus papás
6 · Componentes de dominio
Tarjeta de proveedor
El componente más importante del producto. El total con comisión se ve junto a la tarifa, desde el primer momento. Las insignias son pulsables: cada una explica qué se revisó.
C
Carmen Rojas
Cuidadora · 6 años de experiencia
4,8 de 5
Identidad verificada. Ver qué revisamos
Revisamos su cédula de identidad por ambos lados junto a una foto tomada en el momento, y comprobamos su teléfono y su correo.
Antecedentes verificados. Ver qué revisamos
Revisamos su certificado de antecedentes para fines especiales. Se revalida cada 6 meses: si vence, el perfil deja de aparecer en la búsqueda.
Formación verificada. Ver qué revisamos
Revisamos su título técnico o profesional, o el certificado del curso que acredita su formación.
Carmen recibe $24.000. La comisión cubre la verificación, el pago protegido y el reemplazo.
Cuidado por horas · Carmen Rojas
Sábado 18 de octubre, 22:00 a 02:00 (4 horas)
Tarifa de Carmen4 h × $6.000
$24.000
Recargo de fin de semana (+15%)
$3.600
Recargo nocturno (+25%)
$6.000
Comisión MercadoVita (12%)
$4.032
IVA sobre la comisión
$766
Total a pagar
$38.398
Carmen recibe $33.600. La comisión cubre la verificación, el pago protegido y el reemplazo.
Estado de una reserva · los 12
Color, icono y palabra. Los tres, siempre. Sobre fondo blanco y no sobre arena, porque alerta y éxito sobre arena no llegan a 4.5:1.
Esperando confirmación
Confirmada
Rechazada
Expirada
En curso
Completada
Pago liberado
Cancelada por la familia
Cancelada por el proveedor
No asistió
En disputa
Resuelta
Insignias de confianza
Cada una se abre y dice qué se verificó y cuándo. Una insignia que no se puede auditar es publicidad, no confianza.
Identidad verificada. Ver qué revisamos
Revisamos su cédula de identidad por ambos lados junto a una foto tomada en el momento, y comprobamos su teléfono y su correo.
Última revisión: 14 de octubre de 2026
Antecedentes verificados. Ver qué revisamos
Revisamos su certificado de antecedentes para fines especiales. Se revalida cada 6 meses: si vence, el perfil deja de aparecer en la búsqueda.
Última revisión: 14 de octubre de 2026
Formación verificada. Ver qué revisamos
Revisamos su título técnico o profesional, o el certificado del curso que acredita su formación.
Última revisión: 14 de octubre de 2026
Registro profesional verificado. Ver qué revisamos
Comprobamos su inscripción vigente en el Registro Nacional de Prestadores Individuales de la Superintendencia de Salud. Se revalida cada año.
Última revisión: 14 de octubre de 2026
Referencias verificadas. Ver qué revisamos
Llamamos a 2 referencias laborales que nos entregó y conversamos con ellas.
Última revisión: 14 de octubre de 2026
Recomendado por familias. Ver qué revisamos
Tiene sobre 4,7 de calificación con 10 servicios completados o más.
Última revisión: 14 de octubre de 2026
Nuevo en MercadoVita. Ver qué revisamos
Lleva menos de 5 servicios completados con nosotros. Pasó las mismas verificaciones que el resto; lo que todavía no tiene es historial.
Última revisión: 14 de octubre de 2026
Calificación
4,8 de 5(24 reseñas)4,2 de 5(3 reseñas)Sin calificaciones aúnSin calificaciones aún
Bajo 3 reseñas no se muestra promedio. Un 5,0 hecho con una sola reseña no informa nada, y esconder la falta de historial destruiría la confianza del sistema completo.
Selector de comuna
Agrupadas por provincia. Las 52 comunas de la Región Metropolitana llegan en el bloque 2.C.
7 · Auditoría de accesibilidad
Las 15 reglas de 02-MARCA.md §11 son criterios de aceptación, no recomendaciones. Acá está dónde vive cada una. Las que dicen “se comprueba en el navegador” no las puede verificar ninguna herramienta de este repositorio.
Las 15 reglas de accesibilidad y dónde se cumple cada una
Regla
Qué exige
Dónde se cumple
A-01
Contraste mínimo 4.5:1 en todo texto
Tabla de esta página, sección 1
A-02
Área de toque mínima 48×48px
Botones, enlaces del pie, casillas, insignias pulsables
A-03
Base 18px y zoom al 200% sin romper
body en globals.css. Se comprueba con el zoom del navegador
A-04
Foco visible de 3px verde-700
:focus-visible en globals.css. Ningún componente lo quita. Sobre fondo verde-900 el anillo verde no se ve (1.95:1): esas superficies llevan la clase superficie-oscura y su foco pasa a blanco
A-05
Operable solo con teclado
Modal, menú de navegación e insignias usan elementos nativos
A-06
Texto alternativo en toda imagen con información
Avatar. Los iconos decorativos van con aria-hidden
A-07
Encabezados sin saltos, un h1 por página
EncabezadoSeccion recibe el nivel como prop
A-08
El color nunca es el único portador
EstadoReserva, MensajeError y Calificacion llevan icono y palabra
A-09
Enlaces en texto subrayados
Base de globals.css para <a>
A-10
Todo campo con etiqueta asociada por id
Campo, Selector y Casilla exigen id
A-11
Errores anunciados con role="alert"
MensajeError
A-12
Sin animaciones automáticas; prefers-reduced-motion
Base de globals.css
A-13
Idioma declarado
lang="es-CL" en layout.tsx
A-14
Nada depende de mantener, deslizar o doble toque
Ningún componente usa esos gestos
A-15
Teléfono de soporte pulsable en toda pantalla
Pie. Hoy muestra el marcador: el número llega en el 11.F
El teléfono de soporte del pie muestra un marcador y no un número: el real no existe todavía y la regla 9 de CLAUDE.md prohíbe inventarlo. El bloque 11.F cambia una constante en src/lib/contacto.ts y el enlace tel: aparece solo.