Yarn: Product Design, Visual Identity, and Design System.
Role
Product Designer
Industry
Digital Publishing
Timeline
Nov 2025 - Ongoing
Introducing Yarn
Yarn was designed out of a specific frustration: digital reading platforms have become increasingly minimal to the point of feeling sterile. The expressive interfaces and interactions that once made these spaces feel inviting were gradually replaced by cleaner but colder designs.
Outcome:
Prioritized community for fiction readers and writers.
Made publishing approachable.
Designed an app that feels good to use.
Strategy + Approach
As the sole designer on the project, I led branding and design systems end-to-end, shipping to TestFlight alongside a developer.
Key design solutions:
Designed the look and feel of the brand.
Turned brand assets and moodboard into a cohesive design language.
Turned abstract concepts into reusable, scalable systems.
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. The system uses Figma variables aligned to Tailwind CSS and a primitive/semantic token structure, making it naturally interpretable by LLMs.
Design System
Documentation of colour palettes, typography styles, and spacing system using primitives/semantic variables to be extended and systematized for the rest of the screens.
Designing for Dark Mode
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
We are strategizing a plan to market Yarn towards authors and online readers. While doing so, Yarn is undergoing QA testing on Testflight and a web staging app.
To polish the designs, I am prototyping a few UI interactions on cursor.
Full case study available upon request.
