Figma: https://www.figma.com/design/58i3A5rml54rTcRGa5QyP6/Creature-Books---Design-System?node-id=71-770&p=f&t=j5tDMJjWdvJwv8dN-0

Deployed app: https://creature-app.vercel.app/home

Weave dashboard: https://wandb.ai/molliean29-test/creature-app/overview

Problem

Most book tracking tools are built around lists, ratings, and social graphs, but that is not how people actually discover what to read. Discovery is usually more intuitive. It is driven by mood, tone, and a vague sense of what you want to feel next. Existing products make you translate that feeling into filters or keywords, which breaks the experience.

I wanted to design something that better reflects how readers think. Creature is a book discovery and tracking app centered on mood-based exploration, a clean and modern interface, and a more thoughtful connection to the local bookstore ecosystem. The goal was not to recreate Goodreads, but to explore a different model for how people find and relate to books.


Goals


Design system

For this project I focused on building a system that could scale and translate cleanly into code rather than just designing individual screens. The goal was to establish a small set of decisions that could be reused consistently across the app for web and mobile, so that changes at the system level would propagate everywhere.

Tokens

The foundation of the system is a set of tokens for color, typography, spacing, and radius, all defined as Figma variables and referenced throughout the components.

Color is anchored around two brand directions, teal for surfaces and amber for accents, with a small set of semantic tokens for surfaces, borders, and text. I kept the palette intentionally constrained to avoid visual drift and to make state changes and hierarchy feel consistent across screens.

Typography pairs a serif for headings with a sans-serif for UI, creating a slightly editorial tone while keeping the interface readable and functional. Spacing follows a 4px scale, and radius values are standardized to avoid one-off decisions in component design.

https://www.figma.com/design/58i3A5rml54rTcRGa5QyP6/Creature-Books---Design-System?node-id=54-5&p=f&t=j5tDMJjWdvJwv8dN-0