An Introduction To Your Style Guide.
This style guide page can be considered a brand guide for your website. This page is for design and revision purposes only and will not be published on your final site. On this page, you can use it see how Infinite Recovery’s 2026 brand will be applied across different design and user interface elements.
Style guides are build to give you a chance to review the design elements of a site before they are applied across the numerous pages of your final site. By revising and editing these elements before they populate the site, we can streamline the design and revision process.
If you have questions please email me at jake@wakegraphic.com or jake.wakefield@gmail.com.
Typography
Infinite Recovery uses Apple Garamond, a semi-condensed variation of Garamond for headers. For body copy, it uses Avenir. Note, as of 02/06, Preformated text does not show up and is not styled.
Colorful Text Highlight. CSS class=”gradient-highlight”. #539d27 to #059467 (50%) to #0e759 (100%)
Header 1 — Lorem ipsum dolor sit amet elit nullam vitae felis. Nulla interdum eu.
Lorem ipsum enean porta lorem ut tortor malesuada pellentesque. Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia curam.
Header 2 — Lorem ipsum dolor sit amet elit nullam vitae felis. Nulla interdum eu consectetur nisl venetais.
Lorem ipsum enean porta lorem ut tortor malesuada pellentesque. Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia curam.
Header 3 — Lorem ipsum dolor sit amet elit Lorem ipsum dolor sit amet elit nullam vitae felis. Nulla interdum eu consectetur nisl venetais.
Lorem ipsum enean porta lorem ut tortor malesuada pellentesque. Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia curam.
Header 4 — Lorem ipsum dolor sit amet elit Lorem ipsum dolor sit amet elit nullam vitae felis. Nulla interdum eu consectetur nisl venetais.
Lorem ipsum enean porta lorem ut tortor malesuada pellentesque. Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia curam.
Header 5 — Lorem ipsum dolor sit amet elit Lorem ipsum dolor sit amet elit nullam vitae felis. ipsum dolor sit amet elit nullam vitae felis. Nulla interdum eu consectetur nisl venetais.
Lorem ipsum enean porta lorem ut tortor malesuada pellentesque. Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia curam.
Header 6 — Lorem ipsum dolor sit amet elit Lorem ipsum dolor sit amet elit nullam vitae felis. dolor sit amet elit nullam vitae felis. Nulla interdum eu consectetur nisl venetais.
Lorem ipsum enean porta lorem ut tortor malesuada pellentesque. Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia curam.
Paragraph — Other elements and styling.
Bold Test Lorem ipsum Italics Test dolor sit Underline Test amet, consectetur Link Test adipiscing elit. Nullam vitae malesuada felis.
- Nunc justo magna,
- ultrices sed est et, bibendum ultrices leo. Aenean porta lorem ut tortor malesuada pellentesque.
- Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum eu orci leo. Quisque vel neque in dolor.
Aenean porta lorem ut tortor malesuada pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
- Aenean porta lorem ut tortor malesuada pellentesque.
- Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum eu orci leo. Quisque vel neque in dolor iaculis sodales. Suspendisse potenti
- Vestibulum eu orci leo. Quisque vel neque in dolor iaculis sodales. Suspendisse potenti.
Aenean porta lorem ut tortor malesuada pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Quote Text — Aenean porta italics test lorem ut underline test tortor malesuada link test pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum eu orci leo. Quisque vel neque in dolor iaculis sodales. Suspendisse potenti.
Aenean porta lorem ut tortor malesuada pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum eu orci leo. Quisque vel neque in dolor iaculis sodales. Suspendisse potenti.
Citation Styling — Citations are placed at the end of a page’s content with a numbered list to show links under a full-width 4px width dotted line. Links to citations are superscript.1
To Fill Highlight — This is an off-brand highlight color that highlights filler text that needs to be finalized content. This is controlled with the to-fill tag. This tag helps avoid filler text being published and should not appear on any published paged.
Website Colors
Colors for the website are functional colors based off of the brand green (#67aw3d) and the brand blue (#0091b3). Site-wide, only the brand blue, or blue/green gradient, is used as a link and button color. On color backgrounds links and buttons may be white.
Gradients
Blue Variants
Green Variants
Grey Variants
Technical Colors
Button Styling
Base Button Size is Large. Type is Default. Branded Button Style presets are Green (Used as a white button), Default, Blue, Dark Gray, and Light Gray. Do not use other Button Style presets. Dark Gray and Light Gray styles for use as inactive button. Button styles can only be used on the backgrounds they are shown on below.
Custom Post Types
These posts are managed by Avada Post Cards for styling and the Advanced Custom Fields Plugin.
Location Posts
Locations combine a custom post (location) with separate homepages. This is done to ensure the original permalink structure for location pages is unchanged from the previous build, preserving SEO efforts.
The Location custom post type is the central database for location info. This database is not searchable, unless called to a page or element.
Team Members
Post type is Team, slug is meet-our-team, in order to match the current URL structure. Post card style is Team List. Does have taxonomies (categories) but no archive. Featured images for team members should be 800px by 800px.
Text Testimonials
Post type is Testimonials, slug is testimonials, and post card style is Testimonial List. For easy indexing and editing, testimonials are listed by name, as their titles. Testimoniakls (video and text) have category taxonomies but no archive.
Blog (Post Card)
Blog features standard wp core category and tag taxonomies.
| Has Archive? | Yes |
| Taxonomies | Tag, Category |
FAQ
As each page has unique FAQs, each is built using the toggle element. Some styling is controlled by custom CSS.
Forms
Forms are controlled by Gravity Forms. Pending access to IR’s login.
Video Testimonials
Video testimonials are not included as a post type or post card. Videos should not be hosted on the site, as it uses a massive amount of bandwitch to serve up uncompressed video.
Call-to-Action and Button Elements that can be in called in page-by-page.

















