La fuente de verdad de nuestra identidad: clínica, confiable y moderna. Una base neutral en escala de grises, un acento naranja firme y una familia púrpura para datos. Cada pantalla del producto debería sentirse parte de este mismo sistema.
Un producto SaaS premium para profesionales de la salud. La energía nace del contraste, no de la saturación.
La base en escala de grises mantiene los datos médicos legibles y en calma. Nada estridente, nada estéril.
El naranja señala acción: CTAs, badges y highlights. Se usa con moderación para crear contraste.
La familia fría púrpura/lila conduce la visualización de datos y los acentos secundarios, siempre con intención.
Un producto preciso y premium para la salud. Refinado — nunca ruidoso ni juguetón.
Archivo para toda la UI; Erode (serif) reservada para el h1 editorial. Los títulos van en peso medium, tracking ajustado y balanceados — nunca gritones.
Archivo (body y UI) · Erode (display h1). Nunca importes Google Fonts ni añadas familias nuevas.
Inteligencia médica en la que confiar
Diseñado para equipos clínicos
Respuestas médicas verificadas con fuentes, listas para el flujo de trabajo real.
98.6%
Actualizado con la evidencia más reciente
Tokens semánticos para todo (el dark mode funciona automáticamente). La paleta de marca se reserva para CTAs, badges, highlights y visualización de datos.
brand-warm-100brand-warm-200brand-warm-300brand-warm-400brand-warm-500brand-cool-100brand-cool-200brand-cool-300brand-resolutebrand-accentbrand-darkbrand-lightbg-backgroundtext-foregroundbg-primarybg-secondarybg-mutedbg-accentbg-cardborder-borderbg-successbg-warningbg-destructivering-ringComponé sobre components/ui/* antes de construir a medida. Un solo RainbowButton como CTA principal por vista; el resto se mantiene en calma.
Gasta el presupuesto de animación en un reveal de carga orquestado y un único elemento focal. El resto se mantiene en calma y respeta prefers-reduced-motion.
| Uso | Duración | Easing |
|---|---|---|
| Hover color/transform | 150–200ms | ease-in-out |
| Reveal / crossfade | 300–400ms | ease-out / easeInOut |
| Slide de paneles | 300ms | cubic-bezier(0.87,0,0.13,1) |
| Loops ambientales | 2s–50s | linear infinite |
Cuando tengas dudas, imita la landing page. Tokens semánticos sobre hex, dos fuentes, dark mode obligatorio y motion contenido. Este documento manda sobre cualquier estética generada.
Volver al producto