Design System · v1
La marca, sin fricción.
Finanziro es la evolución de Ziro: intermediación hipotecaria para clientes finales, a través de agencias inmobiliarias y una red de referidos. Este es el sistema que da forma a cada pantalla, documento y publicación.
- 15+
- años de experiencia
- BdE
- registro Banco de España
- 19
- componentes
Cuota estimada
780,43 €/mes
Content fundamentals
Cómo hablamos, con claridad.
Experto, sereno, directo. Lideramos con el beneficio y lo respaldamos con pruebas: 15 años, Banco de España, principales bancos.
Idioma
Español de España. Formatos es-ES: 250.000 €, 2,45 %, 780,43 €/mes.
Persona
Hablamos de tú al lector y como nosotros: «Te acompañamos», «Negociamos con los principales bancos».
Tono
Experto, sereno y tranquilizador. Frases cortas. Primero el beneficio, luego la prueba.
Mayúsculas
Sentence case en títulos y botones. MAYÚSCULAS solo en overlines con tracking.
Titulares
Dos tiempos, el segundo en negrita: «Tu hipoteca, sin fricción.»
Evitar
Hype, garantías de aprobación, emojis, exceso de exclamaciones y jerga inglesa para clientes.
Vocabulario
Visual foundations
Los cimientos, en ocho reglas.
Color
Navy #041A2D domina el campo; Ziro Green #26F79D es la señal: CTAs, cifras clave, estados activos.
Tipografía
Outfit 200 + 700 para el contraste del logo, Outfit 600 en títulos, Manrope en texto, JetBrains Mono para cifras.
Espaciado
Base de 4 px. Secciones de 80–96 px. Contenedor de 1200 px con gutters de 24 px.
Fondos
Campos navy con rejilla verde de 40 px al 8 % y un único halo radial. Sin otros degradados.
Radios
Inputs 10 px, cards 20 px, paneles y diálogos 28 px, botones y chips en píldora.
Movimiento
ease-out (.22,1,.36,1). 120 ms micro, 200 ms UI, 420 ms revelados. Sin rebotes.
Sombras
Tintadas en navy, suaves. El glow verde solo en hover del botón primario y datos destacados.
Interacción
Hover: verde más claro + glow. Press: escala .97. Focus: borde verde + anillo de 3 px.
Color
Dos colores, una señal.
Finan Navy y Ziro Green, muestreados del logotipo. Navy es el campo dominante; el verde marca la acción. Nunca el logo sobre verde.
Finan Navy
#041A2D
Ziro Green
#26F79D
Tipografía
Fino y rotundo, como el logo.
El contraste entre «Finan» cursiva fina y «ziro» redondeada y pesada se traslada al sistema: Outfit, Manrope y JetBrains Mono para cada cifra.
Display
Aa Aa
Outfit 200 / 700
Texto
Aa
Manrope 400–800
Cifras
2,45 %
JetBrains Mono
Marca
Logotipo y herencia Ziro.
Espacio de seguridad igual a la altura de la «z». Ancho mínimo 96 px. Sobre navy o paper, nunca sobre verde ni fondos de bajo contraste.
Fotografía
Fotografía real y cálida de clientes y partners: luz natural, hogares, llaves y firmas. Recortes en arco o píldora con halo verde; degradado navy inferior para pies de foto.
Legado Ziro
Ilustración heredada de Ziro, origen del tono sage #4E9E7E usado como color secundario de datos.
Componentes
Primitivas React, listas para usar.
Un set estándar con añadidos propios de la marca: Slider para el simulador, StatCard para KPIs, Steps para el proceso hipotecario.
Aplicaciones de marca
La marca, en el mundo.
Ilustraciones 1080×1080 sin personas dibujadas, papelería corporativa y un kit completo para redes sociales.
UI kit · Website
La web, navegable.
Home, Agencias y Solicitud. Haz clic dentro para recorrer las pantallas y probar el simulador de hipoteca.