Cofounder
www.cofounder.coThe reference for fusing a pixel-art world-building aesthetic with editorial chapter-based content — a 16-bit hero on a learning-guide body.
Design tokens
- display
- neoris, 'neoris Fallback', sans-serif
- body
- neoris, 'neoris Fallback', sans-serif
- mono
- 'IBM Plex Mono', 'IBM Plex Mono Fallback'
- monoPixel
- departureMono, 'departureMono Fallback'
Do / Don't
Reference it for
- Pixel-art world-building hero — fully illustrated 16-bit scene with embedded product (laptop, screen, etc.) as the centrepiece. Reads as crafted, not stock.
- Editorial chapter-based content structure — "Chapter 1 / 2 / 3 / 4" with "Read this chapter" CTAs, like a long-form course
- Three accent colours mapped to content chapters — amber for Start, green for Build, orange for Sell — colour as taxonomy
- Custom variable-axis font at seven optical weights (neoris at 400/410/430/440/460/500/530) — extreme typographic granularity
- Pixel-art monospace (departureMono) as a third typeface — bridges hero and body visually
- Serif italic wordmark — "Cofounder" set in italic serif, a strong contrast against the sans body
- 40-section page organised by content chapter rather than feature grid
- 39 keyframes for game-style component animations — task-row-in, notif-slide, wordsearch-stroke, build-carousel-slide — each component has its own motion vocabulary
Do not copy
- The bespoke neoris variable font licence
- The specific pixel-art hero illustration (custom-commissioned)
- The "Cofounder" italic-serif wordmark treatment (brand-coded)
- The "chapter 1 / chapter 2" learning-guide structure unless the client's product genuinely benefits from a course framing
- The departureMono pixel font — only works alongside a pixel-art aesthetic
- The chapter-colour mapping (amber/green/orange) — these are Cofounder's specific brand colours
Signature moves
pixel-art world-building hero on a learning-guide body
a fully-illustrated 16-bit scene with an embedded product (laptop/screen) is the hero centrepiece on near-white (#fbfbf8), reading as crafted not stock, fronting an editorial body.
editorial chapter-based content with colour-as-taxonomy
content is structured as numbered chapters (Chapter 1/2/3/4 with 'Read this chapter' CTAs) across a 40-section page, with three accent colours mapped to chapters (amber Start, green Build, orange Sell) so colour encodes taxonomy.
variable-axis sans plus pixel-mono with a 0.3px draughtsman radius
a custom variable-axis sans at seven optical weights (400-530) pairs with a pixel-art mono and a serif-italic wordmark, while a 0.3px radius (used 198 times) gives a near-sharp draughtsman feel.
Related references
Dropbox
flagshipSaas Product
The reference for a 700-million-user product brand at restraint: cream "coconut" backgrounds, one saturated blue CTA, real product UI rendered enormous, and a 13-section page that never raises its voice.
Form Nutrition
strongFitness
a UK supplements DTC that pairs a warm off-white editorial base with a single mustard-yellow accent and a terracotta brand block, a geometric-sans-plus-Silka heading system, big oversized logo graphics and a calm, recipe-and-ritual voice.
Liveblocks
strongData Infrastructure
a pure-black developer-infrastructure site where Suisse + JetBrains Mono on stark `#000` carry the engineering authority, a single magenta-glow card with handwritten annotations sells the human side of collaboration, and 58 Radix-UI keyframes power dropdown / sheet / popover motion that feels app-grade rather than marketing-page-grade.
Softstart
nicheHr Platform
The reference for B2B SaaS blog templates with AI-summarisation chips — softstart.app redirects to Workleap's blog article on onboarding software.