KOJ Design System · Brandbook público

01 · Paleta

Negro y amarillo con disciplina.

Dos colores hacen el trabajo pesado: negro estructural y amarillo #FEB503 como acento. Los grises apoyan la jerarquía de texto. Nada más entra al sistema sin una razón concreta.

Papel

#FFFFFF

Blanco

Fondo suave

#F7F5F0

Papel cálido

Texto sec.

#6B6B6B

Gris

Ancla

#FEB503

Amarillo KOJ

Estructura

#000000

Negro

La regla

90% neutros. 10% amarillo. Cero adornos que no ganen su lugar.

El amarillo es acento, no fondo. Aparece en CTAs, marcas, elementos de énfasis puntual y momentos editoriales. Cuando ocupa más del 15% del peso visual de una pantalla, algo se rompió.

02 · Tipografía

Serif para lo que importa. Sans para lo demás.

Georgia para titulares en italic, siempre con weight 400. Arial para body, tags y sistema. La tensión serif/sans es el sello editorial de KOJ.

Serif · Georgia italic

Ideas en producto

FamiliaGeorgia

EstiloItalic, 400

UsoTitulares, acentos

NuncaBold, cuerpo

Sans · Arial

Body, tags, sistema y componentes.

SECTION TAG · SPACED CAPS

FamiliaArial / Helvetica

Cuerpo15–17px

Tags11px + spaced caps

SistemaWeights 400-700

03 · Marcas

Una marca, tres apariciones.

La marca principal (logo.png) es el hexágono amarillo con negro. Para contextos de solo texto, el mark tipográfico ◼ KOJ CONSULTING hace el trabajo. Nunca deformar, nunca color distinto al sistema.

Full mark · Sobre negro

Full mark · Sobre amarillo

Full mark · Sobre papel

KOJ CONSULTING

Text mark · Amarillo

KOJ CONSULTING

Text mark · Negro

KOJ CONSULTING Data-Driven Decisions

Mark + Tagline

04 · Componentes

Piezas del sistema.

Lo mínimo que aparece en cada entregable KOJ. Botones, badges, chips, quote blocks. Cero framework: HTML + CSS a mano.

01 · Botones

CTAs y acciones.

Empezar → Ver más Cancelar

Primario negro con texto amarillo para la acción principal. Secundario amarillo con texto negro para segundo nivel. Ghost outline negro para tercero.

02 · Badges

Estados y etiquetas.

Vigente En revisión Nuevo

Amarillo para estados activos u operativos. Gris para estados neutros. Negro con texto amarillo para novedades o alertas de sistema.

03 · Chips / filtros

Selección editorial.

Guatemala LatAm Global Otro

Chips de filtro con borde neutro por defecto. La opción activa invierte a fondo negro con texto blanco. Sin colores adicionales por opción.

04 · Quote block

Manifesto editorial.

Diseñamos sitios que se sienten pensados. Nada por defecto.

Bloque de cita con Georgia italic, fondo suave y border-left amarillo. Uso para manifiestos, principios, quotes de cliente.

05 · Card

Contenedor editorial.

Vigente

CATEGORÍA

Título Georgia italic

Card base con placeholder de imagen, badge amarillo y body con meta + title. Uso para producto, propiedad, artículo, propuesta.

06 · Progress

Estado del proceso.

SPRINT 372%

Barra de progreso neutra con label spaced-caps. Uso en cotizaciones aprobadas, cargas de trabajo, métricas de proyecto.

07 · Alert

Mensaje del sistema.

!

Propuesta lista El link privado está activo. Vigente 30 días.

Alerta con icono circular amarillo, título Georgia italic y body Arial. Uso para confirmaciones, notificaciones, cambios de estado.

08 · Table

Datos con densidad.

Proyecto	Tipo	Estado	Inversión
HabitaRepublicano	Retainer anual	Vigente	$11,880
Cash FP	Producto IA	Live	$18,500
Psicometrikas	Assessment	Live	$14,200

Tabla editorial con header negro + amarillo, cuerpo blanco y celdas con serif italic para nombres. Uso en dashboards, propuestas comerciales, reportes de portfolio.

05 · Motion & interacciones

Movimiento con criterio.

Cero animaciones porque sí. Cada micro-interacción comunica algo: que hay algo que cargar, que un elemento es interactivo, que el sistema respondió. Timing: 200–400ms para hover, 800–1200ms para entradas grandes, cubic-bezier suave siempre.

01 · Cursor

Señal de escritura.

