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.
Canvas + SVG + WAAPI
The hero uses Canvas 2D with RAF for 180 particles moving from chaos to graph as you scroll. The §V scrollytelling uses SVG with CSS transitions synced via IntersectionObserver. Web Animations API for marker bounce easing.
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. Served from Cloudflare's global network with HTTP/3, Brotli, one-year immutable cache on versioned assets, and a minimal Service Worker for basic offline.
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, not a symbol.
The «Kohr» signature in Fraunces. A vertical mint bar before the wordmark suggests an editorial divider. There's no standalone mark, no watermark. The brand is built into how the name is written — not in a generic image that could belong to anyone.
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
SEO
Meta · Schema · hreflang
99–100
Performance
LCP < 1.8s · CLS 0
Verified with Chrome Lighthouse on desktop and mobile. To
audit live: npx lighthouse https://kohrco.com --view.
§ V
Credits
Design + creative direction
Aquiles Cohen
KOHR · Santa Marta, Colombia
Development
Aquiles Cohen
in collaboration with Claude (Anthropic)
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.