HomeStyle Guide
KitMission Control Style Guide
The mission control style guide
Everything a new Website HQ page is built from, shown live: the logo, the colors, the type and every shared part in assets/site.css, each with its class name underneath.
To start a page, copy template.html. Keep the header, menu, ticker, closing band and footer as they are, swap in the page’s poster, and build the middle from these parts.
This hero: .phero .crumbs .tminus h1 em .lede .btns .pposter .plate
“It is such a relief to know my website maintenance and security is covered.”
“Now when something needs updating, I just send them a message and it's done.”
“...I literally got three days of my month back.”
“...Jeane's team migrated and fixed everything in a day plus set up real security.”
“She saves me countless hours, allowing me to focus on what I do best!”
01Logo
The logo, light and dark
This section: .sec.sec-cream
Two files, one shape. The ink logo sits on cream, paper and other light backgrounds. The light logo sits on navy and ink.
On Light
img/logo-ink.png The header: 172px wide, 150px on phones
On Dark
Make the Internet safer, one WordPress website at a time.
img/logo-light.png The footer: 176px wide, with the motto in .motto
02Colors
Ten inks, straight from the tokens
This section: .sec.sec-paper
Each swatch is painted with its token from the top of assets/site.css, and the hex code is read from the stylesheet as the page loads, so this list can’t drift from the site.
--navy#1B2A4AHeadings on light sections, the dark sections, the .tminus tag.--ink#141B2DText, every border and hard shadow, the ticker and the footer.--cream#F4E9D3The page background, and text on dark sections.--paper#FFFAEECards, ghost buttons, form fields and .sec-paper.--orange#FF671DThe main button, the orange section, hover shadows.--rust#9E3708The accent word in headings on light, card labels, stamps.--mustard#F2B33DAccents on dark, the plates, heading shadows on light.--teal#2A9D8FTick marks and the focus ring.--sky#182A4AThe night sky in the closing band over the coast.--navy-2#22355CA lighter navy for fills in page drawings.#26324D body copy on light#3A4561 mono captionsThese two are set by hand in site.css, not tokens.
03Type
Two families, three jobs
This heading: .sec h2 with one em
DM Sans does two jobs: headings at 700 and body copy at 400. Space Mono does the third: labels, captions and anything that should read like an instrument panel.
DM Sans 700
--display Headings
h1, h2 and h3, tracked tight at -0.035em on h1 and h2. Sentence case.
Make the Internet safer, one WordPress website at a time.
DM Sans 400
--body Body Copy
17px on a 1.6 line height, 16.5px on phones. Body copy on light sits in #26324D.
Make the Internet safer, one WordPress website at a time.
Space Mono 400 and 700
--mono Labels
The .tminus labels, crumbs, card labels, plates, readout captions. Title Case.
Make the Internet safer, one WordPress website at a time.
| Role | Class | In site.css | On This Screen |
|---|---|---|---|
| Page title | .phero h1 | 40 to 74px, 34 to 44px on phones | Measured live |
| Section heading | .sec h2 | 36 to 64px | Measured live |
| Card title | .cardp h3 | 24px | Measured live |
| Step title | .step h3 | 21px | Measured live |
| FAQ question | .faq summary | 20px, 18px on phones | Measured live |
| Lede | .lede | 18 to 20.5px, 16px on phones | Measured live |
| Prose | .prose | 18px, line height 1.65 | Measured live |
| Body | body | 17px, 16.5px on phones | Measured live |
| Label | .tminus | 13px Space Mono 700 | Measured live |
| Card label | .cardp .lbl | 12px Space Mono 700 | Measured live |
| Crumbs | .crumbs | 12.5px Space Mono | Measured live |
The rules on every word
Jeane’s writing rules apply to every page. These four touch the type most often.
- Headings (h1, h2, h3) in sentence case, with at most one accent in em: rust on light sections, mustard on dark ones.
- Small labels in Title Case: the .tminus tags, card labels, plates, readout captions and footer links. Small words like and, of, for and the stay lowercase.
- Bold at most twice on a page.
- No em dashes. Use a period, comma, colon or parentheses.
ul.ticks A tick list
04Buttons and Labels
Buttons, labels and lights
This section: .sec.sec-paper
Orange is the one main action in a block. Ghost is the second choice beside it. Dark is the main action on the orange section, where orange would vanish.
On Light
.btn.btn-orange .btn.btn-ghost .btn.btn-dark svg.ic for the arrow. Button text in sentence case.
01Small Label in Title Case
p.tminus with span.tm Above every section heading
On Dark
The same buttons. Keep .btn-dark off dark sections.
02Small Label on Dark
.tminus inside .on-dark The tag turns mustard
i.led .led.orange .led.mustard Status lights. They blink when motion is on.
05Readouts and Cards
Readouts and cards
This section: .sec.sec-cream
A readout carries one number. A card carries one idea, and when it links somewhere, the whole card is the link.
.readouts .ro with .led .v .k Add data-count to make the number count up when it scrolls into view.
The Site Care Club
Three plans for looking after your WordPress site, from $125 a month.
See the PlansWith an IconHacked site repair
A card can open with a line icon in .ico, drawn in navy.
A plain card
The same card as a div when there is nowhere to go. It keeps its shadow and drops the hover.
.cards 3 across .cards.two 2 across a.cardp with .lbl h3 p .more
06Panels and Lists
Panels and tick lists
This section: .sec.sec-stars.on-dark
A panel holds a short note on a dark section. Prose holds the paragraphs. A tick list holds short items, in two columns when there are many.
A Panel Label
A panel is a quiet box for a side note on navy or stars. Its label is Space Mono in Title Case with a status light.
Prose keeps paragraphs to a comfortable 66 characters a line, with links underlined in orange, like this one to the resources.
- Short items, one idea each
- Mustard ticks on dark, teal on light
.split two columns .panel with .lbl .prose ul.ticks
- Real headings in order, one h1
- Alt text on every image
- A visible focus ring on every link
- No sideways scroll at 390px
- Every id unique
- No HTML comments in the page
ul.ticks.cols Two columns, one on phones. The items are the build checks every page passes.
07FAQs
Questions that open
This section: .sec.sec-orange with --above and --below
Each question is a summary in sentence case, and the answer opens underneath. These three answer the questions a new page usually raises.
Where do a page’s own styles go?
In the page’s own style block, with every class starting with the page’s short name, like lk- on the links page. Never change assets/site.css for one page.
How do I add motion?
In the page’s one script after assets/site.js, using window.WHQ. Anything with data-rv fades up as it scrolls into view for free. Keep it to one or two touches, and skip them when WHQ.reduce is true.
What goes in a slot?
A form or embed that WordPress fills in, like a booking calendar. Everything inside the slot is replaced; the slot itself keeps its classes, so style it as the frame and give it a min-height.
.faqs details.faq summary .ans Add open to show one answer from the start.
08Steps and Quotes
Steps and quotes
This section: .sec.sec-cream
Steps number themselves. A big quote takes a cite line under it, and a review is always quoted word for word.
Copy the template
Start from template.html, with the header, ticker, closing band and footer already in place.
Swap in the poster
Point the hero at img/pg-your-page.webp and write a two-line plate for it.
Build the middle
Sections from the parts on this page, page-only styles with the page’s prefix.
Check it on a phone
Look at it at 390px wide as well as on a laptop, with nothing spilling off the side.
ol.steps li.step with h3 and p Four across, two on tablets, one on phones
“It is such a relief to know my website maintenance and security is covered.”
Elizabeth McNevin, Sociale Consulting.bigquote followed by cite
09Section Tones
Five tones for sections
This section: .sec.sec-paper
Every section is a .sec with one tone. Alternate light and dark down the page, and tell the orange section the colors above and below it so its scalloped edges match.
Cream
The default. Sections 01, 03, 05 and 08 here.
.sec-cream
Paper
A lighter step for variety. Sections 02, 04 and 09.
.sec-paper
Navy
The dark section, with a faint grid. Section 10.
.sec-navy.on-dark
Stars
Navy with a drifting star field. Section 06.
.sec-stars.on-dark
Orange
Best used once a page. Section 07.
.sec-orange
10Posters
One poster per page
The live example: .pposter at the top of this page
Every page has a screenprint poster made for it, 1000px wide and about 1360px tall. It sits in the hero in .pposter, with a two-line .plate label in Title Case.
Every poster, what it shows and where it’s used
pg-aboutThe HQ building on the coast at dusk, a dish on the roofaboutpg-site-care-clubThree rockets on three pads: small, medium and largesite-care-clubpg-servicesA space station with astronauts working on its modulesservicespg-reviewsAn astronaut on the moon reading letters from an overflowing mailboxreviewspg-resourcesA mission library with manuals and star chartsresourcespg-work-with-usA flight controller waving from her consolework-with-uspg-maintenanceA ground crew servicing a rocket on the gantry at sunrisemaintenancepg-securityA rocket inside a glowing force-field dome, meteors bouncing offsecuritypg-hackedAstronauts patching a damaged browser-window satellitehackedpg-adaA ramp up to the launch tower, travelers welcomed aboardadapg-designDesigners painting new livery onto a rocket in the hangardesignpg-design-packagesEngineers over a rocket blueprint with a model kitdesign-packagespg-contactA radio operator at a vintage console, a radar dish outsidecontactpg-faqsThe space port information deskfaqspg-why-wordpressRockets of one proven design launching along the coastwhy-wordpresspg-lazywpAn astronaut in a hammock while a robot works the checklistlazywppg-warrantyA prize rocket on a showroom turntable, a sealed scroll handed overwarranty, fb-warrantypg-jacksonvilleA river city at dusk, a blue lift bridge, a contrail overheadjacksonvillepg-usaA satellite over a night map of North Americausapg-legalThe mission control records roomprivacy, terms, how-we-make-our-content, both agreementspg-club-startA pre-flight briefing over a mission map, a rocket in the windowget-startedpg-bookingA flight controller pinning a flag on a giant wall calendarthe four booking pages, book-thankspg-aboardA crane moving a capsule from an old patched rocket to a new oneorder-confirmationpg-thanksA capsule’s splashdown with parachutes, confetti and a recovery boatthe five thank-you pagespg-guideAn astronaut reading a field manual at the foot of the padfree-ebook, launch-gorgeous, talespg-offerVIP guests on a beach viewing stand, one holding a golden ticketdigital-insiderspg-calculatorAn adding machine printing a receipt that loops around a rocketcalculatorpg-toolsA technician at the instrument workbenchthe five free tool pagespg-partnerTwo spacecraft docking, the crews shaking handspartnerpg-linksA switchboard operator patching cableslinkspg-sitemapAn illustrated map of the spaceport campussitemappg-styleA screenprint studio pulling a rocket posterstyle-guidepg-404A lost astronaut reading a map upside down while a satellite shines a light404
People in the Posters
Never present a drawn person as Jeane, Scott, the team or a client. When a page says “Hi, I’m Jeane”, use her photo, img/jeane-navy.jpg. The yellow-sweater photos stay on the homepage.
Homepage Drawings
Any page may reuse a homepage drawing where it helps: the satellite (mc-satellite), Molly the sheepadoodle (mc-dog), the mission control room (mc-room) and the rocket (mc-rocket-only). The coast (mc-coast) belongs to the closing band.
Build the next page
Copy the template, pick a poster, and build the middle from the parts above.
Book a free, no-pressure call with Jeane's team. Plans start at $125 a month, and every one comes with a 30-day risk-free guarantee.
