Developer style guide
Shared foundations, semantic patterns and production modules for MediaTown.co.
Design-system version: draft-20260815T134600Z · Review required
Colours
Primary
--client-color-primary
#161A16
Background
--client-color-background
#FFFFFF
Secondary
--client-color-secondary
#F2F2F2
Accent
--client-color-accent
#95BF47
Border
--client-color-border
18% primary
Muted text
--client-color-muted-text
48% primary
Typography
Inter Tight is used for headings. Instrument Sans supports the rest of the client system, while paragraphs retain the HubSpot theme treatment.
A clear point of view
Built to stay useful
Systems over one-offs
Designed for real teams
Shared by every module
Accessible by default
MediaTown combines strategy, design and technology to build digital systems that continue creating value after launch.
Consistency makes every future page faster to build and easier to trust.
Spacing, borders and depth
4812162024324048648096Square
0Card
.375remSoft
.875remPill
999pxCard shadow
shadow-cardComponents
Buttons and links
Badges
Form controls
A reusable content card
Cards use the shared surface, border, radius and shadow tokens. Unique layouts belong in module CSS.
MediaTown modules
These examples render the same HubSpot modules available to page editors.
Secondary Hero 2 Col with SubText
Audience Cards with Links
Blog Articles - List
Build rules
Semantic HTML
Use native headings, paragraphs, lists, links, buttons, forms and controls according to their meaning.
One shared system
Load the central client stylesheet once. Module CSS is reserved for genuinely unique layout and behaviour.
Scoped modules
Keep client rules beneath .client-mediatown so embedded modules cannot affect surrounding pages.
Accessible motion
Preserve keyboard focus, avoid nested controls and respect the shared reduced-motion treatment.