Skip to content
Index / all work

Specimen Edition

A type-specimen portfolio built entirely from one variable typeface.

Client
Ultra Sites — in-house
Sector
Studio portfolio
Year
2026
Reference
No. 05

Scope

  • Type-specimen design
  • Variable-font motion
  • Next.js build
  • Design tokens

Stack

Ref 05 · interface preview

Overview

The fifth edition is a type specimen that happens to be a portfolio. Deep indigo fields, off-white type, lavender body copy, a periwinkle accent and one gold spark — flat poster colour, hairline rules, and Mona Sans's own weight and width axes doing all the animation work.

Self-hosted Mona Sans variable (weight + width) under the SIL Open Font License drives every transition: headlines stretch and thicken on scroll instead of relying on a motion library to fake it.

The challenge

Building a whole design language out of a single variable typeface — no illustration, no photography, no second family — that still feels like a distinct edition beside the others.

The approach

  1. 01

    Variable-axis motion as the core idiom: weight and width interpolate on scroll and hover, so the typeface itself is the interaction layer.

  2. 02

    A flat poster palette and hairline rules keep everything on one visual plane, letting the type carry all the hierarchy.

  3. 03

    Same section architecture and content as the suite, self-hosted fonts via Fontsource for zero external requests.

Outcomes

1

variable typeface, two live axes

SIL OFL

self-hosted, no external font calls

5th

edition, one shared codebase family

Next case · Ref 06

Coffee Shop