Volver al Brand Hub
DESIGN SYSTEM

La fuente de verdad de la identidad visual y verbal de Kinetic.

Todo lo que hace falta para que una pieza se reconozca como Kinetic sin firma: nombres exactos, cifras habilitadas, color, tipografía, layout, uso del logo, dirección de imagen y los mínimos de accesibilidad.

13 secciones45 bloquesAlineado a kinetic-corp-ai
PUNTO DE PARTIDA

Fundamentos

Cuatro decisiones explican casi todo lo que sigue. Si tenés que resolver un caso que la guía no cubre, resolvelo con estos principios.

Principios

01

Gobernar antes que adoptar

Adoptar IA ya no es el desafío: gobernarla, sí. Cuando dudes entre un ángulo novedoso y este reframe, elegí el reframe.

02

Oscuro por defecto

El canvas es negro. La luz es escasa y direccional. Las superficies claras existen, pero son la excepción y se declaran.

03

Naranja con disciplina

El naranja marca la acción y el énfasis, no decora. Un solo destaque por línea; si todo brilla, nada guía.

04

Nada inventado

Nombres, cifras y clientes salen de esta guía o van entre corchetes. Un dato inventado invalida la pieza entera.

Jerarquía de fuentes

Cuando dos fuentes se contradicen, gana la de arriba.

PrioridadFuenteQué define
01Archivos oficiales del kit (.png y .svg)Geometría, color y artwork de la marca. No se redibujan.
02Esta guía y el design systemNombres, cifras, color, tipografía, layout, tono y accesibilidad.
03kinetic-corp-ai.vercel.appReferencia viva de cómo se ve el sistema aplicado y de la oferta vigente.
Cómo usarla

Consultá la sección que necesitás antes de producir, no después. El buscador de la izquierda filtra por palabra clave y cada valor se copia con un click.

IDENTIDAD

Marca y posicionamiento

Qué dice Kinetic de sí misma, en las palabras exactas que ya están publicadas.

Posicionamiento

Convertimos organizaciones tradicionales en empresas potenciadas por Inteligencia Artificial.

Es la frase madre. Todo el resto del mensaje es una consecuencia suya: el diagnóstico, la gobernanza, la formación, el talento y los agentes existen para llegar ahí.

Titular insignia

La IA acelera.La estrategia decide.Kinetic transforma.

El patrón es tres afirmaciones cortas en escalada, la última con la marca. Sirve como estructura, no solo como frase: se puede reescribir para otro tema manteniendo el ritmo de tres.

Tensión central

De la adopción al manejo estratégico. El desafío ya no es incorporar la tecnología, sino gobernarla antes de que las vulnerabilidades escalen.

Integración sin control

Modelos y agentes entran al día a día sin filtro previo.

Riesgos regulatorios

Normativa que cambia más rápido de lo que la organización reacciona.

Uso descontrolado

Herramientas adoptadas sin criterio ni supervisión central.

Exposición de datos

Información sensible filtrada hacia modelos de terceros.

Pérdida de competitividad

Pérdida de terreno frente a empresas AI-First.

Falta de talento preparado

Equipos sin capacidades para operar en entornos potenciados por IA.

Cómo cierra

Convertimos estos riesgos en una hoja de ruta hacia un modelo AI-Ready. El problema nunca se deja abierto.

Respaldo Andersen

El respaldo internacional se enuncia siempre con esta copia, sin adornos ni superlativos agregados:

En piezas visuales el respaldo aparece además como lockup gráfico. Las reglas de esa aplicación están en Logo y lockups.

CATÁLOGO CERRADO

Oferta y nomenclatura

Lista cerrada. Es una referencia de exactitud, no un menú para llenar la pieza: nombrá solo lo que el brief pide.

Modelo AI-READY

Productos

PotentialAssessment AI

MVP · acceso anticipado

Automatiza el Análisis de Complejidad del Discurso basado en la teoría de Elliot Jaques: del audio de la entrevista al informe profesional de potencial, con supervisión humana en todo el recorrido. Aumenta al especialista, no lo reemplaza.

