The shared classes, type scale, colour and spacing this site is built from. Every specimen below uses the real class, so what you see here is what the site renders.
Usage and files for logos.
Click here to download the logo package.
Here are the Avatar options.
Click here to download the logo package.
Every chip below is painted from its Webflow variable, so this swatch set updates itself if a variable changes. The swatch/ names are inherited from the original template; mxt/ is ours.
Cloud
#ffffff · body text
Ohio Sky (Bad Day)
#f4f0ea · page background
Mustard
#f6d853 · Button Dot
Sunshine
#F9f359 · marker
Artisinal Ice Cream
#ddc0f4 · footer, bc-purple
Ohio Sky (Good Day)
#5e88ff · card buttons
Ketchup
#f7403b · bc-red
Burnt Hot Dog
#4c1010 · Accent
Racoon
#000000 · Body text
Body copy is Main Paragraph plus a size combo. The base class is the 18px size — there is no 18 combo. Add font-serif for the serif face.
Click here to download the handwritten font.
fn-title · headline
Mxt_handwriting-Regular
Main Paragraph · 45
Freight Sans Pro - Normal
Main Paragraph · 30
Freight Sans Pro - Normal
Main Paragraph · 24
Freight Sans Pro - Normal
Main Paragraph · Big (20)
Freight Sans Pro - Normal
Main Paragraph · base 18
Freight Sans Pro - Normal
Main Paragraph · 16
Freight Sans Pro - Normal
Main Paragraph · 14
Freight Sans Pro - Normal
+ font-serif
Freight Text Pro - Normal
Main Button plus a colour combo, always inside Button Wrapper — the wrapper supplies the 32px top spacing, and it is the only place a top margin is allowed. Hover is opacity .75 plus a 2px lift, which works on every colour; a hover background colour would not.
The mg-* classes set margin-bottom, so they go on the upper element and push the next one down. Never add margin-top. All box values are multiples of 4.
Converting an old margin-top: round up to the nearest step. Only gaps above 64 get a new step, named in words continuing the scale. If the base class sets its own margin-bottom, put the value on the combo chain itself or the mg-* silently loses.
The page skeleton every interior page follows, the four Webflow breakpoints, and the hover treatment applied site-wide.
Page skeleton
Body ├ Navbar ├ Section [Hero Section, Sub] │ └ Full Container ├ Section [Section] │ └ Full Container ├ Section > CTA Panel ├ Cast Section └ Footer
Breakpoints
| main | ≥ 992px |
| medium (tablet) | ≤ 991px |
| small (mobile landscape) | ≤ 767px |
| tiny (mobile portrait) | ≤ 478px |
| PSD → CSS | psd_px ÷ 2.6667 |
| 4-point grid | round boxes to 4px; type exempt |
Hover
| Main Button | opacity .75 + 2px lift |
| nav-link, footer link | opacity .6 |
| fn-card, polaroid, st-card | lift 6px, 250ms |
| archive / podcast rows | tint rgba(17,17,17,.04) |
Shared containers
| Full Container | 90% wide, max 1280, centred |
| Section | 148px top and bottom |
| Hero Section + Sub | auto height, 248px top |
| Main Grid | shared grid + a page combo |
| Content Wrapper | flex column, align start |
| Button Dot | 33px yellow circle |
