


Design
System
Why We Needed a Design System
When I joined Reveleer as a product designer, there was no design system. The platform had scaled fast without a cohesive foundation—colors, layouts, spacing, and components were inconsistent across workflows. This led to design and development inefficiencies, and for users, a steep learning curve.
My first project was to build a design system from the ground up—to unify the UI, streamline development, and create a more consistent, intuitive experience across the platform.
Role
Product Designer
Timeline
Dec 2022 - Feb 2023
Team
1 Director of Experience
1 Product Designer
1 Illustration Designer
Tool
Figma
Jira
Key Achievements

Improved product-wide consistency
Met WCAG 2.0–2.2 AA standards for inclusive, accessible design.
Modularized full-stack UI components
Accelerated design-to-dev workflow
Enabled faster onboarding and design scalability
Reduced design debt and visual inconsistency
BRAND
COLOR
Reveleer Brand

Light Theme

Dark Theme

TYPOGRAPHY
Typeface

Usage

LAYOUT
36px margin between unrelated content (e.g. outside containers/cards)
24px padding in grouped content (e.g. inside containers/cards)
Margins 24px between unrelated elements (e.g. containers, cards, buttons)
Margins 12px between related elements (e.g. title/copy, label/input, etc.)



INTERFACE COMPONENTS
Navigation
Navigation

Browser

Header
Tabs
Pagination
Page Header
Scrollbars
Form Elements
Input

Date Input

Dropdwon

Search Box

Text Area

Call to Action & Data Entry
Button

Radio
Checkbox
Toggle



Drag & Drop

Color Picker

Switch

Communication & Feedback
Avatar

Toaster Notification

Coaching Boxes

Inline Notification

Status

Progress Bar

Pie Progress Bar

Tooltips

Dialog Prompt

Tag

ICONOGRAPHY
Cursor

Navigation

Communication

Control

Contents

Layout

Inline Edit

Notification

Miscellaneous

ILLUSTRATION

Personas
Coder / Abstractor

Retriever

Admin (manager)

Employee (trainee)

Provider (records office)

Member (patient)

Dog (coder’s)

Cat (mischief)

Bird (EVE / Ai)

Objects / Props

Foreground

Background

Illustrative Icons

