Brand
Colors
text
- nav
#14151a - link
#005bb8 - error
#b4233c - muted
#6a6a75 - accent
#0075eb - footer
#86a5c6 - on-cta
#131a22 - heading
#131a22 - inverse
#ffffff - primary
#131a22 - disabled
#435069 - on-action
#ffffff - link-hover
#09223d - placeholder
#6a6a75 - brand-strong
#09223d - inverse-muted
#bfcbde - footer-heading
#bfcbde
action
- cta
#fbaf37 - primary
#005bb8 - success
#04694a - cta-hover
#ee9402 - primary-hover
#004a96 - success-hover
#035a3f - secondary-hover
#66c7ff
border
- empty
#c3cfdc - error
#b4233c - input
#8f9091 - subtle
#edf1f5 - default
#d9e6f3 - selected
#005bb8
status
- open-text
#005bb8 - open-background
#edf6ff - draft-text
#131a22 - draft-background
#f4f4f4 - error-text
#b4233c - error-background
#ffe6ec - closed-text
#09223d - closed-background
#e8ecf1 - offers-in-text
#7a4a00 - offers-in-background
#fff2d7 - under-contract-text
#04694a - under-contract-background
#e6f6ed
feedback
- rating
#fbbc04
background
- page
#ffffff - soft
#f4f4f4 - brand
#0072ce - footer
#232a34 - subtle
#f7f9fa - overlay
rgba(0, 39, 87, 0.8) - surface
#ffffff - disabled
#d9e6f3 - header-ops
#09223d - placeholder
#edf1f5 - accent-subtle
#edf6ff
Type
- Display
text-display - Heading large
text-heading-lg - Heading medium
text-heading-md - Heading small
text-heading-sm - Heading extra small
text-heading-xs - Body large
text-body-lg - Body
text-body - Label
text-label - Helper
text-helper - Caption
text-caption
Spacing
4px6px8px10px12px16px18px20px24px30px32px35px40px50px75px
Shape and elevation
- Control corner, control shadow
- Button corner
- Card corner, card shadow
- Pill
Components
Buttons
Status chips
draftopenoffers-inunder-contractclosederror
Stat tiles
- Offers
- 4
- Needs attention
- 1
- Matched investors
- 12
Text fields
As it appears on the offer.
Enter an email address
Number field and select
Property type
With an errorChoose a type
Choices
Property types
As chips
Financing
Card, thumbnail, dialogs
A card
Cards group one task's content.
Body text inside a card.
No image