Storybook.

Logotipo

El logotipo es la palabra «savvia» en Family, la letra de los titulares, siempre en minúscula, también a principio de frase. No lleva isotipo: la palabra sola, en una línea. El favicon tampoco: es el fondo de la estación con el roble en pequeño (abajo).

Con cada estación

• Una palabra «savvia», en minúscula y en una sola línea; nunca se parte ni se acompaña de un símbolo.
• Tamaño mínimo 24 px de alto en pantalla; por debajo, la palabra en texto vivo (Family).
• Aire alrededor, como mínimo, la altura de x de la palabra.
• Sí macizo, en el blanco o en la tinta de la estación, sobre fondo liso. No se estira, no se gira, no lleva sombra ni degradado.

El favicon

Sin isotipo. Es el fondo principal de la web en la estación que toca, con su roble en pequeño: el mismo árbol del hero, con el pie abajo. Cambia con la estación: si la cambias en la web, la pestaña se funde al icono nuevo en poco más de un segundo.

• Uno por estación el fondo es la noche de la estación (en invierno, la nieve) y el árbol, su lámina del hero; 64 px con las esquinas al 22 %, y 180 px a sangre para el icono de iPhone.
• Cambia con la web al cambiar de estación los dos iconos se funden (1,2 s); con movimiento reducido, cambio directo. Safari no repinta el favicon en caliente: enseña el de la carga.
• Se genera, no se dibuja con tools/r156-favicon.cjs desde las láminas del hero: si cambia un roble, se vuelve a lanzar.

Construcción

La palabra, en Family 400 con un apretado de −0,045 em (y las v algo más separadas: «sa» −26, la v −52, «ia» +28 en unidades de la fuente): 170 anclas y 118 manejadores. Las letras viven entre la línea base y la altura de x; solo el punto de la i sube hasta las ascendentes.

Color y estaciones

Cada estación tiene cinco colores propios, sacados de lo que se ve fuera ese trimestre: el fondo, el roble, la savia (el acento), el bloque claro (y, en invierno, la tinta de pizarra: el fondo es nieve). El texto sobre lo claro va en el propio fondo; el blanco de lo claro es el mismo todo el año. Elige una estación en el selector y la página entera la sigue.

de marzo a mayo

Primavera

Ciruela al anochecer y el roble en flor; la savia es la cereza.

de junio a agosto

Verano

Bosque de noche y hoja al sol; la savia es la lima.

de septiembre a noviembre

Otoño

La casa: Cacao tostado y cobre; la savia es el Coral.

de diciembre a febrero

Invierno

La web se vuelve nieve y el roble, desnudo; la savia es el azul glaciar.

PrimaveraVeranoOtoñoInvierno

• Ciruela#3A2932el fondo
• Flor de cerezo#D98AA5el roble
• Cereza viva#FF8FB8el acento
• Pétalo#F4C7D5el bloque claro
• Blanco#F5F5F7lo claro, todo el año

Tipografía

Tres voces: Family para lo que se dice, Timeless Sans para lo que se lee y Timeless Grotesk para los detalles. Sin mono y sin cursivas, nunca.

1. H1Elevamos tu web44 → 72 px, Family 400
2. H2Elevamos tu web34 → 48 px, Family 400
3. H3Elevamos tu web26 → 32 px, Family 400
4. LeadElevamos tu web20 px, Timeless Sans 300
5. SubtítuloElevamos tu web18 px, Timeless Sans 300
6. CuerpoElevamos tu web17 → 18 px, Timeless Sans 420
7. InterfazElevamos tu web16 px, Timeless Sans 500
8. DetalleElevamos tu web13 px, Timeless Grotesk 300

Espaciado y retícula

Nada a ojo: el espacio sale de la escala de Tailwind (4 px por paso) y solo de estos pasos. node tools/spacing-lint.cjs avisa de cualquier otro.

1. 14 px
2. 28 px
3. 312 px
4. 416 px
5. 624 px
6. 832 px
7. 1248 px
8. 1664 px
9. 2496 px
10. 32128 px

section-y

El aire de cada sección: de 80 px en móvil a 192 en escritorio (--space-section). Más que la guía (128) por decisión de Andoni: «hay que dar más aire a cada sección».

wrap

El contenedor: 1200 px de contenido con márgenes de 20, 32, 48 px; en pantallas de más de 1920 px crece hasta 1440 (--contenido). Sus bordes son los carriles que se ven en la web.

grid-12

Doce columnas en escritorio con 24 px de medianil; cuatro en móvil con 16.

measure

La medida de lectura: 64 caracteres por línea como mucho.

Alturas

Siempre en lvh o dvh, nunca en vh (en el móvil la barra del navegador las descuadra).

Pantallas grandes

Por encima de 2560 px todo escala a la vez (la raíz pasa de 16 a 32 px a 5120): titulares, aires, roble y contenedor.

Radios y sombras

