Brand & Design System

MMI Events Live Brand Guide

The official reference for the MMI Events Live visual system — logo, color, typography, components, spacing and Divi-ready tokens, taken directly from the live website.

01 — Foundation

Brand overview

MMI Events Live creates AI-powered interactive event experiences for trade shows, conferences, corporate events and brand activations nationwide.

Visual direction

Premium, modern, experiential and technology-focused.

A dark editorial canvas lets real event imagery and warm coral highlights carry the brand. Personality: confident, inventive, polished, welcoming.

Design characteristics

—Dark navy foundation
—Large but controlled typography
—Strong white text
—Soft coral/peach CTA
—Blue/navy card surfaces
—Subtle borders
—Rounded cards
—Image-led experiences
—Clean compact UI
—Minimal, restrained animation

02 — Logo

Logo system

Always use the original MMI artwork below. Never redraw, recolor, stretch or add effects.

Primary — light on dark

Used in the header and footer on navy backgrounds.

Secondary — dark on light

For white, sand or photographic light backgrounds.

Clear space

Keep space equal to the height of the logo's "M" on all sides.

Minimum size

Digital: 24px tall minimum (header uses 40–48px). Print: 0.5in.

Avoid

×Stretching or skewing
×Recoloring or gradients
×Drop shadows or glows
×Dark logo on navy
×Busy, low-contrast photos

03 — Color

Color system

Ten core tokens from the live dark theme. HEX and RGB are exact conversions of the site's oklch values.

Primary Background

Page background, footer, final CTA panel.

HEX#0E1523

RGB14, 21, 35

Token--background

Secondary Background

Header bar, alternating sections, card base.

HEX#16233B

RGB22, 35, 59

Token--ink

Card / Surface

Raised surfaces, hover fills, inputs.

HEX#202B3F

RGB32, 43, 63

Token--accent

Primary Text

Headings, primary copy, logo on dark.

HEX#F9FAFB

RGB249, 250, 251

Token--foreground

Secondary Text

Body paragraphs, descriptions, footer links.

HEX#B2B7C1

RGB178, 183, 193

Token--muted-foreground

Primary CTA (Blush Coral)

Buttons, eyebrows, active nav, highlights.

HEX#DFAE9D

RGB223, 174, 157

Token--primary

Secondary Accent (Clay)

Deep accent on light sections and illustrations.

HEX#8E523A

RGB142, 82, 58

Token--clay

Supporting Accent (Gold)

Stars, ratings, subtle warm details.

HEX#C9B37E

RGB201, 179, 126

Token--gold

Warm Sand

Light-theme surfaces and soft dividers.

HEX#E8E3DD

RGB232, 227, 221

Token--sand

Border / Divider

Card outlines, section rules, header divider.

HEX#FFFFFF1F

RGB255, 255, 255 @ 12%

Token--border

04 — Typography

Archivo, in five weights

Archivo is the single typeface for display and body text across the site.

FamilyArchivo

Stack"Archivo", ui-sans-serif, system-ui, sans-serif

SourceGoogle Fonts — wght 400;500;600;700;800

400

Regular

500

Medium

600

Semi-Bold

700

Bold

800

Extra-Bold

Responsive type scale

Sizes computed from each clamp() at desktop 1440px, tablet 768px and mobile 375px. Where a clamp hits its minimum below desktop, tablet and mobile share that floor — that is how the live CSS behaves.

H1 — Hero

Homepage hero headline

Interactive Event Experiences

FamilyArchivo

Weight800

Line height1.05

Letter spacing-0.025em

Desktop64px

Tablet38.4px

Mobile35.2px

Clampfont-size: clamp(2.2rem, 5vw, 4rem);

Display

.text-display (inner page heroes)

Experiences people remember

FamilyArchivo

Weight600

Line height0.98

Letter spacing-0.035em

Desktop89.3px

Tablet47.6px

Mobile41.6px

Clampfont-size: clamp(2.6rem, 6.2vw, 5.6rem);

H2 — Section

.text-section

Event Formats We Elevate

FamilyArchivo

Weight600

Line height1.04

Letter spacing-0.03em

Desktop56px

Tablet32px

Mobile32px

Clampfont-size: clamp(2rem, 4vw, 3.5rem);

H3 — Title

.text-title

Trusted by Leading Brands

FamilyArchivo

Weight600

Line height1.15

Letter spacing-0.02em

Desktop28.8px

Tablet21.6px

Mobile21.6px

Clampfont-size: clamp(1.35rem, 2vw, 1.9rem);

H4 — Card Title

Experience / format card titles (1.35rem)

AI Sketch Robot

FamilyArchivo

Weight600

Line height1.375

Letter spacing0

Desktop21.6px

Tablet18.4px

Mobile18.4px

Clampfont-size: clamp(1.15rem, 1.8vw, 1.35rem);

Footer & panel headings

Nationwide coverage

FamilyArchivo

Weight600

Line height1.3

Letter spacing-0.01em

Desktop19.2px

Tablet16.8px

Mobile16.8px

Clampfont-size: clamp(1.05rem, 1.4vw, 1.2rem);

Small sub-headings

Event details

FamilyArchivo

Weight700

Line height1.35

Letter spacing0

Desktop15.8px

Tablet15.2px

Mobile15.2px

Clampfont-size: clamp(0.95rem, 1.1vw, 1.05rem);

Lead / Intro Body

Hero & section intros (1.05rem)

We design AI-powered activations that turn attendees into participants.

FamilyArchivo

Weight400

Line height1.625

Letter spacing0

Desktop18px

Tablet16px

Mobile16px

Clampfont-size: clamp(1rem, 1.3vw, 1.125rem);

