Karakoles 4x4 · Sistema de diseño · v1
Base clara para leer, oscuro para los momentos que deben sentirse cinematográficos. El acento aparece poco, y por eso se nota.
Arena hueso
#E7E2D7 · base del sitio
Crema polvo
#F2EFE7 · superficies
Carbón volcánico
#13161A · hero y editorial
Carbón alzado
#1B1F25 · cierre
Óxido
#A8460F · acento sobre claro
Óxido claro
#D2662A · acento sobre oscuro
Musgo profundo
#465239 · confirmaciones
Piedra seca
#6E6A61 · texto secundario
De dónde sale el óxido. El naranja del logo es #F5821F. Bajarlo de saturación y luminosidad hasta #A8460F conserva la identidad y deja de pelear con una interfaz mineral: es el mismo color con el volumen bajado. Regla de uso — el acento nunca cubre más del 2% de la pantalla. En Patagonia, de unas 5.200 declaraciones de color, los acentos juntos aparecen ~54 veces.
Naranja original · #F5821F
Como está hoy. Sobre la base mineral canta más fuerte que todo lo demás y arrastra el bisel 3D del archivo antiguo.
Óxido · #A8460F — recomendado
Mismo símbolo, plano, sin bisel. Convive con la paleta en vez de competir. No es un logo nuevo: es el mismo, calibrado.
Arena hueso sobre carbón
La versión que usa el sitio en hero, Field Notes y footer. Es la que más se ve en la home.
Qué se decide aquí. El logo actual es naranja brillante, redondeado y con bisel 3D — tensiona de frente con la austeridad mineral que pide el propio lineamiento, y no hay manual de marca que zanje el punto. La propuesta no cambia el símbolo ni el logotipo: aplana el bisel y recalibra el color. Si el cliente prefiere conservar el naranja tal cual, el sistema funciona igual — pero el naranja pasa a ser el acento y hay que quitar el óxido para que no compitan dos tonos casi iguales.
Titulares · DM Serif Text
Camp and Drive
Serif de display, un solo peso. Todos los títulos del sitio, de H1 a H4. Al no tener negrita ni cursiva, la jerarquía la hace el tamaño — y eso obliga a una escala limpia.
Interfaz y datos · Archivo variable
Camp and Drive
Grotesca técnica con eje de anchura. Navegación, etiquetas, cifras, fichas y botones. Ya no se usa en titulares.
Editorial · Newsreader
Lo que todavía no sabes que existe
Serif de texto, ligera. Reservada para manifiestos, bajadas y Field Notes. No es una dupla de sistema: es una señal que dice “esto es editorial”.
H1 · 82 / 88
−0.82px · un solo peso
Vive Colombia como pocos
H2 · 52 / 56
−0.52px · un solo peso
Lo que pasó allá afuera
H3 · 46 / 49
−0.46px · un solo peso
Corta, terca, imparable
Bajada serif · 23
−0.35px · lh 1.45
Cuerpo · 17
0 · lh 1.65
Etiqueta · 11
+0.16em · versalitas
Self-drive 4x4 · Colombia · Desde 2016
Una sola regla de interletraje: letter-spacing: -0.01em en todo titular. Con Archivo el cierre era del −2%, que es lo que mide Patagonia; una serif de display ya viene ajustada de fábrica y ese valor la apretaba. La mitad basta — y sigue siendo un solo valor para cualquier tamaño. En el cuerpo y en el texto editorial, cero.
Acciones sobre claro
Un solo botón sólido por pantalla. El resto son bordes o enlaces con filete.
Acciones sobre oscuro
Sobre carbón el acento pasa a #D2662A en textos pequeños, para no perder contraste.
Campo de formulario
Nos falta este dato para poder responderte.
Selector de intención
Cada opción abre un flujo distinto.
Ficha de equipamiento
El filete punteado marca lo que no viene de base.
Radio cero por defecto. Secciones, tarjetas, fotos y fichas van a canto vivo, igual que Patagonia: es lo que separa esta interfaz de la plantilla de alquiler genérica y encaja con lo mineral. Dos excepciones, ambas pedidas por el cliente: los botones son píldora y los formularios llevan esquina redonda — caja, campos y fichas de opción. Se agrupan a propósito: lo redondo marca lo que se toca, lo de canto vivo es lo que se lee. Una desviación deliberada del referente: Patagonia usa CTAs de solo texto, sin fondo. Karakoles necesita convertir, así que el botón principal sí es sólido; el resto de acciones se mantiene contenido.
El orden de los ocho bloques está fijado por el cliente y sigue la progresión del camino del héroe. Lo que aporta el diseño es agruparlos en tres actos de color que el usuario siente sin tener que leerlos.
El llamado. Hero a sangre, noche, escala humana pequeña. Un solo momento, dos acciones.
Las pruebas. Todo lo que hay que entender y decidir —puertas, flota, proceso, agencias— va sobre base clara, donde se lee sin fatiga.
El retorno. Field Notes, Guided Editions y el cierre vuelven al carbón: es la parte emocional, y la foto pesa más que el texto.
Una excepción deliberada. Field Notes va oscuro en el home, donde son tres tarjetas cortas y la foto manda. La entrada del blog va sobre base clara: son crónicas de 900 palabras y leer eso en oscuro cansa.
KARAKOLES 4X4 · SISTEMA DE DISEÑO V1 · DICOTOMÍA · AGOSTO 2026