NCA Style Guide - National Candle Association

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.

Typography

H1 - Merriweather Bold - 48px

H2 - Merriweather Bold - 40px

H3 - Merriweather Bold - 32px

H4 - Open Sans Semi Bold - 28px

H5 - Open Sans Semi Bold - 24px

Subheading – Open Sans – 24px

Body Big – Open Sans Semi Bold – 20px

Body Bold – Open Sans Semi Bold – 16px

Body – Open Sans Regular – 16px

Body Small – Open Sans Regular – 12px

Hierarchy

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.

Hierarchy Example:

H3 - Merriweather Bold - 32px

Subheading – Open Sans – 24px morbi leo diam, efficitur sit amet enim sit amet, placerat feugiat purus. Duis iaculis bibendum justo, sit amet faucibus lectus vestibulum ut. Vestibulum nec tincidunt elit. Sed sodales dapibus est, nec eleifend orci bibendum sit amet. Nam ut sem odio. Nunc vulputate pharetra tortor. Duis vitae tortor id nisi ultricies sollicitudin ultrices nec nulla

Body – Open Sans Regular – 16px lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non orci ut quam porttitor fermentum et eget mauris. Donec nec nulla non nisi vulputate dictum id vitae odio. In in erat id nibh scelerisque bibendum. Sed id diam vestibulum, scelerisque neque ut, faucibus nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id fringilla quam, in ornare lectus. Integer fringilla imperdiet egestas. Ut ornare aliquet ex, sed commodo dui volutpat auctor. Mauris et nibh sit amet ipsum tempus cursus id eu ante.

H5 - Open Sans Semi Bold - 24px

Body – Open Sans Regular – 16px Donec vulputate sapien ut elit fringilla egestas. Maecenas porta vestibulum magna non semper. Morbi diam ligula, maximus at posuere ac, luctus vitae dolor. Aenean ac tortor et libero viverra eleifend. Donec et dictum sapien. Pellentesque laoreet, nisl eu egestas luctus, magna turpis mollis nisi, eget tincidunt turpis diam eget turpis. Morbi sit amet ex a sem placerat varius. Ut eros ex, porttitor nec ullamcorper nec, maximus id felis. Vivamus porttitor libero non sodales vehicula. Vestibulum eget sapien ut ante auctor faucibus. Praesent ac nunc ligula. Proin molestie turpis a tortor finibus, vel egestas ipsum tincidunt. Vestibulum sed vulputate sapien. Fusce fermentum nibh purus, congue volutpat nisi tempor ut. Aliquam libero ante, faucibus eget mollis vel, gravida eu tortor. Aenean risus augue, luctus molestie nunc non, euismod tempor nulla.

Donec vulputate:

Donec vulputate sapien ut elit fringilla egestas. Maecenas porta vestibulum magna non semper
Morbi diam ligula, maximus at posuere ac, luctus vitae dolor. Aenean ac tortor et libero viverra eleifend
Donec et dictum sapien. Pellentesque laoreet, nisl eu egestas luctus, magna turpis mollis nisi, eget tincidunt turpis diam eget turpis.
Morbi sit amet ex a sem placerat varius. Ut eros ex, porttitor nec ullamcorper nec, maximus id felis. Vivamus porttitor libero non sodales vehicula.

Body Small – Open Sans Regular – 12px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Color Palette

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.

#1F59CC

#E49B27

#3C3C3C

#3C3C3C - 80%

#F0F0F0

#FFFFFF

Buttons & Hyperlinks

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

Hyperlinks should be clear, accessible, and consistent throughout all digital experiences. They serve as navigational cues and must be styled to stand out without disrupting the visual hierarchy.

Learn More

Icons Style

Icons are essential visual elements that enhance usability, communicate meaning quickly, and support brand identity. Consistent iconography helps users navigate interfaces intuitively and reinforces design cohesion. Maintain a consistent stroke weight across all icons unless filled styles are used.

Imagery

Images should be high-quality, purposeful, and visually consistent across all platforms. Use sharp, well-composed visuals that reflect the brand’s tone and values, with standard aspect ratios and minimal editing. Avoid generic stock photos, distortion, or excessive filters. Maintain accessibility by including descriptive alt text and ensuring good contrast when overlaying text. Whether photographic or illustrative, images should support the content and enhance user engagement without distracting from the overall design.

Stick to standard ratios (e.g., 16:9 for banners, 1:1 for thumbnails).

Section Templates

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.

Call To Action

Heading - H3

There’s a special beauty and tranquility to candles, but a lighted candle is also an open flame, and a potential fire hazard if not carefully monitored.

Icon Cards

Member Directory

Find and connect with fellow members.

Safety Tips

Essential fire safety tips to protect lives and property.

Member Benefits

Enjoy exclusive perks and resources.

ASTM Standards

Access trusted industry guidelines.

FAQ's

What services do you offer?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh praesent tristique magna sit amet purus. Odio ut sem nulla pharetra diam sit amet nisl. Facilisi cras fermentum odio eu feugiat. Aenean

How much do your services cost?

What industries do you serve?

What services do you offer?

How much do your services cost?

What industries do you serve?