// design system · v1
The Midnight system.
Every token, type style and component used across mdhosting.co.uk — on one page, so the next build starts here. Midnight navy ground, stark white structure, one surgical orange.
// 01 / colour tokens
Palette — 60 / 30 / 10
// 02 / typography
Type scale
// EYEBROW · JetBrains Mono 13
Display H1 / 800
Section H2 / 700
Card title H3 / 700
Body copy is Inter at 18px / 1.7 line-height in muted slate — calm, readable, never pure white on the dark ground.
Mono data · 25 GB NVMe · £12.95 /user/mo
// 03 / buttons
Buttons
// 04 / cards
Cards
Icon blurb
The workhorse card — icon, title, body, on a translucent fill with a slate top edge.
Accent card
Same card with an orange top accent for a focal feature or differentiator.
// BENTO
Bordered group
A 1px slate-bordered group card — the bento building block.
// 05 / status badge
Ping badge
// 06 / flip-card
Migration flip-card
// CURRENT HOST
Slow. Oversold. Indifferent.
Throttled NVMe, servers crammed with thousands of neighbours, and a support queue that treats you like a ticket number. Locked in and quietly overpaying. Sound familiar?
// MDHOSTING
Free migration. On us.
We move your sites, email and data off your slow host — planned and tested to minimise disruption, at no charge. You just watch it get faster.
Plan my migration →// 07 / pricing & testimonial
Pricing card & white testimonial
Most popular
Sample tier
£8.50/mo
14-day money-back
A pricing card in the system.
- 1px slate border
- Orange top on the popular tier
- Mono price & ticks
“A stark white testimonial card — the system’s 30% structuring moment against the dark ground.”
Style Guide · component sample
// 08 / stat band
60%
midnight ground
30%
white / slate
10%
surgical orange
1px
card borders
// 09 / accordion & image treatment
Accordion & media
Is this page the source of truth?
Yes — it renders every token and component from the same build code as the live pages, so what you see here is exactly what ships.
How do I add a new component?
Add a helper in pages.py, drop it into a section here first to eyeball it, then reuse it across the real pages.
Image · + navy overlay · + 1px border
// modules / content
Content modules
Every Divi content module, rendered live.
divi/heading
The quick brown heading
divi/text
A text module — rich body copy, muted on the dark ground.
divi/button
divi/icon
divi/blurb
Blurb
Native blurb — icon, title, body.
divi/image
divi/icon-list
- Confirmed working
- Renders on import
- Dark-theme ready
divi/divider
Above the divider.
Below the divider.
divi/cta
CTA module
Title, body and a button in one module.
divi/svg
divi/testimonial
Native testimonial on a white card — the 30% structuring moment.
divi/team-member
Specimen Name
Systems Architect
Keeps the servers calm.
divi/breadcrumbs
Shows Home / Page in a standalone page context.
divi/table-of-contents
Scans the page’s h2/h3 and smooth-scrolls.
On this page
// modules / interactive
Interactive modules
divi/accordion
Accordion item one
First answer, open by default.
Accordion item two
Second answer, collapsed.
divi/toggle
Toggle title
Single expand / collapse.
divi/timeline
Founded
MDHosting opens in Leeds.
Rebuild
The Midnight site ships.
divi/signup
divi/login
Renders the WordPress login form.
divi/contact-form + divi/contact-field
Native form; Divi auto-adds a submit button + CAPTCHA.
// modules / media
Media modules
divi/video
divi/audio
Sample track
divi/before-after-image
divi/gallery
Grid settings only — images are added via the editor (can’t be passed as JSON).
basecamp
dropbox
design-process-bg-blur1
paper-boy
stars
divi/slider + divi/slide
divi/video-slider
divi/lottie
Needs a valid Lottie JSON URL; shows a placeholder otherwise.
// modules / data
Data, counter, pricing & dynamic modules
divi/number-counter
Counts up on scroll-in.
%
Uptime
divi/circle-counter
Animates on scroll-in.
%
Capacity free
divi/counters + divi/counter
- NVMe speed96%
- Support score99%
divi/pricing-tables (live Blesta price)
Professional
- 15 GB NVMe
- Free SSL & backups
- Free migration
divi/social-media-follow
divi/countdown-timer
Day(s)
:
Hour(s)
:
Minute(s)
:
Second(s)
divi/search
divi/menu
Renders the site’s primary menu.
divi/blog
Needs WP posts; shows the sample post.
How to Shut Down Your VPS Forcefully or Gracefully via Virtualizor?
You can shut down your VPS in two ways – forcefully or gracefully, using Virtualizor. How to Gracefully shut down your VPS via Virtualizor? 1. Log in to your Virtualizor Control Panel. 2. In the left side panel, click on List VPS. 3. Hover your mouse on…
How to Reboot/Restart Your VPS using Virtualizor?
If you want to restart your VPS, you can do it via the command line or Virtualizor. How to reboot/restart your VPS via Virtualizor? 1. Log in to your Virtualizor Control Panel. 2. In the left side panel, click on List VPS. 3. Hover your mouse on the…
divi/post-slider
Latest posts in a slider.
divi/portfolio
Needs the Divi Project CPT; empty until projects exist.
No Results Found
The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.
divi/instagram-feed
Shows an empty state until an account is connected in Divi settings.
No media found
divi/map
Blank until a Google Maps API key is set in Divi → Theme Options.