A colophon is a site's fine print. Ours is the part we're proudest of.
Credits
TypefaceABC Diatype & ABC Diatype Mono, by DinamoBuilt withAstro 7.3.8, hand-written HTML/CSS/JS, WebGLRenderedOnce, at build. Every page is a file. No CMS, no database.Depends onSeven packages. Three reach the browser: Lenis, UnicornStudio, Vercel's analytics.MotionLenis smooth scroll, UnicornStudio, custom canvasServed fromVercelMade inLos Angeles, CaliforniaSetOctober 17, 2026 · a565d76
System
Eleven grounds, five curves, seven durations, one typeface. Every value below is read from the stylesheet that ships, at build time, by this page.
Color
Each page makes one decision: its ground. The ink, the nav and the scrollbar follow from it by rule. The highlight is the one other thing a page picks for itself. Fourteen pages, one function, run fourteen times.
Fourteen pages, eleven grounds. Four of them are the same near-black. Ten sit stacked at the dark end, and the three light pages plus the white project template are the light end.
The green is the default rather than the rule. It holds the homepage and the 404, and yields wherever a page has a voice of its own.
Motion
The dot plots real elapsed time across the bottom against eased progress up the side, so it traces the curve at the speed the curve actually runs. The square travels on the same clock.
Curves
Durations
All seven, fired together, so the intervals read against each other.
Under prefers-reduced-motion none of this runs. The glyph holds one frame, the curves show their end state, and the reveals arrive at once.
Type
Every word on cognak.com is set in ABC Diatype, a grotesque drawn by Dinamo in Basel & Berlin, chosen for the way it stays neutral until you look closely, then reveals a little warmth in the curves. Code and figures fall back to ABC Diatype Mono.
The faces are self-hosted as woff2 (Regular, Medium, Bold, and the Mono), 190 KB in all, so nothing about your visit is handed to a font CDN.
- 400 Regular 48 KBSet by a person
- 500 Medium 57 KBChecked by eye
- 700 Bold 56 KBMade by hand
- 400 Mono 29 KBcubic-bezier(0.4, 0, 0.2, 1)
One OpenType feature is asked for by name: tabular figures on the project count in the Home and Projects headlines, so the number holds its width while it ticks up. Everything else is the face as Dinamo drew it. No stylistic sets, no alternates.
Every page headline is the same size: 62px on a wide screen, down to 27px on a phone. Project titles are the one exception, a step larger.
MediumBuilt by people
Everything under 18px uses ten named sizes. The number under each is how many times the source reaches for it.
Voice
The rules the copy on this site is written against.
- One paragraph. Name the work, list the range in a short series, stop.
- Scale is implied by what's listed, never asserted with adjectives.
- No sensory image standing in for a claim. No closing thesis statement.
- When in doubt, match the shortest entry on the site, not the longest.
- Nothing romantic, abstract, or sales-inflected. Declarative, or cut it.
Outside the system
What the tokens deliberately do not reach.
- Homepage groundA WebGL field, not a color token.
- Character sweepPer-letter timing, authored against the text it runs on.
- Scroll choreographyPage-specific. Shares the easings, nothing else.
- Living backgroundsThe glyph anatomy here, the baseline grid on /privacy-policy.
- Project hero videoCut per project. A convention, not a component.
No page builders. No templates. Built by hand at COGNAK. If you care about this sort of thing, so do we: hello@cognak.com.