Sistema de diseño
En rango, contigo.
Identidad, tokens y componentes de Diabelink construidos sobre shadcn/ui. Los tokens viven en app/globals.css.
En rango
La curva dentro de su franja es el lenguaje que las familias ya leen cada día en el sensor. La marca la usa como símbolo de calma: no perfección, sino acompañamiento.
Clínico, pero de casa
Verde azulado para la confianza médica; albaricoque y sol para el mundo del niño. Nunca rojos salvo para seguridad.
Claro antes que bonito
Precios, horarios y tiempos de respuesta siempre visibles y literales. Las familias deciden con datos, como con la glucosa.
Logotipo
Símbolo: una gráfica de glucosa. La banda es la franja objetivo, el pico sale y vuelve a rango, y el punto es la lectura de ahora. Wordmark en Nunito ExtraBold, con «link» en Rango.
Color
Mapeado a los tokens semánticos de shadcn: primary = Rango, secondary = Rango 50, accent = Albaricoque 50, destructive = Alerta.
Principal
Rango
--rango
Marca, acciones principales, enlaces
Rango 700
--rango-700
Texto sobre fondos Rango claros
Rango 100
--rango-100
Bordes y selección
Rango 50
--rango-50
Superficies suaves, secondary
Calidez
Albaricoque
--albaricoque
Acento infantil, punto del logo
Albaricoque 700
--albaricoque-700
Texto sobre Albaricoque 50
Albaricoque 50
--albaricoque-50
Secciones de familia y colegio
Sol
--sol
Etiquetas y destacados puntuales
Base
Noche
--noche
Texto, bloques de contraste
Papel
--papel
Fondo de página
Niebla
--niebla
Muted, controles
Alerta
--alerta
Solo seguridad y 112
Tipografía
Nunito para titulares: redondeada, amable y muy legible para familias. DM Sans para texto: neutra, clara y con cifras nítidas para precios y horarios.
Nunito Black · 60/1.05
Nunito ExtraBold · 40/1.15
Nunito ExtraBold · 24
DM Sans Regular · 18/1.6
DM Sans SemiBold · 12 · versalitas
Componentes
Primitivas de shadcn/ui (base-nova) con los tokens de la marca. Radio base de 1.1rem y botones en píldora para un tacto más amable.