Cómo está hecho esto.
Notas sobre el stack, las fuentes, las ilustraciones y las decisiones detrás del diseño. Si estás contratando un estudio, este es el tipo de detalle que nos importa — así que devolvemos la misma cortesía.
Stack
Build estático con Astro 5, sin framework de cliente, sin hidratación a menos que sea estrictamente necesario. Todo el sitio es HTML + CSS plano, con un poco de JavaScript vanilla para la cortina de entrada, la animación del chat del case study y el nav mobile. Servido por nginx con HTTP/3. Build y deploy desde un runner de Git self-hosted.
Tipografía
Zodiak (Italic y Regular, de Indian Type
Foundry, servida desde Fontshare) lleva los titulares display
y las pull-quotes. General Sans (también de
Indian Type Foundry en Fontshare) maneja cuerpo, UI y los
eyebrows en small-caps. Ambas son self-hosted desde
/fonts/ — sin requests a Google Fonts, sin CDN de
terceros.
Color & movimiento
Una paleta pequeña anclada en un ink casi negro
(#0A1F3D), un fondo blanco papel y un azul accent
(#2563EB) para estado, links y el pequeño énfasis
en cursiva. El movimiento es contenido: una cortina de 2.2s en
la primera visita, un typewriter del case study guiado por
IntersectionObserver y transiciones CSS estándar en hover.
Cada animación respeta
prefers-reduced-motion: reduce.
Iconos & ilustración
Todos los iconos y la ilustración del case study son SVG inline, dibujados a mano en el mismo lenguaje vectorial que el resto del layout. Cero imágenes raster en la landing, lo que deja el peso de la página por debajo de 35 KB antes de las fuentes.
Código fuente
El sitio es lo bastante pequeño como para no necesitar un CMS.
El blog es una content collection de Astro
(src/content/blog/) con un schema de Zod, y el
resto del copy vive directamente en los componentes. Tratamos
ambos como código: cada cambio es un commit, cada commit es
revisable.
Créditos
Diseño, build y palabras de Carlos & Benjamin. Peso de página auditado con el panel Network de Chrome DevTools, no con marketing.