MHM Brand Kit - Core Reference

Universal components and utilities for all MHM websites. Based on brand-kit-base.css

1. Foundation & Typography
2. Buttons
3. Cards
4. Containers & Sections
5. Grid Systems
6. Badges & Chips
7. Forms
8. Dividers
9. Images & Media
10. Logos
11. Colour Swatches
12. Alerts & Notes
13. Spacing Utilities
14. CSS Variables Reference

1. Foundation & Typography

Headings (H1-H6)

Classes: h1-h6 or .mhm-h1 through .mhm-h6

Heading 1 - The Quick Brown Fox

Heading 2 - The Quick Brown Fox

Heading 3 - The Quick Brown Fox

Heading 4 - The Quick Brown Fox

Heading 5 - The Quick Brown Fox

Heading 6 - The Quick Brown Fox

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- or use classes -->
<div class="mhm-h1">Heading 1</div>

Display Headings (Extra Large)

Classes: .mhm-display-xl, .mhm-display-lg, .mhm-display-md

Display XL - Hero Title

Display LG - Big Statement

Display MD - Large Heading

<div class="mhm-display-xl">Display XL</div>
<div class="mhm-display-lg">Display LG</div>
<div class="mhm-display-md">Display MD</div>

Body Text Variants

Classes: p, .mhm-lead, .mhm-small, .mhm-caption, .mhm-overline

Regular paragraph text. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lead text - Larger, introductory paragraph that draws attention.

Small text - For fine print or secondary information.

Caption text - Even smaller for image captions or annotations.

Overline - Section Label

<p>Regular paragraph</p>
<p class="mhm-lead">Lead text</p>
<p class="mhm-small">Small text</p>
<p class="mhm-caption">Caption text</p>
<p class="mhm-overline">Overline</p>

Links

Classes: a, .mhm-link, .mhm-link-subtle

Standard link with underline

Link styled with .mhm-link class

Subtle link (muted, no underline until hover)

<a href="#">Standard link</a>
<span class="mhm-link">Link class</span>
<a href="#" class="mhm-link-subtle">Subtle link</a>

Lists

Elements: ul, ol

Unordered List

First item in the list
Second item with more text
Third item
Fourth item

Ordered List

First numbered item
Second numbered item
Third numbered item
Fourth numbered item

<ul>
    <li>List item</li>
    <li>List item</li>
</ul>

<ol>
    <li>Numbered item</li>
    <li>Numbered item</li>
</ol>

2. Buttons

Button Variants

Base: .mhm-btn | Variants: .mhm-btn-primary, .mhm-btn-secondary, .mhm-btn-accent, .mhm-btn-ghost

<button class="mhm-btn mhm-btn-primary">Primary</button>
<button class="mhm-btn mhm-btn-secondary">Secondary</button>
<button class="mhm-btn mhm-btn-accent">Accent</button>
<button class="mhm-btn mhm-btn-ghost">Ghost</button>

Button Sizes

Classes: .mhm-btn-sm, .mhm-btn (default), .mhm-btn-lg

<button class="mhm-btn mhm-btn-primary mhm-btn-sm">Small</button>
<button class="mhm-btn mhm-btn-primary">Default</button>
<button class="mhm-btn mhm-btn-primary mhm-btn-lg">Large</button>

Pill Button (Full Border Radius)

Class: .mhm-btn-pill

<button class="mhm-btn mhm-btn-primary mhm-btn-pill">Pill Button</button>

Link Buttons

Apply button classes to <a> tags

Link as Button Call to Action

<a href="#" class="mhm-btn mhm-btn-primary">Link as Button</a>

3. Cards

Basic Card

Class: .mhm-card

Card Title

This is a basic card with default styling. It includes padding, border radius, and a subtle border.

<div class="mhm-card">
    <h3>Card Title</h3>
    <p>Card content here...</p>
</div>

Elevated Card (with shadow & hover)

Class: .mhm-card-elevated

Elevated Card

This card has a shadow and lifts on hover. Perfect for interactive elements.

<div class="mhm-card mhm-card-elevated">
    <h3>Elevated Card</h3>
    <p>Hover me!</p>
</div>

Accent Card (coloured background)

Class: .mhm-card-accent

Accent Card

This card uses the accent colour with white text. Great for featured content.

Learn More →

<div class="mhm-card mhm-card-accent">
    <h3>Accent Card</h3>
    <p>Featured content</p>
</div>

Primary Card (brand colour background)

Class: .mhm-card-primary

