Clear before clever
Readers should understand the decision, action and evidence without decoding the design.
Version 2.0 · October 2026
HireBest website style guide
One system for clear decisions: restrained colour, generous space, real people and product evidence.
Design principles
Structure is the signature
The Cipher diagram, numbered steps and comparison rows make the method visible.
Warm, not decorative
Gold marks actions and emphasis. It does not become background noise.
Human and specific
Use real people, real product screens and named evidence—never anonymous visual filler.
Foundations
A 1200 px container, 12-column desktop grid, 8 px spacing rhythm and an 18 px body base.
Ink · #364959
Headings, dark bands and primary structure.
Accent · #ffbd26
Primary actions, focus and connective emphasis.
Warm surface · #fff7e8
Callouts and the HireBest side of a comparison.
Which gold do we use?
#ffbd26 is the interface accent for buttons, focus and emphasis. #996a00 is the accessible gold for text on light backgrounds.
The logo artwork contains #ffbd72. Leave the logo file unchanged, but do not introduce that pale gold as a new interface colour.
Typography
Display headings use the HireBest heading face at tight leading. Body copy stays readable at 18/30 on desktop and 17/28 in long articles. Do not justify text.
Define. Interview. Decide.
Actions and navigation
Use one primary action per decision point. Secondary actions carry an outline.
Buttons use dark text on gold, meet a 48 px minimum touch target at full size, and retain a visible keyboard focus. The phone header uses the same five navigation links as desktop plus Request a demo.
The Cipher is the signature component
- 1
Charge
Why the role exists.
- 2
Outcome
What changes in year one.
- 3
Deliverables
What the person produces.
- 4
Efforts
How the work gets done.
Human imagery is required, real and non-interactive
Retain approved photographs of real people on main marketing pages. Do not replace them with abstract graphics, avatars, stock-like AI people or generated portraits.
- Use real photographs. Workshop scenes, interviews and identifiable customer or author portraits create trust.
- Do not invent people. No generated faces, synthetic teams or decorative “candidate” portraits.
- Do not make people a lightbox. Human photographs stay non-clickable. Product screenshots may open into the CSS lightbox.
- Name people accurately. Use the person's name when known. Company marks are logos, not portraits.
- Verify provenance. An asset appearing on the old site shows prior use, not proof of consent or current usage rights. Confirm approval before publication.
- Write literal alt text. Describe who or what is visible; do not repeat marketing copy.
“If you want to get serious about hiring, then you need your team trained by HireBest.”
Portrait or logo?
Visually inspect assets. The old book page labelled three company marks with people's names; the rebuilt page correctly describes them as the HST Pathways, Randys Worldwide and Facilities Group logos. Craig's adjacent photograph is the actual portrait.
Product imagery opens large
Screenshots sit inside a framed surface. The zoom affordance appears on hover and touch devices, and the CSS-only lightbox needs no JavaScript.
Always measure the source asset and include intrinsic width and height.
(opens a larger view)Component set
These are the shared patterns in assets/hb-system.css.
Cards and grids
.hb-card, .hb-grid--2/3/4 for grouped choices and capabilities.
Split sections
.hb-split pairs explanation with a photo, quote, screenshot or callout.
Statistics
.hb-stats and .hb-stat, always followed by a visible source or caveat.
Questions
.hb-faq uses native details/summary and matching FAQPage JSON-LD where appropriate.
Phones
.hb-phones and .hb-phone present measured app screens without pretending they are human photography.
Comparisons
.hb-compare stacks on phones and uses a warm surface only for the HireBest column.
Insights
.hb-post-* constrains long-form reading; archive cards retain measured images or use the branded placeholder.
Closing band
.hb-cta-band closes the argument with one primary and at most one secondary route.
Footer
.hb-footer keeps the same grouped information architecture on every page.
Numbers need context
25.3%Example outcome figure
4.8×Example return figure
90%+Example success figure
Example only. Every published number needs a named source, defined population, period and methodology—or an explicit internal-data caveat.
Film direction
Product films use this design system, so a film looks like part of the page it sits on. Series 1 films answer one buyer concern in 60 to 90 seconds, in the four beats below. Series 2 films walk through one part of the product, framed by the HireBest method, in 90 seconds to 2 minutes, with one narrator.
- 1
The concern
The buyer's worry, in the buyer's words. 5 to 10 seconds.
- 2
The answer
One unbroken take of the real product. 40 to 60 seconds.
- 3
The proof
One product fact the film has just shown. No customer names, quotes or numbers. 5 to 10 seconds.
- 4
Next step
Book a demo. No form. 5 seconds.
Concern card
Full-frame ink #364959. The concern in large white heading type, with one key word underlined in accent #ffbd26. It must read with the sound off.
Straps
Lower right. White cards with a 16 px radius and a soft shadow. Ink body text. Never over the area the camera zooms into.
Highlights
Accent #ffbd26 rings on each element the voice names. Eased push-ins on the part being explained.
Proof card
Surface #f6f8fa with ink text. The fact must also appear on the page that carries the film, or on the security page.
End card
Ink background, a gold “Book a demo” button shape and the HireBest logo.
Subtitles
Every film, in both series and every format (16:9 and the 4:5 LinkedIn cut): burned in, white on an ink bar, bottom centre and clear of the straps, word for word with the voice track. Ship a caption file as well. Most viewers watch with the sound off.
Poster
One template at 1280 × 720: the concern line, six words or fewer, on ink; a cropped product screenshot at the right; the logo. The same image is the poster on this site and the YouTube thumbnail. Films play from this site first; YouTube is second, for discovery.
Voice and motion
- One narrator, no music. The narrator states the worry and answers it. She sounds like a person talking, not reading a script. The same narrator in every film.
- Pause between thoughts. Without breath gaps the voice sounds read from a script.
- Name the thing. Never hand off from one pronoun to another: say “the rating”, not “this”.
- One callout at a time, keyed to the words.
- Smooth scrolling only. No jumps, no cuts inside the product take.
- Real screens only. No mock-ups and no generated people.
Accessibility and QA
- One H1, logical heading levels and one content DOM at every viewport.
- A skip link, semantic landmarks, labelled navigation and native disclosure controls.
- Visible focus, reduced-motion support and WCAG AA contrast across the whole phone page.
- Meaningful alt text, empty alt only for decorative images and no important text baked into an image.
- Phone menu, product lightboxes, desktop and phone screenshots, browser errors and saved-byte checks before review.
- Every review page remains
noindex, followuntil cutover.
Use the system; keep the evidence
New pages should feel recognisably HireBest without inventing a new visual language each time.