Color
Using the specified colors is essential for maintaining consistency and brand identity across the website. These colors are carefully chosen to align with the brand’s message. Sticking to the approved color palette helps create a cohesive look and feel, making the site easily recognizable and trustworthy. Introducing new or unapproved colors can disrupt this consistency, confuse users, and weaken the overall brand image. Additionally, adding new colors can cause usability issues, such as poor contrast or readability, which may negatively impact the user experience. Therefore, it’s important to strictly adhere to the designated colors to maintain a unified, professional, and user-friendly website.
#08916B
#061844
#D0A153
#B3B7C2
#FFFFFF
Typography & Hierarchy
Typography plays a critical role in establishing hierarchy on a website, as it helps organize content and guides users through the information seamlessly. By changing things like font size or boldness, you can make certain text, like titles or buttons, stand out so people notice them first. For example, bigger, bold text might show a headline or a “Buy Now” button, while smaller text can provide extra details. This helps users follow along easily without getting confused. Good use of text styles makes the website not only look better but also feel easier to use, guiding visitors through the most important parts.
Text on Light Background
h1 heading (32px - 48px)
h2 heading (28px - 40px)
h3 heading (24px - 32px)
h4 heading (20px - 28px)
h5 heading (18px - 24px)
h6 heading (16px - 20px)
Body (15px – 18px)
Body Bold (15px – 18px)
Body Small (13px – 15px)
Text on Dark Background
h1 heading (32px - 48px)
h2 heading (28px - 40px)
h3 heading (24px - 32px)
h4 heading (20px - 28px)
h5 heading (18px - 24px)
h6 heading (16px - 20px)
Body (15px – 18px)
Body Bold (15px – 18px)
Body Small (13px – 15px)
Hierarchy Example
Hierarchy is important when writing website content because it organizes information in a way that helps users easily scan, understand, and engage with key points. Using headings, subheadings, and formatting like bullet points ensures that the most important content stands out and guides visitors through the page naturally. This improves readability, enhances user experience, and supports SEO by making content more accessible to both users and search engines. Without clear hierarchy, content can become confusing and harder to navigate, leading to a poor user experience.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. ¹ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit:
- Lorem ipsum dolor sit amet, consectetur.
- Lorem ipsum dolor sit amet, consectetur.
- Lorem ipsum dolor sit amet, consectetur.
¹ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Buttons/Hyperlink
Button Styles
Buttons are critical for usability and user conversion on a website, making it easy for visitors to engage with content or services. A few examples of where to use them include call to actions (CTA), navigation, and submission of forms. Use them sparingly. Below are common buttons used on the website and their interactions. Never change the way they look or interact.
Hyperlinks
Buttons are critical for usability and user conversion on a website, making it easy for visitors to engage with content or services. A few examples of where to use them include call to actions (CTA), navigation, and submission of forms. Use them sparingly. Below are common buttons used on the website and their interactions. Never change the way they look or interact.
Section Templates Examples
Section Templates are pre-designed blocks of content, like benefits sections, calls to action, or contact forms, which can be inserted into any page to speed up the design process. Below are a few examples of section templates.
Icon Cards
Member Directory
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Government Affairs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Members Resources
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
CEO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Jane Doe
CEO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
CEO
Parallax CTA
Stay Informed with Daily Newsletter
Sign up today for expert insights, best practices, and exclusive updates delivered to your inbox.