Ideas

El cursor parpadeando comunica "esto es hero, esto está vivo". 1s de intervalo. Uso en headings principales, chat, hero pages.

02 · Hover CTA

Elevación al tocar.

Botones se levantan 4px y proyectan sombra amarilla al hover. La flecha se desplaza 4px. 280ms cubic-bezier. Sutil pero premium.

03 · Fade-in al scroll

Aparición escalonada.

Elementos se desvanecen hacia arriba con 100ms de stagger entre ellos. Trigger por IntersectionObserver. 500ms cada uno.

04 · Counter

Números que cuentan.

240hrs

Contadores animados en Georgia italic. Uso en stats grandes, métricas de portfolio, deltas de crecimiento.

05 · Chip toggle

Selección editorial.

Chips que invierten a negro/amarillo al seleccionar. Transiciones de border-color y background. Uso en filtros y selectores.

06 · Autoplay dots

Pulso de sistema.

Loop autopay con dots que hacen scale + opacity con stagger. Uso en loading states, hero animations, section transitions.

06 · Voz y tono

Profesional pero cercano. Directo. Sin oversell.

La voz de KOJ. Cada texto que sale a nombre de la firma sigue estas reglas. Sin excepciones.

Sí · Cómo suena KOJ

Frases cortas. Sin rodeos.
Confianza tranquila. No prometemos lo que no cumplimos.
Números concretos siempre que sea posible.
Rangos honestos por encima de cifras inventadas.
Ejemplos reales. Casos que ya pasaron.
Se firma como KOJ Consulting, no como persona.

No · Cómo NO suena KOJ

Cliches motivacionales sin evidencia.
Porcentajes inventados sin baseline.
Adjetivos superlativos (mejor, único, revolucionario).
Jerga corporativa vacía.
Firmas personales tipo «un consultor de KOJ».
Emojis, exclamaciones, tono publicitario.

Regla de firma

Se firma como KOJ Consulting. La firma.

Nunca se firma como «Cristian» ni como «un consultor KOJ». Cada propuesta, cada landing, cada doc que sale a cliente está a nombre de la firma completa. La persona atrás hace el trabajo; la firma lo respalda.

07 · IA en el proceso

La IA acelera. No decide.

La IA no reemplaza el criterio de diseño. Lo empuja más rápido. Iteramos más variantes en el mismo tiempo, validamos más hipótesis, computamos más datos. Pero la decisión final siempre es humana. Estos son los cuatro puntos donde la IA vive en la producción de KOJ.

01

Iteración de copy editorial.

Cada tag, cada headline, cada párrafo pasa por múltiples iteraciones LLM antes de aterrizar. Voz consistente, sin adjetivos vacíos, sin cliches. El criterio KOJ (frases cortas, sin oversell) se codifica como sistema y la IA respeta ese marco.

"Somos una empresa innovadora que revoluciona el diseño web con soluciones creativas" "Diseñamos sitios que se sienten pensados. Cero templates."

02

Contraste WCAG computado.

Cada combinación de color en un design system se corre por la fórmula sRGB de WCAG 2.1. Números reales, no estimaciones. Si un combo falla AA, se documenta y se sugiere una alternativa antes de que llegue a producción.

#000 / #FEB50319.3:1

#FFF / #093F2C11.9:1

#FFF / #FEB5032.5:1

03

Exploración cromática paralela.

Antes de comprometer un ancla de color, la IA ayuda a generar variantes coherentes con el brief. Verde vs navy, palette cálida vs fría, monocromática vs triádica. Cada opción con sus mockups, sus WCAG y sus casos aplicados. El cliente decide viendo, no imaginando.

VERDE

NAVY

TERRA

VIOLETA

04

Estructura de contenido.

Árboles de decisión, arquitecturas de información, jerarquías de sección. La IA propone estructuras, propone tabs de nav, propone flujos de propuesta. Nosotros elegimos, curamos y aterrizamos con el criterio del brief.

¿Es una pieza de identidad?

Sí → Sistema Estricto (B/N)

Producto operativo → Mono expandida

Data viz → Split-comp

El principio

La IA ejecuta. El humano decide. La firma responde.

Cada archivo que sale con la marca KOJ pasó por criterio humano. La IA acelera la producción, valida datos y expande el espacio de exploración. Pero la responsabilidad de lo que se entrega es siempre de la firma. Sin auto-publicación. Sin templates. Sin decisiones de máquina que llegan al cliente sin filtro.

08 · Grid & Espaciado

