Ritual Design System for Habit, AI and SaaS Products
Brady Starr
A design system for products people come back to
Most UI kits stop at buttons and forms. The hard part of a product is what makes people return: the first five minutes, the streak, the moment something breaks, the AI answer they need to trust, the bill they need to understand. Ritual is a Figma design system built around those moments, drawn from habit, monitoring, AI and billing products I have designed and shipped.
What I designed: 32 core components, five pattern packs (Motivation, First run, Status, Trust & AI, Money & accounts), three brands in light and dark, six example screens, and a dev pack with tokens and a Tailwind preset.
The Motivation pack: 38 hand-drawn badges in six families, each climbing from a dark shield to gold. They are real components with locked, in progress, new and earned states.
Three brands (Ember, Tide, Iris) in light and dark, built as variable modes. Same components, re-skinned by one switch, badges included.
Five pattern packs from shipped products: status monitoring, billing, an AI assistant and the unlock celebration.
Every component page covers design, prototype and build: states, wired interactions, specs, data shapes and a code sketch.
The result
A team can pick a brand, switch to dark mode, and build a real product from Ritual without asking anyone a question. Developers get the same token names in code that designers see in Figma.
Ritual is available on Contra: get the Figma file + dev pack
Like this project
Posted Oct 14, 2026
A Figma design system with 38 hand-drawn badges, 5 pattern packs, 3 brands in light and dark, and a dev pack. Built from products I shipped.
Likes
0
Views
0
