// 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 create a database in Plesk?
You can create a database in your Plesk account. 1. Log in to your Plesk account. (e.g., https://example.com:8443) 2. In the Sidebar Menu, click on Databases. 3. Click on Add Database. 4. Under Add a Database, fill in the following details:…
How to Increase PHP’s post_max_size value using CloudLinux’s Selector in Plesk?
You can modify PHP post_max_size as per your needs using CloudLinux PHP Selector in Plesk. 1. Log in to your Plesk account. 2. In the right-hand sidebar, click on PHP Selector. 3. Click on the Options menu. Note: If the Options page shows an error…
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.