Un radio de partida, 8 px, y la píldora para lo que se pulsa. Sin sombras por defecto: solo donde algo flota (el cristal, el monitor encendido).

Voz

Se habla siempre a quien entra; la primera persona, solo cuando hablan Eric y Andoni. No se presume: el trabajo lo demuestra.

«Elevamos tu web con IA.»El titular: corto, a quien entra, con el verbo delante.

Iconografía

Una sola familia, Iconoir: rejilla de 24 y trazo de 1,5 con puntas redondas. Las estaciones, siempre rellenas (su propio dibujo, relleno); lo que está encendido, en su versión sólida; la interfaz, en trazo. La flecha de la casa es su flecha de navegación, dibujada a trazo para poder animarla. Estos son todos los que usa la web.

Movimiento

Todo lo que se mueve en savvia se mueve como algo vivo: una gota que cae, la savia que corre, algo que brota, crece o cambia con la estación. Llega con curva expo, se posa sin rebote y nunca impide leer. Con movimiento reducido, todo queda quieto y en su sitio.

• Curvas ease-out expo (0,16 1 0,3 1) para lo que llega; ease-out quart para la interfaz. Sin rebotes.
• Todo crece desde un origen (una gota, una raíz, el punto donde entra el cursor): nada aparece de golpe ni con el mismo fundido en todas partes.

Aplicaciones

La marca fuera de la web: el perfil en redes, lo que se comparte y la pestaña del navegador.

savvia

El estudio web que orquesta la IA. Desarrollo agéntico, a medida.

Donostia, savvia.studio

Seguir

¿Te paso la web de los que nos van a hacer la nueva?

savvia: Elevamos tu web con IAsavvia.studio

Qué bonita 🌱

savvia: Elevamos tu web con IA Proyectos, savvia

savvia.studio

Descargas

Todo lo de la marca, para quien lo necesite: el logotipo, los iconos y los fondos para redes, uno por estación. Descárgalo entero o pieza a pieza.

Descargar todo, ZIP, 9 MB

Logotipo

Iconos y redes, por estación

Otoño

• Favicon16324864180192512ICO
• Telegram1024
• Avatar LinkedIn, X400
• Fondo X1500 × 500
• Fondo LinkedIn1584 × 396

Invierno

• Favicon16324864180192512ICO
• Telegram1024
• Avatar LinkedIn, X400
• Fondo X1500 × 500
• Fondo LinkedIn1584 × 396

Primavera

• Favicon16324864180192512ICO
• Telegram1024
• Avatar LinkedIn, X400
• Fondo X1500 × 500
• Fondo LinkedIn1584 × 396

Verano

• Favicon16324864180192512ICO
• Telegram1024
• Avatar LinkedIn, X400
• Fondo X1500 × 500
• Fondo LinkedIn1584 × 396

Firma de correo

Andoni Martínez

savvia.studio

Eric Ruiz Molero

savvia.studio

De

Andoni Martínez <hola@savvia.studio>

Para

Laura Gómez

Asunto

Vuestra web nueva: siguientes pasos

Hola, Laura:

Gracias por la llamada de ayer. Te dejo el resumen: rehacemos la web de principio a fin, con vuestra marca, y os la entregamos documentada para que tu equipo pueda cambiarla con IA sin salirse de ella.

La semana que viene te mando la primera dirección de diseño para verla juntos.

Un abrazo,

Andoni Martínez

savvia.studio

• Avatar el roble de la estación sobre su noche, con la luz tenue y la copa recogida para que el círculo de Telegram, LinkedIn y X no la corte. En Telegram, súbelo tal cual: sin ampliar.
• Fondos el paisaje del pie de cada estación, sin texto: en X y en LinkedIn la foto de perfil tapa la esquina de abajo a la izquierda, y ahí no hay nada que se pierda.
• Imagen fija la portada de X y la de LinkedIn no admiten GIF ni vídeo: un GIF se queda en su primer fotograma. Telegram sí admite un vídeo corto como foto de perfil.
• Firma pulsa «Copiar firma» y pégala en los ajustes de firma de Gmail o Apple Mail: lleva la imagen enlazada a savvia.studio, así que pesa poco y se ve en cualquier correo.
• Las fuentes no se reparten Family y la letra de texto se usan con licencia: para escribir como savvia, pídenoslas.

Stack

Pocas piezas y casi todo hecho a mano: lo que se ve en la web es código propio, no una plantilla ni un generador.

Astro 7

Web estática, una página por ruta, sin framework de componentes en el navegador: cada componente lleva su script en TypeScript y sus estilos acotados. Sin ClientRouter.

Tailwind CSS 4

Por su integración de Vite. Los tokens (color por estación, escala tipográfica, espaciado de la guía) viven en src/styles/global.css; spacing-lint vigila que no haya pasos fuera de escala.

TypeScript 6

Scripts de componente y librerías propias (src/scripts, src/lib). astro check en verde antes de dar algo por hecho.

Fuentes

