kohrco.com es un sitio estático, sin framework. Cada decisión — tipografía variable, paleta navy/mint/cream, animaciones escritas a mano sobre Canvas y SVG, performance verificada con Lighthouse — fue tomada con un objetivo: que el sitio se sienta hecho, no ensamblado.
React, Vue, Svelte y compañía son herramientas excelentes para aplicaciones complejas. Un sitio editorial de 10 secciones no es una aplicación compleja.
Trabajar en HTML/CSS/JS plano impone una disciplina útil: cada animación tiene que valer su peso en bytes, cada componente se diseña con accesibilidad como punto de partida (no como retrofit), y la página carga al instante porque no hay un runtime que hidratar.
La consecuencia visible es velocidad. La consecuencia invisible es que el sitio envejece bien — no depende de versiones de framework que cambian cada 18 meses.
Fraunces (Undercase Type) como display — con ejes opsz, wght, SOFT y WONK activos. Es lo que nos permite que un titular y un eyebrow microscópico se sientan parte del mismo organismo. IBM Plex Mono para metadatos tabulares.
Tres colores dominantes, no más. #061c2d
como tinta principal, #75dd84 como acento
inteligente, #e6ebe7 como crema editorial.
La escasez forza a usar el color como significado, no
como decoración.
Lenis para scroll suave premium en desktop (touch usa scroll
nativo). Canvas 2D + RAF para las partículas del hero que
transitan del caos al grafo. La scrollytelling §II «Cómo se
lee un territorio» es un stack isométrico 3D de 4 SVG capas
(catastral, ambiental, económica, sanitaria) con CSS
transform-style: preserve-3d. View Transitions
API para crossfades entre páginas. WAAPI para coreografía
del hero y para los reveals letra a letra.
Skip link, focus visible, aria-current, role/aria-modal en
cmdk, aria-live para anuncios dinámicos en demos,
inert en menús ocultos, contraste verificado,
prefers-reduced-motion respetado en TODAS las
animaciones — fallback estático para cada efecto.
Build estático generado por un script Node simple. Las OG/Twitter
cards se rasterizan con resvg-js cargando TTFs locales (Fraunces +
IBM Plex) para que el render reproduzca lo que se ve en el sitio.
Servido desde la red global de Cloudflare con HTTP/3 + Brotli +
DNS en Cloudflare. _headers controla cache durante
iteración.
Schema.org Organization, FAQPage, Article, Product.
hreflang recíproco para ES/EN. llms.txt con
mapa textual del sitio optimizado para LLMs. sitemap.xml
generado automáticamente.
La firma «Kohr» en paths (no fuente), con un slash diagonal mint embebido sobre la K — el slash funciona como la barra editorial y como acento de marca. El SVG vive con fondo transparente para sentarse limpio sobre el navy del sitio, y se rasteriza a PNG y favicon manteniendo proporciones. No hay isotipo aislado ni marca de agua: la identidad se construye en cómo se escribe el nombre — el slash es la firma.
La mayoría de sitios consultores tienen una sección de «lo que dicen nuestros clientes» con frases vagas atribuidas a personas que podrían existir. Nosotros decidimos que es más honesto no incluir testimonios que inventar fricción social. Los casos son reales o son patrones documentados.
La versión en inglés no es Google Translate. Cada frase fue reescrita para una audiencia anglófona — los giros idiomáticos son distintos, los matices argumentales son distintos. Lo que permanece es la posición editorial, no la sintaxis.
En vez de mostrar un screenshot decorativo del producto, el sitio embebe un mockup interactivo en vivo — con datos simulados, filtros funcionales, hover ripple, y un view switcher Mapa/Timeline/Dashboard. El visitante interactúa con la tesis, no la lee.
§II «Cómo se lee un territorio» se construye capa por capa al scrollear — catastral, ambiental, económica, sanitaria. No es decoración: cada capa enuncia qué se lee y por qué importa. El visitante sale entendiendo qué hacemos, no qué decimos hacer.
Métricas verificadas con Chrome Lighthouse v12 sobre la URL
pública en producción. Scripts pesados se cargan post-window.load
vía requestIdleCallback (TBT mobile pasó de 1.5s a 70ms),
todos los assets JS se minifican con terser, y el logo LCP usa
fetchpriority=high. Para auditar live: npx
lighthouse https://kohrco.com --view.
Aquiles Cohen
KOHR · Santa Marta, Colombia
Daniel Páez
Diseñador gráfico
Fraunces · IBM Plex
Undercase Type · IBM
Cloudflare Pages
DNS + CDN global
Presiona ⌘ K en cualquier página para abrir la paleta de comandos. Navegación instantánea sin tocar el mouse — flechas para moverte, Enter para activar.
Si te interesa contratar a KOHR para diseñar una pieza editorial digital con este nivel de cuidado — o si simplemente quieres hablar del oficio —, escríbenos.
