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 dibujada a una sola línea: el solar exterior con dos esquinas achaflanadas —las calles que entran en diagonal— y dentro la manzana que rodea el vacío central.
Construcción
Lienzo de 500: trazo de 25 —el 5%—, remates y uniones redondeados, un único grosor de punta a punta. No la retoques a ojo: es monolínea, y basta con que un tramo engorde para que se rompa.
Tamaños mínimos
56px32px24px24px es el suelo. Por debajo el trazo baja de un píxel, los huecos se empastan y la planta se convierte en una mancha.
Sí
- · Acento sobre papel o sobre tinta.
- · Tinta plana o papel plano a una sola tinta.
- · Aire libre alrededor: al menos el ancho del trazo.
- · Junto al wordmark en el lockup: 28px y hueco de 2.
No
- · Girarlo, deformarlo ni enderezar los chaflanes.
- · Meterlo en una caja o un círculo.
- · Degradados, sombras o rellenos.
- · Engordar el trazo o recolorear tramos sueltos.
El trazado vive en components/logo.tsx, copiado del original del diseñador (assets/img/Plazoleta Logo.svg) con la transformación ya aplicada. Las OG, el icono de iOS y los PNG del manifest lo pintan desde ahí con un <img>, porque Satori no admite el componente; la única copia real es app/icon.svg, que Next exige como fichero. Si cambias la forma, cámbiala en los dos.
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.