Fundamentos de diseño.
La referencia del sistema. Todo lo de aquí se lee de los tokens reales en tiempo de ejecución: si cambias globals.css, esta página cambia con él. Usa el toggle para comprobar los dos temas.
Color
Papel cálido y tinta, con un único acento usado con avaricia. Los valores de abajo se leen en vivo del tema activo.
Superficie y texto
--bgPapel en claro, tinta en oscuro.
—--surfaceElevación sutil. Se usa poco.
—--fgTambién el fondo de las filas invertidas.
—--mutedCuerpo largo, descripciones.
—--subtleEtiquetas en versal, notas al pie.
—Líneas y acento
--lineEl hairline que estructura todo el sitio.
—--line-strongBordes de control, cifras en reposo.
—--accentRellenos, subrayados, el logo. NO como texto sobre papel.
—--accent-inkLa versión que sí pasa AA como texto.
—--accent-on-fgPara las filas invertidas. Se invierte con el tema.
—--accent-fgTexto encima de un relleno de acento.
—La regla que más se rompe
--accent y --accent-ink no son intercambiables. Sobre papel, el naranja vivo se queda en 2.93:1: vale para rellenos y subrayados, pero nunca como texto. En oscuro ambos coinciden. Excepción: dentro de una fila de servicios en hover el fondo es tinta, así que ahí vuelve el vivo (group-hover:text-accent).
Contraste — calculado ahora mismo
| Pareja | Muestra | Ratio | Mínimo | AA |
|---|---|---|---|---|
| Texto principal | Texto | — | 4.5:1 | … |
| Texto secundario | Texto | — | 4.5:1 | … |
| Texto terciario Etiquetas de 12px | Texto | — | 4.5:1 | … |
| Acento como texto | Texto | — | 4.5:1 | … |
| Texto sobre acento Botón en hover | Texto | — | 4.5:1 | … |
| Fila invertida Servicios en hover | Texto | — | 4.5:1 | … |
| Acento en fila invertida Se invierte con el tema | Texto | — | 4.5:1 | … |
Si alguna fila dice “Falla”, el token está roto — no la muestra.
Tipografía
Dos familias. Space Grotesk sostiene todo lo que es estructura: titulares, cifras, nombres. Inter se ocupa del texto que se lee de verdad.
Display
Space Grotesk
Titulares, cifras y nombres. Peso 500. Se aplica con la utilidad display, no con font-*.
Texto
Inter
Cuerpo, descripciones, formularios. Es la familia por defecto: no hace falta declararla.
Escala
text-displayTitular de portada. Solo uno por página.
text-h2Titular de sección.
text-indexCifras: métricas, índices de servicio, pasos.
text-3xlNombre de servicio, sector.
text-lgEntradilla de sección.
text-baseCuerpo.
text-smTexto secundario, chips, notas.
text-xsEtiquetas en versal con tracking 0.2em.
Los tres primeros son fluidos (clamp): escalan con el viewport, así que no hace falta redefinirlos por breakpoint.
Formas y retícula
El sistema es editorial: reglas de 1px en lugar de tarjetas, aristas rectas en lugar de píldoras, y nada de sombras.
Radio
Cero. Sin excepciones: ni botones, ni campos, ni contenedores. La única curva del sitio es el icono del toggle.
Regla
1px. --line separa contenido; --line-strong delimita controles. Estructuran donde otros pondrían una caja.
Sombra
Ninguna. La jerarquía se hace con tipografía, espacio y reglas, nunca con elevación falsa.
Contenedor y ritmo
- Ancho máximo
84rem- Margen lateral
1.5rem- Aire de sección
py-20 → sm:py-28- Rejilla
12 columnas (md+)
Rejilla editorial
El patrón que se repite en todas las secciones: 3 columnas para índice y etiqueta, 9 para el contenido. Es lo que rompe la simetría del centrado.
Logo
La planta de una plaza: cuatro manzanas cerrando un vacío central, con las calles entrando giradas para que no se vea a través.
Construcción
Retícula de 100: barras de 16, huecos de 12, margen de 4. Cada barra es la anterior girada 90° sobre el centro. No la retoques a ojo: si se pierde la simetría rotacional, se pierde lo que la hace distintiva.
Tamaños mínimos
56px32px16px16px es el suelo. Por debajo los huecos se cierran y se convierte en un cuadrado.
Sí
- · Acento sobre papel o sobre tinta.
- · Tinta plana o papel plano a una sola tinta.
- · Aire libre alrededor: al menos el ancho de una barra.
- · Junto al wordmark en el lockup, con hueco de 2.5.
No
- · Girarlo, deformarlo ni redondear las esquinas.
- · Meterlo en una caja o un círculo.
- · Degradados, sombras o contornos.
- · Recolorear las barras por separado.
La geometría está duplicada en cuatro ficheros por motivos técnicos: components/logo.tsx, app/icon.svg, app/opengraph-image.tsx y app/apple-icon.tsx (los dos últimos con divs, porque Satori no renderiza el SVG igual). Si cambias la forma, cámbiala en los cuatro.
Componentes
Las piezas que se repiten. Todas heredan del mismo criterio: arista recta, hairline y acento con cuentagotas.
Botones
El primario es tinta plena y pasa a acento en hover. Uno por vista: si hay dos primarios, no hay ninguno.
Campos
Solo la línea inferior. La etiqueta va en versal con tracking; el foco tiñe la línea de --accent-ink.
Etiqueta de sección
Índice en acento y etiqueta en versal con tracking 0.2em. Vive en la columna de 3.
Lista de tecnologías
- React
- Next.js
- TypeScript
Texto suelto separado por espacio, nunca chips con borde. Las tecnologías se mencionan, no se exhiben.
Movimiento
Discreto y con un solo propósito: confirmar que algo responde. Nada entra al hacer scroll.
Duraciones
- Color en controles
200ms- Inversión de fila
300ms- Curva
por defecto
Reduced motion
globals.css anula animaciones, transiciones y el scroll suave cuando el sistema pide menos movimiento. Es global: no hay que acordarse en cada componente.