---
version: alpha
name: "Clinic"
description: "Verde azulado sereno, tipografía clara y lenguaje sencillo para webs de salud. Clinic está pensado para generar confianza: una página blanco menta pálido, verde azulado profundo para las acciones, una sans humanista muy legible y formularios claros y espaciosos. Cada página responde a la siguiente pregunta del paciente, como dónde, cuándo y cuánto, antes de intentar vender nada."
colors:
  primary: "#0B6E69"
  on-primary: "#FFFFFF"
  secondary: "#3B82C4"
  tertiary: "#E0A43A"
  neutral: "#4E6466"
  surface: "#F8FBFB"
  on-surface: "#10282B"
typography:
  display-lg:
    fontFamily: "Source Sans 3"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Source Sans 3"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Clinic está pensado para generar confianza: una página blanco menta pálido, verde azulado profundo para las acciones, una sans humanista muy legible y formularios claros y espaciosos. Cada página responde a la siguiente pregunta del paciente, como dónde, cuándo y cuánto, antes de intentar vender nada.

## Colors

- **primary (#0B6E69):** Verde azulado profundo, para los botones de reserva, los enlaces y el paso activo.
- **on-primary (#FFFFFF)**
- **secondary (#3B82C4):** Azul claro, para avisos informativos y la segunda serie de gráficos.
- **tertiary (#E0A43A):** Ámbar cálido, para recordatorios, estados pendientes y una tercera serie.
- **neutral (#4E6466):** Gris pizarra con un toque de verde azulado para el texto de apoyo y las pistas de los formularios.
- **surface (#F8FBFB):** Blanco menta muy pálido; las tarjetas blancas se despegan de él con una sombra suave.
- **on-surface (#10282B)**

## Typography

Source Sans 3 en todo: negrita 700 para los encabezados, desde un display de 60px hasta 20px, texto del cuerpo en regular 400 a 16px, interlineado de 1.55. Source Code Pro para números de referencia y códigos. Mantén las líneas en torno a los 70 caracteres.

## Layout

Las páginas llegan como máximo a 1200px en una cuadrícula de 12 columnas, con gutters de 24px y una unidad de espaciado de 4px. Las páginas de servicio abren con un resumen breve, siguen con el horario y la ubicación, y una tarjeta de reserva que permanece a la vista en escritorio.

## Shapes

Esquinas de 10px en tarjetas, inputs y botones. Bordes de 1px en un gris verde azulado pálido; sombras suaves y bajas que elevan las tarjetas y el panel de reserva.

## Components

Una tarjeta de reserva con fechas y horarios, tarjetas de perfil de médico con foto y especialidades, campos de formulario con etiquetas y pistas visibles, y acordeones de preguntas frecuentes.

## Do's and Don'ts

- Escribe los botones con verbos sencillos que usaría un paciente.
- Mantén visible cada etiqueta de formulario encima de su input.
- No uses el rojo para nada que no sean errores y avisos urgentes.
- No dependas solo del color para mostrar un estado.