Normal Body

body (1.0625rem)

Every experience is fully branded, staffed and delivered nationwide.

FamilyArchivo

Weight400

Line height1.625

Letter spacing0

Desktop17px

Tablet15.7px

Mobile15.7px

Clampfont-size: clamp(0.98rem, 1.2vw, 1.0625rem);

Small Body

Card copy, footer links (0.95rem)

Available in 31 cities across the United States.

FamilyArchivo

Weight400

Line height1.5

Letter spacing0

Desktop14.4px

Tablet14px

Mobile14px

Clampfont-size: clamp(0.875rem, 1vw, 0.95rem);

Navigation

Header menu items

Experiences

FamilyArchivo

Weight500

Line height1

Letter spacing0.14em

Desktop12.5px

Tablet11.5px

Mobile11.5px

Clampfont-size: clamp(0.72rem, 0.9vw, 0.78rem);

Button

Pill buttons

Get a Quote

FamilyArchivo

Weight700

Line height1

Letter spacing0.16em

Desktop12.5px

Tablet11.5px

Mobile11.5px

Clampfont-size: clamp(0.72rem, 0.9vw, 0.78rem);

Label / Eyebrow

.text-eyebrow

AI-Powered Event Activations

FamilyArchivo

Weight600

Line height1.2

Letter spacing0.22em

Desktop11.5px

Tablet10.6px

Mobile10.6px

Clampfont-size: clamp(0.66rem, 0.8vw, 0.72rem);

05 — Components

Buttons, cards, navigation & labels

Buttons

Get a Quote View ExperiencesHover state

FontArchivo 700, 0.78rem, 0.16em, uppercase

Padding16px 32px

Radius9999px

Primary bg / text#DFAE9D / #0E1523

Secondary border1px solid rgba(249,250,251,.3)

Transitionall 300ms ease

✦

Content card

Radius 28px, 1px border, card/60 fill, 28px padding. Border warms to coral on hover.

Experience card

Image + bottom navy gradient, 24px radius.

Image card

4:3 image, content below, no shadow.

Navigation

ExperiencesLocationsAboutGet a Quote

Items 0.78rem / 500 / 0.14em, 80% white; hover & active turn coral. CTA is a square coral outline that fills on hover.

Labels

Eyebrow01CategorySmall label

All labels use .text-eyebrow: 0.72rem, 600, 0.22em, uppercase.

06 — Spacing

Spacing system

An 4px-based Tailwind scale; sections step up from mobile to desktop.

Container width

max-w-[1280px], centered

1280px

Container gutter

px-5 mobile, md:px-10 tablet+

20px → 40px

Section padding

py-16 mobile, md:py-24 desktop

64px → 96px

Compact section

py-14 / md:py-20

56px → 80px

Card padding

p-7 / p-8

28px – 32px

Grid gap

gap-5 / gap-6

20px – 24px

Button padding

px-8 py-4

16px 32px

Content spacing

mt-3, mt-4, mt-6 between text blocks

12px / 16px / 24px

07 — Radius

Border radius

Feature panels

32px

Cards & images

24px – 28px

Icon tiles

16px

Inputs / small UI

4px

Buttons, pills, badges

9999px

08 — Imagery

Image treatment

Real event photography only. Images sit inside rounded, bordered frames; text over images always gets a navy gradient for contrast.

Radius

24px cards · 32px feature panels

Overlay

linear-gradient(to top, #0E1523 10%, transparent 75%)

Aspect ratios

4:3 cards · 3:4 portraits · 16:9 features

09 — Responsive

Responsive system

Mobile

< 768px

Single column, 20px gutters, hamburger menu, smallest type.

Tablet

768px – 1023px

md: 2-column grids, 40px gutters, intermediate type.

Desktop

≥ 1024px

lg: full navigation, 3–4 column grids, largest type.

Wide

≥ 1280px

xl: container caps at 1280px.

10 — Divi

Divi design tokens

Copy-ready values for rebuilding in WordPress + Divi (Theme Customizer → Global Colors / Fonts, and module Design tabs).

Global colors

Primary Background#0E1523

Secondary Background#16233B

Card / Surface#202B3F

Primary Text#F9FAFB

Secondary Text#B2B7C1

Primary CTA (Blush Coral)#DFAE9D

Secondary Accent (Clay)#8E523A

Supporting Accent (Gold)#C9B37E

Warm Sand#E8E3DD

Border / Divider#FFFFFF1F

Typography (desktop / tablet / mobile)

H1 — Hero64px / 38.4px / 35.2px · 800

Display89.3px / 47.6px / 41.6px · 600

H2 — Section56px / 32px / 32px · 600

H3 — Title28.8px / 21.6px / 21.6px · 600

H4 — Card Title21.6px / 18.4px / 18.4px · 600

H519.2px / 16.8px / 16.8px · 600

H615.8px / 15.2px / 15.2px · 700

Lead / Intro Body18px / 16px / 16px · 400

Normal Body17px / 15.7px / 15.7px · 400

Small Body14.4px / 14px / 14px · 400

Navigation12.5px / 11.5px / 11.5px · 500

Button12.5px / 11.5px / 11.5px · 700

Label / Eyebrow11.5px / 10.6px / 10.6px · 600

Buttons

FontArchivo

Size / weight12.5px / 700

Letter spacing0.16em

Padding16px 32px

Radius100px

Background#DFAE9D

Text#0E1523

Layout

Content width1280px

Gutter D / T / M40px / 40px / 20px

Section padding D / T / M96px / 96px / 64px

Card radius24px

Card padding32px / 28px

Breakpoints768px / 1024px / 1280px