Ver producto

WorkforceInsights AI

Acceso anticipado

Agente conversacional que entrevista equipos sobre tareas, tiempo y capacidades, y convierte eso en datos estructurados para decidir sobre estructura, roles y procesos.

Ver producto
  • Nunca presentes ninguno de los dos como disponible de forma general.
  • Nunca escribas los nombres separados: es PotentialAssessment AI, no Potential Assessment AI.

Metodología y modelos

Nombre exactoQué es
Hybrid AI MethodLa metodología propia: juicio humano sobre las decisiones críticas, amplificado por IA. El algoritmo nunca decide solo.
AI-ReadyEl modelo objetivo hacia el que evoluciona la organización.
AI HybridEl estado organizacional al que lleva el Hybrid AI Method.
AI-First / AI-PoweredDescriptores. Siempre con guion, tal cual se muestran.
Agentic AINombre del servicio y también categoría tecnológica.

Reglas de escritura de nombres

  • Nunca inventes, traduzcas, abrevies, pluralices ni restilices un servicio, producto, metodología o modelo.
  • Nunca acuñes una oferta nueva para llenar un espacio de la pieza.
Si falta algo

Si el brief pide una oferta que no está en esta lista, escribí [OFERTA A CONFIRMAR] y seguí. Nunca la improvises.

VERBAL

Voz y mensajes

Confiada, provocadora, orientada al negocio. Vendemos resultados, no hype.

Tono y persona

Hablamos como

Nosotros / Kinetic: “Convertimos…”, “Mapeamos…”, “Ayudamos…”.

Le hablamos a

Tu empresa, tu transformación, tus equipos.

  • Frases declarativas cortas. Preferí la tríada antes que el párrafo.
  • Sentence case en el cuerpo. Mayúsculas solo en eyebrows y etiquetas de verbo.
  • Los nombres de servicios, productos y metodología quedan en inglés, exactos.
  • Como máximo una palabra destacada en naranja por línea.
  • Nunca uses emoji.
  • Nunca abras con una estadística que el mensaje no necesita.
  • Nunca prometas resultados que el brief no aportó.

Narrativa de resultados

De la experimentación al impacto empresarial. Estos son los tres bloques aprobados para hablar de beneficios.

Blindaje operativo

  • Protección de información crítica
  • Gestión de riesgos
  • Cumplimiento y trazabilidad

Productividad exponencial

  • Procesos más ágiles
  • Equipos aumentados por IA
  • Menos tareas repetitivas

Ventaja competitiva

  • Mayor velocidad de ejecución
  • Menores costos operativos
  • Mejor toma de decisiones

Copy: antes y después

Hacé esto
EL FRAMEWORK

Evolucionamos tu empresa hacia un modelo AI-READY.

Cinco etapas, un solo destaque, cero adjetivos de relleno.

Eyebrow corta, una idea, un destaque, un nombre exacto.

Nunca esto
¡LA REVOLUCIÓN DE LA IA!

Transformá tu futuro con la IA #1

La solución definitiva que multiplica x10 tus resultados.

Hype, superlativos, cifras inventadas y tres destaques en una línea.

PRUEBA

Datos aprobados

Un techo, no una lista de compras. Sumá una cifra solo cuando el mensaje dependa de la prueba.

Cifras transversales

18Años de trayectoria
+300Clientes corporativos a nivel mundial
+20.000Personas formadas de América y Europa
9.6Net Promoter Score
DatoEscritura exacta
CertificacionesISO 9001 Gestión de Calidad (2021), ISO 20000 Gestión de Servicios de TI (2025), ISO 27001 Seguridad de la Información (2026)
RespaldoRespaldados por Andersen Global, con presencia en más de 170 países
Sectores con experiencia implementadaMedios, banca y gobierno
SedeCentral en Córdoba, Argentina, con presencia global

Cifras por servicio

Cada una sirve solo en una pieza sobre esa oferta. Nunca cruces una cifra de un servicio a otro.

