Workmed Design System
Patrones & plantilla

Cómo se arma una pantalla

Los componentes se combinan según patrones estables. Acá están los esqueletos de layout y la plantilla de inicio para copiar a una plataforma nueva del ecosistema.

Sección estándar #

Padding var(--pad-section-y), .sec-head con eyebrow + h2 a la izquierda y bajada opcional a la derecha.

.sec-head
Categoría

Título de la sección

Bajada opcional alineada al fondo, máximo 38ch.

Ver código 
<section>
  <div class="container">
    <div class="sec-head">
      <div class="sec-head__title">
        <span class="eyebrow">Categoría</span>
        <h2>Título de la sección</h2>
      </div>
      <p class="sec-head__aside">Bajada opcional.</p>
    </div>
    <!-- contenido -->
  </div>
</section>

Inversión de fondo #

Una sección de cada 2–3 invierte a azul oscuro con .section-dark. El texto secundario va como rgba(255,255,255,.6–.75), nunca un gris hex.

.section-dark
Cómo funciona

Un proceso en cuatro pasos

El texto secundario mantiene contraste con blanco translúcido.

Hero #

Grid 1.25fr / 1fr: texto a la izquierda (h1 con .accent rojo + .hero-meta), card oscura a la derecha con decoración radial.

.hero
Salud Mental

Salud que acompaña

Evaluaciones psicolaborales con acompañamiento humano.

Agendar →Ver evaluaciones
13
Evaluaciones
48h
Pre-informe
Destacado

Pittsburgh PSQI

Tamizaje de calidad del sueño.

Comenzar →

Pasos numerados #

Numeración con barra roja 28px×1px + número rojo. Grid 4 → 2 → 1. Pensados para fondo oscuro (o .steps-grid--light).

.step
Paso 01

Agenda

Elige la evaluación y reserva hora.

Paso 02

Responde

Completa el test en línea.

Paso 03

Análisis

El evaluador revisa el resultado.

Paso 04

Informe

Recibís el pre-informe en 48h.

Ver código 
<div class="steps-grid">
  <div class="step">
    <div class="step__num">Paso 01</div>
    <h4>Agenda</h4>
    <p>Elige la evaluación y reserva hora.</p>
  </div>
</div>
<!-- sobre fondo claro: .steps-grid.steps-grid--light -->

Decoración radial #

Único elemento decorativo permitido: esfera de gradiente rojo semitransparente en esquinas de paneles oscuros.

.hero-deco
Panel con foco

La esfera ancla la esquina

Ver código (CSS) 
.hero-deco {
  position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
              rgba(204,45,59,0.18), transparent 60%);
  pointer-events: none;
}

Shell de operador #

Grid 240px / 1fr: sidebar azul oscuro fijo + área de trabajo. Para vistas autenticadas de evaluador.

.app-side
8
Por revisar
3
Informes due
Ver código 
<div style="display:grid;grid-template-columns:240px 1fr">
  <aside class="app-side">
    <div class="app-side__label">Trabajo</div>
    <nav class="app-side__nav">
      <a class="active">Bandeja <span class="wm-badge">8</span></a>
      <a>Agenda</a>
    </nav>
  </aside>
  <main>…</main>
</div>

Layout de evaluación #

Shell blanco centrado max-width 760px, header de progreso con barra roja, pregunta grande y opciones radio tipo pill.

Test interactivo
Pregunta 3 de 1916%

¿Con qué frecuencia te costó conciliar el sueño?

Plantilla de inicio #

El template de uso general. Copia este boilerplate, carga Poppins y ds-core.css, y ya hablás el lenguaje Workmed. Sirve para HTML estático o como referencia para Twig/Blade.

ℹ
Para adaptarlo a otra plataforma del ecosistema sin tocar el resto: copia ds-core.css y, si necesitás otra sub-marca, redefine solo las variables --wm-* en tu propio :root después del import.
Plantilla HTML 
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi pantalla · Workmed</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="ds-core.css">
</head>
<body data-density="comfortable" data-palette="balanceado" data-card-style="shadow">
  <section>
    <div class="container">
      <div class="sec-head">
        <div class="sec-head__title">
          <span class="eyebrow">Categoría</span>
          <h2>Hola, ecosistema Workmed</h2>
        </div>
      </div>
      <a class="btn btn-primary">Acción primaria <span class="arr">→</span></a>
    </div>
  </section>
</body>
</html>

Checklist de cumplimiento #

Antes de dar por lista una pantalla nueva, verifica:

Antes de mergear
  • ✓ ¿Tiene .eyebrow antes del h2?
  • ✓ ¿El primer CTA es .btn-primary y los secundarios ghost/dark?
  • ✓ ¿Cards en --r-lg y pills en --r-pill?
  • ✓ ¿Inputs con el mismo :focus (halo rgba(45,51,78,.07))?
  • ✓ ¿Texto secundario en --fg-muted, no un gris arbitrario?
  • ✓ ¿Máximo un elemento rojo prominente por pantalla?
  • ✓ ¿Sombras tintadas en azul oscuro, no negro?
  • ✓ ¿Sobre fondo oscuro el texto usa rgba(255,255,255,.x)?

Fuente completa: design_system.md §11.