Fraunces variable + IBM Plex
Fraunces (Undercase Type) as display — with opsz, wght, SOFT, and WONK axes active. It's what lets a headline and a microscopic eyebrow feel part of the same organism. IBM Plex Mono for tabular metadata.
How this site
was built.
kohrco.com is a static site — no framework. Every decision — variable typography, navy/mint/cream palette, animations handwritten on Canvas and SVG, performance verified by Lighthouse — was made toward a single goal: the site should feel made, not assembled.
§ I
Philosophy · No frameworks
React, Vue, Svelte and their relatives are excellent tools for complex applications. A ten-section editorial site is not a complex application.
Working in plain HTML/CSS/JS imposes useful discipline: every animation has to earn its bytes, every component is designed with accessibility as a starting point (not as retrofit), and the page loads instantly because there's no runtime to hydrate.
The visible consequence is speed. The invisible one is that the site ages well — it doesn't depend on framework versions that change every 18 months.
§ II
Stack
Navy + mint + cream
Three dominant colors, no more. #061c2d
as primary ink, #75dd84 as intelligent
accent, #e6ebe7 as editorial cream.
Scarcity forces color to carry meaning, not
decoration.
Lenis + Canvas + SVG + WAAPI
Lenis for premium smooth scroll on desktop (touch keeps native
inertia). Canvas 2D + RAF for the hero particles moving from
chaos to graph. The §II "How a territory is read" scrollytelling
is a 3D isometric stack of 4 SVG layers (cadastral, environmental,
economic, public-health) using CSS
transform-style: preserve-3d. View Transitions API
for cross-page crossfades. WAAPI drives the hero choreography
and the letter-by-letter reveals.
WCAG AA · 100/100
Skip link, visible focus, aria-current, role/aria-modal
on cmdk, aria-live announcements in demos,
inert on hidden menus, verified contrast,
prefers-reduced-motion respected in every
animation — every effect has a static fallback.
Cloudflare Pages
Static build generated by a simple Node script. OG/Twitter
cards are rasterized with resvg-js loading local TTFs (Fraunces
+ IBM Plex) so the social previews reproduce what you see on
the site. Served from Cloudflare's global network with HTTP/3
+ Brotli + DNS on Cloudflare. _headers controls
cache during iteration.
JSON-LD + llms.txt
Schema.org Organization, FAQPage, Article, Product.
Reciprocal hreflang for ES/EN. llms.txt
with a textual site map optimized for LLMs. sitemap.xml
generated automatically.
§ III
Decisions
The logo is a wordmark with a mark, not an emblem.
"Kohr" rendered as paths (not font), with a mint diagonal slash embedded across the K — the slash works as both editorial bar and brand accent. The SVG ships with a transparent background to sit cleanly on the navy site, and rasterizes down to PNG and favicon while keeping its proportions. No standalone mark, no watermark: the identity is built into how the name is written — the slash is the signature.
No fabricated testimonials.
Most consultancy sites have a "what our clients say" section with vague phrases attributed to people who may or may not exist. We decided it's more honest to skip testimonials than to invent social proof. Cases are real, or they're documented patterns.
Truly bilingual.
The English version is not Google Translate. Every sentence was rewritten for an English-speaking audience — the idioms differ, the rhetorical beats differ. What stays constant is the editorial position, not the syntax.
Sereno demonstrates, not illustrates.
Instead of a decorative product screenshot, the site embeds a live interactive mockup — with simulated data, working filters, hover ripple, and a Map / Timeline / Dashboard view switcher. The visitor interacts with the thesis, doesn't just read it.
The scrollytelling is the argument.
§II «How a territory is read» builds layer by layer as you scroll — cadastral, environmental, economic, public-health. Not decoration: each layer names what's being read and why it matters. Visitors leave understanding what we do, not what we claim to do.
§ IV
Performance
100
Accessibility
Lighthouse · ES + EN
100
Best Practices
HTTPS · CSP · CORS
100/96
SEO
desktop / mobile · Schema · hreflang
97/94
Performance
desktop / mobile · LCP 1.2s / 2.8s · CLS 0
Measured with Chrome Lighthouse v12 against the public production URL.
Heavy scripts load post-window.load via
requestIdleCallback (mobile TBT dropped from 1.5s to 70ms),
every JS asset is minified with terser, and the LCP logo uses
fetchpriority=high. To audit live: npx
lighthouse https://kohrco.com --view.
§ V
Credits
Design + development
Aquiles Cohen
KOHR · Santa Marta, Colombia
KOHR wordmark + palette
Daniel Páez
Graphic designer
Typography
Fraunces · IBM Plex
Undercase Type · IBM
Hosting
Cloudflare Pages
DNS + global CDN
§ VI
Keyboard shortcuts
Press ⌘ K on any page to open the command palette. Instant navigation without touching the mouse — arrows to move, Enter to activate.
§ VII
Want us to build something like this?
If you're interested in commissioning KOHR for a digital editorial piece of this caliber — or you just want to talk shop — drop us a line.