Headings
Heading 1 Page Title
Usage: Heading 1 is the largest header and is typically used as the page title.
Heading 2
Usage: H2 is the first level heading in the content area. When adding new content to pages or posts, this should be the top level heading and should be used to break up text into main sections.
Heading 3
Usage: H3 is the second level heading in the content area.
Heading 4
Usage: H4 is the third level heading in the content area.
Usage: H5 is the fourth level heading in the content area.
Heading 6
Usage: H6 is the fifth level heading in the content area.
Text Styles
Font Stack
New Spirit, Georgia, serif
Trade Goth Next LT Pro, sans-serif
Font Weights
New Spirit – 400, 400 italic, 500, 500 italic, 600, 600 italic
Trade Goth Next LT Pro – 400, 400 italic, 700, 700 italic
Served from Adobe Fonts, under Josh’s Adobe Account, Project ID: ypa2wbf
Intro Text
Vivamus imperdiet pharetra tempus. Duis cursus iaculis lectus, sed rutrum turpis sollicitudin sit amet.
Usage: The intro class should be used for introductory paragraphs on landing pages that need more visual prominence or need to be set apart in some way from the rest of the text. To apply an intro class, create a paragraph block and choose the “Introduction” style from the Styles sidebar.
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus nunc consequat mauris volutpat, eleifend accumsan metus tempor. Cras venenatis, urna in tincidunt maximus, nisi mauris cursus sem, quis volutpat ex nulla nec est. Mauris ornare orci diam, ut pretium eros tristique in. Donec massa mi, ultricies sit amet velit ut, semper vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.
Quote
Mauris eleifend sem id velit tincidunt, nec dapibus ex consectetur. Pellentesque dignissim vestibulum neque nec varius. Estibulum a varius metus. Quisque a ex ante. Morbi purus urna, tristique a cursus vel, dictum id felis. Proin nec tristique mi.
Lorem Ipsum, dolor semet
Usage: A quote block is used for quotations or to highlight a specific piece of content. A citation can be added below the quote, if necessary.
Separator
Usage: Also known as a horizontal rule, a separator defines a thematic break in a page.
Other
Usage: A hyperlink is used to link from one page to another, or to an image or document. Use the popup toolbar to add a link.
This is bold, this is italic, this is underlined
Usage: Italics can be used for added emphasis or to denote an article. Bold defines important text. Tip: Avoid using underline since it could be confused for a hyperlink.
This is small text and can be used for downplaying elements, like citations at the end of an article.
Lists
Bulleted List
- Risus ipsum maximus enim
- Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
- Sed sagittis dictum felis
Usage: Use the list block to create an unordered list.
Numbered List
- Risus ipsum maximus enim
- Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
- Sed sagittis dictum felis eu porttitor
Usage: Use the list block to create a numbered list.
Colors
Black
#363535
Dark Gray
#5C5356
Light Gray
#f6f1ee
Background Gray
#E7E6E6
White
#FFFFFF
Light Orange
#FFBF64
Beige
#F0E9DC
Dark Green
#2EA559
Green
#4BB972
Buttons
General Buttons for internal links
Adding Icons – External Site and Download
Use the button block’s sidebar option “Button Icon” to set icons
Others
Images
It is important that images are sized appropriately. They should be large enough to appear crisp, but small enough that they do not slow the site down unnecessarily. Many modern displays have a very high pixel density, sometimes referred to as “retina” display. To appear crisp on these displays, images need twice the normal resolution. Below are recommended sizes for images – with two sizes for each, a minimum size, and a recommended size (for high-res displays).
Secondary Page Top Corner Image
Minimum: 750px wide by 750px tall
Recommended: 1500px wide by 1500px tall
Homepage Section Image
Minimum: 700px wide by 700px tall
Recommended: 1400px wide by 1400px tall
Post / Page – Small Image
Minimum: 750px wide
Recommended: 1500px wide
Post / Page – Large Image
Minimum: 1200px wide
Recommended: 2400px wide
Case Study – 50% Image
Minimum: 600px wide by 600 tall
Recommended: 1200px wide by 1200px tall
Case Study – 100% Image
Minimum: 1400px wide by 933 tall
Recommended: 2400px wide by 1600px tall
Gallery Images
Minimum: 1000px wide by 666 tall
Recommended: 2000px wide by 1332px tall
Media & Text Block Image
Minimum: at least 550px wide / tall
Recommended: at least 1100px wide / tall
Staff Photos
Profile images should ideally be cropped square.
Minimum: 400px wide by 400px tall
Recommended: 800px wide by 800px tall
Client Logos
Crop white space from around images.
Minimum: 200px wide
Recommended: 400px wide
Custom Blocks
Details block (added in WP 6.3)
Hidden content that shows when you expand a Details block
