Primary 100
#BB936C
Primary 80
#C1A08B
Primary 60
#E7CFC0
Primary 40
#F0E2DA
Primary 20
#F9F4F1
Base 100
#232323
Base 80
#C1A08B
Base 60
#8D8686
Base 40
#D5D1D1
Base 20
#ECEAEA
Base 00
#FFFFFF
STYLE GUIDE
The style guide contains styles, components and guidelines for using styles in the Pixel Perfect template.
COLORS
Color distinguishes our brand and helps us create consistent experiences across products.
TYPOGRAPHY
The main typeface is Open Sauce Sans.
Aa Bb Cc
OPEN SAUCE SANS
Medium
Reguler
DESKTOP
HEADING 1
Heading 1
180px/200px
HEADING 2
Heading 2
72px/88px
HEADING 3
Heading 3
48px/68px
HEADING 4
Heading 4
32px/40px
HEADING 5
Heading 5
24px/32px
Display 1
Display 1
100px/120px
MOBILE
HEADING 1
Heading 1
48px/60px
HEADING 2
Heading 2
40px/48px
HEADING 3
Heading 3
32px/40px
HEADING 4
Heading 4
26px/36px
HEADING 5
Heading 5
24px/32px
Display 1
Display 1
56px/68px
MOBILE
EXTREA LARGE
XL
20px/28px
LARGE
L
18px/24px
MEDIUM
M
16px/22px
SMALL
S
14px/20px
ICONS
Icons are visual representations of commands, devices, directories, or common actions. We are using free commercial form Figma community.
BUTTON
Button used in this website as a CTA, with various style variations
FORMS
Default form field styles for all forms used on the site.
INPUT FORM
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
SEARCH BOX
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
TEXT AREA
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
SEACH BOX
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
GRIDS
How the spacing roles relate to the hierarchy of user interface elements.
2 column grid
3 column grid
4 column grid
2 : 1 column grid
1 : 2 column grid
SPACING
How the spacing roles relate to the hierarchy of user interface elements.
4px
8px
12 px
16 px
24 px
32 px
40 px
48 px
56 px
64 px
72 px
80 px
120 px
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
Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.
TEXT ITALIC
Our rich text capabilities allow you to easily format and style text, embed images and videos, and even add custom code.
TEXT LINK
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.
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.
FIGURE IMAGE & CAPTION
We're more than just photographers, we're storytellers with a camera.