El sistema de fipe.cl sigue la misma idea que los manuales que diseño: decisiones claras, firmadas, que una persona o una IA pueden ejecutar sin adivinar.
Una semilla, el Rosso (rojo italiano con un toque salmón), para la acción. El salmón solo brilla sobre fondos oscuros.
Neutros levemente cálidos. Sin crema ni amarillo.
Titulares legibles (Bricolage Grotesque 600). El ritmo lo dan el énfasis liviano en rojo y el revelado por palabras, no la deformación de la letra.
Todo movimiento confirma, orienta o revela. Con prefers-reduced-motion, nada se mueve.
01 · Color
Color con nombre propio.
Fondo#F5F4F2Fondo general (neutro, no crema)
Blanco#FFFFFFCards, inputs, modales
Fondo 2#EBE9E6Superficie hundida
Tinta#181312Texto · 16,8:1 sobre fondo
Niebla#6B6361Texto secundario · 5,3:1
Rosso#D33F2CSemilla: CTA · blanco encima 4,65:1
Rosso tinta#B5321FTexto chico en rojo · 5,5:1
Salmón#FF8C78Brillos y destacados sobre oscuro · 8,1:1
No vendemos logos sueltos. Diseñamos tu marca con sus reglas.
Cuerpo · Schibsted 400 · 18 / 1.5
El manual define versiones, colores en HEX, CMYK y Pantone, tipografías y usos incorrectos.
Etiqueta · Schibsted 600 · 12 · +10%
Plan base · 10 a 15 días
Precio · Bricolage 600 · tabular
$400.000
03 · Botones
Botones.
Pasa el cursor: el círculo del icono se expande y rellena el botón, la etiqueta rueda y la flecha sale y entra. Al presionar, escala a 0,97. En táctil no hay hover: el feedback es la presión.
La etiqueta flota al enfocar. La validación ocurre al salir del campo, nunca mientras escribes la primera vez. El error sacude el campo una vez y despliega el mensaje; el éxito dibuja un check.
Normal
Revisa este campo
Hover
Revisa este campo
Foco
Revisa este campo
Lleno
Revisa este campo
Error
Revisa el formato del correo
Válido
Revisa este campo
Deshabilitado
Revisa este campo
Con prefijo
+56 9
Deben ser 8 dígitos
8 dígitos
Select
Rubro
Rubro
Construcción
Transporte
Salud
Revisa este campo
Área de texto + contador
Revisa este campo
0 / 400
Pruébalo: escribe un correo inválido y sal del campo
Revisa el formato del correo
06 · Selección
Elegir sin pensar.
Tarjetas de opción (una)Chips (varias)Casilla e interruptorEtiquetas
Una decisión por pantalla. Progreso visible. Errores en el momento justo. Cierre con resumen y salida a WhatsApp.
09 · Acordeón
Preguntas.
¿Qué incluye el manual base?
Diez capítulos: concepto, versiones del logo, construcción, área de seguridad, color, usos incorrectos, paleta, tipografías, fondos y aplicaciones básicas.
¿Cuánto se demora?
Entre 10 y 15 días hábiles desde el brief.
10 · Movimiento
Movimiento.
--e-out
Casi todo: hover, entradas.
--e-in-out
Telones: menú, slides, pasos.
--e-spring
Confirmaciones: checks, radio, switch.
120 ms
--d-1
Presión
240 ms
--d-2
Hover, color
480 ms
--d-3
Entradas, campos, checks
760 ms
--d-4
Telones: menú, slides, portadas
Con prefers-reduced-motion todas las duraciones pasan a 0.
11 · Menú
Menú.
Telón circular que nace del botón. Los ítems suben en cascada; al hover, el resto se apaga y el elegido se estira. Esc cierra, el foco queda atrapado y el fondo no hace scroll.
