Mayfield Design System

HTML + CSS only. No build step, no JavaScript, no framework. Mobile-first; breakpoints at 768px and 1024px. Derived from Figma “Phase 1 Home & Republic Split Navigation” (1:1276).

01

Colour

--c-area
#69ff78

--c-republic
#e5ff00

--c-ink
#000000

--c-paper
#ffffff

--c-paper-alt
#f2f2f2 — unconfirmed

Components never reference --c-area or --c-republic directly; they read --c-accent. Setting data-zone="republic" on any element repoints --c-accent for that whole subtree.

02

Typography

Hero headline · vinila 400 · 39px · lh 100% · tracking -8%

MCR’s new green city district

--t-h1 · vinila 900

A new city district

--t-h2 · Vinila 900

Green from grit

--t-marquee · Vinila 900

24-Acre District

--t-body · galix-mono 500

Manchester has always been a city of revolution. Now a new green heart has grown in Mayfield.

--t-eyebrow / --t-micro · galix-mono 500

About Mayfield

11 Baring St.

Served from the Adobe Fonts kit anw5ghn. Headings are vinila 900 upright; the wordmark is vinila 900 italic — the only slanted type in the system. UI text is galix-mono 500. Use the Typekit slugs, not display names: "Galix Mono" does not resolve. The kit registers slanted faces as italic, so the CSS asks for italic rather than oblique.

03

Split navigation

44px bar · 52px hamburger well closed by a 30px hairline · 14px lead-in, 30px trail · 16px gaps. The link row exceeds 375px in the Figma, so on mobile it scrolls horizontally and the hamburger opens the full drawer. Above 768px the row sits out in full.

04

Buttons

Explore Learn more Visit Site Enquire now

05

Marquee banner

Track is duplicated and translated -50% for a seamless loop. Honours prefers-reduced-motion by freezing and centring. The asterisk is a stand-in — the real star vector still needs exporting from Figma.

06

Venue card

Scroll-snap rail below 768px (88% columns so the next card peeks), 3-up grid above. scroll-padding-inline keeps the first card on the section gutter.

07

Feature tile

  • Direct access to MCR City Centre’s most diverse green space

  • Bespoke courts for the UK’s fastest growing sport

  • A blossoming nightlife with dedicated arts spaces

  • A plethora of places to eat, drink, meet and relax

2-up on mobile, 4-up from 768px. The cast shadow is a blurred ellipse, matching the separate shadow node in Figma rather than a box-shadow.

08

Park data widget

In the park

Sunny 19°

Plan your visit

The live weather/date strip recurs in the hero and here. Wire both to one data source when the backend exists.

09

Pages

Mayfield Area home Republic