Primary Card

This card uses the primary brand colour with white text.

Get Started →

<div class="mhm-card mhm-card-primary">
    <h3>Primary Card</h3>
    <p>Important content</p>
</div>

Outline Card (transparent with border)

Class: .mhm-card-outline

Outline Card

This card has a transparent background with a thicker border.

<div class="mhm-card mhm-card-outline">
    <h3>Outline Card</h3>
    <p>Subtle style</p>
</div>

Card with Header, Body, Footer

Classes: .mhm-card__header, .mhm-card__body, .mhm-card__footer

This card uses semantic sections for header, body, and footer content.

<div class="mhm-card">
    <div class="mhm-card__header">
        <h3>Card Title</h3>
    </div>
    <div class="mhm-card__body">
        <p>Content here</p>
    </div>
    <div class="mhm-card__footer">
        <button>Action</button>
    </div>
</div>

4. Containers & Sections

Container (Max Width with Padding)

Class: .mhm-container

This container has a max-width of 1200px and responsive padding. It centers content on the page.

<div class="mhm-container">
    <!-- Your content here -->
</div>

Narrow Container (For Text-Heavy Content)

Class: .mhm-container-narrow

This narrow container has a max-width of 800px. Perfect for blog posts, articles, or text-heavy pages.

<div class="mhm-container-narrow">
    <!-- Article content -->
</div>

Section (Vertical Spacing)

Class: .mhm-section

Sections provide consistent vertical padding (top and bottom). This creates rhythm between page sections.

<section class="mhm-section">
    <!-- Section content -->
</section>

Note: Sections have responsive padding that adjusts on mobile devices.

Small Section (Reduced Vertical Spacing)

Class: .mhm-section-sm

Small sections have half the padding of regular sections. Use for tighter layouts.

<section class="mhm-section-sm">
    <!-- Compact section -->
</section>

5. Grid Systems

Two Column Grid

Class: .mhm-grid .mhm-grid-2

Column 1

Column 2

<div class="mhm-grid mhm-grid-2 mhm-gap-md">
    <div>Column 1</div>
    <div>Column 2</div>
</div>

Three Column Grid

Class: .mhm-grid .mhm-grid-3

Column 1

Column 2

Column 3

<div class="mhm-grid mhm-grid-3 mhm-gap-md">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</div>

Four Column Grid

Class: .mhm-grid .mhm-grid-4

Col 1

Col 2

Col 3

Col 4

<div class="mhm-grid mhm-grid-4 mhm-gap-md">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
</div>

Grid Gap Utilities

Classes: .mhm-gap-xs, .mhm-gap-sm, .mhm-gap-md, .mhm-gap-lg, .mhm-gap-xl

Gap XS (4px)

Item

Gap SM (8px)

Item

Gap MD (16px)

Item

Gap LG (24px)

Item

<div class="mhm-grid mhm-grid-3 mhm-gap-lg">
    <!-- Large gap between items -->
</div>

Responsive Behaviour: All grids automatically stack to single column on mobile devices (under 768px).

6. Badges & Chips

Badges (Small Labels)

Base: .mhm-badge | Variants: .mhm-badge-primary, .mhm-badge-secondary, .mhm-badge-accent, .mhm-badge-outline

New Featured Popular Coming Soon

<span class="mhm-badge mhm-badge-primary">New</span>
<span class="mhm-badge mhm-badge-secondary">Featured</span>
<span class="mhm-badge mhm-badge-accent">Popular</span>
<span class="mhm-badge mhm-badge-outline">Coming Soon</span>

Badges in Headlines

Latest Projects 12 New

Service Offering Premium

<h3>Latest Projects <span class="mhm-badge mhm-badge-accent">12 New</span></h3>

Chips (Rounded Pills)

Class: .mhm-chip

Architecture Interior Design Sustainable Bioclimatic EcoLuxe

<span class="mhm-chip">Architecture</span>
<span class="mhm-chip">Interior Design</span>

Use Case: Chips are perfect for tags, categories, or filter options.

7. Forms

Text Input

Classes: .mhm-label, .mhm-input, .mhm-form-hint

Your Name

Please enter your full name

<label class="mhm-label">Your Name</label>
<input type="text" class="mhm-input" placeholder="Enter your name">
<div class="mhm-form-hint">Please enter your full name</div>

Textarea

Class: .mhm-textarea

Message

<label class="mhm-label">Message</label>
<textarea class="mhm-textarea" rows="4"></textarea>

