Section 01

Design profile

Seven decisions that give the site its personality. Brand tokens say what colour things are; the profile says how they behave. Change any one of these and the whole site shifts.

Section 02

Colour palette

Taken straight from the brand sheet. Two core colours carry the brand; three secondaries handle variety and status; four tints are background-only and must never be used for text or fills that need contrast.

Core

Secondary

Background tints — background only

Neutrals — derived from the core navy

Gradients

Status colours

Mapped onto the brand secondaries rather than generic web defaults, so error and warning states still read as Retain.

Section 03

Typography

Inter throughout, as specified. The brand sheet gives print sizes; these are the web equivalents, with the tracking and line spacing ratios carried over exactly. H1 clamps between 40px and 68px so the −0.05em tracking still holds together on a phone.

On brand colour — type inverts to white

Per the brand sheet: when either core colour fills a panel, text defaults to white. Add .on-dark to the wrapper and every child element follows.

Section 04

Buttons & badges

Three styles, matching the brand sheet. Pill shape comes from the soft profile. Hover the arrow to see it pivot.

Style 1 — solid

Style 2 — outlined

Style 3 — text link

Sizes

On brand colour

Badges

Section 05

Forms — basic

8px corners from the soft profile. Focus rings use green; error states use rose.

Section 06

Forms — extended

Selection and toggle controls, grouped by behaviour. These matter more for Retain than for a typical brochure site, since filter panels are a core part of the product interface.

Section 07

Cards

Shadow treatment, no borders. Hover to see the lift. Images use 16px corners at 16:10, per the rounded image profile.

Article, service, benefit, team

Gradient feature cards — from the brand sheet

The brand sheet ran these gradients top-heavy. Flipped to white-at-top so headings and body copy keep contrast against the light end, and the colour resolves underneath the product screenshot.

Section 08

UI patterns

Interactive components shared across multiple blocks. All working — click, type and hover.

Search bar & custom select

Notification toasts

Toast copy follows the writing rule from the brand system: say what happened and what to do about it. No apologies, nothing vague.

Section 09

Title holder

Used at the top of most blocks. The tags field decides which line carries the h2, which matters for page structure and search.

Only one h2 per title holder. The other line is a styled div, so it looks identical without competing in the heading outline.

Section 10

Backgrounds & section transitions

The profile uses clean transitions: no corner borders, no curves. Rhythm comes from alternating background colour and consistent 96px padding. Below, four consecutive sections.

Image backgrounds add .section-bg-image plus .background-overlay, which uses a navy-tinted overlay at 62% rather than neutral black, so photography stays on-brand.

Panel colour options — all six, per the brand sheet

Hero blocks and content panels can take any of the six. The four tints keep navy text; the two core colours flip to white.

Section 11

Decorative elements

Grid, at 10% opacity, masked so it only shows at the top and bottom edges of a section and fades out behind the content. It reads as measured and structured, which suits a product about scheduling.

Grid size is --profile-grid-size (64px). Decoration sits at z-index: 0 behind the container, so it never intercepts clicks.

List styles — both from the brand sheet

Text restrict

Section 12

Spacing, radii, shadows & timing

The measurable half of the system. Standard density, so the multiplier is 1× and section padding lands at 96px.

Spacing scale

Border radius — soft

Shadows

All shadows are tinted with the core navy rather than pure black, so elevation sits inside the palette instead of greying it down.

Transition timing — hover each

Next steps

Elements · Navigation

Navbar & mega menu

The site chrome that wraps every page. The mega menu has been rebuilt from the current pastel-card version into a flat, scannable panel — grouped columns with small labels, an icon + title + one-line description per link, and a light featured rail. Cleaner to read, faster to scan, and it drops the heavy gradient blocks. Hover a menu item below to open it; the three menus are also shown open underneath for review.

Navbar — hover Product / Solutions / Resources

Live demo — hover or tap a menu item to open it. In production the header is position: sticky and the menus close on outside-click or Esc.

Product menu — four grouped columns + footer strip

Solutions menu — two columns + featured rail

Resources menu — compact single column

Mobile menu — hamburger drawer with accordion sections

