ROCCA TRUCK
v1.0 · Julio 2026

Design System
Rocca Truck Chile

Sistema visual para la web de alto rendimiento orientada a campañas de Google Ads. Paleta fiel a la marca, ejecución más limpia y premium: el amarillo trabaja como acento disciplinado, no como fondo.

01

Color

El amarillo manda, pero en dosis: CTA, acentos y la franja de 6px. Nunca como fondo de sección completa.
Amarillo Rocca
#F7A600
Primario · CTA · acentos
Negro Chasis
#161616
Texto · bloques oscuros
Carbón
#232320
Cards sobre negro
Blanco Hueso #FAFAF8 · superficie
Gris Taller #F4F3EF · fondo página
Borde #E3E1DB · líneas
Gris Acero #6B6961 · texto 2°
Tinte Amarillo #FFF4DC · destacados

Franja hazard: el patrón amarillo/negro del catálogo se conserva como detalle de identidad — una línea de 6px que separa secciones clave. Nunca más gruesa, nunca como textura de fondo.

02

Tipografía

Superfamilia Barlow: condensada para titulares (herencia del catálogo), regular para UI y lectura.
Barlow Condensed 700 · Display / titulares · UPPERCASE
Carrocerías que
aguantan el rubro
Barlow 400–600 · Cuerpo / UI

Cada carrocería Rocca está diseñada y construida para satisfacer las necesidades únicas de su negocio. Carga seca, refrigerada o personalizada.

Texto secundario en Gris Acero para jerarquía. Mínimo 15px en web, 17–18px en párrafos principales.

H1 · 64px Cond 700Fábrica de carrocerías
H2 · 44px Cond 700Nuestros servicios
H3 · 26px Cond 600Servicio de reparación
Kicker · 15px Cond 600Herencia en carrocerías
Body · 17px Barlow 400De norte a sur y de cordillera a costa, quienes dependen de sus camiones eligen Rocca.
Dato · 14px Mono+569 8198 0744 · Quilicura, RM
03

Espaciado y grid

Escala base 8px. Contenedor 1280px. Radio 4–6px: industrial, casi recto.
Escala de espaciado (px)
8
gap mínimo entre elementos
16
interior de componentes
24
padding de cards
40
entre grupos de contenido
96
entre secciones de landing
Grid 12 columnas · gutter 24px · máx 1280px

Landing para Ads: una sola columna de lectura, secciones full-width alternando Blanco Hueso / Gris Taller, con bloques Negro Chasis para hero y CTA de cierre. Radio de esquinas: 6px cards · 4px botones e inputs. Sombras casi nulas — la jerarquía la dan el contraste y los bordes.

04

Iconografía

Línea 2px, esquinas rectas, 24px. Sin rellenos, sin degradados. Contenedor cuadrado con tinte amarillo.
llamar
correo
ubicación
garantía
avanzar
sobre oscuro
05

Componentes

Botones · Barlow Condensed 600 uppercase · altura 52px (mín. 44px táctil)
Formulario de cotización · corto, 4 campos máx.

Te respondemos el mismo día hábil.

Navbar · logo + 4 links máx + CTA siempre visible
Badges y datos de confianza
+6 años en el rubro Fábrica en Quilicura Garantía de fábrica
Card de servicio · borde superior amarillo al hover

Diseño

Desde carrocerías estándar hasta productos altamente personalizados según tu operación.

Construcción

Carga seca, refrigerada y más, con la confiabilidad que necesitas a diario para trabajar.

Mantenimiento

Reparaciones duraderas con materiales certificados para alargar la vida útil de tu carrocería.

06

Secciones de landing

A escala real, dentro del marco. Fotos = placeholders hasta recibir material del cliente.
Hero oscuro · foto real de camión a la derecha · un solo mensaje + doble CTA
Fábrica de carrocerías · Quilicura

La carrocería que tu negocio necesita, hecha en Chile

Carga seca, refrigerada o 100% personalizada. Diseñamos, fabricamos y reparamos con garantía de fábrica.

+6años en el rubro
100%fabricación propia
RMy regiones
[ foto: camión con carrocería Rocca ]
Franja CTA · único uso permitido del amarillo como fondo

¿Qué carrocería necesitas?

Cuéntanos tu operación y te proponemos la solución. Respuesta el mismo día hábil.

Prueba social · proyecto real con resultado + cita
[ foto: proyecto entregado ]
Caso · carga húmeda

7 unidades para reparto exigente

Versatilidad y durabilidad en cada carrocería para una flota que transporta carga húmeda a diario.

“Siempre parece imposible hasta que se hace.”
Rocca Truck Chile Herencia en carrocerías
Footer · datos de contacto siempre clicables
07

Conversión / Google Ads

Reglas para que cada clic pagado tenga una salida clara.
WhatsApp flotante · 60px, esquina inferior derecha, siempre visible

Único elemento verde de la interfaz. Enlace directo wa.me con mensaje precargado: "Hola, quiero cotizar una carrocería".

Barra sticky de CTA · aparece al hacer scroll pasado el hero (mobile-first)

Fija al borde inferior. Dos acciones, nada más: cotizar y llamar. En desktop puede reemplazarse por el CTA del navbar.

¿Listo para cotizar?
Reglas de rendimiento para Ads
  • Un mensaje por landing: cada campaña apunta a una página con un solo servicio y un solo CTA principal.
  • Formulario de máximo 4 campos, sobre el pliegue en mobile.
  • Fuentes del sistema Barlow con display=swap; fotos comprimidas y con dimensiones fijas (sin saltos de layout).
  • Teléfonos siempre como tel: clicables — el click-to-call es conversión medible.
  • Nada de carruseles ni animaciones pesadas: contraste, foto real y CTA.