El diseño de esta web, recreado pieza a pieza: los siete colores y los dos tipos que salen de global.css, y los trozos con los que está montada. Arriba, la portada en maqueta: cámbiale el montaje, las columnas y el espaciado para ver cómo quedaría. La maqueta no toca nada; cuando des con algo mejor, cópialo como idea y proponlo.
LA PORTADA, EN MAQUETA
Recompón la portada y mírala aquí mismo. Va con tus colores y tu tema.
El de ahora: una barra arriba y el panel se despliega desde ella.
Escrito como idea:
Cambia el diseño de la portada: el estado en una cabecera de lado a lado, la rejilla de secciones a 3 columnas y el espaciado ancho.
La maqueta no cambia la web. Pega el texto en la portada y que lo vote la gente.
SIETE COLORES Y NADA MÁS
Toda la web va detrás de estas variables. Las mismas siete de día y de noche: solo cambia lo que valen. Los valores son los que tienes puestos ahora.
DOS TIPOS
Geist Pixel para los títulos, Geist Mono para todo lo demás. Las dos las servimos nosotros.
Esta web es tuya
Y ESTO ES LO QUE YA FUNCIONA
Títulos, etiquetas y poco más. Sin adornos.
text-titulo · text-marcaLos dos tamaños grandes van con clamp: crecen con la pantalla en vez de saltar en cada corte. De 24px a 30px el título; de 22px a 26px la marca.
xsAa Bb Cc13px. Notas y pies.smAa Bb Cc15px. Lo normal.baseAa Bb Cc16px. Cuerpo.lgAa Bb Cc18px. Titulares de tarjeta.LAS PIEZAS
Con esto está montada la web entera. Bordes de un píxel, ninguna esquina redonda.
bg-accent px-4 py-2 text-sm text-bgEl botón que manda. Uno por pantalla.border border-line px-3 py-2 text-sm text-mutedEl resto de botones, y los que se quedan pulsados.border border-line bg-panel p-4El panel. Plano, sin sombra y sin curva.w-full border border-line bg-panel p-3 text-smLos campos. El foco es una línea del color del texto.border border-line bg-search text-search-fgLos buscadores. El gris más claro que llega a 3:1 contra el blanco, igual en reposo, en hover y con el foco.zona · aireTodo va en una columna de 64rem centrada. El margen de los lados y el aire de arriba y abajo son una sola medida que crece con la pantalla, y suman lo que se come el marco en los móviles con muesca.font-pixel text-xs tracking-wide text-accentAbre cada bloque. Siempre en mayúsculas.inline-flex items-center gap-2 text-accentLos enlaces, con su icono de Tabler al lado.