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, and a mono voice for every label and numeral.
Primitives live in theme/src/design-system.css · every class is prefixed mp-
01 — 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.
The mono voice
IBM Plex Mono 500 / .16em / uppercase carries every eyebrow, numeral, caption and attribution — 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 · ■ reserved for section headers only
Caption label — photo and screenshot captions, 12px mono
Last synced Sep 13, 2026 at 2:30 AM EDT — data stamps
02 — Colour
One Accent,
Used With Discipline
The orange is two colours, and mixing them up is an accessibility bug. #ff4713 is only 3.41:1 on white — it is a display and mark colour. #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.
03 — 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.
04 — 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 numeral differentiates repeated cells, per the brand rule — never the ■ square.
Web Design
Descriptions sit on one baseline and the cell stretches to the tallest in the row.
Learn More 02Web Maintenance
Two columns at 980px, one at 620px.
Learn More 03SEO & 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 · Last synced Sep 15, 2026 at 2:30 AM EDT
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. Square, because the system has no circles. Still under prefers-reduced-motion. Static example here — on the homepage the stamp is live via Live · Last synced Sep 26, 2026 at 2:30 AM EDT.
06 — 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 Sep 26, 2026 at 2:30 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)
07 — Core block styles
Editor Defaults
What an editor gets from the block inserter. These keep the previous system’s behaviour 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 / Labels · 0.875rem 0123456789
Separators
List markers
- Circle marker list
- Second item
- Square marker list
- Second item