What's actually live on the site

Lizzy Moffett Designs Style Guide

Every value here is pulled from your real, confirmed classes. Nothing borrowed, nothing leftover.

1
Section One · Color

Your real palette

LMD Purple

#5c076d

Jewel Green

#195542

Rose Blush

#9e5070

Rose Gold

#ad8d49

Warm White

#fdf6f6

Ink

#24022b

Background classes

Apply directly to any element's background.

Saturated

background-color-purple

background-color-jewel-green

background-color-blush

background-color-gold

background-color-gray

Light

background-color-purple-light

background-color-jewel-green-light

background-color-blush-light

background-color-gold-light

background-color-green (callout only, do not confuse with jewel-green-light)

Heads up: background-color-black still has one broken reference at the base class level that needs a manual fix in the Style Manager, swap its swatch to #24022b to match Ink. Two of its combo versions are already fixed.

Tested pairings, not just swatches

This is a static page, so it cannot calculate contrast live the way a Relume generator does. These pairings are documented instead, based on what your real classes already combine correctly across the site.

White text on Purple

text-color-white + background-color-purple

White text on Ink

text-color-white + background-color-black

Ink text on Warm White

text-color-black + background-color-white

Ink text on Gray

text-color-black + background-color-gray

Don't: dark text on the purple or ink backgrounds, or white text on warm white or gray. Both fail for readability and neither combination appears anywhere on the live site.

2
Section Two · Type

heading-style-h1 through h6

Heading One — 3.5rem / 500

Heading Two — 2.5rem / 400

Heading Three — 2.3rem / 400

Heading Four — 2rem / 400

Heading Five — 1.5rem / 400

Heading Six — 1.25rem / 600

Two eyebrow treatments, two different jobs

Both are real, both usable. Reach for the one that fits the tone of the moment.

text-script

Handwritten, warm, personal. For eyebrow lines and in-card accents.

EYEBROW

Structured, confident, small-caps energy. For section labels and category tags.

3
Section Three · Buttons

button + is-secondary, is-small, is-alternate

button is-secondary is-small is-alternate

button 15 and button 20 have been swapped to standard classes on the About and Home pages, and are safe to remove.

Worth knowing before you build the next page

Two systems live on this site

1

Your Webflow classes

The system this style guide documents.

Most of your site is built with real Webflow classes, heading-style-h1 through h6, button with its modifiers, your spacing and container scale. This is what stays consistent, editable, and connected to your CMS across the whole site. Everything in the sections above belongs to this system.

2

Your custom embed pages

The style this page borrows for its own layout.

Story-driven pages like Two Day Build Process and The Way I Work use hand-coded HTML embeds instead of Webflow classes. Same brand colors and fonts, but its own inline styling, including the fully rounded pill button seen on The Way I Work, which is different from your standard button class. Reach for this system when a page needs a one-off layout that native Webflow sections cannot easily produce.

4
Section Four · Callouts

left-border, from the homepage hero

This is the left-border callout. Soft green background, 3px solid left border, square corners, no rounding. Used on the homepage hero for the client story pull-quote.

Classes: text-size-medium, background-color-green, left-border, text-weight-light

5
Section Five · Spacing

One consistent scale, start to finish

This replaces the padding-section-large duplicates, the custom1/2/3 one-offs, and the combo overrides that changed the same class name from section to section. One name, one value, everywhere.

tiny0.25rem · 4px
xsmall0.5rem · 8px
small1rem · 16px
medium1.5rem · 24px
large2rem · 32px
xlarge3rem · 48px
xxlarge4rem · 64px
xhuge6rem · 96px
xxhuge8rem · 128px

Use these for both padding and margin. Section spacing (the space above and below a full page section) should default to xlarge on mobile and xxlarge or xhuge on desktop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

6
Section Six · Cards & Badges

card + is-gradient, is-purple, is-green

Real Webflow classes now, built to match the gradient box look from the story pages. One base class plus a modifier instead of stacking a dozen utilities, same pattern as the button system.

Cards

card is-gradient

card is-purple

card is-green

Badge circles

badge-circle is-purple
badge-circle is-green