Design System

Mobly Style Guide

The canonical tokens, type scale, spacing, and layout primitives every page should compose from. Written reference: DESIGN.md.

Color

Brand orange is #F26734. Use the alias in new CSS; it resolves to the canonical Webflow var.

Primary

Primary Orange #F26734 --brand-orange

Orange Light #F7956E --brand-orange-light

Orange Soft #FDDFD3 --brand-orange-soft

Orange Tint #FEF3EE --brand-orange-tint

Accent — Green

Sage #ADC6A5 --sage

Sage Light #BDCFB7 --sage-light

Sage Tint #EDF3EB --sage-tint

Accent — Purple

Purple #C7B1C3 --purple

Purple Tint #EAE4E9 --purple-tint

Neutrals — Charcoal

Charcoal 900 #2B2B2B --charcoal-900

Charcoal 700 #4A4A4A --charcoal-700

Charcoal 500 #6E6E6E --charcoal-500

Charcoal 300 #A3A3A3 --charcoal-300

Charcoal 100 #E5E5E5 --charcoal-100

Backgrounds

White #FFFFFF --bg-white

Off-White #FAFAFA --bg-off-white

Warm Gray #F5F3F1 --bg-warm-gray

Typography

Headings & labels: Bricolage Grotesque. Body: Poppins. Always use these classes — never set font-size ad hoc.

.heading-h1 3rem · 1.2 · 700 · Bricolage Grotesque

The missing stack for your most expensive channel

.heading-h2 2.25rem · 1.1 · 600 · Bricolage Grotesque

The missing stack for your most expensive channel

.heading-h3 1.75rem · 1.15 · 500 · Bricolage Grotesque

The missing stack for your most expensive channel

.heading-h4 1.375rem · 1.3 · 500 · Bricolage Grotesque

Your most expensive channel has no system behind it

.body-large 1.125rem · 1.7 · Poppins

In-person generates a ton of data. The problem? It’s spread across badge scanners, spreadsheets, and venue portals.

.body-default 1rem · 1.6 · Poppins

In-person generates a ton of data. The problem? It’s spread across badge scanners, spreadsheets, and venue portals.

.body-small 0.875rem · 1.5 · Poppins

highest cost of any B2B channel

.text-label 0.875rem · 1.4 · charcoal-700

Without Mobly

.text-highlight weight 700 · orange

Problem

Spacing & sections

.section 4rem 1.25rem

.section-large-padding 8rem 1.25rem

.spacer-large 3rem

.spacer-xl 6rem

Layout primitives

Example: a content-3_col of content-cards, each with a heading-h4, body-default, and a highlight-card — the homepage "Problem" pattern.

Card title goes here

Body copy in body-default describing the point this card makes.

$811/lead

supporting stat label

content-card · off-white

The off-white modifier for alternating / nested cards.

content-card · orange

The dark orange card variant for emphasis blocks.

Buttons

Pulled from the homepage. .button is the canonical primary (orange, Bricolage Grotesque); add .is-large for hero size and .white for the inverse. Keep w-button for the Webflow reset.

.button.is-large.w-button — primary CTA

Get a demo Default button

.button.white.w-button — inverse (on dark)

Get a demo

.button-21.is-arrow.w-inline-block — text + arrow link

See Scout

.v3-customer-logo-grid-button(.green).w-button — small pills

See case study See video

Product-UI mockup cards

Lo-fi, airy product-UI mockups — clean white surfaces on a soft, light warm shadow, content suggested rather than rendered pixel-for-pixel. Orange is held back to a tinted icon tile and a single action per card; everything else stays calm and neutral. Compose with the .mockup-* primitives in native.css: .mockup-card (shell), .mockup-head + .mockup-tile (icon-tile header), .mockup-bar (browser chrome), .mockup-field, .mockup-chip, .mockup-btn, .mockup-table.

01 Describe the activation

A founders’ dinner on June 18 at Bottega, SF. Forty seats, RSVP required, smart-casual. Invite the West-coast founders list and the three partner funds…

Generating activation…

getmobly.com/e/founders-dinner

You’re invited

Founders’ Dinner

June 18 · 7:00 PM

Bottega, San Francisco

RSVP

Reserve your seat

Full name

Dana Whitfield

Work email

dana@northloop.io

Confirmation sent

Sent

Show this ticket at the door.

Founders’ Dinner

Seat 27 · June 18, 7:00 PM

MBLY-7F3A21

Reminders

Automated

7 days before

Save the date

Sent
1 day before

See you tomorrow

Sent
2 hours before

Doors open at 7

Scheduled

Check-in

Live

Scanning tickets · 2.1s avg

Dana Whitfield just now
Marcus Lee
Priya Nair

Add walk-in

Jordan Ellis

jordan@brightpath.com

Added to the Founders’ Dinner list

Founders’ Dinner Lead list

Synced

Name	Company	Source
Dana Whitfield	Northloop	RSVP
Marcus Lee	Vanta Labs	RSVP
Jordan Ellis	Brightpath	Walk-in
Priya Nair	Lumen	RSVP