top of page
Texture-dots.png
Design System-wow.png

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 

Reveleer Brand Logo

Recommended Size

Clear Space

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

Thanks for Reading!

Thanks for visiting! 

Made with pixels, coffee, and a lot of “what ifs”.
Yixing Liu @ 2025
bottom of page