Mercado Carambola UI
Losa Criolla v3.1 — design system
Role-named tokens, dual-theme (light default, dark via system), real fonts, and the reusable component layer. This route is internal and does not represent final marketplace pages.
Color tokens
ground
#FAF7F0
surface
#F3EFE6
surfaceRaised
#FFFFFF
border
#E7E1D4
borderStrong
#6E5F51
ink
#2B211A
inkMuted
#6A5D50
surfaceInverse
#2B211A
surfaceInverseInk
#FAF7F0
primary
#57603F
primaryHover
#4A5234
primaryInk
#FBF6EC
primarySoft
#EDEEE3
vino
#75353D
vinoInk
#FBF3EC
vinoSoft
#F2E3E0
mostaza
#DFAE4A
mostazaInk
#3A2C09
mostazaText
#7A5C00
mostazaSoft
#F6EBD2
violeta
#655878
violetaText
#655878
violetaSoft
#EDE9F2
azulejo
#3A6B64
azulejoSoft
#E4ECE7
success
#2F7244
warnText
#8A6410
warnFill
#DFAE4A
error
#A63D31
errorFill
#A63D31
errorInk
#F6DEDA
errorSoft
#F6DEDA
info
#2F6468
focus
#3A6B64
Typography
Display — Archivo
Tu isla. Tu gente. Todo, con AI.
Archivo (variable, axes: wdth). Brand voice lives in the extremes — wide, heavy weights for headers; narrower for data labels.
UI sans — Asap
Encuentra servicios, compra en Mercado y conecta con la comunidad local sin perder claridad.
Asap. Body/UI text — tabular digits by default, no-reflow bolding.
Prices, timestamps — Chivo Mono
$1,240.00 · 12:04 PM · #A19204
Chivo Mono. Prices, timestamps, and IDs — tabular by default.
Primitives
Buttons, chips, cards, and forms
Oliva is the CTA everywhere — nothing else wears it
Sections
Round medallions carry section identity — solid accent fill, white glyph (espresso on Mostaza, the one exception per the contrast rule).
Servicios
Ayuda local confiable para el hogar, bienestar y negocio.
Mercado
Tiendas, creadores y compras locales.
Comunidad
Eventos, empleos, experiencias y vida local.
Motion tokens
Three tokens, transform/opacity only
Every usage ships a motion-reduce: counterpart that swaps movement for a fade. Try the save-heart above with reduced motion enabled.
--motion-tap
120ms cubic-bezier(.2,.8,.4,1)
Pressed state: scale .97 + shade. Buttons, chips, tappables.
--motion-transition
240ms cubic-bezier(.2,.8,.2,1)
Sheets, reveals, card hover lift.
--motion-spring
350ms linear(0,.6 18%,1.05 45%,.98 70%,1)
Heart-pop, celebration moments.
Badge system
Trust signals for local discovery
Residente verificado en PR
Esta persona confirmó presencia o residencia en Puerto Rico usando métodos aceptados por Mercado Carambola.
Proveedor verificado
Este proveedor completó pasos de verificación de perfil, contacto y servicio.
Negocio registrado en PR
Este negocio presentó documentos que indican operación o registro comercial en Puerto Rico.
Opera en Puerto Rico
Este perfil ofrece servicios, entregas, recogido o atención dentro de Puerto Rico.
Impacto local
Este perfil cumple criterios de contribución local, como empleo, producción, operación o reinversión en Puerto Rico.
Hecho en PR
Producto, servicio o creación hecha o producida en Puerto Rico.
Licencia verificada
Este perfil tiene una licencia profesional revisada para una categoría regulada.
Seguro verificado
Este perfil presentó evidencia de cobertura para servicios de mayor riesgo.
Responde rápido
Este perfil mantiene buen historial reciente de respuesta a mensajes o solicitudes.
Buen historial
Este perfil muestra actividad consistente, baja fricción y buen comportamiento en la plataforma.
Alta satisfacción
Este perfil tiene señales positivas de satisfacción, reseñas o resultados completados.
Organizador verificado
Este organizador completó pasos básicos de verificación para publicar actividades o eventos.
Host verificado
Este host completó pasos básicos de verificación para ofrecer experiencias locales.
Empleador verificado
Este empleador completó pasos básicos de verificación para publicar oportunidades.
Todavía no hay resultados
Un patrón para cuando una lista todavía no tiene resultados, sin convertirlo en una página final.
¿Para qué sirve esta ruta?
¿Dónde viven los componentes?
Mockup references
Lightweight file references only. These mockups inform spacing, tone, radius, badges, buttons, and image treatment without recreating full pages or loading the full mockup folder.
Homepage
HomePage_v4.png
Hero hierarchy, editorial spacing, badge placement
Mercado
Mercado_v4.png
Marketplace cards, image containers, category rhythm
Servicios mobile
Servicios_mobile_v4.png
Mobile stacking, compact controls, touch spacing
Design system
DesignSystem.png
Token balance, components, surface treatment