Below 991px the navbar collapses to a hamburger. Tapping it opens a full-width drawer where each top-level item becomes an accordion, expanding the same mega content restacked into a single column. There is no separate mobile markup — it is the desktop navbar reflowed. Tap the ☰ and a section on the left-hand phone; the right-hand phone shows the open state.

Blocks

Page blocks

Composed sections built from the elements above — each one spans the full page width and drops straight onto a layout. First up, the homepage hero.

home_header — split hero

Desktop

Full-bleed — spans 100% width. On tablet it keeps two columns; on phones it stacks (content first, media beneath) with a full-width CTA and badges, collapsing below 768px. All three previews track the controls above.

Media option. The frame takes either a still or a video — switch with the Media control. Adding .media-video to .home-header swaps the .hh-dash child for .hh-video, so the CMS only has to output both and set one class. The video is muted loop playsinline with preload="none", so the file is only fetched once someone asks for it — worth keeping in production, since three copies render on this page. In production the still is a real screenshot (an <img>); the dashboard and trust-badge logos here are placeholders.

client_logos — logo carousel

Desktop

Full-bleed marquee — logos loop seamlessly and pause on hover, sitting muted/greyscale until hovered. The layout holds across breakpoints, with type and spacing scaling down and fewer logos visible on smaller screens. In production these come from the global client_logos option as supplied logo images; the text marks here are placeholders.

text_block — image & text

Desktop

Reversible — use the Layout control to put the image left or right, and the toggle to show or hide the CTA (classes .media-right and .no-btn). Two columns hold on tablet; on mobile it stacks with the text always above the image, whichever side the image was on. The dashboard is a placeholder for the supplied image.

tab_content — tabbed before / after

Desktop

Tabs switch the before/after panel below (try them). On tablet the tab row wraps to two rows and the two columns hold; on mobile the tabs become a horizontal swipe row and the Before/After columns stack. The green panel and CTA are shared across tabs — only the two columns change.

reviews — testimonial grid

Desktop

Three cards on desktop, two on tablet, one on mobile — cards keep equal height with the name and role pinned to the bottom, and the CTA stays centred. Review stars use gold rather than the brand green; say the word if you'd prefer green.

benefits — icon feature grid

Desktop

Six items in a three-across grid inside a grey panel — two columns on tablet, one on mobile. Icons are muted line marks (placeholders for the supplied icon set); titles use the brand green.

feature_accordion — accordion + image

Desktop

One accordion item is open at a time (click to switch). Two columns hold on tablet; on mobile the accordion stacks above the product image. The scheduler shown in the device is a styled placeholder for the real screenshot.

integrations — logo panel

Desktop

A blue panel with a centred title, six logo cards (three across, dropping to two then one on smaller screens) and a left-aligned CTA. Logos are styled text placeholders for the supplied brand artwork.

page_form — content + demo form

Desktop

Two columns on desktop — benefits/expectations copy on the left, the form card on the right — stacking to a single column on tablet and mobile. The form reuses the standard field, select, radio and button elements; the reCAPTCHA is a static placeholder.

faqs — accordion

Desktop

Each question toggles independently (click any to open). Full width across breakpoints, with type and padding scaling down. In production this block also outputs FAQPage schema markup for SEO.

page_head — interior hero

Desktop

Interior-page hero — green eyebrow, title, intro text and an image (a gradient placeholder here for the supplied photo). Two columns on desktop and tablet, stacking on mobile. Optional buttons can sit under the text.

text_section — content panel

Desktop

A simple content panel — green heading plus body text, an optional bullet or values list, and a tint option (.green, .blue, .rose, .amber, or none). Used for “Who are we”, “Business impact”, “What is…” style sections. Full width, stacking naturally on small screens.

case_study_cards — three cards

Desktop

Three feature cards — navy, green and light variants — each with a label, title, optional text and a white logo panel pinned to the bottom. Three across on desktop, stacking on tablet and mobile. Logos are text placeholders.

cta — call to action

Desktop

Full-width call-to-action band — centred title, text and button — in a green or navy variant (shown both). The green band inverts the button to white; the navy band uses the green pill.

announcement_bar — sitewide notice strip

Desktop