OfertaCifras habilitadas
AI Talent+150 talentos activos · +23k postulaciones · 40% perfiles IT
Agentic AI+20 industrias · +40% de eficiencia en velocidad de entrega
AI GovernanceOperación 24/7 global
PotentialAssessment AIDe 3–5 días a minutos por evaluación · ~USD 0,14 de costo estimado por evaluación · objetivo de ≥80% de informes aprobados en la primera entrega
Objetivos no son resultados

Todo lo marcado como objetivo está bajo medición. Nunca lo presentes como logrado.

Reglas de uso

  • Nunca redondees, extrapoles, combines, conviertas ni actualices una cifra. Se citan tal cual, con el signo más, la coma decimal y la tilde.
  • Nunca nombres a un cliente, su marca, ni atribuyas una cita a una persona o rol.
  • Nunca agregues un caso, logo wall o testimonio que el brief no pidió.

[DATO A CONFIRMAR]

Cuando la pieza necesita una cifra que no está acá. No la estimes.

[CLIENTE A CONFIRMAR]

Más una línea describiendo qué tipo de caso encaja ahí, para que un humano decida.

VISUAL

Color

Un canvas oscuro, un naranja que manda y muy poco más. Los valores se copian con un click y el contraste está calculado sobre el canvas real.

Canvas y superficies

Canvas base

Fondo de toda pieza. El punto de partida por defecto.

Superficie 01

Primer escalón de elevación: bandas y secciones internas.

Superficie 02

Segundo escalón: paneles, modales y zonas de foco.

Las tarjetas no usan un hex plano sino rgba(18, 18, 21, .75) con blur, para que el canvas se siga leyendo por detrás. La receta completa está en Layout y superficie.

Naranja de marca

Naranja Kinetic6.86:1 · Nunca en cuerpo

CTAs, eyebrows, chips de icono, destaques y glows.

Naranja hover8.57:1 · Nunca en cuerpo

Estado hover de botones y links de acción.

Naranja pressed5.65:1 · Nunca en cuerpo

Estado activo o presionado.

Gradiente de marca

Opcional, a 135°. Solo para superficies de acción: nunca detrás de texto.

Acentos secundarios

Magenta5.85:1 · Solo acento

Energía y contraste puntual. Nunca como color principal.

Lima eléctrico17.04:1 · Solo datos

Series de datos y diferenciación en gráficos.

  • Usalos con cuentagotas: una pieza puede no tener ninguno de los dos.
  • En un gráfico, primero naranja, después lima, después magenta.

Texto sobre oscuro

Sobre el canvas el texto es blanco con alpha, nunca un gris arbitrario.

Aa
Blanco 100%20.14:1 · Texto normal

Titulares y texto principal.

Aa
Blanco 72%10.37:1 · Texto normal

Cuerpo largo y descripciones.

Aa
Blanco 55%6.23:1 · Solo etiquetas ≥12px

Etiquetas secundarias, desde 12px.

Aa
Blanco 40%3.73:1 · Decorativo

Decorativo. Nunca para texto que el lector necesita.

Hairline

El borde de toda tarjeta, tabla y separador.

Superficies claras

Existen para documentos, impresos y secciones que necesitan respirar. Son la excepción declarada, no una alternativa libre.

Papel

Fondo claro aprobado.

Tinta18.09:1 · Texto normal

Texto sobre fondo claro.

Hairline claro

Separadores sobre fondo claro.

Disciplina del naranja

Hacé esto
RESULTADOS

Del riesgo a la ventaja

Cuerpo en blanco 72%, naranja reservado para el destaque y el botón.

Hablemos

El naranja aparece dos veces: el destaque y la acción.

Nunca esto
RESULTADOS

Del riesgo a la ventaja

Cuerpo entero en naranja, sobre un fondo naranja translúcido.

Hablemos

Naranja como color de cuerpo y texto sobre relleno naranja: nunca.

VISUAL

Tipografía

Poppins para display, Inter para todo lo demás. Los tamaños de abajo están renderizados con las fuentes reales del sistema.

Familias

Aa

