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.
El hero usa Canvas 2D con RAF para 180 partículas que transitan del caos al grafo según el scroll. La scrollytelling §V usa SVG con transiciones CSS sincronizadas vía IntersectionObserver. Web Animations API para bounces de markers.
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. Servido desde la red global de Cloudflare con HTTP/3, Brotli, cache de inmutabilidad de un año para assets versionados, y un Service Worker mínimo para offline básico.
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 Fraunces. Una barra mint vertical antes del wordmark sugiere divisor editorial. No hay isotipo aislado, no hay marca de agua. La marca se construye en cómo se escribe el nombre — no en una imagen genérica que podría ser de cualquiera.
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.
Verificado con Chrome Lighthouse en desktop y móvil. Para
auditar live: npx lighthouse https://kohrco.com --view.
Aquiles Cohen
KOHR · Santa Marta, Colombia
Aquiles Cohen
en colaboración con Claude (Anthropic)
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.
