Elena Oh

MolarOS, AI-powered Dental SaaS · Design System

Design-to-Code

Building a consistent design system for an AI-powered dental SaaS

An AI-powered dental SaaS supporting dentists throughout their clinical workflow — from clinical findings to diagnosis and treatment planning.

My Role
Sole Product Designer — UX/UI + Design System
Duration
3 Months, ongoing
Team
Product Lead, PM, Product Designer (Solo), Engineers (cross-functional)
MolarOS Exam Findings screen with the clinical chart
91
reusable componentsNew screens ship without rebuilding UI
72
Storybook storiesDesign and code stay aligned
1
token-based systemFrom Figma variables to the code library
Problem

Rapid AI-driven expansion, broken consistency

With no shared standard, non-designers built the same feature differently each time — until product-wide consistency broke down.

MolarOS grows quickly. Product and engineering generate new screens with AI, often without a designer involved, and features are added faster than anyone can review them.

Each screen worked on its own. Together they drifted: the same action looked different from one page to the next, and every page arranged its information in its own way.

The same Delete action drawn with three different button styles across screens
Problem 1 — Same action, different button styles
Three screens with three different information structures
Problem 2 — Inconsistent information structure
Approach

From design standards to code components

A design system linking design tokens to Storybook — resolving UI inconsistency in a fast, AI-driven build environment.

01

Audit workflows

Review key screens and user flows

Figma

02

Define standards

Create design tokens and variables

Design Tokens · Variables

03

Build components

Create reusable UI components

Components

04

Sync with code

Document in Storybook

Storybook · Code

Workflows

Redesigning the core clinical workflow

Restructured the IA and tightened content width for faster clinical scanning.

The work started with the screens themselves. On Exam Findings, wide content blocks and separated sections made the page slow to scan, so I narrowed the content and connected the sections into one flow: clinical findings, then the chart, then the diagnosis.

Exam Findings after — narrower content blocks, with the chart and diagnosis list connected in one card
Narrower content blocks
Connected information flow
Exam Findings — switch between before and after
Design tokens

Foundational design tokens

Abstracted primitives into semantic tokens to separate intent from raw values, then linked them through Variables for consistency across components.

Every visual decision starts as a primitive: a raw color, a spacing step, a radius. Semantic tokens sit on top and name the intent — primary, border, muted — so components point at meaning instead of raw values. Both layers live as Figma Variables and carry the same names into code.

Primitives from the production token file — hover a swatch for its value.

slate

50

slate/50 · #f8fafc

100

slate/100 · #f1f5f9

200

slate/200 · #e2e8f0

300

slate/300 · #cbd5e1

400

slate/400 · #94a3b8

500

slate/500 · #64748b

600

slate/600 · #475569

700

slate/700 · #334155

800

slate/800 · #1e293b

900

slate/900 · #0f172a

950

slate/950 · #020617

blue

50

blue/50 · #eff6ff

100

blue/100 · #dbeafe

200

blue/200 · #bfdbfe

300

blue/300 · #93c5fd

400

blue/400 · #60a5fa

500

blue/500 · #3b82f6

600

blue/600 · #155dfc

700

blue/700 · #1d4ed8

800

blue/800 · #1e40af

900

blue/900 · #1e3a8a

rose

50

rose/50 · #fff1f2

100

rose/100 · #ffe4e6

500

rose/500 · #f43f5e

600

rose/600 · #e11d48

700

rose/700 · #be123c

orange

50

orange/50 · #fff7ed

100

orange/100 · #ffedd5

400

orange/400 · #fb923c

500

orange/500 · #f97316

600

orange/600 · #ea580c

jade

50

jade/50 · #e6f8f0

100

jade/100 · #c2efdc

500

jade/500 · #0ea371

600

jade/600 · #0a7f5c

yellow

50

yellow/50 · #fefce8

100

yellow/100 · #fef9c3

400

yellow/400 · #facc15

500

yellow/500 · #eab308

Spacing

4
8
12
16
24
32
48
64

Radius

2
4
6
8
12
16
full

Rule — controls: 8 · containers (cards/alerts): 12 · pills: full

Components

Components standardized with tokens

Standardized recurring UI — buttons, inputs, icons — by variant, size, and state on the token layer, keeping patterns consistent across screens.

Each component is defined once per variant, size, and state, with every value bound to a token. The buttons below are rebuilt from the production spec, so the states can be tried rather than read off a screenshot.

Live components — hover, focus, and press them.

Primary

Main action

Secondary

Supporting

Outline

Neutral

Ghost

Low emphasis

Destructive

Irreversible

AI

AI-generated only

Button variants by size and state, and the iconography set
Button spec and iconography in Figma
Code library

Connecting design components to a code library

Documented components in Storybook so design and engineering share one source of truth.

Every component is documented in Storybook next to its code. A designer checking a variant and an engineer implementing it are looking at the same thing.

Storybook docs page for the Button component
Storybook — Button docs
Button stories source code
The same component as code
Applied System

One system across the clinical workflow

Applied the same components and design patterns across key workflows, from Exams and Treatment Plans to Attachments and Status management.

A consistent workflow with AI-assisted data entry

Shared components and interaction patterns keep the workflow consistent, while AI reduces manual clinical data entry.

  • ✓Shared components & patterns
  • ✓AI-assisted data entry
  • ✓Reviewable AI output
Exam Findings page — clinical findings, chart, and diagnosis
Treatment Plan page organized into groups and items

Complex treatment plans, structured at every level

Organized treatment plans into groups and items, with optional information like Notes, Price, and Findings.

  • ✓Hierarchical structure
  • ✓Optional information
  • ✓Consistent interactions
Outcome

A system that connects design and code

UX Consistency

Consistent UI patterns across the core product

Component Reusability

91 reusable components let new screens ship without rebuilding UI

System Scalability

Token-based system makes the product easier to maintain & scale

Design–Code Alignment

72 Storybook stories keep design and code aligned