Select Dropdown

Class: .mhm-select

Service Type

<label class="mhm-label">Service Type</label>
<select class="mhm-select">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Complete Form Example

Contact Form

Full Name

Email Address

Service Interest

Message

Please provide as much detail as possible

8. Dividers

Solid Divider

Class: .mhm-divider

Content above divider

Content below divider

<hr class="mhm-divider">

Gradient Divider (Fades at Edges)

Class: .mhm-divider-gradient

Content above divider

Content below divider

<hr class="mhm-divider-gradient">

9. Images & Media

Responsive Image (with Border Radius)

Class: .mhm-img

<img src="..." alt="..." class="mhm-img">

Rounded Image (Large Border Radius)

Class: .mhm-img-rounded

<img src="..." alt="..." class="mhm-img-rounded">

Circle Image (Perfect Circle)

Class: .mhm-img-circle

<img src="..." alt="..." class="mhm-img-circle">

Aspect Ratio Images

Classes: .mhm-aspect-16-9, .mhm-aspect-4-3, .mhm-aspect-1-1

16:9 Ratio

4:3 Ratio

1:1 Square

<img src="..." class="mhm-img mhm-aspect-16-9">
<img src="..." class="mhm-img mhm-aspect-4-3">
<img src="..." class="mhm-img mhm-aspect-1-1">

10. Logos

Logo Mark (Square Icon)

Class: .mhm-logo-mark

<img src="logo-mark.png" alt="Logo" class="mhm-logo-mark">

Size: Controlled by CSS variable --mhm-logo-mark-size (default: 48px)

Full Logo (Horizontal)

Class: .mhm-logo-full

<img src="logo-full.png" alt="Company Logo" class="mhm-logo-full">

Max Width: Controlled by CSS variable --mhm-logo-full-width (default: 200px)

11. Colour Swatches

Colour Swatch (Default Size)

Classes: .mhm-swatch, .mhm-swatch__colour, .mhm-swatch__label, .mhm-swatch__value

Primary #5A8258

Secondary #C0D5C5

Accent #A98B5F

<div class="mhm-swatch">
    <div class="mhm-swatch__colour" style="background: #5A8258;"></div>
    <div class="mhm-swatch__meta">
        <span class="mhm-swatch__label">Primary</span>
        <span class="mhm-swatch__value">#5A8258</span>
    </div>
</div>

Swatch Size Variants

Classes: .mhm-swatch--small, .mhm-swatch--large

Small 48px

Default 80px

Large 120px

<div class="mhm-swatch mhm-swatch--small">...</div>
<div class="mhm-swatch">...</div>
<div class="mhm-swatch mhm-swatch--large">...</div>

12. Alerts & Notes

Alert Messages

Classes: .mhm-alert-info, .mhm-alert-success, .mhm-alert-warning, .mhm-alert-error

Information: This is an informational message for the user.

Success: Your changes have been saved successfully.

Warning: Please review this information before proceeding.

Error: There was a problem processing your request.

<div class="mhm-alert mhm-alert-info">Info message</div>
<div class="mhm-alert mhm-alert-success">Success message</div>
<div class="mhm-alert mhm-alert-warning">Warning message</div>
<div class="mhm-alert mhm-alert-error">Error message</div>

Note Box (Subtle Highlight)

Class: .mhm-note

Note: This is a subtle note box using the secondary brand colour. Perfect for tips, hints, or additional context.

<div class="mhm-note">
    <strong>Note:</strong> Your message here...
</div>

13. Spacing Utilities

Margin Top Utilities

Classes: .mhm-mt-0, .mhm-mt-xs, .mhm-mt-sm, .mhm-mt-md, .mhm-mt-lg, .mhm-mt-xl, .mhm-mt-2xl

No margin

Margin Top XS (4px)

Margin Top SM (8px)

Margin Top MD (16px)

Margin Top LG (24px)

Margin Top XL (32px)

<div class="mhm-mt-md">16px margin top</div>
<div class="mhm-mt-xl">32px margin top</div>

Margin Bottom Utilities

Classes: .mhm-mb-0, .mhm-mb-xs, .mhm-mb-sm, .mhm-mb-md, .mhm-mb-lg, .mhm-mb-xl, .mhm-mb-2xl

Margin Bottom MD (16px)

Margin Bottom LG (24px)

Margin Bottom XL (32px)

No margin

<div class="mhm-mb-md">16px margin bottom</div>

Padding Utilities

