For: CoStar Group
Year: 2024
Tools: Figma (components, tokens, and design)
Figma Link

My Role

UI, Component System

Contributors

Alexandra Clotfelter - Original MORTAR Architect (Apartments.com Design System)

Kassidy Wallace - Design Systems

Eugene Ahn - Design Systems

Background

This is a design system created in anticipation of a front end rewrite of our Rental Manager System (RMS) pages. Considerable focus was put on accessibility, consistency, and leveraging contemporary design system processes like a token system to handle color and typography. This component system is based on MORTAR, Apartments.com’s Design System, architected by Alexandra Clotfelter and Kassidy Wallace.

Layout

Consistent layout rules are essential to maintain continuity for the site. Two page layouts are established based on whether or not a certain page is a dashboard/interface versus a flow/wizard.

Color

The color primitives and tokens selected were directly adopted from MORTAR, and were designed by Kassidy Wallace and Eugene Ahn.

Typography

The typography system uses primitives to define size scale, weight scale, line height, and letter spacing.

By combining these primitives to define the type settings for any particular piece of text, diverse type styles can be defined but still feel congruent.

Buttons and Inputs

On top of the typical states for each button, toggle, and input, I also created a custom focus state. Being able to comfortably use a user interface using only a keyboard is a key component of an accessible website, and a consistent focus state is essential.

Patterns

Patterns are larger components built by combining multiple components together. These are the layouts and designs that fully flesh out the Rental Manager Component System.