Typeface
Homezy main typeface is Syne as a Heading and Hanken Grotesk as a Body Text. Both using form Goole Font A tranquil and fresh geometric sans font family for clear text and headlines.
Heading
Syne
Bold
Medium
Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
Name
Size
Line Height
Font Weight
Name
Heading 1
Size
72px
Line Height
88px
Font Weight
SemiBold
Name
Heading 2
Size
48px
Line Height
56px
Font Weight
SemiBold
Name
Heading 3
Size
40px
Line Height
48px
Font Weight
SemiBold
Name
Heading 4
Size
32px
Line Height
40px
Font Weight
SemiBold
Name
Heading 5
Size
24px
Line Height
32px
Font Weight
SemiBold
Name
Heading 6
Size
20px
Line Height
28px
Font Weight
SemiBold
Heading
Hanken Grotesk
Bold
Medium
Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
Name
Size
Line Height
Font Weight
Name
Paragraph XL
Size
20px
LIne Height
24px
Font Weight
Bold
Name
Paragraph XL
Size
20px
Line Height
24px
Font Weight
Medium
Name
Paragraph XL
Size
20px
Line Height
30px
Font Weight
Regular
Name
Paragraph L
Size
18px
Line Height
22px
Font Weight
Bold
Name
Paragraph L
Size
18px
Line Height
22px
Font Weight
Medium
Name
Paragraph L
Size
18px
Line Height
28px
Font Weight
Regular
Name
Paragraph R
Size
16px
Line Height
20px
Font Weight
Bold
Name
Paragraph R
Size
16px
Line Height
20px
Font Weight
Medium
Name
Paragraph R
Size
16px
Line Height
26px
Font Weight
Regular
Name
Paragraph S
Size
14px
Line Height
20px
Font Weight
Bold
Name
Paragraph S
Size
14px
Line Height
20px
Font Weight
Medium
Name
Paragraph S
Size
14px
Line Height
24px
Font Weight
Regular
Name
Paragraph XS
Size
12px
Line Height
20px
Font Weight
Bold
Name
Paragraph XS
Size
12px
Line Height
22px
Font Weight
Medium
Name
Paragraph XS
Size
12px
Line Height
20px
Font Weight
Regular
Colors
Color distinguishes our brand and helps us create consistent experiences across products.
Brand Colors
Primary brand colors are used for elements that must reflect Homezy's brand. Each color has a darker and a lighter shade.
Lavender 100
B592FF
Lavender 80
C1A5FF
Lavender 60
CFB9FD
Lavender 40
E2D4FF
Lavender 20
F7F2FF
Carnation 100
FDA5D6
Carnation 80
FFB4DE
Carnation 60
FFD2EB
Carnation 40
FFE1F2
Carnation 20
FFF1F9
Minion 100
FFE76C
Minion 80
FFEF9C
Minion 60
FFF6C5
Minion 40
FFF9DA
Minion 20
FFFCEF
Apple Smith 100
A8EB9E
Apple Smith 80
B7F7AE
Apple Smith 60
D3FACD
Apple Smith 40
E9FFE5
Apple Smith 20
F6FFF5
Secondary Colors
The secondary colors are used for states. It can be used both on positive and negative feedback that may applied to section, elements or text.
Dark 100
191A23
Dark 80
686A79
Dark 60
868893
Dark 40
B7B8C1
Dark 20
F6FFF5
Icons
Icons are visual representations of commands, devices, directories, or common actions. We are using free commercial from Iconsax
How to use?
- We're using embedded SVG code for the icon.
- Please update the SVG default color to "currentColor" so that the color of the icon will follow the current text color.
- Please update the dimensions to 100% so that the icon can fill the parent size.
- Add our custom class "SVG Icon" to the embedded code.
- Additionally, please add a subclass for the size of the icon, such as "16x16" or "32x32".
Forms
Default form field styles for all forms used on the site.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich Text
Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.
Text Bold
Lorem ipsum dolor sit amet consectetur
Text Italic
Lorem ipsum dolor sit amet consectetur
Bullet List
- Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Senectus et netus et malesuada fames ac turpis egestas
Numered List
- Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Senectus et netus et malesuada fames ac turpis egestas
Figure Image & Caption
Blockquote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."
Grid
Create complex layouts that are both responsive and flexible, using a combination of rows and columns.
2 column grid
3 column grid
4 column grid
2 : 1 grid
1 : 2 grid
Spacing
How the spacing roles relate to the hierarchy of user interface elements.
4px
8px
12px
16px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
104px
112px
120px