Classes: .mhm-p-0, .mhm-p-xs, .mhm-p-sm, .mhm-p-md, .mhm-p-lg, .mhm-p-xl, .mhm-p-2xl

Padding SM (8px)

Padding MD (16px)

Padding XL (32px)

<div class="mhm-p-md">16px padding all sides</div>

14. CSS Variables Reference

All Available CSS Variables

These variables are dynamically set by your active brand slot in the Brand Kit plugin.

Colours (15 variables)

--mhm-primary #5A8258

--mhm-secondary #C0D5C5

--mhm-accent #A98B5F

--mhm-bg #F7F5F2

--mhm-text #222222

--mhm-card-bg #FFFFFF

--mhm-card-1 #FFFFFF

--mhm-card-2 #F9F9F9

--mhm-card-3 #F5F5F5

--mhm-card-4 #E8E8E8

--mhm-card-5 #E0E0E0

--mhm-card-6 #D8D8D8

--mhm-link #7A6317

--mhm-muted #6B7280

--mhm-border #E5E7EB

Typography (9 variables)

--mhm-heading-font Fraunces, Georgia, serif

--mhm-body-font Inter, system-ui, sans-serif

--mhm-base-font 16px

--mhm-heading-weight 600

--mhm-body-weight 400

--mhm-heading-style normal

--mhm-body-style normal

--mhm-line-height 1.6

--mhm-heading-line-height 1.2

Spacing (8 variables)

--mhm-space 16px

--mhm-space-xs 4px (0.25×)

--mhm-space-sm 8px (0.5×)

--mhm-space-md 16px (1×)

--mhm-space-lg 24px (1.5×)

--mhm-space-xl 32px (2×)

--mhm-space-2xl 48px (3×)

--mhm-space-3xl 64px (4×)

Border Radius (4 variables)

--mhm-radius 12px

--mhm-radius-sm 6px

--mhm-radius-lg 20px

--mhm-radius-full 9999px

Logo Sizing (2 variables)

--mhm-logo-mark-size 48px

--mhm-logo-full-width 200px

Usage in Custom CSS: You can use these variables anywhere in your custom CSS like this:
background: var(--mhm-primary);
padding: var(--mhm-space-lg);
border-radius: var(--mhm-radius);

Next Steps

Now that you've reviewed the core components, check out your site-specific custom reference for ADS, CMS, and other individual sites.

MHM Brand Kit - Core Reference

Table of Contents

1. Foundation & Typography

Headings (H1-H6)

Heading 1 - The Quick Brown Fox

Heading 2 - The Quick Brown Fox

Heading 3 - The Quick Brown Fox

Heading 4 - The Quick Brown Fox

Heading 5 - The Quick Brown Fox

Heading 6 - The Quick Brown Fox

Display Headings (Extra Large)

Body Text Variants

Links

Lists

Unordered List

Ordered List

2. Buttons

Button Variants

Button Sizes

Pill Button (Full Border Radius)

Link Buttons

3. Cards

Basic Card

Card Title

Elevated Card (with shadow & hover)

Elevated Card

Accent Card (coloured background)

Accent Card

Primary Card (brand colour background)

Primary Card

Outline Card (transparent with border)

Outline Card

Card with Header, Body, Footer

Structured Card

4. Containers & Sections

Container (Max Width with Padding)

Narrow Container (For Text-Heavy Content)

Section (Vertical Spacing)

Small Section (Reduced Vertical Spacing)

5. Grid Systems

Two Column Grid

Three Column Grid

Four Column Grid

Grid Gap Utilities

Gap XS (4px)

Gap SM (8px)

Gap MD (16px)

Gap LG (24px)

6. Badges & Chips

Badges (Small Labels)

Badges in Headlines

Latest Projects 12 New

Service Offering Premium

Chips (Rounded Pills)

7. Forms

Text Input

Textarea

Select Dropdown

Complete Form Example

Contact Form

8. Dividers

Solid Divider

Gradient Divider (Fades at Edges)

9. Images & Media

Responsive Image (with Border Radius)

Rounded Image (Large Border Radius)

Circle Image (Perfect Circle)

Aspect Ratio Images

10. Logos

Logo Mark (Square Icon)

Full Logo (Horizontal)

11. Colour Swatches

Colour Swatch (Default Size)

Swatch Size Variants

12. Alerts & Notes

Alert Messages

Note Box (Subtle Highlight)

13. Spacing Utilities

Margin Top Utilities

Margin Bottom Utilities