Una marca, una web, una app para web, iOS y Android, un escritorio de contenidos y dos vídeos para un producto que invierte la misma cantidad cada mes. Un solo código Next.js, compuesto con nuestro design system, con los textos en nuestro CMS.
- Año
- 2026
- Rol
- Brand, product design and engineering
El encargo
Stilla vende un solo producto: un plan que cada mes compra la misma cantidad de una mezcla de acciones, bonos y oro, el día que elige el cliente. Funciona cuando quien lo contrata no hace nada. Su mes más difícil es el de las caídas: el plan sigue comprando, y la app tiene que dejar claro que precisamente de eso se trata.
Los fundadores llegaron con el nombre y las cuentas del plan, y nada que un cliente pudiera ver. Necesitaban una marca, una web, una app para web, iOS y Android, un escritorio donde su equipo escribe las guías y los documentos de información clave, y los vídeos del lanzamiento. Lo construimos todo sobre nuestro design system y nuestro CMS, en un solo código Next.js.
Una marca hecha de aportaciones
Le pusimos al producto el nombre de una gota. Stilla es gota en el italiano literario, del latín, y en inglés invertir un poco cada mes se llama drip-feeding, invertir gota a gota. El símbolo es el punto de la i del logotipo, dibujado como una gota de color lima: una aportación.
Todo lo demás sale de ese punto. En la web y en los vídeos, detrás de la primera pantalla hay un campo de puntos, cada uno un mes de plan, que se espesan hacia la luz y se desvanecen antes de tocar una palabra. La paleta es un solo color y los dos fondos sobre los que vive.
Sobre el fondo oscuro, el lima aguanta 15,94:1 con la etiqueta negra; sobre papel baja a 1,2:1. En lugar de aclarar la marca hasta que funcionara en todas partes, al fondo claro le dimos un lima más profundo, con la etiqueta blanca a 4,99:1 en reposo y 8,05 al pulsar. Dos valores para un color, medidos en cada estado antes de enseñar una pantalla.
Una web que enseña el plan trabajando
La primera pantalla dice en seis palabras lo que hace el producto y lo enseña haciéndolo: cuánto vale un plan, las dos próximas aportaciones y el año que llevan detrás, tal como los muestra la app esa mañana. Escribimos un plan de ejemplo, con las cuentas hechas una sola vez, y lo usamos en todas las pantallas de la web y de la app: un total en la portada es el mismo total en la app.
El mejor argumento para un plan mensual es un mes de caídas, y le dimos una sección propia. En abril de 2025 la mezcla bajó un 7,3% y los mismos 400 euros compraron un 7,8% más. El gráfico es la historia del propio plan.
Cada cifra de la web cuenta el pasado de un plan. No dibujamos proyecciones de rentabilidad: en la portada de un producto de inversión se leen como una promesa.
Una app Next.js para web, iOS y Android
La app es el mismo código Next.js que la web. En el escritorio se abre con una columna de cuatro secciones; por debajo de 64rem la columna se convierte en una barra inferior, y esa es la app del móvil. La publicamos en App Store y Google Play dentro de una capa nativa que hace en nativo las tres cosas para las que está: Face ID o huella para abrirla, un aviso la mañana de la aportación y las claves guardadas en el llavero del dispositivo.
Valoramos dos apps nativas. Habrían dado la última palabra a cada gesto, y habrían supuesto tres códigos que mantener a la par para un producto que se abre pocas veces al mes para revisar un plan. Elegimos un solo código: una pantalla corregida una vez queda corregida en la web, en iOS y en Android en la misma versión.
Today responde a una pregunta: cómo van los planes. La página de un plan responde a la siguiente: qué tiene frente a su mezcla y qué comprará la próxima aportación para reequilibrarla. Abrir un plan son cuatro respuestas en un solo paso.
Construido sobre nuestro design system
Cada pantalla de este caso está compuesta con nuestro design system: 42 de sus componentes, de la primera sección de la web al editor del escritorio, y ninguno escrito para Stilla. Lo que Stilla cambió del sistema cabe en siete valores de tema: el lima en sus dos fondos, las dos tipografías, las formas redondeadas y el fondo oscuro con el que se abre. Su aspecto propio, la luz y los puntos, es una hoja de estilos apoyada en los tokens del sistema.
Eso es lo que permite que un producto de este tamaño crezca sin un segundo código para su aspecto. Una pantalla nueva es una composición de piezas que ya resuelven los dos temas, cada ancho y cada estado. Una corrección se hace una sola vez, en el sistema, y llega a la vez a la web, la app y el escritorio. El tema claro llegó así: cambiamos de tema, medimos el contraste y todas las pantallas aguantaron.
El escritorio: los textos sin publicar una versión
El equipo de Stilla escribe en nuestro CMS. Las guías de Learn, las preguntas, las notas de mercado y los documentos de información clave son registros en su escritorio, en inglés, italiano y español, cada idioma en su pestaña, y la web y la app los leen en cuanto se publican. Cambiar una guía no requiere publicar una versión.
El escritorio está construido sobre el mismo design system que el producto, así que quien escribe ve las palabras con la tipografía y los colores que llevarán. Cada artículo lleva el nombre de quien lo revisó antes de publicarlo: los textos de un producto de inversión los lee el equipo de cumplimiento, además de los clientes.
Sobre qué se apoya
Stack
Next.js 16, React 19, TypeScript 5, Our design system, Our CMS, Capacitor, Supabase, Remotion, Vercel.