A · Tuerca calada (elegido)
Se reconoce por silueta, sin depender del color. Es macizo a 16 px, propio del oficio sin ser literal, y la T se descubre a la segunda mirada.
Brand Kit & Design System
TorkeOS
Logo, colores, tipografía y componentes oficiales del sistema operativo del taller. Descarga cualquier pieza o toca un color para copiar su código.
01 · Concepto
La tuerca gira, la T no se mueve
El isotipo es una tuerca hexagonal girada −15°: el instante exacto en que se aplica el torque. Dentro, calada en espacio negativo, está la T de Torke, perfectamente recta. Esa tensión entre lo que gira y lo que se mantiene firme es la promesa del producto: el taller se mueve todo el día y TorkeOS lo mantiene bajo control. La T es un hueco, no un trazo, así que toma el color de lo que hay detrás y funciona igual sobre grafito, papel o una foto.
- Grilla: 120×120. Tuerca inscrita en un círculo de radio 46, girada −15° sobre su centro.
- T: barra de 44×14 y asta de 14, la misma unidad en todo el trazo, con un margen óptico de 8 a 13 respecto a las caras de la tuerca.
- Unidad x: el grosor de la T (14). Área de respeto de 1x en los cuatro lados, 2x en gran formato.
- Prohibido: enderezar la tuerca, rotar la T, rellenar el calado, contornear o usar el rojo sobre fondos rojos.
Conceptos explorados
B · Arco de torque
Una T con la barra convertida en flecha de giro. Comunica movimiento, pero a 16 px la flecha se vuelve ruido y recuerda a los iconos de “recargar”.
C · Llave de vaso
Una T de herramienta con un vaso en el cruce. Es literal y amable, pero se parece a cualquier ferretería y no tiene nada que se descubra al mirarlo de nuevo.
D · Manómetro
La T como aguja de un indicador que marca torque máximo. Es potente en motion, pero en estático compite con el icono de “velocidad” de mil apps de autos.
Escalas y versiones
96 px
48 px
32 px
16 px
02 · Logotipo
Descarga los logos
Wordmark: TORKE en Barlow Condensed Bold con tracking +10 y OS en Signal Red, del mismo peso, para que se lea como un sistema. PNG transparente (1024 o 2048 px) y SVG vectorial; en el teléfono se abre el menú para guardar.
TORKEOS
Isologo horizontal
Principal: header, documentos, firma de email.
TORKEOS
Isologo vertical
Portadas, merch, rotulación del taller.
App icon
PWA, avatar de redes, favicon.
TORKEOS
Sobre claro
Facturas, presupuestos impresos, PDFs.
- Favicon y PWA: app icon grafito, generado desde el mismo path que usa la interfaz.
- Tamaño mínimo: isologo 88 px / 22 mm de ancho; isotipo 16 px / 5 mm.
- Talleres cliente: en el portal del cliente manda la marca del taller; TorkeOS firma como “Powered by” con el isotipo a 16 px.
03 · Color
Grafito de taller, rojo de señal
80 % neutros · 15 % texto · 5 % Signal Red. El rojo marca lo accionable y el estado activo; nunca se usa para decorar. Toca un color para copiar su HEX.
Neutros · taller
Acento · señal
--t-grad-signal · CTA destacado, barras de progreso
--t-grad-heat · hero, OG, portadas
Contraste: Paper sobre Graphite ≈ 16:1 y Graphite sobre Paper igual. Signal Red sobre Graphite ≈ 4.6:1 (AA para texto grande e iconos). Para texto rojo pequeño sobre claro usa #D9341D.
04 · Tipografía
Condensada para mandar, legible para trabajar
Display · Barlow Condensed 700
El taller completo, bajo control.
H2 · Barlow Condensed 700
Orden #1042 · Diagnóstico listo
H3 · Manrope 800
Presupuesto pendiente de aprobación
Body · Manrope 400
Recepción, diagnóstico y presupuesto en el teléfono del mecánico, con el cliente informado por WhatsApp.
Label · Manrope 700 · +0.18em
Estado · En reparación
Cifras · Manrope tabular
$ 1.284.500 · 3 h 40 min
05 · Componentes
Botones, estados e iconos
Botones de 44 px mínimos: se usan con guantes y en el foso. Una sola acción en rojo por pantalla.
Ingreso
Formato de recepción
Kilometraje, daños sobre el diagrama, fotos y firma en un solo flujo.
Diagnóstico
Historia clínica
Cada intervención queda en la historia del vehículo, con marca de repuesto y durabilidad.
Cliente
Presupuesto por WhatsApp
El cliente aprueba o rechaza desde su teléfono, sin llamadas.
Iconos: Lucide a 20–24 px, trazo 2, en Concrete en reposo y Signal Red cuando están activos.
06 · Tokens
CSS listo para usar
/* ===== TorkeOS · Brand tokens ===== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
/* Neutros */
--t-graphite: #171A1F; /* fondo dominante, sidebar */
--t-asphalt: #23272E; /* superficies elevadas sobre graphite */
--t-paper: #F5F5F4; /* fondo de la app en claro */
--t-concrete: #D6D3D1; /* bordes, texto sobre graphite */
--t-steel: #78716C; /* texto secundario sobre paper */
/* Acento */
--t-signal: #EF3F26; /* CTA, isotipo, estados activos */
--t-ember: #FF765F; /* hover, glow, énfasis sobre oscuro */
--t-brake: #B91C1C; /* destructivo, alertas */
/* Gradientes y glow */
--t-grad-signal: linear-gradient(90deg, #EF3F26 0%, #FF765F 100%);
--t-grad-heat: radial-gradient(circle at 80% 110%, rgba(239, 63, 38, 0.65), transparent 55%), #171A1F;
--t-glow: 0 0 28px rgba(239, 63, 38, 0.55);
/* Tipografía */
--font-display: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
/* Radios (base 4px) */
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 26px;
}
.t-wordmark { font: 700 1em/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.t-wordmark b { color: var(--t-signal); font-weight: 700; }
07 · Aplicaciones
Redes, WhatsApp y documentos
Avatar
App icon grafito con la tuerca roja centrada al 72 %. El mismo archivo sirve para Instagram, WhatsApp Business y Google Business.
Feed 1080×1350
Foto real de taller en low-key con overlay grafito al 65 %. Titular en Barlow Condensed y una sola palabra en Signal Red.
Presupuestos y PDFs
Isologo sobre claro arriba a la izquierda; totales en Manrope tabular; el estado (aprobado o pendiente) como chip rojo.
Firma
Isotipo de 48 px abajo a la izquierda y torkeos.com en Manrope Bold a la derecha, a 64 px de los bordes.