Style Guide
Manage the look and feel of the entire website from our style guide. Style and components used on the site are documented here, and any changes made will be immediately visible across all pages.

Colors

The different weights of greys and colours used throughout the website.
Primary
primary-soft
primary-light
primary-main
primary-dark
primary-hard
Secondary
secondary-soft
secondary-light
secondary-main
secondary-dark
secondary-hard
Neutral
background
layer
divider
border
text-title
text-primary
text-secondary
text-tertiary
text-placeholder
text-disabled

Typography

Styles for heading tags (H1-H6).
Global Typography
Global Tag
HTML tags define default Heading styles.
All H1 Headings

All Heading 1

All H2 Headings

All Heading 2

All H3 Headings

All Heading 3

All H4 Headings

All Heading 4

All H5 Headings
All Heading 5
All H6 Headings
All Heading 6
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list
  • No bullet list
All Unordered Lists
  • No bullet list
  • No bullet list
All Ordered Lists
  1. No bullet list
  2. No bullet list
Customize Typography
Customize Tag
These are all of Typography used in the design system and components.
Heading
h1-style-regular

Heading 1

h1-style-medium

Heading 1

h1-style-bold

Heading 1

h2-style-regular

Heading 2

h2-style-medium

Heading 2

h2-style-bold

Heading 2

h3-style-regular

Heading 3

h3-style-medium

Heading 3

h3-style-bold

Heading 3

h4-style-regular

Heading 4

h4-style-medium

Heading 4

h4-style-bold

Heading 4

h5-style-regular
Heading 5
h5-style-medium
Heading 5
h5-style-bold
Heading 5
h6-style-regular
Heading 6
h6-style-medium
Heading 6
h6-style-bold
Heading 6
Body
b1-body-regular
Body 1
b1-body-medium
Body 1
b1-body-bold
Body 1
b2-body-regular
Body 2
b2-body-medium
Body 2
b2-body-bold
Body 2
Label
l1-label-regular
Label
l1-label-medium
Label
l1-label-bold
Label
l2-label-regular
Label
l2-label-medium
Label
l2-label-bold
Label
Caption
c1-caption-regular
Caption
c1-caption-medium
Caption
c1-caption-bold
Caption
c2-caption-regular
Caption
c2-caption-medium
Caption
c3-caption-bold
Caption

Structure Page

Defined and flexible core structure we can use on all or most pages.
Section
section
section
small
section
none
Container
container-default
container-sm
container-md
container-lg
Padding
padding-2xs
padding-sm
padding-md
padding-lg
padding-xl
padding-2xl
Align
align-left
align-center
align-right
Collumn
The 12 column grid system to make it easy to align sections across different screen sizes.
1 Col
2 Col
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col
12 Col
Grids
Different grid layouts to use across your site
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
2.5-1 Grid
1-2.5 Grid
Spacing
Spacer elements using the 8-pt grid to give sections more room to breathe.
spacing-xs
spacing-sm
spacing-md
spacing-lg
spacing-xl
spacing-2xl
spacing-3xl
spacing-4xl
spacing-5xl
spacing-6xl
Max width
Use the max-width CSS property to contain inner content to a maximum width.
max-width-2xs
max-width-xs
max-width-sm
max-width-md
max-width-lg
max-width-xl
max-width-2xl

Effect

The distance between two surfaces on the z-axis
Box Shadow
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis
shadow-2xs
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Icons

Icons are visual symbols used to represent ideas, objects, or actions.
Icon Sizing
Components typically use icons on 16px artboards
icon-height-2xs
icon-height-xs
icon-height-sm
icon-height-md
icon-height-lg
icon-height-xl
Icon library

Button

Button allows users to take actions, and make choices, with a single tap.

Filled buttons

Use the most visual impact, and should be used for important.
Default
Button
Default
Small
Button
Small

Outline buttons

are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action
Default
Button
Default
Small
Button
Small

Tonal buttons

Is an alternative middle ground between filled and outlined buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give
Default
Button
Default
Small
Button
Small

Text buttons

used for the lowest priority actions, especially when presenting multiple options.
Default
Button
Default
Small
Button
Small

Elevated buttons

Use when absolutely necessary, such as when the button on dark or color background.
Default
Read more
Default
Small
Button
Small

Form

Form block group form element
fleld-label
form-input
form-input
is-text-area
form-input
is-select-input
form-checkbox
form-radio
form-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich text
Suitable for long-term content, like blog posts, product descriptions with various text styles, images, and video all in once.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C
Text link

Bold text

Emphasis

Superscript

Subscript

Tabs
Tab component organize related content.
Badge
Use tags to label, categorize, or organize items using keywords that describe them.
badge
Our service
Tags
Use tags to manage and organzing blog posts, making the categorization and search process more convenient.
tag
tag
Section Component
Reuse these section on all Site Pages.
CTA

Take the First Step Towards Your Dream Home Today!

Let's create your dream home or interior together.
Testimonial
Testimonial

WHAT OUR
CLIENTS SAID

We are committed to providing our clients with the best possible real estate experience. But don't just take our word for it. Here's what some of our satisfied clients have to say about working with us.
woman wearing blue coatby Austin Distel
"We love Arch! Our designers were using it for their projects, so clients already knew what Arch was and how to use it."
Jenny Wilson
Co-Founder of
woman in black long sleeve shirt and black pantsby Olga Zabegina
"We love Arch! Our designers were using it for their projects, so clients already knew what Arch was and how to use it."
Jenny Wilson
Co-Founder of
man in black long sleeve shirt using macbookby Christian Velitchkov
"We love Arch! Our designers were using it for their projects, so clients already knew what Arch was and how to use it."
Jenny Wilson
Co-Founder of
grayscale photography of sitting man wearing suitby Nith IN
"We love Arch! Our designers were using it for their projects, so clients already knew what Arch was and how to use it."
Jenny Wilson
Co-Founder of