Colors
Base Colors
Base/White
#FFFFFF
Base/Black
#1A1A1A
Neutral
Neutral/50
#F8F8F9
Neutral/100
#E7E8EA
Neutral/200
#C3C6CC
Neutral/300
#A4A9B2  
Neutral/400
#8B909C
Neutral/500
#707684
Neutral/600
#575E6E
Neutral/700
#434B5D
Neutral/800
#2D3547
Neutral/900
#161F31
Neutral/950
#060D20
Brand
Primary
Brand/Primary/50
#E1EBDB
Brand/Primary/100
#C5F696
Brand/Primary/200
#92D936
Brand/Primary/300
#76BB00
Brand/Primary/400
#62A000
Brand/Primary/500
#4E8400
Brand/Primary/600
#3C6900
Brand/Primary/700
#2F5400
Brand/Primary/800
#203C00
Brand/Primary/900
#112300
Brand/Primary/950
#061100
Semantic
Positive
Semantic/Positive/50
#E0EBE1
Semantic/Positive/100
#B6F6C2
Semantic/Positive/200
#5ADE7F
Semantic/Positive/300
#1CC25C
Semantic/Positive/400
#00A648
Semantic/Positive/500
#008836
Semantic/Positive/600
#006D28
Semantic/Positive/700
#00571D
Semantic/Positive/800
#003E12
Semantic/Positive/900
#002508
Semantic/Positive/950
#001203
Warning
Semantic/Warning/50
#EBE3D8
Semantic/Warning/100
#FFE4B4
Semantic/Warning/200
#FFB94D
Semantic/Warning/300
#EC9600
Semantic/Warning/400
#CD7E00
Semantic/Warning/500
#AA6600
Semantic/Warning/600
#895000
Semantic/Warning/700
#6F4000
Semantic/Warning/800
#512C00
Semantic/Warning/900
#311900
Semantic/Warning/950
#190A00
Negative
Semantic/negative/50
#EBDEDD
Semantic/negative/100
#FFE0DC
Semantic/negative/200
#FFB3AA
Semantic/negative/300
#FF857C
Semantic/negative/400
#FC5552
Semantic/negative/500
#DD3438
Semantic/negative/600
#B71F26
Semantic/negative/700
#96111A
Semantic/negative/800
#6F050F
Semantic/negative/900
#470105
Semantic/negative/950
#260102
Info
Semantic/info/50
#DDE3EB
Semantic/info/100
#D6E9FF
Semantic/info/200
#9CCAFF
Semantic/info/300
#6CABFF
Semantic/info/400
#488EFF
Semantic/info/500
#2D72E3
Semantic/info/600
#1C5ABC
Semantic/info/700
#12479C
Semantic/info/800
#083173
Semantic/info/900
#031C49
Semantic/info/950
#010C28
Alpha
White
Alpha/white/50
#FFFFFF @ 5%
Alpha/white/100
#FFFFFF @ 10%
Alpha/white/200
#FFFFFF @ 20%
Alpha/white/300
#FFFFFF @ 30%
Alpha/white/400
#FFFFFF @ 40%
Alpha/white/500
#FFFFFF @ 50%
Alpha/white/600
#FFFFFF @ 60%
Alpha/white/700
#FFFFFF @ 70%
Alpha/white/800
#FFFFFF @ 80%
Alpha/white/900
#FFFFFF @ 90%
Alpha/white/950
#FFFFFF @ 95%
Black
Alpha/black/50
#0E0E0E @ 5%
Alpha/black/100
#0E0E0E @ 10%
Alpha/black/200
#0E0E0E @ 20%
Alpha/black/300
#0E0E0E @ 30%
Alpha/black/400
#0E0E0E @ 40%
Alpha/black/500
#0E0E0E @ 50%
Alpha/black/600
#0E0E0E @ 60%
Alpha/black/700
#0E0E0E @ 70%
Alpha/black/800
#0E0E0E @ 80%
Alpha/black/900
#0E0E0E @ 90%
Alpha/black/950
#0E0E0E @ 95%
Primary
Alpha/primary/50
#6265EF @ 5%
Alpha/primary/100
#6265EF @ 10%
Alpha/primary/200
#6265EF @ 20%
Alpha/primary/300
#6265EF @ 30%
Alpha/primary/400
#6265EF @ 40%
Alpha/primary/500
#6265EF @ 50%
Alpha/primary/600
#6265EF @ 60%
Alpha/primary/700
#6265EF @ 70%
Alpha/primary/800
#6265EF @ 80%
Alpha/primary900
#6265EF @ 90%
Alpha/primary/950
#6265EF @ 95%
Typography
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
regular
medium
semibold
bold
Download font
1
Text styles
Size
Line height
Display Text
4.5 rem
80%
heading-h1

H1

4rem
110%
heading-h2

H2

3rem
120%
heading-h3

H3

2.5rem
120%
heading-h4

H4

2rem
120%
heading-h5
H5
1.5rem
130%
heading-h6
H6
1.25rem
140%
caption
0.75rem
150%
code-syntax
0.875rem
140%
Text Sizes
Size
Line height
text-size-xl
1.25rem
140%
text-size-lg
1.125rem
130%
text-size-md
1rem
150%
text-size-sm
0.875rem
140%
text-size-xs
0.75rem
150%
Text Weights
text-weight-regular
text-weight-medium
text-weight-semibold
text-weight-bold
Text Styles
text-style-allcaps
text-style-italic
text-style-nowrap
text-style-muted
text-style-strikethrough
text-style-allcaps
text-style-link
Sample text is being used as a placeholder.
Text Alignments
text-align-left
text-align-center
text-align-right
Text Colors
text-color-primary
text-color-secondary
text-color-teritiary
text-color-disable
text-color-primary-inverse
text-color-secondary-inverse
text-color-tertiary-inverse
text-color-positive
text-color-negative
text-color-warning
text-color-info
Rich Text

Heading 1

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.

Heading 2

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

Heading 3

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.

Heading 4

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
Heading 5

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

Heading 6

Buying a home for the first time is an exciting milestone, but it can also be a daunting process filled with uncertainty. The real estate market can be complex, and first-time buyers often face challenges they didn't anticipate. To help you navigate the market and make informed decisions, we’ve compiled a list of essential tips.

Other HTML Tags
All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
Text Link
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Buying a home for the first time is an exciting milestone.
  2. Buying a home for the first time is an exciting milestone.
  3. Buying a home for the first time is an exciting milestone.
  4. Buying a home for the first time is an exciting milestone.
All Ordered Lists
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
  • Buying a home for the first time is an exciting milestone.
Structure
page-wrapper
main-wrapper
container-extra-sm
container-small
container-medium
container-large
button-group
Max Width
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-2xl
max-width-xl
max-width-lg
max-width-md
max-width-sm
max-width-xs
Elevations
Shadows
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-3xl
BG blur
BG-blur 3xl
BG-blur sm
BG-blur md
BG-blur lg
BG-blur xl
BG-blur 2xl
BG-blur 3xl
Useful utility systems
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
spacing-clean
align-center
Animations
⏫ Slide to top
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
⏪ Slide To Left
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
⏩ Slide To Right
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
🔍 Zoom In
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s
👻 Fade In
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1s
1.2s
1.4s
1.6s