Sistema de diseño · v1.0 · Noviembre 2026
drgustavojimenez.bariatrica.cr
Tokens, componentes y patrones para el sitio del Dr. Gustavo Jiménez R., cirujano con 20 años de experiencia en cirugía laparoscópica. Verde agua como color primario; el gris, solo como acento.
00 · Principios
Claridad que tranquiliza
El paciente llega con dudas y a menudo con miedo. La interfaz debe sentirse limpia, cálida y precisa, como una buena consulta.
Tranquilidad primero
Mucho aire, un solo color protagonista y textos cortos. Nada de alarmas visuales.
Un camino claro
Cada pantalla tiene una acción principal: agendar valoración por WhatsApp.
Precisión quirúrgica
Alineaciones exactas, contrastes verificados y tres puertos como firma de marca.
01 · Color
Verde agua con acento gris
Haz clic en cualquier muestra para copiar su token. Los primitivos no se usan directo en componentes: se consumen mediante tokens semánticos.
Primitivos
Semánticos (cambian con el tema)
Contraste
Calculado en vivo con los valores del tema activo.
#AAAAAA es solo un acento: filetes, divisores y marcas secundarias. Nunca para texto (2,3:1 sobre blanco) ni como fondo de bloques.02 · Tipografía
Marcellus + Inter
Marcellus aporta la elegancia clásica del logotipo para titulares; Inter garantiza lectura nítida en pantallas pequeñas.
Display · Marcellus 400
Titulares, cifras destacadas y citas.
Cuerpo · Inter 400 / 500 / 600
Texto corrido, formularios, botones y etiquetas.
03 · Espacio, forma y movimiento
Ritmo de 4 px
Espaciado
Radios
Sombras
Movimiento
Se respeta prefers-reduced-motion.
Breakpoints
Layout
04 · Marca
Logotipo y símbolo laparoscópico
Las letras GJ llevan un trazo que fluye como un instrumento. La línea inferior lleva tres puertos: la entrada de la cirugía laparoscópica, con la cámara al centro.
Horizontal · fondo claro (principal)
Horizontal · negativo sobre agua profundo #087F83
Vertical · isotipo arriba
Vertical · negativo
Icono de app 1024 px
Favicon · 64 / 32 / 16 px
Zona de respeto y tamaños
- Margen libre mínimo: la altura de la «G».
- Ancho mínimo: 140 px en pantalla (horizontal), 80 px (vertical).
- Por debajo de 120 px usar solo el isotipo.
Sí
- Logo positivo sobre blanco o menta.
- Negativo sobre agua profundo o abismo.
- Usar los archivos originales.
No
- Recolorear, estirar o girar el logo.
- Sobre fotos sin una capa de color.
- Volver a añadir el pulso de electrocardiograma.
Divisor de tres puertos
Componente .dg-ports: el remate de secciones y separador de marca.
05 · Componentes
Biblioteca dg-*
Cada componente consume solo tokens semánticos, por eso el modo oscuro funciona sin código extra. Área táctil mínima de 44 px.
Botones
Primario (acción principal, una por pantalla) · Secundario · Fantasma. Sobre fondos de color usar .dg-btn--light.
Insignias y alertas
Formulario de valoración
Tarjetas
Colecistectomía
Extracción de la vesícula con tres pequeñas incisiones.
LaparoscopíaHernias
Reparación con malla, recuperación más rápida.
Tarjeta estática sin enlace: sin elevación al pasar el cursor.
Cómo funciona (pasos)
Valoración
Revisamos tu caso y tus estudios por WhatsApp o en consulta.
Cirugía laparoscópica
Tres pequeños puertos, menos dolor y cicatrices mínimas.
Recuperación
Indicaciones claras y seguimiento directo con el Dr. Jiménez.
¿La cirugía laparoscópica duele?
¿Cuánto dura la recuperación?
¿Atienden por WhatsApp?
Cita y contacto
06 · Patrones
Cabecera, hero, pie y móvil
Barra de navegación
Hero
Cirugía laparoscópica · San José
Cirugía mínimamente invasiva, con la calma que mereces
Dr. Gustavo Jiménez R. · 20 años de experiencia quirúrgica. Tres pequeñas incisiones, recuperación más rápida.
Barra de acción móvil
Fija al pie en pantallas menores a 720 px, con padding-bottom: env(safe-area-inset-bottom).
Piezas para redes (Reels 9:16)
Tu vesícula, con tres pequeñas incisiones20 años de experiencia quirúrgica
Cuándo consultar a un cirujanoWhatsApp +506 8491 8787
Pie de página
07 · Tokens
Exportación
Una sola fuente de verdad. El CSS se pega en el proyecto; el JSON alimenta Figma o Style Dictionary.
CSS · custom properties
JSON · formato DTCG
Convención de nombres
--dg-{grupo}-{paso}primitivos:--dg-aqua-700--dg-{rol}semánticos:--dg-brand,--dg-text-muted.dg-{componente}--{variante}componentes:.dg-btn--secondary- Los componentes nunca usan primitivos ni hex; el tema oscuro solo reasigna semánticos.