The 30-second version
I already had a wordmark. Big Caslon, stacked, indented. Sitting in a folder, used nowhere. This case study is about pulling it out and giving it the system it always needed — motion states, an initial mark, a sonic signature, a place across the brand.
Problem
A wordmark in a folder is not a brand.
My name set in Big Caslon, stacked on two lines with the second indented. A confident editorial mark that had been sitting unused while the site rendered my name as plain text in the header. The mark existed. The system around it didn’t.
What I wanted: the wordmark in the header. Four motion states so the mark behaves, not just sits. A reduced initial mark for the favicon and small contexts. One sonic signature. Color and type tokens that adapt to light and dark.
Approach
Keep the wordmark. Swap Big Caslon for Fraunces — same century, same contrast, but variable and web-native. Earn the rest with motion and restraint.
The four states
One mark. Four jobs.
Idle
The trailing period breathes on a 2.4s cycle. Proof of life.
Hover
The two lines part briefly, then settle. A small acknowledgement.
Load
A thin underline sweeps in, then out. Direction over decoration.
Transition
Each line lifts and crossfades on page change. Anastasiia first.
At scale
16 pixels to 72. Same mark.
Fraunces ships with an optical sizing axis. Serif details thicken at small sizes and refine at large ones. The mark holds at every scale.
The system
A mark is the first piece, not the whole brand.
Color · adapts to theme
Background
var(--bg)
Surface
var(--surface)
Text
var(--text)
Accent
var(--accent)
Type
Fraunces
Wordmark
Syne
Display headings
Inter
Body
Motion · click to replay
Sonic identity
Identity in 2026 has a sound.
Root and fifth. 220 Hz and 330 Hz. 420 ms. Synthesized live in the browser — no audio file.
Plays on key moments — page load completion, successful form submission. Subtle enough to live with. Distinctive enough to remember.
Applied
The mark in the wild.
Favicon · initial mark
Brand & Experience Design
NYC
Page loader