Style
Brand Colors
Website Palette
Solid Areas
#f29f05
hsl(39, 96%, 48%)
rgb(242, 159, 5)
#f28705
hsl(33, 96%, 48%)
rgb(242, 135, 5)
#bf4804
hsl(22, 96%, 38%)
rgb(191, 72, 4)
#006048
hsl(165, 100%, 19%)
rgb(0, 96, 72)
#592203
hsl(22, 93%, 18%)
rgb(89, 34, 3)
Note
If you are using a color picker, values might be modified by color management in your operating system, browser, picker software, or embedded color profiles in an image file.
Images or swatches from photoshop or illustrator can be affected by your color proof or document color settings. I used Internet sRGB to output png files that exactly matched the values here. Test your workflow!
To compare “apples with apples” all these swatches are generated by the hex color values coded as a background color.
https://www.w3schools.com/colors/colors_converter.asp was used to convert values.
Fonts
H1 Heading 1
H2 Heading 2
H3 Heading 3
H4 Heading 4
DISTINCTIVE CHARACTERS
pqPQO01li23456789!@#$&”flfi"
PARAGRAPH1 for Banners. 1.1em. Ideally between 45 and 75 characters long for readability
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
75 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
75 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
PARAGRAPH2 for Regular Text. 1em. Ideally between 45 and 75 characters long for readability
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
75 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
75 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
Bulleted List
Item
Item
Item
Item
Item
Numbered List
Item
Item
Item
Item
Item
PARAGRAPH3 for Small Print. 0.8em. Ideally between 45 and 75 characters long for readability
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
45 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
75 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
75 CHAR MEASURE
abcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvxwyzabcdefghijklmnopqrstuvx
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac turpis ac ligula ornare lacinia et ut leo. Integer libero mauris, imperdiet at lobortis nec, sollicitudin at neque. Integer a justo arcu. Donec eleifend suscipit dictum. Nunc tincidunt urna id odio semper rhoncus. Integer pulvinar lacus nec nulla malesuada, vitae congue ligula blandit. Sed eu dictum dui, eu elementum justo. Suspendisse dignissim posuere venenatis. Nam ut posuere magna, molestie ornare ipsum. Integer pulvinar sollicitudin scelerisque. Cras consequat odio at odio mattis, vel gravida nulla molestie.
BUILT IN THEMES
These themes are automatically generated from our choice of accent, light and dark colors.
Use the following sections as references for global settings.
Lightest 1
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Lightest 2
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Light 1
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Light 2
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Bright 1
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Bright 2
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Dark 1
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Dark 2
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Darkest 1
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.
Darkest 2
Here's short 286 character, 58 word, 3 sentence example of text set as a paragraph 3. This is the smallest default font size 0.8 rem, 0.8 of 16px roughly equal to 13px. We are aiming to keep the contrast in each color variant above 4.5 for an AA rating or even better above 7.0 for a AAA rating.
Image Styles
Colors and backgrounds will vary with section background.