Media Proper Design System
Big Type,
Held Together
The visual system behind the 2026 site. Display type at scale, one disciplined accent, full-bleed bands, Raleway for every label, and a mono voice for every numeral.
Primitives live in theme/src/design-system.css. Every class is prefixed mp-
Typography
The Display Scale
Four steps, all fluid. Each hits its 1440 px design value at 1440 and never falls below a legible floor on a phone. Display type is Raleway 700, uppercase, tight leading, negative tracking. The closing phrase turns orange with <em>. That two-tone break is the system’s signature.
.mp-d1: clamp(2.75rem, 10vw, 9rem), 144px @1440, leading .84, tracking −.045em, hero only, once per page
Top Digital Agency
.mp-d2: clamp(2.125rem, 6.25vw, 5.625rem), 90px @1440, every section heading
See Our Clients’ Wins
.mp-d3: clamp(1.75rem, 4.44vw, 4rem), 64px @1440, pull quotes, sub-headings, sentence case
Easy to work with, and really understood what we wanted.
.mp-d4: clamp(1.5rem, 2.78vw, 2.5rem), 40px @1440, statements inside a band
A full-service digital agency in the heart of Media, PA.
Labels and numerals
Raleway 700 / .08em / uppercase carries every label (eyebrows, arrow links, captions, nav, footer headings, tags and status lines) in text-grade orange #c93509, or #ff8152 on navy, with no square mark. IBM Plex Mono is used only for figures: stats, scores and tables of numbers. No ordinal 01/02/03 counters on cards or steps; they read as machine-made. Together they are the small counterpoint that makes the display read as large. 12px is the floor, everywhere. A 144px display against a 12px label is a 12:1 jump on one screen; that relationship is the effect, not the typeface.
Section eyebrow, Raleway 700, no square mark
Caption label: photo and screenshot captions, 12px Raleway
Live data, updated Sep 13, 2026 (status lines)
Color
One Accent,
Used With Discipline
The orange is two colors, and mixing them up is an accessibility bug. #ff4713 is only 3.41:1 on white. It is a display and mark color. #c93509 is the text-grade orange at 5.25:1, and it is what mediaproper.com already ships on its buttons today.
primary
#ff4713
Display 40px+, rules, marks, and anything on navy. Never a filled-button ground behind white text.
primary-text
#c93509
Filled buttons, links, any orange under 24px on light. White on it is 5.25:1.
secondary
#0a2240
Navy. Headings, bands, photo captions. #fafafa on it is 16:1.
primary-600
#ff8152
Orange on navy only: 6:1 there, 2.6:1 on white. Shown in place.
base / contrast
#fafafa, #292929
The light ground and its body text. 13:1.
neutral, hairline
#f4f2f1, #cccccc
Panel fill, and the 1px rule that builds every grid in the system.
Actions
One Action Per Screen
Square, uppercase, tracked. Book a Call is the single call to action across the site. Nothing competes with it. The ground is the text-grade orange so the label clears AA at any size.
Layout
Full Bleed,
Never a Card in a Box
Sections run edge to edge and split 1:1 between image and type. Alternating .mp-split with .mp-split--flip builds the zig-zag the direction is built on. Grids are drawn with 1px hairlines: no shadows, no rounded cards.
.mp-split
Image and type, one to one.
Below 860px it stacks, media first. The flip modifier reverses the columns on desktop and is ignored on mobile so the reading order never inverts.
.mp-hairgrid: equal weight, always
Nine services on hairlines. No service outranks another: there is no featured cell, no shadow, no radius. The heading carries each cell. No ordinal numbers, no square mark.
Web Design
Descriptions sit on one baseline and the cell stretches to the tallest in the row.
Learn MoreWeb Maintenance
Two columns at 980px, one at 620px.
Learn MoreSEO & AEO
Hover shifts the ground, it does not lift the cell.
Learn More05: Data (.mp-stats)
Dividers get equal air on both sidesFigures render through mp2026_stat() shortcodes, never baked into a pattern: pattern PHP runs once at registration and would freeze the value.
.mp-live: the one moment of motion
Live data, updated Sep 15, 2026
Replaces the count-up. The figures are real and refresh nightly; a slow pulse beside the timestamp attests to that, where a number ticking up from zero merely performs. The dot is round. Still under prefers-reduced-motion. Static example here. On the homepage the stamp is live via Live data, updated Oct 17, 2026 at 2:31 AM EDT.
Retained mechanics
Motion & Infographics
The animated SVG module is kept in full and carried forward into this system. Every mark draws on scroll via .mp-motion → .is-inview, and degrades to its final state with no JS or under prefers-reduced-motion. Nothing ever rests in its empty pre-animation state. Contract and building blocks are documented in theme/inc/motion.php.
5.0 star
Google review rating
95%
Client retention rate
92
avg Lighthouse score
210
organizations served
Each graphic draws itself in once as it scrolls into view, then idles with a subtle pulse; the review stars twinkle. Hover the logo in the header/footer for the same treatment on the brand mark. All motion is disabled under prefers-reduced-motion.
The Big-Type treatment (.mp-viz)
Same marks, this system’s frame.
The default mark sits in a 16px-radius card on a tinted ground with two drop shadows. Dropped into a Big-Type band it reads as a foreign object. Wrapping a row in .mp-viz squares the corners, replaces the card with a single hairline, and moves the numeral to mono with the display scale’s tracking. Opt-in by design: these marks already appear across roughly forty service and location pages, and those keep rendering exactly as they do today.
Use sparingly: a supporting accent inside a band, never a wall of marks as the main event.
Last synced Oct 17, 2026 at 2:31 AM EDT
Default treatment: the full gallery, unchanged
Stats-band cards (clean / de-glowed: homepage & landing bands)
Hero stat cards (soft glow: service intros; includes the network / cycle / clock motifs)
Core block styles
Editor Defaults
What an editor gets from the block inserter. These keep the previous system’s behavior so existing page content renders unchanged.
Preset type scale
3X-Large: H2, 3rem / 2.25rem min
2X-Large: H3, 2.5rem / 1.75rem min
Large: Lead, 1.25rem
Base: Default, 1rem. The quick brown fox jumps over the lazy dog.
MONO: Code / Numerals, 0.875rem 0123456789
Separators
List markers
- Circle marker list
- Second item
- Square marker list
- Second item