Yarn: Product Design, Visual Identity, and Design System.
Role
Product Designer
Industry
Digital Publishing
Timeline
Nov 2025 - Ongoing
Introduction
Yarn Reader is a web and mobile platform for serialized fiction.
As the sole designer on the project, I led branding and design systems end-to-end, shipping to TestFlight alongside a developer.
The system uses Figma variables aligned to Tailwind CSS and a primitive/semantic token structure, making it naturally interpretable by LLMs.
Strategy + Approach
Starting with the branding, I turned the abstract concepts into reusable, scalable systems. I approached this by turning brand assets and moodboard into a cohesive design language.
Branding + Moodboard
This logomark is rooted in the idea of stories that connect us. It’s geometric, yet playful to capture how Yarn brings structure to imagination without taking away the joy of discovery.
The lines echo the flow of threaded fibers and the turning of pages. It invites people to look closer and find their own meaning; just like a good story does.
Translating Visual Identity into UI
Visual exploration, extending branding into a cohesive design language.
Design System
Colour, Typography, and Spacing system using primitives/semantic variables to be extended and systematized for the rest of the screens.
Exploring Dark Mode with Radix UI
Since Tailwind CSS doesn’t have guideline on creating a custom dark mode palette, I used Radix UI as a reference for how to create an accessible dark mode palette and curated from scratch a colour scale compatible for Tailwind CSS.
Next Steps ‧⊹ ༘⋆
Rapid prototyping with Cursor.
QA for TestFlight and Web staging app.
