Branding Logo and Logomark Icon
Color Palette and Gradients
Global Colors
contrast
contrast-2
contrast-3
base
base-2
base-3
accent
accent-2
accent-3
accent-4
accent-5
accent-6
accent-7
accent-8
tint
tint-2
tint-3
white
Linear Gradients
accent-3 to accent-2
contrast to base-3
accent-6 to tint-2
accent to tint
Color Matrix and Accessibility Chart
| Colour | black #030303 | contrast #231f20 | contrast-2 #4f4c4d | contrast-3 #7b7979 | base #faa61a | base-2 #feedd1 | base-3 #fff9ef | accent #ce181e | accent-2 #a51318 | accent-3 #7c0e12 | accent-4 #0e8743 | accent-5 #0b6c36 | accent-6 #085128 | accent-7 #0040c1 | accent-8 #ffde58 | tint #fcefef | tint-2 #eef7f2 | tint-3 #edf2fb | white #fffefd |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| black #030303 | 4.8 : 1 | 10.3 : 1 | 17.9 : 1 | 19.7 : 1 | 15.6 : 1 | 18.4 : 1 | 18.9 : 1 | 18.4 : 1 | 20.5 : 1 | ||||||||||
| contrast #231f20 | 8.2 : 1 | 14.2 : 1 | 15.6 : 1 | 12.3 : 1 | 14.5 : 1 | 14.9 : 1 | 14.5 : 1 | 16.2 : 1 | |||||||||||
| contrast-2 #4f4c4d | 7.4 : 1 | 8.1 : 1 | 6.4 : 1 | 7.6 : 1 | 7.8 : 1 | 7.6 : 1 | 8.4 : 1 | ||||||||||||
| contrast-3 #7b7979 | 4.8 : 1 | ||||||||||||||||||
| base #faa61a | 10.3 : 1 | 8.2 : 1 | 5.5 : 1 | 4.7 : 1 | |||||||||||||||
| base-2 #feedd1 | 17.9 : 1 | 14.2 : 1 | 7.4 : 1 | 4.8 : 1 | 6.7 : 1 | 9.5 : 1 | 5.7 : 1 | 8.2 : 1 | 7.3 : 1 | ||||||||||
| base-3 #fff9ef | 19.7 : 1 | 15.6 : 1 | 8.1 : 1 | 5.3 : 1 | 7.4 : 1 | 10.4 : 1 | 6.2 : 1 | 9.0 : 1 | 8.0 : 1 | ||||||||||
| accent #ce181e | 4.8 : 1 | 5.3 : 1 | 5.0 : 1 | 5.1 : 1 | 5.0 : 1 | 5.5 : 1 | |||||||||||||
| accent-2 #a51318 | 6.7 : 1 | 7.4 : 1 | 5.9 : 1 | 6.9 : 1 | 7.1 : 1 | 6.9 : 1 | 7.7 : 1 | ||||||||||||
| accent-3 #7c0e12 | 5.5 : 1 | 9.5 : 1 | 10.4 : 1 | 8.2 : 1 | 9.7 : 1 | 10.0 : 1 | 9.7 : 1 | 10.8 : 1 | |||||||||||
| accent-4 #0e8743 | 4.6 : 1 | ||||||||||||||||||
| accent-5 #0b6c36 | 5.7 : 1 | 6.2 : 1 | 4.9 : 1 | 5.8 : 1 | 6.0 : 1 | 5.8 : 1 | 6.5 : 1 | ||||||||||||
| accent-6 #085128 | 4.7 : 1 | 8.2 : 1 | 9.0 : 1 | 7.1 : 1 | 8.4 : 1 | 8.7 : 1 | 8.4 : 1 | 9.4 : 1 | |||||||||||
| accent-7 #0040c1 | 7.3 : 1 | 8.0 : 1 | 6.3 : 1 | 7.5 : 1 | 7.7 : 1 | 7.5 : 1 | 8.3 : 1 | ||||||||||||
| accent-8 #ffde58 | 15.6 : 1 | 12.3 : 1 | 6.4 : 1 | 5.9 : 1 | 8.2 : 1 | 4.9 : 1 | 7.1 : 1 | 6.3 : 1 | |||||||||||
| tint #fcefef | 18.4 : 1 | 14.5 : 1 | 7.6 : 1 | 5.0 : 1 | 6.9 : 1 | 9.7 : 1 | 5.8 : 1 | 8.4 : 1 | 7.5 : 1 | ||||||||||
| tint-2 #eef7f2 | 18.9 : 1 | 14.9 : 1 | 7.8 : 1 | 5.1 : 1 | 7.1 : 1 | 10.0 : 1 | 6.0 : 1 | 8.7 : 1 | 7.7 : 1 | ||||||||||
| tint-3 #edf2fb | 18.4 : 1 | 14.5 : 1 | 7.6 : 1 | 5.0 : 1 | 6.9 : 1 | 9.7 : 1 | 5.8 : 1 | 8.4 : 1 | 7.5 : 1 | ||||||||||
| white #fffefd | 20.5 : 1 | 16.2 : 1 | 8.4 : 1 | 5.5 : 1 | 7.7 : 1 | 10.8 : 1 | 4.6 : 1 | 6.5 : 1 | 9.4 : 1 | 8.3 : 1 |
Typography Headlines and Text Sizes
Headline XXXL
Headline XXL
Headline XL
Headline H1
Headline H2
Headline H3
Headline H4
Headline H5
Headline H6
Headline Small
Headline Extra Small
Have Heart Two
Tagline
Text Default (GenerateBlocks)
Text Default (Gutenberg)
Text Small
Text Extra Small
Headlines Montserrat h1 900, h2 to h6 800
H1 – Lorem ipsum amet morbi dolor tortor eget mollis nostra.
H2 – Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper.
H3 – Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper auctor metus felis.
H4 – Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper auctor metus felis nibh velit tellus.
H5 – Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper auctor metus felis nibh velit tellus semper taciti nostra.
H6 – Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper auctor metus felis nibh velit tellus semper taciti nostra pharetra montes.
Body Text Inter 400
Lorem ipsum text link dolor sit amet sit ea sed diam commodo. Ut ipsum aliquyam magna sit feugiat consequat amet aliquyam dolore stet illum tempor et eirmod et tempor et accusam. Volutpat justo diam kasd ea lorem dolores sit blandit nonumy exerci dolor est at erat praesent stet consetetur. Amet dolores tempor ullamcorper wisi nulla et tempor et ut justo eos tempor sanctus.
Nihil dolores ad liber facer erat tempor dolore ea duo odio no ipsum placerat lorem rebum ad. Tempor kasd feugiat iriure. Ea lorem dolore et at no magna aliquip vero erat amet est nonumy veniam text link sit lobortis labore dolor justo. Ut accusam invidunt velit sanctus diam dolore laoreet lorem feugait magna amet dolor invidunt consetetur et. Dolor dolor nibh nostrud ut dolore eos.
- Black lorem ipsum amet elit morbi dolor tortor
- Extra bold lorem ipsum amet elit morbi dolor tortor
- Semi bold lorem ipsum amet elit morbi dolor tortor
- Bold lorem ipsum amet elit morbi dolor tortor
- Medium lorem ipsum text link morbi dolor tortor
- Normal lorem ipsum amet elit morbi dolor tortor
- Light lorem ipsum amet elit morbi dolor tortor
- Extra light lorem ipsum amet elit morbi dolor tortor
- Thin lorem ipsum amet elit morbi dolor tortor
Containers and Section Padding
Section Padding XS
Section Padding Sm
Section Padding Md
Section Padding Lg
Section Padding XL
Button Variations and Sizes
Button Sizes
Double Buttons
Icons Backgrounds and Colors
Image Border Radius, Aspects Ratios and Shadows
Border Radius
Image Aspect Ratio
Box Shadows
WordPress Core Blocks
Block Quote
This is an example of a block quote. The block quote is a core WordPress block. The styling is achieved through custom CSS. Additional block quote designs could be created via Local Patterns for use throughout the website.
Citation Source
Lists
List Unordered
- Item 1
- Item 2
- Item 3
List Ordered
- Item 1
- Item 2
- Item 3
List w/ Icon
List No Marker
- Item 1
- Item 2
- Item 3
Simple Table
| First Name | Last Name | 800-555-1234 | hello@email.com |
| First Name | Last Name | 800-555-1234 | hello@email.com |
| First Name | Last Name | 800-555-1234 | hello@email.com |
| First Name | Last Name | 800-555-1234 | hello@email.com |
Styled Table
| First Name | Last Name | Phone | |
|---|---|---|---|
| First Name | Last Name | 800-555-1234 | hello@email.com |
| First Name | Last Name | 800-555-1234 | hello@email.com |
| First Name | Last Name | 800-555-1234 | hello@email.com |
| First Name | Last Name | 800-555-1234 | hello@email.com |
Forms Search, Contact and Subscription
Search Form
Contact Form
Subscription Form
Modal Window Types and Styles
Modal Confirmation
Modal Dialog
Modal Dialog Window
Modal Dialog Content
Lorem ipsum dolor sit amet esse stet. Labore vero sed eirmod consetetur lorem tation duo sed ipsum. Lorem consetetur tempor sit nonumy erat sit et dignissim invidunt at amet vero amet erat est ut.
Erat diam sed eirmod sit ad eu no et. Labore sit et hendrerit lobortis feugiat velit ut est ea ipsum at et dolores diam lorem te. Eos et rebum consetetur et sed sed et sit dolores elitr accusam ut magna gubergren lorem labore.
Modal Form
Fill out the form to get started.
Modal Slideout
Team Member
Team Member
Job Title
Lorem ipsum dolor sit amet facilisis lorem iriure illum eleifend in stet dolor eu labore autem. Dolores kasd commodo rebum aliquip rebum. Augue nonumy consetetur et et delenit iriure amet amet tempor amet amet diam eos ut. Dolor sed elitr esse sed molestie vel gubergren vero. Voluptua autem lorem tempor dolor stet et facilisi elitr sit. Veniam at lorem accusam aliquyam justo.
Labore praesent no adipiscing odio zzril velit ullamcorper id. Erat augue nisl sit. Lorem dolor imperdiet takimata eum tempor sed accusam dolore et accusam voluptua ipsum aliquam et ipsum. Iriure elitr diam ut invidunt ut erat est tempor et duis kasd. Takimata amet blandit et labore vero.
Vero elit diam dolor sed congue amet. Consequat invidunt vero autem nonummy dolores tation sanctus amet tempor eum duo. Et eu amet sadipscing minim. Hendrerit erat sanctus justo no commodo aliquam est erat. Nam takimata erat sed sed sadipscing esse. Stet duo nonumy dolore ad eum sit. Ut diam vero dolor nonumy est erat ipsum dolore est accusam sed blandit et no diam rebum est euismod. Gubergren diam at.