Workmed Design System
Librería

Componentes

Cada componente con su preview en vivo y su snippet listo para copiar. Las clases son estables y agnósticas a la sub-marca — cambia solo los tokens --wm-* para re-pintar.

Botones #

Pill, peso 500, gap 10px. El primer CTA es siempre .btn-primary (rojo); los secundarios .btn-ghost o .btn-dark.

Botones
Ver código 
<button class="btn btn-primary">Agendar <span class="arr">→</span></button>
<button class="btn btn-dark">Continuar</button>
<button class="btn btn-ghost">Cancelar</button>
<button class="btn btn-link">Ver más</button>

Chips de filtro #

Pill blanca con borde. Estado .active invierte a azul oscuro. Soporta contador hijo .count.

Chips
Todas 13 Psicolaboral 4 Sueño 2 Riesgo
Ver código 
<div class="chips">
  <span class="chip active">Todas <span class="count">13</span></span>
  <span class="chip">Psicolaboral <span class="count">4</span></span>
  <span class="chip">Sueño</span>
</div>

Tabs / segmented control #

Track --bg-soft pill, pestañas pill. Activa: fondo blanco + sombra (claro) o azul oscuro (oscuro).

Tabs
Ver código 
<div class="wm-tabs">
  <button class="active">Postulante</button>
  <button>Evaluador</button>
</div>

<!-- Sobre fondo oscuro -->
<div class="wm-tabs wm-tabs--dark"> … </div>

Eyebrow #

Marca de inicio en toda sección. 12px, 0.16em tracking, UPPER, rojo. Sobre fondo oscuro usa .eyebrow--light.

Eyebrow
Categoría · sección Sobre fondo oscuro
Ver código 
<span class="eyebrow">Categoría · sección</span>
<span class="eyebrow eyebrow--light">Sobre fondo oscuro</span>

Pills de estado #

Mismos modificadores en todos los contextos. Llevan un dot de color que hereda currentColor. Quitalo con --plain.

Pills
Agendado En curso Urgente Completado Nuevo
Ver código 
<span class="wm-pill wm-pill--scheduled">Agendado</span>
<span class="wm-pill wm-pill--in-progress">En curso</span>
<span class="wm-pill wm-pill--urgent">Urgente</span>
<span class="wm-pill wm-pill--done">Completado</span>
<span class="wm-pill wm-pill--new wm-pill--plain">Nuevo</span>

Badges #

Contadores mínimos. Rojo por defecto; --soft para neutro.

Badges
3 12 99+ Notificaciones 5
Ver código 
<span class="wm-badge">3</span>
<span class="wm-badge wm-badge--soft">99+</span>

Callouts #

Bloques de aviso con border-left de color. Cuatro intenciones semánticas.

Callouts
ℹ
Información. Este examen requiere ayuno de 8 horas.
✓
Listo. El pre-informe se generó correctamente.
⚠
Atención. Faltan 2 documentos por adjuntar.
!
Alerta. No abrir el sitio con file://.
Ver código 
<div class="callout callout--info">
  <span>ℹ</span>
  <div><strong>Información.</strong> Requiere ayuno de 8 horas.</div>
</div>
<!-- variantes: --ok --warn --alert --info -->

Cards de contenido #

Estructura: head (icon + tag) → h3 → p → meta. Hover: lift -2px, sombra, icono a rojo, flecha circular azul.

.eval-card
→
Sueño

Pittsburgh PSQI

Tamizaje de calidad del sueño en el último mes. 19 ítems autoadministrados.

⏱ 10 min◷ 19 ítems
 →
Psicolaboral

Psicolaboral Básico

Screening de competencias y rasgos de personalidad para cargos operativos.

⏱ 45 min◷ 60 ítems
Ver código 
<a class="eval-card" href="#">
  <span class="eval-card__arr">→</span>
  <div class="eval-card__head">
    <div class="eval-icon">◐</div>
    <span class="eval-card__tag">Sueño</span>
  </div>
  <h3>Pittsburgh PSQI</h3>
  <p>Tamizaje de calidad del sueño…</p>
  <div class="eval-card__meta"><span>⏱ 10 min</span><span>◷ 19 ítems</span></div>
</a>

Cards de lista #

Grid horizontal 56px 1fr auto: icono, contenido, CTA. Para colas de trabajo y asignaciones.

.assign-card

María González

Psicolaboral Básico · vence hoy

Urgente

Juan Pérez

Pittsburgh PSQI · en revisión

En curso
Ver código 
<div class="assign-card">
  <div class="assign-card__ico">◑</div>
  <div class="assign-card__body">
    <h4>María González</h4>
    <p>Psicolaboral Básico · vence hoy</p>
  </div>
  <span class="wm-pill wm-pill--urgent">Urgente</span>
</div>

KPIs #

Número 38px azul oscuro, label UPPER, delta verde/rojo opcional. Variante --dark sobre paneles.

.kpi
1.284
Evaluaciones
▲ 12%
96%
Validez
▲ 2%
48
Pendientes
▼ 5%
3,2%
Positividad
240
Citas hoy
18
Sin confirmar
7
Equipos activos
99%
Uptime
Ver código 
<div class="kpi-grid">
  <div class="kpi">
    <div class="kpi__num">1.284</div>
    <div class="kpi__label">Evaluaciones</div>
    <div class="kpi__delta kpi__delta--up">▲ 12%</div>
  </div>
</div>
<!-- sobre fondo oscuro: .kpi.kpi--dark -->

Tabla #

Header UPPER tracking ancho, filas con hover sutil. Celda de paciente con avatar de iniciales.

.wm-table
PacienteEvaluaciónEstadoFecha
MG
María GonzálezRUT 12.345.678-9
Psicolaboral BásicoCompletado12 jun
JP
Juan PérezRUT 9.876.543-2
Pittsburgh PSQIEn curso13 jun
CR
Carla RojasRUT 15.111.222-3
Aversión al riesgoVence hoy19 jun
Ver código 
<table class="wm-table">
  <thead><tr><th>Paciente</th><th>Estado</th></tr></thead>
  <tbody>
    <tr>
      <td><div class="wm-table__patient">
        <div class="wm-avatar">MG</div>
        <div><strong>María González</strong><span>RUT…</span></div>
      </div></td>
      <td><span class="wm-pill wm-pill--done">Completado</span></td>
    </tr>
  </tbody>
</table>

Inputs & campos #

Label UPPER 12.5px. Mismo :focus en todos los inputs del sistema: borde azul oscuro + halo rgba(45,51,78,.07).

.field
Ver código 
<div class="field">
  <label>Nombre completo</label>
  <input type="text" placeholder="María González">
</div>

<div class="field-row">
  <div class="field">…</div>
  <div class="field">…</div>
</div>