Klok 

Klok is a landing page for a deliberately narrow audience: freelance designers and small studios who bill by the hour. The whole page is organized around one promise — track billable hours without breaking your flow, then bill them in a click.

A narrow audience makes every decision sharper, from the copy to the mockup to the pricing tiers, and that focus is the point of the piece.

When your audience is designers, the page itself has to look designed — there's nowhere to hide. It needed real craft: a disciplined type scale, consistent spacing rhythm, and a clear visual hierarchy that always points to the primary action.

It also had to be fast and razor-sharp on any display, which ruled out the usual approach of dropping in a screenshot for the hero product mockup.

A single reserved violet accent is used only for CTAs and emphasis against a warm off-white and near-black ink, so visitors always know where the primary action is. The layout leans on generous whitespace, a 4/8px spacing rhythm, soft layered shadows, and a Plus Jakarta Sans / Inter type pairing.

The hero product mockup is built entirely in HTML and CSS rather than an image — so it stays sharp at any resolution, adds zero image payload, and sidesteps licensing entirely. Each section follows the same headline → benefit → proof → action rhythm.

The result is a fully responsive, accessible, conversion-focused landing page that demonstrates front-end fundamentals and design-systems thinking — every brand, quote, and statistic invented, with licensing documented in CREDITS.

A later polish pass took it beyond a single page: login and sign-up flows with real validation, loading, and success states, a self-running animated product tour built in pure HTML, CSS, and JS instead of a video asset, and proper privacy and terms pages — the connective tissue that makes a landing page feel like a product.

It's the kind of page that proves a point: restraint, hierarchy, and a single well-used accent often beat decoration.

Next.js + React + TypeScript with a tight, hand-built design system — reserved accent, fixed spacing scale, and a constrained type ramp — rather than a UI kit.

The zero-weight CSS hero mockup is the signature technical choice: a believable product UI rendered in markup, keeping the page light and crisp everywhere.