Shape
Shape helps indicate logical grouping, identify interactive elements, and convey brand expression.
Shape and meaning
Create meaning
When used well, shape can help establish a connection between elements. UI elements or components that have similar functionalities should share a similar trait such as color, shape, or size.
Components and communicating meaning
Shapes can indicate a specific purpose and make components easily recognizable. Applying the same shape to certain elements or components indicates their function and strengthens their relationship within our products.
Brand expression
Blueprint promotes the use of organic shapes to support the Redfin visual language while creating an approachable, humanistic, and friendly user interface. When applied consistently, similar shapes can help to unify our products.
Blueprint shape system
Pixels
rem
Token
0
0
border-radius-0
6
0.375
border-radius-75
8
0.5
border-radius-100
12
0.75
border-radius-150
100%
100%
border-radius-1000
