Developer style guide
Shared foundations, semantic patterns and production modules for MediaTown.co.
Design-system version: draft-20260815T134600Z · Reference v2.4.0 · Review required
Colours
Primary
--client-color-primary
#161A16
Background
--client-color-background
#FFFFFF
Secondary
--client-color-secondary
#F2F2F2
Gold accent
--client-color-accent
#E0BB20
Border
--client-color-border
18% primary
Muted text
--client-color-muted-text
48% primary
Light and dark modes
Brand tokens do not change between modes. Module colours must use the semantic --client-theme-* tokens demonstrated below, not --foreground or --background.
Clear hierarchy on light
Primary copy uses the semantic text colour. Components inherit the same mode automatically.
Muted supporting copy uses --client-theme-muted.
Light card
Cards use the mode surface, border and text roles.
Clear hierarchy on dark
Primary copy becomes white while supporting copy and borders use approved translucent values.
Muted supporting copy uses --client-theme-muted.
Dark card
Cards use the mode surface, border and text roles.
Module root
<section class="client-mediatown client-theme-light">...</section>
<section class="client-mediatown client-theme-dark">...</section>Use color: var(--client-theme-text) and background: var(--client-theme-background). The light mode is the default; legacy roots using .light or .dark remain supported.
| Role | Token | Light | Dark |
|---|---|---|---|
| Background | --client-theme-background | #FFFFFF | #161A16 |
| Surface | --client-theme-surface | #FFFFFF | rgb(30,35,30) |
| Alternate surface | --client-theme-surface-alt | #F2F2F2 | 6% white |
| Text | --client-theme-text | #161A16 | #FFFFFF |
| Muted text | --client-theme-muted | 48% primary | 70% white |
| Border | --client-theme-border | 18% primary | 30% white |
| Link | --client-theme-link | #161A16 | #FFFFFF |
| Link hover | --client-theme-link-hover | #1A1A1A | #E0BB20 |
| Accent | --client-theme-accent | #E0BB20 | #E0BB20 |
| Primary button | --client-theme-button-background | #161A16 | #E0BB20 |
| Button text | --client-theme-button-text | #FFFFFF | #161A16 |
Typography
Inter Tight is used for headings. Instrument Sans supports the rest of the client system, while paragraphs retain the HubSpot theme treatment. The mobile scale below 48rem overrides HubSpot's device-invariant inline font sizes.
We build commerce systems
On our minds
Technology showcase
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.
Motion
The theme loads this shared system once. Modules opt in to progressive text or upward entrances, so existing content remains unchanged.
Commerce systems should feel clear, useful and built to keep moving.
Plan
Start with the customer, the numbers and one measurable priority.
Build
Connect design, commerce and technology in one working system.
Learn
Use real behaviour to improve the next thirty-day sprint.
Spacing, borders and depth
4812162024324048648096Square
0Card
.375remSoft
.875remPill
999pxCard shadow
shadow-cardComponents
Buttons and links
Buttons use the shared pill radius by default.
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.