Style guide for Meacon
01. Colour palette
These are your main brand colours, carefully selected to ensure visual consistency across your website. They include your button states, text colour, and two background options. Once you've selected a final font pairing, we'll combine these elements into your site design.
Primary
#
Main brand color – used for primary buttons and main calls to action.
Secondary
#
Support color – used for secondary buttons, accents, or subtle highlights.
Hover 1
#
Hover effect for primary buttons and interactive elements.
Hover 2
#
Hover effect for secondary elements or subtle on-hover transitions.
Text
#
Default body text color – used for paragraphs, headings, and general content.
Links
#
Used for links, icons, and standout details across the site.
Background Color 1
#
Primary background color for section backgrounds.
Background Color 2
#
Secondary background color for alternate sections.
02. Text styles
Typography is more than just text; it's a design element that balances clarity with style. Below, you’ll see the main text styles your website will use to keep information organized and easy to read. Each style has a purpose, creating a clear hierarchy that guides the reader’s attention.
- Heading 1 (H1): The main title for each page, designed to capture attention.
- Heading 2 (H2): Subheadings that divide sections under the main title.
- Heading 3 (H3): Smaller subheadings for further organization within sections.
- Body Text: The main content text, optimized for readability
H1 – Choosing Your Website's Look & Feel
H2 – Step 1: Font Style + Colour Palette
This preview shows how your website headings, body text, and lists will look using a specific font pairing and background colour.
You're seeing one of three font styles .
Please choose three favourite options based on what feels most "right" for your brand.
H3 – What's Being Shown
This layout includes:
- Heading levels (H1–H6)
- Paragraph and body text
- Bullet list styles
- Numbered list styles
This gives you a real-world preview of how fonts will look across your site.
H4 – What Happens Next
Once you've selected your top font + colour combo, we’ll move on to:
- Choosing the right images
- Finalising layout and structure
- Matching your brand tone throughout the site
H5 – Your Input Matters
Pick the three you like best. I’ll guide you through the rest.
H1 – Choosing Your Website's Look & Feel
H2 – Step 1: Font Style + Colour Palette
This preview shows how your website headings, body text, and lists will look using a specific font pairing and background colour.
You're seeing one of six options – 3 font styles × 2 colour backgrounds.
Please choose three favourite options based on what feels most "right" for your brand.
H3 – What's Being Shown
This layout includes:
- Heading levels (H1–H6)
- Paragraph and body text
- Bullet list styles
- Numbered list styles
This gives you a real-world preview of how fonts will look across your site.
H4 – What Happens Next
Once you've selected your top font + colour combo, we’ll move on to:
- Choosing the right images
- Finalising layout and structure
- Matching your brand tone throughout the site
H5 – Your Input Matters
Pick the three you like best. I’ll guide you through the rest.
H1 – Choosing Your Website's Look & Feel
H2 – Step 1: Font Style + Colour Palette
This preview shows how your website headings, body text, and lists will look using a specific font pairing and background colour.
You're seeing one of three font styles .
Please choose three favourite options based on what feels most "right" for your brand.
H3 – What's Being Shown
This layout includes:
- Heading levels (H1–H6)
- Paragraph and body text
- Bullet list styles
- Numbered list styles
This gives you a real-world preview of how fonts will look across your site.
H4 – What Happens Next
Once you've selected your top font + colour combo, we’ll move on to:
- Choosing the right images
- Finalising layout and structure
- Matching your brand tone throughout the site
H5 – Your Input Matters
Pick the three you like best. I’ll guide you through the rest.
H1 – Choosing Your Website's Look & Feel
H2 – Step 1: Font Style + Colour Palette
This preview shows how your website headings, body text, and lists will look using a specific font pairing and background colour.
You're seeing one of six options – 3 font styles × 2 colour backgrounds.
Please choose three favourite options based on what feels most "right" for your brand.
H3 – What's Being Shown
This layout includes:
- Heading levels (H1–H6)
- Paragraph and body text
- Bullet list styles
- Numbered list styles
This gives you a real-world preview of how fonts will look across your site.
H4 – What Happens Next
Once you've selected your top font + colour combo, we’ll move on to:
- Choosing the right images
- Finalising layout and structure
- Matching your brand tone throughout the site
H5 – Your Input Matters
Pick the three you like best. I’ll guide you through the rest.
H1 – Choosing Your Website's Look & Feel
H2 – Step 1: Font Style + Colour Palette
This preview shows how your website headings, body text, and lists will look using a specific font pairing and background colour.
You're seeing one of three font styles .
Please choose three favourite options based on what feels most "right" for your brand.
H3 – What's Being Shown
This layout includes:
- Heading levels (H1–H6)
- Paragraph and body text
- Bullet list styles
- Numbered list styles
This gives you a real-world preview of how fonts will look across your site.
H4 – What Happens Next
Once you've selected your top font + colour combo, we’ll move on to:
- Choosing the right images
- Finalising layout and structure
- Matching your brand tone throughout the site
H5 – Your Input Matters
Pick the three you like best. I’ll guide you through the rest.
H1 – Choosing Your Website's Look & Feel
H2 – Step 1: Font Style + Colour Palette
This preview shows how your website headings, body text, and lists will look using a specific font pairing and background colour.
You're seeing one of six options – 3 font styles × 2 colour backgrounds.
Please choose three favourite options based on what feels most "right" for your brand.
H3 – What's Being Shown
This layout includes:
- Heading levels (H1–H6)
- Paragraph and body text
- Bullet list styles
- Numbered list styles
This gives you a real-world preview of how fonts will look across your site.
H4 – What Happens Next
Once you've selected your top font + colour combo, we’ll move on to:
- Choosing the right images
- Finalising layout and structure
- Matching your brand tone throughout the site
H5 – Your Input Matters
Pick the three you like best. I’ll guide you through the rest.
03. Modules
Each component on your website, from buttons to blurbs, plays an essential role in guiding and engaging visitors. This section showcases the various modules that will be part of your site. Whether it’s a call to action encouraging the next step or a testimonial building trust, each element is designed to fit seamlessly with the website’s look and enhance user experience.
Button
Your Title Goes Here
In this layout, each blurb has an image at the top with descriptive text underneath. With three blurbs side by side, this layout is perfect for highlighting multiple features, services, or products in a compact, visually appealing way. The text below each image can be customized to provide brief, clear descriptions.
Your Title Goes Here
In this layout, each blurb has an image at the top with descriptive text underneath. With three blurbs side by side, this layout is perfect for highlighting multiple features, services, or products in a compact, visually appealing way. The text below each image can be customized to provide brief, clear descriptions.
Your Title Goes Here
In this layout, each blurb has an image at the top with descriptive text underneath. With three blurbs side by side, this layout is perfect for highlighting multiple features, services, or products in a compact, visually appealing way. The text below each image can be customized to provide brief, clear descriptions.
Your Title Goes Here
In this layout, each icon sits above a title and a brief description, with three icons placed side by side. This setup is ideal for highlighting key features or services, giving each one its own space to stand out. The text below each icon can be customized to provide clear, concise details that explain what each icon represents.
Your Title Goes Here
In this layout, each icon sits above a title and a brief description, with three icons placed side by side. This setup is ideal for highlighting key features or services, giving each one its own space to stand out. The text below each icon can be customized to provide clear, concise details that explain what each icon represents.
Your Title Goes Here
In this layout, each icon sits above a title and a brief description, with three icons placed side by side. This setup is ideal for highlighting key features or services, giving each one its own space to stand out. The text below each icon can be customized to provide clear, concise details that explain what each icon represents.
Number Counter
(For Statistics)
%
Your Title Goes Here
Your Title Goes Here
Your Title Goes Here
Form
FAQ's
Your Question Goes Here?
Your detailed answer goes here. This works like an accordion when you click on a question, the bar will open with the answer.
Your Question Goes Here?
Your detailed answer goes here. This works like an accordion when you click on a question, the bar will open with the answer.
Your Question Goes Here?
Your detailed answer goes here. This works like an accordion when you click on a question, the bar will open with the answer.