Color Palette
Brand — Teal
Brand 1000
#062b2c
Brand 900
#083a3c
Brand 800
#0a4c4d
Brand 700
#0d6163
Brand 600
#117a7c
Brand 500
#16c9cc
Primary
Brand 400
#4ddadd
Brand 300
#8ee8ea
Brand 200
#c2f3f4
Brand 100
#e6fafa
Brand 50
#f2fdfc
Neutral — Warm Gray
Neutral 1000
#1f1d1a
Primary text
Neutral 900
#2f2c28
Neutral 800
#5f5b55
Neutral 700
#5f5b55
Neutral 600
#7d7871
Neutral 500
#9f9a94
Neutral 400
#bab6b1
Neutral 300
#d2cfcb
Neutral 200
#e4e2de
Neutral 100
#f6f5f3
Neutral 50
#faf9f7
Neutral 0
#ffffff
Typography
Display: Neue Haas Grotesk Display Pro · Text: Neue Haas Grotesk Text Pro
| Token | Size / LH / LS | Weight | Sample |
|---|---|---|---|
| H1 | 68 / 76 / -1px | 500 | Heading One |
| H2 | 56 / 64 / -1px | 500 | Heading Two |
| H3 | 48 / 56 / -0.5px | 500 | Heading Three |
| H4 | 32 / 40 / 0 | 500 | Heading Four |
| H5 | 24 / 32 / 0 | 500 | Heading Five |
| H6 | 20 / 28 / 0 | 500 | Heading Six |
| Body XL | 20 / 32 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body L | 18 / 28 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body M | 16 / 26 / 0 | 450 | The quick brown fox jumps over the lazy dog. |
| Body S | 14 / 22 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body XS | 12 / 20 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Token | Size / LH / LS | Weight | Sample |
|---|---|---|---|
| H1 | 44 / 52 / -1px | 500 | Heading One |
| H2 | 36 / 44 / -1px | 500 | Heading Two |
| H3 | 32 / 40 / -0.5px | 500 | Heading Three |
| H4 | 28 / 32 / 0 | 500 | Heading Four |
| H5 | 20 / 28 / 0 | 500 | Heading Five |
| H6 | 16 / 26 / 0 | 500 | Heading Six |
| Body XL | 16 / 28 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body L | 14 / 26 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body M | 14 / 22 / 0 | 450 | The quick brown fox jumps over the lazy dog. |
| Body S | 12 / 20 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body XS | 10 / 18 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
Mobile type scale is identical to Tablet.
| Token | Size / LH / LS | Weight | Sample |
|---|---|---|---|
| H1 | 44 / 52 / -1px | 500 | Heading One |
| H2 | 36 / 44 / -1px | 500 | Heading Two |
| H3 | 32 / 40 / -0.5px | 500 | Heading Three |
| H4 | 28 / 32 / 0 | 500 | Heading Four |
| H5 | 20 / 28 / 0 | 500 | Heading Five |
| H6 | 16 / 26 / 0 | 500 | Heading Six |
| Body XL | 16 / 28 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body L | 14 / 26 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body M | 14 / 22 / 0 | 450 | The quick brown fox jumps over the lazy dog. |
| Body S | 12 / 20 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
| Body XS | 10 / 18 / 0 | 400 | The quick brown fox jumps over the lazy dog. |
Components
Button — Light Background
Large
Medium
Small
Button — Dark Background
Large
Link
Input Field
This field is required.
Checkbox Field
✓
Checked
Unchecked
—
Indeterminate
✓
Disabled checked
Disabled unchecked
Quote
"ResVR lets buyers fall in love with a home before it's built."— Sample attribution, Title
Token Reference
Ready to copy into your project. Raw files: tokens.css · tokens.json
--color-brand-1000#062b2c
--color-brand-900#083a3c
--color-brand-800#0a4c4d
--color-brand-700#0d6163
--color-brand-600#117a7c
--color-brand-500#16c9cc
--color-brand-400#4ddadd
--color-brand-300#8ee8ea
--color-brand-200#c2f3f4
--color-brand-100#e6fafa
--color-brand-50#f2fdfc
--color-neutral-1000#1f1d1a
--color-neutral-900#2f2c28
--color-neutral-800#5f5b55
--color-neutral-600#7d7871
--color-neutral-500#9f9a94
--color-neutral-400#bab6b1
--color-neutral-300#d2cfcb
--color-neutral-200#e4e2de
--color-neutral-100#f6f5f3
--color-neutral-50#faf9f7
--color-neutral-0#ffffff