Sistema de diseño
Plataforma de merchandising visual automotriz para Latinoamérica. La marca es cian y ámbar sobre blanco, como la propuesta original; el studio azul profundo es donde gira el auto.
Versión del 27 de octubre de 2026 · www.360cars.cl · COMERCIAL REY-AGUIRRE SPA, Puerto Montt
Voz de la marca
Cuatro registros que no se mezclan. Si una pieza mezcla dos, está mal.
| A quién | Registro | Ejemplo real |
|---|---|---|
| Concesionario o comprador, en la web y en demos | Tuteo directo, fríamente concreto. Cero adjetivos de relleno. | «Tu inventario, visto desde todos los ángulos.» |
| Spyne y partners, en documentos y anexos | Neutro formal, sin tuteo. Español técnico o inglés según el interlocutor. | «El precio final lo define 360cars; Spyne recibe una parte de los ingresos.» |
| Luna, con el comprador | Cercano y resolutivo. Nunca promete lo que el sistema no confirma. | «Reservé la unidad a tu nombre y bloqueé el jueves a las 18:00.» |
| El equipo y los reportes internos | Impersonal: infinitivo, sin imperativos. Las cifras las pone el sistema. | «Vehículos procesados: 142. Pendientes de QC: 3.» |
- Números en formato chileno: $12.990.000, 85.000 km, 3,2 s.
- Sin emoji en interfaz, correos ni piezas. El check de Luna es la única excepción acordada.
- Las cifras las pone el sistema, nunca una IA. Luna no inventa dividendo: lo calcula.
- Nada interno en piezas para clientes: ni tarifas Spyne, ni márgenes, ni créditos prepagados.
- Nunca se publican tasas de una financiera ni condiciones especiales.
- Una acción principal por vista. Nunca dos botones ámbar juntos.
Fundamentos visuales
Lo que decide cómo se ve la marca en pantalla.
Color
La marca es cian y ámbar sobre blanco, medidos en la propuesta original: la franja de título es #00A8F0 y el monograma es #FFBB33. El cian es para la acción principal; el naranja (#FFA830) para destacar UNA sola cosa por vista. Cuando el cian tiene que ser texto, se usa brand-ink (#0077A8). Las islas studio (visor 360 y Luna) son azules profundas de la misma familia.
Contraste (WCAG 2, medido)
Texto principal sobre cualquier fondo: 15,4:1 o más. Texto secundario: 5,4:1 o más. Texto oscuro sobre el cian: 6,7:1 (nunca blanco, que da 2,7:1). Insignias de estado: 5,7:1 o más. El enfoque de teclado usa un contorno cian de 2px con 2px de separación.
Imágenes
El auto es el héroe: render o foto real centrada, trompa mirando a la izquierda, nunca espejada. Fondo de studio solo dentro de la isla oscura. Sobre claro, las imágenes viven en tarjetas con borde, sin sombra dura. Sin foto: «Sin captura» sobre fondo muted.
Iconografía
Trazo 1.8–2, de 14 a 20px, del color del texto que acompañan. Siempre junto a una palabra o un dato. Sin emoji. Los hotspots del visor son la única iconografía animada.
Movimiento
Transiciones de 150 ms en colores, bordes y sombras. Nada se mueve solo. Excepciones de producto: el turntable 360 gira (es el producto) y Luna muestra su indicador de escritura. Todo respeta prefers-reduced-motion.
Sin ruido
Sin degradados en tarjetas ni botones, sin brillos, sin bordes de color a un costado, sin auroras de fondo. El único degradado permitido vive dentro del studio: el piso del visor.
Color · tema claro
El tema por defecto de la web pública. Cada color lleva su nombre, su valor y para qué se usa.
El cian de la marca, medido en la franja de título de la propuesta. Botón de acción principal y franjas.
accent al pasar el puntero.
accent presionado.
Texto sobre accent. Nunca blanco sobre cian (2,7:1, no alcanza).
El cian hecho TEXTO legible: eyebrows, enlaces, cifras destacadas.
Naranja de la marca: UN solo destaque por vista (Luna, el 360°).
Ámbar medido en el monograma original 360 Cars. Solo en el logo y piezas de marca.
Fondo de página, tal como la propuesta.
Bandas y secciones alternas sobre background.
Tarjetas, menús, cuerpo del correo.
Fondos apagados: chips, celdas, área vacía.
Texto principal.
Texto secundario y datos.
Azul casi negro: botón oscuro y pie de página.
Línea fina de tarjetas, divisores e inputs.
Error y acciones que borran.
Color · isla studio
Donde vive el producto. Mismo ámbar de marca; como texto se aclara para leerse sobre oscuro.
Fondo de la isla studio: visor 360 y Luna.
Bandas internas del studio.
Tarjetas y paneles dentro del studio.
Fondos apagados en oscuro.
Texto principal en oscuro.
Texto secundario en oscuro.
El cian hecho texto en oscuro: hotspots, etiquetas del visor.
El ámbar de marca para el destaque único en oscuro.
Líneas en oscuro.
Hotspots, etiquetas y telemetría del visor usan brand-ink (#ffc24d) sobre el fondo del studio. El texto de cuerpo, foreground. Nunca ámbar puro como texto en oscuro: vibra.
Estado del vehículo y del proceso
Siempre con la palabra escrita: el color ayuda, la palabra informa. No se inventan estados.
Tipografía
Inter para texto y Space Grotesk para titulares y números. Pesos de 400 a 800; precios y métricas en 800.
Espaciado, radios y sombras
Unidad de 4px. La marca es redondeada: no se usan esquinas rectas en tarjetas ni botones.
Espaciado
Radios
Sombras
Uso del logo
- Monograma: anillo de turntable cian, punto ámbar: la vuelta completa y el auto.
- Wordmark: «360» en foreground, «cars» en brand-ink. Nunca todo cian.
- Sobre studio: «360» en foreground claro y «cars» en #4DD0FF.
- No se recolorea el monograma, no se pone sobre fotos, no se le agrega sombra.
- El ámbar del logo (#FFBB33) no se usa como color de interfaz: interfaz usa highlight (#FFA830).
Componentes
Dibujados con los mismos estilos del sistema.
Botones
Principal: una acción por vista, texto oscuro sobre ámbar, nunca blanco. Oscuro: secundaria con peso. Contorno: encabezado y acciones terciarias. Nunca dos principales juntos.
Formulario
Focus: borde accent + anillo de 3px al 28%. Error: borde destructive y mensaje debajo, nunca solo color.
Burbujas de Luna
Luna a la izquierda sobre surface; el comprador a la derecha sobre card. Los datos duros (dividendo, plazo) van en bloque de simulación, no dentro de la burbuja.
Tarjeta de métrica
Números en Space Grotesk 800 tabular. Sin tarjetas con borde por métrica: la tira va directa sobre el fondo.
Correo transaccional
El lead que llega desde el sitio y los que vengan. Tablas y estilos en línea, 600px, Arial, sin JavaScript ni SVG.
- Remite 360cars <notificaciones@360cars.cl>; Reply-To siempre el correo del lead.
- Asunto con el dato que importa: «Nuevo lead: {automotora} — {nombre}».
- Botón ámbar con texto oscuro; nunca verde con blanco (4,1:1, no alcanza).
- Cifras y campos los pone el formulario, nunca se reescriben en plantilla.
- Pie con razón social: COMERCIAL REY-AGUIRRE SPA · 77.728.698-6 · Puerto Montt.
- Todo correo periódico lleva la forma de darse de baja en el pie.
Logo · en exploración
Tres caminos sobre la misma paleta medida. El monograma funciona solo, con o sin wordmark.
Anillo cian incompleto (la vuelta que empieza) con punto ámbar: el auto. Es el que hoy usa la web.
El «360» con el cero como vuelta: el cian es el giro, el ámbar marca el punto de partida.
El círculo ámbar del logo original, ahora con el cian como anillo exterior: la marca vieja dentro de la nueva.
Regla común a los tres: sobre claro llevan los dos colores; en una sola tinta, todo foreground salvo el punto ámbar que puede ir en highlight.
Accesibilidad y movimiento
No es una sección decorativa: es contrato.
Contraste
Todo par texto/fondo publicado en este documento está medido. Mínimo 5,4:1 en secundario, 6,7:1 sobre el cian.
Teclado
Contorno cian de 2px con 2px de separación en :focus-visible. El slider del comparador y el turntable son operables con teclado y touch.
Movimiento reducido
prefers-reduced-motion apaga el giro automático del turntable, las revelaciones y los contadores. El contenido queda completo igual.
Semántica
Un h1 por página. Insignias siempre con texto. El visor 360 expone role=img con descripción accionable.