1-844-851-3622

Home Contact Sitemap Checkout
Home/Style Guide Print This Page

Page Style Guide – Overview

This Style Guide outlines the core design elements used across the website to ensure consistency, clarity, and a polished user experience. These standards apply to typography, buttons, and color usage throughout all pages.

Typography

Typography sets the tone and readability of the site. Our font styles are chosen for both professionalism and legibility across devices.

Headings (H1–H6):
- Used to structure content clearly and visually
- Bold and spaced appropriately for hierarchy

Paragraph Text:
- Clean and easy to read on all screen sizes
- Consistent font size and line height for body content
- Supports bold, italic, and links as needed

Buttons

Buttons are styled to be clear, clickable, and consistent, guiding users through key actions like submitting forms, navigating pages, or registering for events.

Colors

Our color palette is designed to reflect the CATAP brand while remaining accessible and professional.

This guide ensures all visual elements stay on-brand and consistent across every page, making the site look polished and feel intuitive.

Sample Title Text Using Heading 1

Sample Title Text Using Heading 2

Sample Title Text Using Heading 3

Sample Title Text Using Heading 4

Sample Title Text Using Heading 5
Sample Title Text Using Heading 6

General Sample Text

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy  foster collaborative thinking to further the overall value proposition.  Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

List Styles

  • Sample Item
  • Sample Item
  • Sample Item
  • Sample Item
  • Sample Item
  • Sample Item
  • Sample
  • Sample
  • Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample




Button Styles

Button styles can be used throughout the website. When creating a insert/edit a link you can select from 5 different types of button styling.

Default Primary
Secondary

Tertiary

Link

Sample Link








Button Styles that automatically detect if a document is linked:

There is a script designed to enhance document download links that are styled with the sui-sf-c-btn class. It specifically targets links that end with common document file extensions such as .pdf, .doc, .docx, .ppt, .pptx, .xls, and .xlsx. For each matching link, the script performs the following actions:

Link with Adobe PDF Link with PowerPoint
Link with Microsoft Excel

Tertiary



 

Site Colors

The following colors were used within the site, these can be used as a override on the text colors within the editor. 

Primary Colors


Main - Usage primary used links or buttons

#1B4489

Primary Alternative Colors


Dark- Alternative 
#F8D200