Design Foundations

Informed by Redfin’s brand principles, these shared styles and guidelines influence all components and patterns, creating the foundation of our UI.

The color system expands on the core brand palette with guidelines that ensure consistency and meet a11y standards

Elevation or shadows can be applied to UI elements to create visual hierarchy or draw focus

The grid system provides guidance on creating consistent and harmonious layouts

Icons help users navigate through our products, draw attention to important messages or actions, and show status

Shape helps indicate logical grouping, identify interactive elements, and convey brand expression

Our spacing system allows for consistent visual balance within UI elements and page layouts

States visually communicate the status of a component or other interactive UI element

Typography creates clear visual hierarchy and conveys our brand’s personality across our products and experiences