Números que definen el ritmo.

Todo entregable KOJ respira el mismo compas: containers de 1100px, escala de espaciado de 12 tokens, y tres ritmos de sección. Cuando el sistema se rompe, se rompe con intención, no por descuido.

Container

Ancho máximo 1100px, padding lateral 40px.

Todo contenido vive dentro de un container de 1100px de ancho máximo. En mobile el padding baja a 24px. El resultado: líneas de lectura entre 60 y 80 caracteres, que es donde el ojo prefiere estar.

Contenido dentro del container max-width: 1100px · padding: 0 40px · margin: 0 auto

Ritmo de sección

Tres tamaños: 80, 100, 120.

Cada sección tiene un padding vertical dependiendo de su peso narrativo. Un hero respira más que un bloque intermedio. Un cierre respira más que una lista de features.

80px

Compacto

Bloques densos, tablas, componentes técnicos.

100px

Estándar

Secciones editoriales, marcas, tipografía.

120px

Editorial

Hero, cierre, secciones críticas con jerarquía alta.

Escala de espaciado

12 tokens del 4 al 120.

Todos los gaps, margins y paddings del sistema salen de esta escala. Nada de valores arbitrarios entre medias. Si necesita ser 30, usa 32.

--sp-1 · 4

Interiores de chips, badges

--sp-2 · 8

Icon-text gap, tags pequeños

--sp-3 · 12

Line breaks internos, tight lists

--sp-4 · 16

Padding estándar de card interior

--sp-5 · 20

Gap de grids, gap de componentes

--sp-6 · 24

Padding lateral mobile

--sp-7 · 32

Padding grande de card, separación de bloques

--sp-8 · 40

Padding lateral desktop, gap de columnas

--sp-9 · 60

Separación de intros a contenido

--sp-10 · 80

Padding-y de sección compacta

--sp-11 · 100

Padding-y de sección estándar

--sp-12 · 120

Padding-y de hero, editorial

Patrones de columna

Cuatro grids que cubren el 95% de los casos.

Todo layout de KOJ nace de uno de estos cuatro patrones. Si el diseño necesita algo distinto, se documenta como excepción en el brief del proyecto.

2 col · 60/40

Editorial split

Texto principal a la izquierda, apoyo visual a la derecha. El hero del Studio.

2 col · 50/50

Paridad

Do & Don't, before & after, comparativas.

3 col

Servicios / features

Listas de tres. En mobile colapsan a 1 columna.

4-5 col

Paletas, chips

Grids denso para swatches y elementos pequeños.

La regla del ritmo

Si algo no viene de la escala, viene de una decisión.

Un valor fuera de la escala (por ejemplo, 37px) tiene que estar documentado como excepción. El sistema perdona una excepción justificada, pero no una serie de excepciones que se acumulan hasta romper el ritmo. Cuando llega un tercer valor fuera de escala, algo está mal en el brief, no en el sistema.

09 · Aplicaciones

El sistema, en producción.

Este brandbook no vive en teoría. Estas son las piezas actuales de KOJ Consulting que aplican todo el sistema: paleta, tipografía, marcas, grid, componentes, motion y voz. Cada una es una prueba de que las reglas anteriores producen algo coherente.

studioKOJ · DISEÑO

Landing editorial

KOJ Studio.

Home del brazo de diseño. Two-column hero, reel autoplay con 4 fases, portfolio con thumbnails custom, y CTA conversacional. Todo el sistema aplicado en producción.

Ver en vivo

KOJ

data-driven decisions

Landing corporativo

KOJ Consulting.

La cara pública de la firma. Amarillo estructural, Georgia italic para lo que importa, servicios curados y un formulario que llega directo al buzón de Cristian.

Ver en vivo

habitare-anual-2026 VIGENTE

habitarepublicano-2026 ENVIADA

elex-clickup-2026 GANADA

Producto interno

Portal de Propuestas.

Sistema con tokens: cada cliente recibe un link privado tipo /p/TOKEN. Vigencia automática, badges de estado, y una barra superior que enmarca cada propuesta con la marca KOJ.

Ver el portal

Design System

PaletaTypeMarcasGridMotionIA

Meta · Este documento

KOJ Design System.

Este brandbook es su propia aplicación. Cover editorial, secciones alternando paper/dark, componentes vivos, y demos de motion que ejecutan el sistema mientras lo explican.

Volver al inicio

Cliente · Habitare

Sistema de Color.