Sits above the header on every page. Green band, white centred copy, underlined link that flips to navy on hover. The icon drops out below 480px so the message keeps its full width, matching the live behaviour. It is a separate region from the navbar — when it is present the header gains .has-announcement-bar, and it hides while the mobile drawer is open.

main_banner_small — compact page banner

Desktop

Desktop — .alt variant with supporting text and image

The shorter alternative to page_head, used on /contact, /discover-your-roi and the guide landing pages. Photographic background with .bg-align-left / .bg-align-right to control the focal point, and a heavy bottom pad on desktop so the following block overlaps cleanly. One deliberate difference from live: the live block puts white type straight onto the photo with no scrim. I’ve made the navy overlay opt-in via .has-overlay (the guide’s own 62% rule) because contrast fails on lighter images — drop the class to match the current site exactly.

campaign_hero_form — hero with inline capture form

Desktop

Used on webinar and campaign landing pages. Asymmetric 2fr / 50% split — long-form copy left, capture form right in a white card whose bottom-left corner stays square, which is the one distinctive shape on the live site. Collapses to a single column at 991px with the form beneath the copy. Field labels use the darker green #0E6637 rather than the brand accent, carried over from live for contrast against white at small sizes.

section_heading — standalone heading

Desktop

A heading on its own, used to introduce a run of blocks without any body copy — on /resources/ebooks, /resource-management-integrations and the webinars listing. Takes .align-center or .align-right; default is left. Wrapping part of the heading in <strong> flips that phrase to green, which is the pattern used across every heading on the site.

text_full_width — full-width text band

Desktop

Long-form copy with no image, sitting in an eight-column measure so line length stays readable. Closes the homepage. .no-padding removes the top pad when it follows another text block directly.

benefits_boxes — icon benefit boxes

Desktop

Three unboxed columns — icon, small uppercase green title, one paragraph. Lighter than the benefits block: no panel, no card, nothing to click. Two across at 991px, one at 767px. The live version sets the title as an h2; I’ve used h3 so the block can sit under a section_heading without breaking the heading outline.

feature_block_text_image — alternating feature rows

Desktop

Desktop — .style-modern variant

Stacked feature rows that alternate image side via .img-pos-right. Two flavours on the live site: the default runs a wide-tracked uppercase eyebrow above a large title, while .style-modern drops the tracking and uses the second line as a sentence-case subtitle. Both stack image-above-text at 767px, and the order reset means the image always leads on mobile regardless of desktop side.

latest_buzz — article teaser row

Desktop

A related-reading row, used at the foot of the guide and maturity landing pages. It renders the site’s article_teaser card, which is a different component from the article-card in the Cards section: the teaser puts a category pill over the image, adds a read-time and pins an author row under a divider. Three across, two at 991px, one at 767px. The live block hides the publish date inside this context and keeps only read time — reproduced here.

cta_banner — inset call-to-action panel

Desktop

Desktop — green and .has-subtitle variants

Distinct from the cta block above: this one is an inset rounded panel inside the container rather than a full-bleed band, so it can sit between two white sections without the page banding. Navy by default, with .green and .gradient variants. .has-subtitle reproduces a live quirk — when a subtitle is present the title drops to navy and the white weight moves to the h3. Buttons stack full-width at 767px.

title_subtitle_text_image — centred intro with image

Desktop

Centred introduction — title, green subtitle, a short paragraph, then a square image. Sits in an eight-column measure with the image at 80% of that. Currently only on /products/retain-on-premise, which runs an older template than the rest of the site.

title_text_panels — title with equal panels

Desktop — wrapped in coloured_block_with_paragraphs

Equal-width white panels with a soft shadow, all centred text. Two bundles shown together, because that is how they appear on the live site: coloured_block_with_paragraphs is only a tinted wrapper — it contributes a background and vertical padding and nothing else — and title_text_panels is the content. Use the wrapper on its own around any block that needs a tinted band. Panels wrap two-up at 991px and stack at 767px.

Site chrome

Footer

The global site footer, shown at the foot of every page.

Desktop

Full-width dark footer with social links, four link columns (Product's sub-groups, Solutions' Industry/Role, Resources and Retain), and the copyright and logo beneath. Columns drop to two on tablet and one on mobile. Green column headings and blue sub-headings pull from the brand palette; the logo is a text placeholder for the supplied artwork.