API de fuentes de Astro, autoalojadas: Family (titulares), Timeless Sans (lectura) y Timeless Grotesk (detalles). Pinyon Script solo en el manifiesto; Bricolage y Switzer, las de Neety en su demo.

Gráficos

WebGL para el motor que pinta el roble, las raíces, el paisaje del pie y el manifiesto (src/scripts/estela.ts); Canvas 2D para el tiempo del pie, los retratos y la construcción; SVG para la carga, el logotipo y los iconos.

Movimiento

CSS (animaciones atadas al scroll, @property, View Transitions dentro de /proyectos), Web Animations y requestAnimationFrame. Ninguna librería de animación.

Sonido

Web Audio y <audio>: la radio de la barra (piezas igualadas a −18 LUFS, fundidos cruzados), los clics y los efectos de la mesa.

Iconos

Iconoir (MIT) para la interfaz; las cuatro estaciones, dibujadas por nosotros en su misma rejilla.

Publicación

Repositorio privado en GitHub → una Action llama al Deploy Hook de Vercel → savvia.studio. Sigue con noindex.

Verificación

tools/verify.cjs con Playwright: Chrome real y WebKit, a 1280×720 y 390×844 (consola limpia, cero respuestas ≥ 400, sin desborde). Hoy lleva una ruta fija del Mac de Andoni: en otro ordenador hay que cambiarla.

Componentes

Un solo idioma para todo lo que se pulsa: el cristal de la barra de la vista sentado, chevrones finos y, al pasar, la niebla lo llena como un líquido desde donde entra el cursor.

Filtros

Cuatro desplegables en una fila a todo el ancho (país, tecnología, servicio y categoría), cada uno con su rótulo pequeño, lo elegido y el chevrón. La lista se abre debajo, en un panel de cristal, con el recuento de cada opción; una barrita sigue al puntero por las opciones. A la derecha, quitar los filtros y cuántos proyectos quedan.

El monitor de Proyectos destacados

left 39,03 %, top 36,96 %, 21,78 × 21,04 %

Capa 1: láminaCapa 2: luzCapa 3: pantallaCapa 4: web

1. Lámina. La mesa de Andoni en la estación de la web, en tres tamaños: 1600 px en móvil, 2560 en escritorio y 5120 al sentarse (solo la visible, cuando la cámara se posa). Todo lo demás se coloca en porcentajes de ella.
2. Luz. Una caja con el rectángulo y el redondeo del monitor (1,16 % / 2,07 %) cuya box-shadow exterior, en la savia de la estación, asoma por detrás: nunca se pinta bajo su propia caja. Se enciende sentado o al coger la web.
3. Pantalla. La caja blanca de la lámina, medida por inundación: left 39,03 %, top 36,96 %, 21,78 × 21,04 %, con un filo de 3 px del negro del bisel (#121213) que tapa el canto claro. Es un contenedor (container-type: size): lo de dentro va en cqh y crece con ella.
4. Web. Se pinta al ancho de un MacBook Air (1710 px; 1024 en móvil) y se reduce con scale(ancho de la pantalla / 1710). De pie, su captura; sentado, la web real en un <iframe> (solo la del proyecto activo). La que no se deja embeber enseña su página entera en imagen.

Sentado, la cámara amplía la escena ×k, pero la pantalla se maqueta k veces mayor y se contra-escala 1/k: escala neta 1, la web siempre nítida. Encima de la web, según el momento: la construcción del agente, Andoni y Eric (construir.ts), la pantalla de carga y el aviso de deslizar. Código: src/components/Proyectos.astro.

Catálogo de secciones

Cada pieza de la web, capturada de la web real: cómo se ve, en qué archivo vive y de dónde sale su contenido. Las miniaturas se rehacen con node tools/r180/miniaturas.cjs.

Herramientas y skills

Con lo que se ha construido, además del código.

Claude Code

El estudio trabaja con agentes: uno principal que lleva el registro de rondas (AGENTS.md) y subagentes en paralelo para piezas grandes (manifiesto, lab, handbook, casos de estudio).

HyperFrames

Para el reel: composiciones en HTML renderizadas a vídeo, con sus comprobaciones de contraste y de fotogramas negros.

web-perf-forensics

La skill con la que se midió y arregló el rendimiento de la ronda 76 (contextos WebGL, tareas largas al volver a subir).

Artifacts de Claude

Lienzos para comparar variantes antes de decidir (las siete del isotipo, por ejemplo).

Agentation

Notas sobre la propia web, pegadas a cada elemento, para pasarle feedback al agente. En local va siempre.

Ship Studio

La vista previa en vivo mientras se trabaja.

Playwright

Las pruebas en Chrome y WebKit y las grabaciones de las webs.

sharp, ffmpeg, Python

Imágenes (recortes, tiras, capturas), vídeo y audio; Pillow, numpy, scikit-image y fontTools para medir y recortar; librosa para el pulso de la música; Blender para el roble 3D de molde.