Software Design
Origin App
A personal project, designed and built end to end. Live at origin-protocol.vercel.app.
The Problem
Getting diagnosed with a thyroid issue is life-changing. It took two years of adjusting medication, supplements, and timing to get my labs back to something close to normal — and that only happened because I learned how unforgiving the protocol is.
Levothyroxine has to be taken on an empty stomach, thirty to sixty minutes before food or coffee, and nowhere near calcium or iron. Thyroid dysfunction is often downstream of chronic high cortisol, so treating it well also means treating the stress system — adaptogens timed away from stimulants, magnesium in the evening, vitamin D with the right fat, B vitamins early so they don't disrupt sleep. Miss the windows and absorption suffers. Stack the wrong things together and you cancel out what you needed.
Most tracking apps don't understand this. They ask you to set fixed clock times for each item, which works fine if your life runs on a clock. It doesn't work if your life runs on the question when did I take my medication today? The whole protocol shifts with you, but the relationships between items stay the same.
Roughly 5% of US adults have hypothyroidism, and many more live with protocols that work this way — fertility medication, peptide therapy, intermittent fasting, post-transplant immunosuppressants. I designed Origin for myself first. It works for everyone else with the same problem.
What I Built
Origin is a supplement and medication tracker built around anchor-based scheduling. You pick what your day depends on — your medication, your wake-up time, your eating window — and everything else cascades from there. The schedule reshapes itself around your life instead of asking your life to reshape itself around the clock.
I designed and built Origin end to end as a personal project: product strategy, scheduling architecture, data model, visual identity, design system, motion, and every UI decision. The codebase was built using Claude Code in Cursor — I wrote prompts, the AI wrote code, I reviewed and shipped. That choice is part of the story: it let me move from sketch to working product in the same session, which changed how I made design decisions.
The Design Insight: Anchors and Cascades
Every other tracker I'd used asked the same question: what time do you take this? Origin asks a different one: what does this depend on?
That single shift changes everything downstream. A supplement that has to come thirty minutes before breakfast isn't a 6:30am event — it's a pre-breakfast event. Breakfast itself isn't 7am — it's first meal of the day. When the anchor moves, the cascade moves with it. You don't have to update twelve clock times because you slept in an hour.
The data model treats time relationally, not absolutely. The UI follows.
Five Schedule Modes for Five Different Lives
People don't all live the same way, and Origin doesn't pretend they do. There are five schedule modes, each the right answer for someone:
No Schedule — a pure checklist. No times, no notifications. The default for new users because most people don't actually need scheduling, they just need to remember.
Medication Anchor — everything cascades from the time you took your medication. This is the mode I use.
Wake Up Anchor — everything cascades from when you got up. Works for people whose protocol is tied to circadian rhythm rather than medication.
Intermittent Fasting — built around an eating window. Different items belong inside, outside, or at the boundary.
Fixed Times — same schedule every day, regardless of when you wake up. The classic case.
Picking the right mode is the most important decision a user makes during onboarding. Everything else is downstream of it.
The Visual System: Achromatic
Origin doesn't look like a wellness app, and that's deliberate. The reference voices I worked from were Marathon (Bungie), Raw Materials editorial design, and lab terminal interfaces. The result is a system I call Achromatic: pure black surfaces, pure white text, zero corner radius across the UI, JetBrains Mono for body and data, Space Grotesk for headings, no shadows, hairline borders.
The design language matters because the stakes do. People tracking thyroid medication, fertility cycles, or peptide protocols aren't optimizing wellness — they're doing serious work with their bodies. A pastel gradient with a smiley-face mascot insults the seriousness of that work. Origin treats its users like operators of a precision instrument because that's what they are.
The accent color is pure white — no chroma. The only color in the system is functional: muted green for success, cool red for danger, amber for warnings. Color is signal, not decoration.
The System Under the Hood
The design system is token-based all the way down. Every component consumes theme.* tokens via a single useTheme() hook. A single token change propagates to every relevant element across the app. Typography runs through CSS variables (--font-body, --font-heading, --font-data), so a theme change rewrites the font stack instantly.
Seven primitives carry the whole product: Button, Input, Card, Badge, Label, Modal, Toast. Everything else is composition. The system survived four directional theme explorations and five Terminal color variants before locking Achromatic as the production identity — and because it was token-based, none of that exploration cost me a refactor.
Small details earn their own rules. Radius is zero across the UI; radius.full (9999px) is reserved for genuinely circular shapes — adherence rings, avatars, status dots — and a recent fix audited the codebase for any element using radius.full where radius.md was meant. That's the kind of detail that doesn't show up in a portfolio screenshot but defines whether the system stays clean a year from now.
The system is browsable as a live reference at origin-protocol.vercel.app/design-system — rendered from the same code that runs the app, so every token, primitive, and state is the production version, not a Figma export of it.
The Desktop Cockpit
Origin started as a mobile-first product, but the desktop experience couldn't just be a wider mobile screen. The data benefits from being read at a glance, the way a control panel does — so the desktop layout is a two-region cockpit: persistent left sidebar, content area with a week strip, today panel, and insights panel.
The week strip shows seven days as discrete cells, each with an adherence ring inside it. Today's cell is marked separately from the selected cell, because today and what you're looking at are two different signals and stacking them when they overlap is more honest than collapsing them into one.
The insights panel was the last piece I shipped. It does four things and stops: weekly adherence with a sparkline, current streak (hidden if it's less than two days, because a one-day streak isn't a streak), schedule summary in one line, and supplements ending in the next two weeks. Quick actions at the bottom. No nested cards, just hairlines.
The whole desktop layout activates at 1024px. Below that, the mobile rendering stays pixel-for-pixel identical. The two layouts share components but not assumptions.
Shipping It Myself
I'm a designer, not an engineer. Origin exists because Claude Code in Cursor closed the gap.
The workflow: I'd open a session, describe what I wanted, review the diff, push back where the code was wrong, and ship. Some sessions were five minutes. Some were six hours. The Supabase schema, the row-level security policies, the Vercel deploys, the timezone bug that needed a visibilitychange listener — all real engineering decisions, all made with AI as the implementation partner.
What this changed for me as a designer: the feedback loop collapsed. I could prototype a real interaction with real data in less time than it used to take me to draw it in Figma. That meant I could try things instead of defending them — and the design got better because of it. The radius leak got fixed because I actually used the product and the chevron buttons looked wrong. The desktop layout went through four phases because I could ship Phase 1, sleep on it, and rebuild on Phase 2 the next morning.
My Role
Role
Sole designer and builder — personal project
Scope
Product strategy, scheduling architecture, data model, visual identity, design system, motion, every UI decision
Platform
Web (responsive, mobile and desktop)
Stack
React + Vite, Supabase, Vercel
Tools
Figma for design exploration, Claude Code in Cursor as the implementation partner
Outcome
Origin shipped this month. I use it every morning. The product is the proof.
Reflection
Two years of adjusting thyroid medication taught me that the right tool isn't the one with the most features. It's the one that respects the seriousness of what you're tracking and gets out of your way the rest of the time. Most apps I tried did neither.
I tested four directional themes and five Terminal color variants before locking Achromatic. That kind of exploration is a luxury on client work and a necessity on personal work — it's the only way you find a visual answer that's actually yours and not borrowed.
What I didn't expect was how much building it myself would change the way I design. Working with Claude Code in Cursor meant every design decision had to be specific enough to implement. Vague intent doesn't survive the prompt — you either know what you want or you don't. That discipline carried back into my client work in ways I'm still noticing.
Origin isn't trying to be a startup. It's the tool I built for the protocol I live with. I'll keep shipping it for as long as I'm taking the pill — which, given hypothyroidism, will be the rest of my life.