Poppins

Display y titulares. Pesos 500 a 800. Tamaño grande, interlínea ajustada y tracking de −0.02 a −0.04em.

Aa

Inter

Cuerpo y UI. Pesos 400 a 700, interlínea 1.5 a 1.6. Nunca se usa para display.

Escala tipográfica

La estrategia decide

DisplayPoppins 700 · clamp(40px, 6vw, 72px) · 1.02 · −0.04em

Evolucionamos tu empresa

Título de secciónPoppins 600 · clamp(28px, 3.4vw, 40px) · 1.1 · −0.03em

Gobernar · AI Governance

Título de bloquePoppins 600 · 22px · 1.25 · −0.02em

Políticas, marcos de decisión, compliance y ética para una adopción responsable de la IA en toda la organización.

CuerpoInter 400 · 16px · 1.6 · blanco 72%

Nota al pie, epígrafe o etiqueta secundaria.

MenorInter 400 · 13px · 1.5 · blanco 55%

EL FRAMEWORK

EyebrowInter 600 · 12px · mayúsculas · 0.24em · naranja + guion degradado

Reglas y sustitución

  • Si la plataforma no tiene Poppins e Inter, sustituí por la geométrica sans más cercana para display y una grotesca neutra para cuerpo.
  • Declará en una línea qué fuentes usaste cuando sustituyas.
  • Los titulares se cortan donde el sentido lo pide, no donde cae la caja.
  • Nunca sustituyas en silencio por una serif ni por una condensada.
  • Nunca uses Poppins para textos largos ni Inter para el display.
  • Nunca centres un párrafo largo ni uses todo el titular en mayúsculas.
VISUAL

Layout y superficie

Radios, tarjetas, grilla y sombra. Es la parte que hace que dos piezas hechas por personas distintas se vean de la misma familia.

Radios

8pxInputs y campos
12pxChips de icono
16–18pxTarjetas y paneles
999pxPills y CTAs

Receta de tarjeta

Tarjeta estándar

Fondo translúcido, hairline de 1px y blur. La única sombra posible es un glow naranja contenido.

background: rgba(18, 18, 21, .75);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
backdrop-filter: blur(14px);
box-shadow: 0 18px 60px rgba(255, 102, 0, .08);

Grilla y espaciado

ElementoValorNota
ContenedorCentrado, con margen lateral fijo.
Aire entre seccionesNunca menos: el aire es parte de la identidad.
Grilla ambientalLíneas a rgba(255,255,255,.018) sobre el canvas.
Glow ambientalRadiales naranja al 18% máximo, siempre detrás del contenido.
Regla práctica

Si una composición se ve apretada, sacá contenido antes que reducir el aire.

Sombra: glow, no drop

Hacé esto

Glow naranja contenido: la luz sale del propio elemento.

Nunca esto

Sombra gris neutra: aplana la pieza y rompe el canvas oscuro.

SISTEMA

Componentes e iconos

Todo lo de abajo está renderizado con el CSS real del sistema. Lo que ves es lo que se produce.

Acciones

HablemosModelo AI-READYConocé el framework
VarianteUsoForma
PrimariaUna por vista. La acción que buscamos.Relleno naranja, radio 999px
FantasmaAcción alternativa en el mismo bloque.Hairline + texto blanco
EnlaceNavegación dentro del contenido.Texto + flecha, sin caja

Tarjetas, eyebrows y etiquetas

RECURSOS OFICIALES

Eyebrow

Guion degradado, mayúsculas, 0.24em de tracking.

Referencia vivaAcceso anticipado

Etiquetas

Pills de 999px sobre hairline. Nunca más de dos por tarjeta.

Chip de icono

Cuadrado redondeado de 12px, icono naranja, fondo al 12%.

Campo

Radio 8px, hairline, foco con anillo naranja al 35%.

Iconografía

