Skip to content

Website Theme

How Oolio looks online.

The Oolio website theme is the visual and structural foundation for all Oolio product websites. Built to reflect the brand guidelines: purple-first, Inter throughout, clean and modern. It ensures every product site feels like it belongs to the same family. This section outlines the available templates and the full library of modules available across all of them.

Building a page with an AI tool? Download WEBSITE.md from the AI Design page. It gives the tool everything on these pages in one file.

The theme

The Oolio website theme translates the brand guidelines into a working digital environment. It uses the full Oolio colour palette, Inter across all type styles, and the brand's signature shapes and layout principles. Every template is built from a shared library of modules: individual building blocks that can be combined and configured to construct any page. The theme is designed to be consistent, accessible, and easy to maintain.

The theme is used across all Oolio product websites. Individual product sites apply their own product logo, but the underlying structure, typeface, and design language remain consistent.

Templates

Four main templates are available. Each defines a page layout suited to a specific purpose. All templates draw from the same shared module library.

Default

The standard page template. Used for most general content pages. Includes global header and footer as well as a Rich text module (which can be removed).

View Default

Hero

A variant of the default template. Used for pages that lead with full-screen media. Includes global header and footer as well as a Hero module.

View Hero

Landing

A template for campaign and conversion-focused pages. Includes custom header and footer as well as a Rich text module (which can be removed).

View Landing

Landing Hero

A landing page variant that leads with full-screen media. Includes custom header and footer as well as a Hero module.

View Landing Hero

Modules

Modules are the building blocks of every page. They are available across all templates and should be combined and configured to construct any layout.

banner

Banner

A callout that draws attention to a key message.

Banner
blockquote

Blockquote

A quote card that gives one quote the whole stage.

Blockquote
cards

Blog cards

Blog posts shown as cards, picked by hand or pulled in automatically.

Blog cards
boxes

Boxes

A flexible grid of photos, quotes, tiles, graphics and video.

Boxes
card-links

Card links

Linked cards for visual navigation and quick links.

Card links
cards

Cards

Content cards with images, icons, tags and buttons.

Cards
carousel-click

Carousel click

A full-screen carousel where visitors click through one slide at a time.

Carousel click
carousel-horizontal

Carousel horizontal

A full-screen carousel that scrolls sideways through linked items.

Carousel horizontal
carousel-simple

Carousel simple

A simple carousel of linked images with titles.

Carousel simple
carousel-slide

Carousel slide

A carousel that opens one slide at a time, with image or video backgrounds.

Carousel slide
carousel-vertical

Carousel vertical

A full-screen carousel that scrolls up through items with descriptions.

Carousel vertical
faqs-accordion

FAQs accordion

Questions that open to show their answers, keeping long pages tidy.

FAQs accordion
features

Features

Short, ticked features as a grid, a ticker or a carousel.

Features
hero

Hero

A full-screen opener for the Hero templates, with video, image or a product shot.

Hero
integrations

Integrations

The integrations for each Oolio product, as a filterable grid or carousel.

Integrations
intro

Intro

A short heading and body text that set the scene after the hero.

Intro
landing-form

Landing form

A HubSpot form beside a heading, with logos, a quote, an image or a video.

Landing form
logos

Logos

Venue and partner logos as a scrolling carousel or a gallery.

Logos
media

Media

A single image or video, on its own or beside a heading and text.

Media
modal-form

Modal form

A HubSpot form in a modal pop-up, opened from any button or link.

Modal form
modal-meetings

Modal meetings

A HubSpot meetings calendar in a modal pop-up, for booking a time.

Modal meetings
read-more

Read more

A Read more button that opens extra text in one or more columns.

Read more
rich-text

Rich text

A flexible block of text and buttons, in one column or several.

Rich text
stats

Stats

Big numbers that count up as they come into view.

Stats
tabbed-content

Tabbed content

Content in tabs, each with text, buttons and an optional image or video.

Tabbed content
tabbed-cards

Tabbed cards

Sets of cards in tabs, so visitors can switch between them.

Tabbed cards
testimonials

Testimonials

Customer quotes in a carousel, with a photo and venue logo or on their own.

Testimonials
videos

Videos

HubSpot or YouTube videos in a grid, in landscape or portrait.

Videos

Elements

Elements are the shared pieces: buttons, tags, surfaces, forms and feedback states - that every module and template is built from.

View Elements

Usage rules

  • Do not modify the theme's core typography, colour assignments, or layout grid outside the options provided
  • Product-specific accent colours must be drawn from the approved brand palette
  • All new pages should be built from the available templates. Do not create custom layouts outside the theme
  • Any proposed additions to the template, module, or element library should be reviewed against the brand guidelines before development
  • Use the documented button, tag and form styles rather than introducing one-off treatments