#EDECEA
Cotton
#877763
Taupe
#C7BEB3
Linen
#4E4943
We created this handy guide so you can have a cohesive brand across any and all platforms. Here is your resource for all of the fonts, colors, icons and graphic elements used in this template.
We recommend copying this page and filling in with your own brand elements. Then, use the page as a guide while customizing the rest of your website!
We hope this template will help skyrocket your business or be a launching pad for a new one! Happy creating!
Click PREVIEW in the Showit app to easily copy color codes & grab fonts.
Site Style guide
Lightest neutral background
Light neutral background
Accent color used for links & interactive elements on hover
Secondary accent color (unused)
Used for text links
Accent color used for links & interactive elements
Used for all white text and backgrounds.
Used for all dark text on light backgrounds
Color palette index
Color Palette System
Font: Inter Light
Size: 14 px (Desktop) 12 px (Mobile)
Line Height: 1.6 u
Letter Spacing: 0.05 em
Letter Case: Normal
Alternate uses of this style:
Small paragraph text is used for disclaimer text under forms. In these instances, the paragraph text is italic and is bumped down to 12px on desktop and 10px on mobile.
Paragraph font style. 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 in reprehen.
Font: Ethic Serif Light
Large Size: 19 px (Desktop) | 16 px (Mobile)
Regular line height: 1.4
Letter Spacing: 0 em
Letter Case: Regular
Style: Italic
Preheader, Subheader, & Styled Links - Option 02
Font: Inter Medium
Regular Size: 12 px {Desktop) | 10 px (Mobile)
Large Size: 19 px (Desktop) | 12 px (Mobile)
Regular line height: 1.4
Button line height: 3.3 (Desktop) | 3.1 (Moblie)
Letter Spacing: .1 em
Letter Case: UPPERCASE
Preheader, Subheader, Buttons, & Styled Links - Option 01
19 px - Regular
16 px - Smaller
23 px - Regular
19 px - Smaller
Mobile size options:
Desktop size options:
Font: Ethic Serif Light
Line Height: 1.4 u
Letter Spacing: 0 em
Letter Case: Normal or Upper Case
Style: Normal or italicized
Heading (H3)
26 px - Large
19 px - Regular
Mobile size options:
60 px - XL
50 px - Large
37 px - Regular
31 px - Long headlines
Desktop size options:
Font: Ethic Serif Light
Line Height: 1.2 u (except for mobile 19px font size, where it's 1.4 u)
Letter Spacing: 0 em
Letter Case: Normal or Upper Case
Style: Normal or italicized
Heading (H2)
31 px - Regular
26 px - Smaller
Mobile size options:
97 px - Extra large
60 px - Large
50 px - Regular
37 px - Long headlines
Desktop size options:
Font: Ethic Serif Light
Line Height: 1.2 u (Normal) | 1 u (Uppercase)
Letter Spacing: 0 em
Letter Case: Normal or Upper Case
Style: Normal or italicized
Page Title (H1)
Typography
Commercial
- 22px desktop
- 17px mobile
- 35px desktop
- 28px mobile
Portfolio Listing
- 35px desktop
- 28px mobile
- 14px desktop
- 11px mobile
Button Spacing
Wedding Photography
Madison Avenue
New york, NY
- 7px of spacing between black border and edge of white box (all sides)
- 28px of spacing between black border and main text content.
- 11px of spacing beween main header and pre/sub headers
- 17px of spacing between headers and styled link.
Mobile
- 9px of spacing between black border and edge of white box (all sides)
- 56px of spacing between black border and main text content.
- 22px of spacing beween main header and pre/sub headers
- 35px of spacing between headers and styled link.
Desktop
Easily reference common spacing patterns.
Spacing Cheat Sheet
320 px
198 px
122 px
75 px
46 px
28 px
17 px
11 px
7 px
Use these blocks to determine horizontal and vertical spacing between elements on Mobile.
Mobile Golden Ratio Values
631 px
390 px
241 px
149 px
Used for page side margins
92 px
Used for page side margins
56 px
35 px
22 px
14 px
9 px
Use these blocks to determine horizontal and vertical spacing between elements on desktop.
Desktop Golden Ratio Values
The grids and spacing in this template is based on the golden ratio. You can find the golden ratio of a number by dividing or multplying it by 1.618.