25 · Valores compartidos

Tokens de la familia

Los tokens son los valores con nombre que comparten Nitente y sus productos: espaciado, radios, bordes, sombras, opacidades y tiempos. El color de cada producto se suma por encima, sin cambiar esta base.

Radios

r-2
Franja del símbolo

r-4
Etiquetas

r-8
Campos pequeños

r-10
Botones y campos

r-14
Tarjetas

r-20
Paneles grandes

r-full
Píldora

Un contenedor interior tiene un radio menor que el exterior en 4 px (borde exterior 14, interior 10).

Bordes, sombras y capas

Borde fino

1 px · línea 10 a 18 %. Separa sin pesar. Es el recurso principal de elevación.

Borde de foco

2 px con 3 px de separación. Siempre visible.

Sombra

Solo en tema claro y en objetos flotantes (menú, modal). En oscuro se sustituye por borde y una superficie un paso más clara.

Nivel	Uso	Claro	Oscuro
0 · Base	Página	Sin sombra	Sin sombra
1 · Tarjeta	Tarjetas, campos	Borde fino	Borde fino
2 · Flotante	Menús, tooltips	Borde + sombra 0 8 24 −12 / 25 %	Borde fuerte + superficie 7 %
3 · Modal	Diálogos	Borde + sombra 0 24 60 −20 / 45 %	Borde fuerte + velo del 60 % detrás

Opacidades

4 %

8 %

12 %

16 %

40 %

64 %

88 %

Valor	Uso
4 a 8 %	Superficies sutiles, patrones
10 a 16 %	Líneas finas y fuertes
40 %	Elementos deshabilitados
64 %	Texto de apoyo en imágenes
88 %	Hover de botón principal

Capas (z-index)

Nombre	Valor	Qué va aquí
base	0	Contenido
sticky	10	Cabeceras y barras fijas
menu	30	Menús y desplegables
modal	50	Diálogos y su velo
aviso	70	Avisos temporales (toast)

Código de los tokens

:root{
  /* Espaciado (base 4) */
  --nt-s-1:4px; --nt-s-2:8px; --nt-s-3:12px; --nt-s-4:16px; --nt-s-6:24px; --nt-s-8:32px; --nt-s-12:48px; --nt-s-16:64px; --nt-s-24:96px;
  /* Radios */
  --nt-r-4:4px; --nt-r-8:8px; --nt-r-10:10px; --nt-r-14:14px; --nt-r-20:20px; --nt-r-full:999px;
  /* Bordes y foco */
  --nt-border:1px solid var(--nt-line); --nt-focus:2px solid var(--nt-fg);
  /* Tiempos */
  --nt-t-fast:120ms; --nt-t-base:200ms; --nt-t-slow:320ms; --nt-t-emph:480ms;
  --nt-ease:cubic-bezier(.2,0,0,1); --nt-ease-light:cubic-bezier(.16,1,.3,1);
  /* Capas */
  --nt-z-sticky:10; --nt-z-menu:30; --nt-z-modal:50; --nt-z-toast:70;
}

{
  "space": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px",
    "12": "48px",
    "16": "64px",
    "24": "96px"
  },
  "radius": {
    "4": "4px",
    "8": "8px",
    "10": "10px",
    "14": "14px",
    "20": "20px",
    "full": "999px"
  },
  "motion": {
    "fast": "120ms",
    "base": "200ms",
    "slow": "320ms",
    "emphasis": "480ms"
  },
  "ease": {
    "standard": "cubic-bezier(.2,0,0,1)",
    "light": "cubic-bezier(.16,1,.3,1)"
  }
}

@theme {
  --spacing: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --ease-nt: cubic-bezier(.2,0,0,1);
  --ease-nt-light: cubic-bezier(.16,1,.3,1);
}

Los colores neutros están en Escala neutra; los de cada producto, en su propio manual.