compassshieldzaptargetuserschartlayerssparklessearchbookmessagegrid
  • 24×24, trazo de 1.8px, extremos y uniones redondeados, sin relleno.
  • Siempre en currentColor: el icono hereda el color del contexto.
  • Estilo Lucide o Feather. Si falta uno, usá el más cercano de esa familia.
  • Nunca emoji ni glifos unicode como iconos.
  • Nunca iconos con relleno sólido, degradados o dos colores.
VISUAL

Dirección de imagen

Bajá por esta lista y frená en la primera opción que sirva. La categoría IA tiene una imaginería por defecto que acá está prohibida.

Orden de preferencia

01

Fotografía real

Corporativa y arquitectónica de lugares que existen: fachadas, interiores industriales o retail, depósitos, pisos de operación, equipos trabajando en oficinas reales. Encuadre amplio y cinematográfico, grises neutros y negros profundos. El naranja aparece solo como acento de luz —arquitectónica, LED, hora dorada—, nunca como filtro sobre todo el cuadro.

02

Render técnico abstracto

Solo cuando ninguna foto sirve. Oscuro, mínimo y geométrico: superficies mate o cepilladas, líneas limpias, un único recorrido naranja conectando elementos, mucho espacio negativo. Silencioso, nunca cargado.

03

Composición tipográfica

Cuando ninguna de las anteriores agrega sentido. Poppins sobredimensionada sobre el canvas oscuro, un destaque naranja y aire generoso.

Personas e interfaces

  • Cuando aparecen personas son profesionales reales en entornos reales haciendo trabajo plausible.
  • Nunca posadas, nunca sonriendo a cámara, nunca señalando algo que no está ahí.
  • Las interfaces y los datos quedan de fondo: el borde de un panel creíble o un overlay sutil.
  • Toda imagen lleva alt text y todo gráfico lleva ejes con unidades.

Anti-patrones prohibidos

Cerebros de cualquier tipo, sobre todo con circuitos o mitad chip.Robots humanoides, caras androides, maniquíes cromados o manos robóticas.El dedo humano tocando el dedo del robot, en cualquier variante.Paletas azul y cian, circuitos azules, neones violeta, lluvia de código, globos wireframe.Mallas de nodos y líneas, grafos o nubes de partículas como decoración.Candados y escudos para seguridad, flechas para crecimiento, lamparitas para ideas.Piezas de ajedrez, apretones de mano, engranajes, cohetes.Escenas stock: el equipo riendo frente a una laptop, la sala vista a través del vidrio.Burbujas de chat con destellos, orbes brillantes, esferas o nubes sintientes.Interfaces inventadas, dashboards con métricas falsas, gráficos sin unidades, logos de terceros.

Tampoco: emoji, glifos como iconos, sombras grises, destellos de lente, biselados, glassmorphism más allá del blur de 12–16px, ni más de un destaque naranja por línea.

NO NEGOCIABLE

Accesibilidad

Estas no son recomendaciones. Una pieza que no las cumple vuelve a producción.

Reglas duras

  • Texto de cuerpo y UI: mínimo 4.5:1 contra su fondo real.
  • Display desde 24px y bold desde 19px: mínimo 3:1.
  • Sobre el canvas oscuro, blanco 100% y 72% son los únicos valores para cuerpo. 55% solo para etiquetas secundarias desde 12px. 40% es decorativo.
  • El naranja sobre el canvas sirve para display grande, eyebrows e iconos. Nunca para cuerpo, nunca sobre relleno naranja o degradado.
  • Nunca texto directamente sobre una foto sin un scrim sólido o al 80%.
  • En un post o slide, el texto sobre arte va a 24px mínimo al tamaño final, y la línea más importante se lee al 25% de zoom.
  • Nunca comuniques por color solo: acompañá con etiqueta, icono o posición.

Verificador de contraste

Probá cualquier par antes de mandarlo a producción. El cálculo es WCAG 2.1 sobre sRGB.

La estrategia decideTexto de cuerpo a 16px para verificar legibilidad real.
6.86:1Texto normal

Sirve para cuerpo, UI y display.

DESCARGAS

Recursos y archivos

Los archivos oficiales, la versión de estas reglas para pegarle a una IA y las plantillas.