Brandbook cromático completo para Habitare. Dual system (Estricto + Expandido), 5 paletas contextuales, WCAG computado, tokens y árbol de decisión. La misma estructura que este doc, aplicada a otra marca.

Sistema de Diseño Navy.

Tipografía Fraunces + Inter, paleta navy con acento cálido, 13 componentes mockeados y reglas de aplicación. Prueba de que el sistema KOJ produce entregables sin importar el brief de marca.

Ver el doc

Lo que estas piezas prueban

Un sistema que no se ve aplicado, no es sistema.

Cada uno de estos entregables sigue las mismas 10 secciones anteriores. La consistencia es la evidencia. Cuando un cliente potencial navega el Studio, la landing, el portal y este brandbook seguido, entiende que KOJ no improvisa cada proyecto: opera desde un sistema.

10 · Tokens

El sistema en código.

Todo lo anterior se resuelve en un solo bloque de variables CSS. Copia esto en cualquier proyecto que quiera hablar el idioma KOJ. Colores, tipografía, escala de espaciado, radios y motion. Sin framework. Sin dependencias.

Estas variables son la fuente de verdad. Cuando cambian aquí, cambia todo el sistema. Nunca hardcodear un color o un espaciado directamente en un componente.

koj-tokens.css · brandbook v1.0

/* ═══════════════════════════════════════════════════
   KOJ Design System · Tokens
   Brandbook v1.0 · Guatemala · MMXXVI
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Colores ── */
  --koj-yellow:        #FEB503;  /* acento principal */
  --koj-yellow-soft:   #FFF4D1;  /* fondo suave */
  --koj-black:         #000000;  /* estructural */
  --koj-dark:          #0A0A0A;  /* fondos dark */
  --koj-dark-2:        #141414;
  --koj-dark-3:        #1F1F1F;
  --koj-ink:           #2D2D2D;  /* body texto */
  --koj-gray:          #6B6B6B;
  --koj-gray-2:        #999999;
  --koj-gray-line:     #E0E0E0;
  --koj-paper:         #F7F5F0;  /* editorial */
  --koj-white:         #FFFFFF;

  /* ── Tipografia ── */
  --koj-font-serif:    Georgia, 'Times New Roman', serif;
  --koj-font-sans:     Arial, 'Helvetica Neue', sans-serif;
  --koj-font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* ── Escalas tipograficas ── */
  --koj-h1:            clamp(48px, 8vw, 92px);
  --koj-h2:            clamp(36px, 5vw, 58px);
  --koj-h3:            28px;
  --koj-body:          16px;
  --koj-small:         13px;
  --koj-tag:           11px;

  /* ── Espaciado ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  60px;
  --sp-10: 80px;
  --sp-11: 100px;
  --sp-12: 120px;

  /* ── Layout ── */
  --koj-container:     1100px;
  --koj-pad-desktop:   40px;
  --koj-pad-mobile:    24px;

  /* ── Radios ── */
  --r-sm:              3px;
  --r-md:              8px;
  --r-lg:              12px;

  /* ── Motion ── */
  --dur-fast:          200ms;
  --dur-med:           400ms;
  --dur-slow:          800ms;
  --ease-out:          cubic-bezier(.2, .7, .3, 1);
  --ease-in-out:       cubic-bezier(.65, .05, .36, 1);

  /* ── Sombras ── */
  --sh-sm:  0 2px 8px rgba(0,0,0,.04);
  --sh-md:  0 8px 24px rgba(0,0,0,.06);
  --sh-lg:  0 20px 40px rgba(0,0,0,.08);
}

/* ── Uso tipico ── */
.koj-h2 {
  font-family: var(--koj-font-serif);
  font-style:  italic;
  font-weight: 400;
  font-size:   var(--koj-h2);
  color:       var(--koj-black);
}
.koj-tag {
  font-family:    var(--koj-font-sans);
  font-size:      var(--koj-tag);
  letter-spacing: .26em;
  text-transform: uppercase;
  color:          var(--koj-yellow);
  font-weight:    700;
}
.koj-section {
  padding:    var(--sp-12) var(--koj-pad-desktop);
  max-width:  var(--koj-container);
  margin:     0 auto;
}

Como se usa

Un solo import. Todo el sistema disponible.

Pega este bloque en el head de cualquier proyecto KOJ. Los componentes se construyen sobre estas variables. Cuando el proyecto necesita salirse del sistema (un color especifico de cliente, una tipografía distinta), se documenta como override, no como reemplazo. El core siempre queda.