Lo que cambia
también cuenta.
00 — Bienvenida
↑ ArribaSeguir el hilo
Bienvenido a iron.cat. Así nos mostramos al mundo. Cada gato deja pequeñas pistas: en el bol, en el agua, en el arenero y en su forma de moverse. Seguimos el hilo, reunimos su historia y ayudamos a cuidarlo a tiempo.
Los gestos gráficos son curiosos, cálidos y serenos. Nunca infantiles.
01 — Logo
↑ ArribaLogo
El lockup une el símbolo de Iron y el wordmark iron.cat. Úsalo siempre que el espacio lo permita. El wordmark funciona en composiciones horizontales estrechas; el isotipo, en formatos compactos, app y favicon.
Logo lockups
Usa el logo completo siempre que haya espacio. El wordmark funciona en composiciones horizontales estrechas; el isotipo puede vivir a cualquier escala. El punto de iron.cat y la cola mostaza son la firma.
Variantes de logo
Petrol y mostaza sobre crema es la combinación por defecto. La versión inversa se reserva para fondos oscuros. Las variantes monocromas son para usos técnicos.
La combinación reconocible de la marca.
Tres fondos vivos aprobados para el lockup blanco.
Fondos de apoyo dentro de la paleta Iron.
Una tinta, documentación y casos de producción.
Usos incorrectos
Cuando dudes, vuelve al archivo maestro. La marca no necesita efectos para destacar.
02 — Color
↑ ArribaPaleta
La paleta de iron.cat nace del cuidado. Petrol es la voz; crema, el aire; salvia, el descanso; mostaza, la firma; coral, la acción. Selecciona un color para copiar su valor; el pelo es el motivo vivo de la marca.
Principal
Selecciona una muestra para copiar su valor.
Secundaria
Sistema de pelo [ Movimiento ]
El pelaje expresa lo vivo y lo individual. Se usa como fondo o marco dentro de la retícula. Nunca directamente detrás del logo sin una superficie de contraste.
Pelo grafito — primario
Pelo dorado — primario
Pelo topo — secundario
En contexto
Lo que cambia
Suave.
No neutro.
Materia
felina.
Cada gato.
Su textura.
03 — Tipografía
↑ ArribaTipografía
Tres voces trabajan juntas, cada una con una función fija. Cambiar esos papeles debilita la marca.
Fraunces
Titulares hero, encabezados de sección y grandes frases editoriales. La itálica aporta el matiz humano.
Titulares heroEncabezadosCitas
Inter
Párrafos, navegación, botones, formularios y subtítulos. Clara, funcional y sin ruido.
UI · BotonesCuerpoSubtítulos
Mono de sistema
Eyebrows, fechas, datos y captions. En mayúsculas y con tracking. Nunca para párrafos.
EtiquetasDatos · FechasCódigo
Escala tipográfica
Hero / Display
Más años buenos para tu gato.
- Fuente
- Fraunces
- Tamaño
- 80 px
- Peso
- 400
- Altura
- 95 %
Encabezado de sección
Una app que conoce su historia.
- Fuente
- Fraunces
- Tamaño
- 38–62 px
- Peso
- 400
- Altura
- 104 %
Título de funcionalidad
Su salud, controlada mes a mes
- Fuente
- Fraunces
- Tamaño
- 32–48 px
- Peso
- 400
- Altura
- 106 %
Cuerpo / Subtítulos
iron.cat reúne la salud, la alimentación y el día a día de tu gato. Eva revisa su evolución y te ayuda a ver qué conviene mantener o vigilar.
- Fuente
- Inter
- Tamaño
- 18 / 16 px
- Peso
- 400
- Altura
- 150 / 155 %
Etiquetas / Datos
[ REVISADO POR EVA ] · IRON · 4,2 KG · JUL 2026
- Fuente
- System Mono
- Tamaño
- 12 px
- Peso
- 400
- Altura
- 135 %
En contexto
Iron · Barcelona
Mirar bien
también es
querer.
04 — Voz y tono
↑ ArribaAsí habla iron.cat
Hablamos como una veterinaria de confianza que, además, sabe escribir: cálida, clara, experta y honesta. En España, de tú. Cada palabra tiene que ayudar.
Más años buenos para tu gato.
La promesa que guía todo lo demás.
Cariño con criterio.
El corazón y la cabeza, siempre juntos.
Una app que conoce su historia.
Contexto útil, no más ruido.
La dieta que tu gato merece.
Específica, honesta y sin vender comida.
Revisado por Eva.
Siempre hay una profesional al otro lado.
Vamos al grano. Frases cortas, lenguaje sencillo y una idea por frase.
Avisamos sin asustar. Explicamos qué se ve, qué significa y qué conviene hacer.
Escribimos como hablamos. Queremos a los gatos sin caer en lo cursi.
Usamos datos, ejemplos y límites claros. No prometemos curar ni garantizar.
Mensajes de campaña · Homepage V3
Una secuencia que va de la observación a la acción.
Las frases se leen en este orden. Son directas, memorables y cada una abre el siguiente argumento.
- 01 · Promesa
Su salud empieza por lo que come.
- 02 · Salud
Casi todos los gatos acaban escondiendo algo.
- 03 · Alimentación
Un gato no está hecho para comer pienso.
- 04 · Prevención
Llegar tarde cuesta diez veces más.
- 05 · Independencia
No vendemos comida.
- 06 · Cierre
Dale todos los años buenos que puedas.
En contexto
No puede contártelo.
Su historia
sí puede.
05 — Fotografía
↑ ArribaFotografía
Cinco categorías muestran las distintas formas de cuidar y entender a un gato. Luz natural, encuadres honestos y una mirada siempre a su altura.
El gato, de verdad
Un individuo, nunca una mascota genérica. Retratos cercanos de gatos reales en su entorno, con la mirada a su altura y la personalidad por delante del decorado.
IndividualCercanoReal
Rutinas que dejan pistas
Momentos observados, nunca posados. Comer, beber, dormir, moverse y jugar: pequeños gestos cotidianos que cuentan una historia.
CotidianoAtentoHonesto
Eva y el cuidado
Criterio profesional, trato cercano. Eva trabajando, escuchando o acompañando. La competencia se nota; no necesita escenificarse.
HumanaExpertaSerena
Nutrición tangible
Claro, sensorial y sin artificio. Boles, ingredientes y texturas que se entienden; nunca fotografía de marca de comida disfrazada de consejo.
ClaroSensorialHonesto
Materia felina
Íntima, táctil y casi abstracta. Primerísimos planos de pelo, patas y bigotes: el origen del sistema visual en movimiento.
ÍntimoTáctilEditorial
Una veterinaria que conoce el caso completo.
Foto a sangre. El rostro se ancla en 80 % · 30 % y el texto ocupa únicamente el cielo seguro del lado izquierdo.
- Encuadre
- object-position 88 % · 50 %
- Zona segura
- 0–52 % horizontal
- Contraste
- velo crema solo a la izquierda
Archivo fotográfico [ Selección inicial ]
06 — Movimiento
↑ ArribaEl pelo en movimiento
Se mueve como respira un gato: despacio, de forma natural y con una onda visible.
Dirección de movimiento
Cada mechón flexiona en la dirección que marca el propio pelo. El movimiento es local, continuo y suave: la imagen permanece anclada mientras la fibra respira.
- Ritmo
- Continuo · no repetitivo
- Respuesta
- Local · según longitud
Pelo europeo oscuro · 01
Sistema de pelo
El fondo vivo sustituye al gradiente de Daylight. Al acariciarlo, el pelo corto vuelve antes a su sitio; el pelo largo conserva una onda más amplia y lenta.
- Uso
- Fondos · transiciones
- Gesto
- Caricia · recuperación elástica
Pelo vivo · 02
Gramática de movimiento · Homepage V3
El movimiento explica la jerarquía.
Las ocho transiciones no decoran: presentan, recortan, apilan, amplían y revelan información con un ritmo sereno.
Cortina → hero
La marca abre la página y entrega el foco al contenido.
Cierre 2050 ms · secuencia 5900 ms · demo en bucleCorte por scroll
Una línea atraviesa el titular mientras cambia el argumento.
Producción: scrub reversible · demo en bucleSticky + recede
Los paneles se apilan sin perder la lectura del anterior.
220 svh por paso · relevo hasta 320 svhResize por scroll
Una cápsula de pelo crece y después presenta la pantalla.
1,8 × viewport · expansión + relevoRetrato editorial
La fotografía aparece después del contexto que la presenta.
Entrada suave · una direcciónPalabras + datos
La información entra por grupos y conserva su relación.
Ventanas de 3 % del scroll · sin delay temporalHeader contextual
El contraste cambia con la superficie sin mover la arquitectura.
Floating · dark · hushedPantalla por fases
El resize enciende la interfaz por capas y termina en contexto humano.
Wall → status → push → cardAccesibilidad · con movimiento reducido, todo aparece en su estado final y el scroll conserva la estructura.
Expansión por scroll · 03
De una señal pequeña
a todo el contexto.
Una cápsula de pelo crece desde el centro sin perder el logo. Cuando termina de abrirse, el siguiente tramo presenta la pantalla de Salud.
- Entrada
- Cápsula · pelo + logo
- Recorrido
- 1,8 × viewport
- Fases
- Resize → pantalla
Desplázate para ampliar
07 — Componentes
↑ ArribaInterfaz
Patrones de producto
Patrones para condensar estado, contexto y siguiente acción, desde una señal mínima hasta una cuenta completa. Deben leerse de un vistazo y mantener una jerarquía clara.
01Estado legibleEl texto explica la señal; el color solo la acompaña.
02Contexto antes que urgenciaPrimero qué ha cambiado; después qué conviene hacer.
03Una acción principalCada pieza termina en un siguiente paso concreto.
Chips de estado
Para comunicar situación y prioridad con una sola palabra.
- En orden
- A vigilar
- ✓Revisado
- Nuevo
CTA de navegación
La versión del header conserva la acción completa y abrevia solo cuando falta espacio.
Resumen de revisión
Se usa dentro de una tarjeta para condensar una señal sin sustituir su explicación.
- Peso estable
- 0 vómitos
- Vigilar hidratación
Un único lenguaje lineal
Sin rellenos ni emojis. El trazo conserva su grosor al cambiar de tamaño.
Menú en hoja
Un velo separa la navegación del contenido y la acción principal cierra la lista a ancho completo.
Barra glass con acción separada
Las cuatro áreas de consulta permanecen juntas. Registro se separa porque crea una entrada, no porque sea una sección más.
- Superficie
- Crema 82 % · blur 24 px
- Acción
- Registro · 78 px · círculo
- Movimiento
- Presión + giro + halo · 520 ms
Tags de seguimiento
Agrupan señales sin convertir la interfaz en un código de colores.
Selector temporal
La opción activa se reconoce por contraste, no por movimiento.
Señal para revisar
Ver señal →
Iron está bebiendo más agua.
El cambio se repite desde hace 3 días. Añade una nota o compártelo con Eva.
Estado del perfil
Perfil de Iron82%
Dato con unidad
La unidad acompaña al valor; la ayuda explica cuándo se actualizó.
Crear un perfil, sin fricción
Una pregunta cada vez, etiquetas visibles y ayuda breve. El estado activo se reconoce por forma y contraste, no solo por color.
La revisión de Eva
Primero el estado; después el contexto y la firma profesional.
Revisión mensualMensaje de Eva
- Peso estable
- 0 vómitos
- Vigilar hidratación
Iron mantiene el peso y no ha vomitado: es la primera vez en seis meses. Ha bebido más tres días; queda registrado para revisar la evolución.
Prevalencia
Cuántos gatos lo tienen, sin marca de objetivo.
Lo más frecuente
Problemas de salud
- Boca y dientes 6 de cada 10 a partir de los 5 años
- Sobrepeso 5 de cada 10 medido en consulta
- Riñones 3 de cada 10 a partir de los 10 años
- Vómitos repetidos 2 de cada 10 de 7 a 10 años
- Piel y pelo 1 de cada 10 en un año
El plan, sin letra pequeña
La misma pieza de Home V3: precio, contenido, opciones y una sola acción.
iron.cat
Plan iron.cat
5,33 €/mes
Pagando el año: 64 € · en vez de 95,88 € mes a mes.
Incluido en el plan
Perfil de saludRegistros, tendencias y alertas.
Mensaje mensual de EvaUna revisión humana y con contexto.
Dieta personalizadaMarcas, receta casera, suplementos y transición.
Vídeos de conductaCuidados explicados por Eva.
Ayuda de saludChat, protocolos y consultas.
Opciones
Videollamada con Eva de 30'44 €/mes
A partir del segundo gato50 % de descuento
Preguntas frecuentes
Funciona sin JavaScript y mantiene una única respuesta abierta cuando el navegador admite grupos de details.
¿Qué es exactamente iron.cat?
Una app de acompañamiento en salud y nutrición felina, con la evolución revisada cada mes por Eva.
¿Sustituye al veterinario?
No. Amplía el contexto entre visitas y ayuda a reconocer cuándo algo merece atención.
La última acción también cuenta la promesa
El titular, la silueta felina y un único botón cierran la historia sin introducir un lenguaje visual nuevo.
Empieza por conocerlo mejor
Dale todos los años buenos que puedas.
Crea su perfil. Eva revisa el caso. La app mantiene viva su historia.
Seguro, privado y sin compromisoLectura nutricional
Muestra lo registrado y lo pendiente.
Lectura nutricional
Lo que come hoy
- Hidratos 55 % → 12 %
- Proteínas 28 % → 52 %
- Humedad 8 % → 70 %
Cuenta clara
Resume el coste anual.
Gasto veterinario
Lo que se paga al final
- Un año medio de veterinario
- 259 €
- Una sola intervención avanzada
- 2.500 €
Aplicaciones · Homepage V3
Una misma interfaz para salud, dieta y ayuda.
Las pantallas usan la misma jerarquía editorial, superficies cálidas y datos fáciles de leer.
Exploraciones de interfaz
Iron4 años · 4,2 kgPerfil de salud
Perfil de salud de Iron. En orden, con una señal a vigilar.
127días de contexto
Su historia permite entender cada cambio sin empezar de cero.
Peso4,2 kg
EstableHidrataciónBebe más desde hace 3 días
A vigilarPróxima revisiónMensaje mensual de Eva
18 días
Historial de Iron
Ejemplo de historial127 días de contexto conectado
Cada registro gana sentido cuando forma parte de la misma historia.
Peso registrado4,2 kg · sin cambios
ApetitoEstable
AguaLigero aumento · a vigilar
Revisión con EvaProgramada
RecordatorioAñadir foto dental
Tokens de diseño
↑ ArribaReferencia rápida
iron-tokens.css es la fuente de verdad de los tokens --ic-*. Brand Kit y Homepage V3 consumen las mismas capas editoriales y de componentes.
Colores
Tipografía
--ic-font-displayFraunces
--ic-font-bodyInter
--ic-font-monoSystem Mono
Radio de borde
--ic-chip-radius2 px
--ic-radius-xs6 px
--ic-radius-sm8 px
--ic-radius-md12 px
--ic-radius-lg16 px
Botones
--ic-button-height50 px
--ic-button-padding0 24 px
--ic-button-radius4 px
Movimiento
--ic-duration-fast120 ms
--ic-duration-base180 ms
--ic-ease-softcubic-bezier(.16,1,.3,1)
--ic-duration-page-intro2050 ms
--ic-duration-header-enter1000 ms
--ic-ease-page-introcubic-bezier(.83,0,.17,1)
--ic-ease-page-entercubic-bezier(.16,1,.3,1)
resizeMotion.easeexpo-in-out
resizeMotion.enterpower4-out