# Oolio website theme reference Drop this file into an AI tool's project knowledge (Claude Project, custom GPT, etc.) before asking it to plan, write or build a page for an Oolio product website. It explains the templates, modules and elements in the Oolio website theme, when to use each one, and how pages on oolio.com are put together. It's the website companion to [DESIGN.md](https://brand.oolio.com/ai-design), which covers the brand itself (voice, colour, type, logo, imagery). Use both together: DESIGN.md for how Oolio looks and sounds, this file for how an Oolio web page is built. Sourced from the [Website Theme](https://brand.oolio.com/website-theme) section of the Brand Guidelines, where every module has its own page with live examples, and from the live [Oolio website](https://www.oolio.com). Those pages are the source of truth. This file is a static snapshot and won't update itself. **Last checked against brand.oolio.com:** 16 October 2026. Update this date whenever the file is re-verified against the live guidelines. --- ## Quick reference | | | |---|---| | Platform | HubSpot CMS, one shared theme | | Sites | oolio.com and every Oolio product site, such as Ordermate. Product sites only change the logo and the header and footer navigation | | Templates | Default, Hero, Landing, Landing Hero | | Modules | 28, all available on every template | | Content width | 1240px. Some modules are designed to run full width | | Breakpoints | Mobile up to 767px, tablet up to 1024px | | Type and colour | Inter only, Oolio Purple `#673AB6` first. See DESIGN.md | | Module reference | [brand.oolio.com/website-theme](https://brand.oolio.com/website-theme), one page per module with live examples | --- ## How the theme works The theme turns the brand guidelines into a working website: purple-first, Inter throughout, clean and modern. Every product site is built on it, so they all feel like one family. It has three layers: - **Templates** set the page layout, header and footer. - **Modules** are the building blocks you add to a page. Any module can go on any template. - **Elements** are the shared pieces inside modules, like buttons, tags and form fields. You don't add them yourself; they come with the modules. **Usage rules** (from the Brand Guidelines): - Don't change the theme's typography, colour assignments or layout grid outside the options each module gives you. - Product accent colours come from the approved brand palette only. - Build every new page from the existing templates. No custom layouts outside the theme. - Review any proposed new template, module or element against the brand guidelines before it's developed. - Use the documented button, tag and form styles. No one-off treatments. --- ## Templates | Template | Use for | Header and footer | Starts with | |---|---|---|---| | **Default** | Most general content pages | Global | A Rich text module (can be removed) | | **Hero** | Pages that lead with full-screen media, like product and venue type pages | Global | A Hero module | | **Landing** | Campaign and conversion pages | Custom | A Rich text module (can be removed) | | **Landing Hero** | Campaign pages that lead with full-screen media | Custom | A Hero module | Pick Hero or Landing Hero whenever the page should open with a big image or video. The Hero module is built for those two templates only. --- ## Building a page **Sections and width.** A page is a stack of sections, each holding one module. Sections sit at the 1240px content width by default. Some modules are designed for a full-width section: Hero, Banner, Boxes, the full-screen carousels (Carousel click, horizontal and vertical), the Features and Logos carousels, and Media with the media on the left or right. In a full-width section, Tabbed content and Testimonials let their media run to the screen edge while the text stays lined up with the 1240px content. **One main heading.** The Hero module's heading is the page's h1. Use one Hero per page, as the first module. On pages without a Hero, the first heading on the page should be the h1. **Common patterns on oolio.com** (top to bottom): | Page type | Example | Modules | |---|---|---| | Homepage | oolio.com | Hero → Intro → Logos → Carousel vertical → Boxes → Banner | | Product / solution | /solutions/point-of-sale | Hero → Intro → Boxes → Features → Boxes → Logos → Boxes → Banner | | Venue type | /business-types/cafes | Hero → Intro → Boxes → Features → Boxes → Carousel vertical → Banner | | About | /about | Intro → Boxes → Stats → Boxes → Logos | | Contact | /contact | Landing form | The shape is the same across them: open with a Hero, say who the page is for in an Intro, prove it (Boxes, Features, Stats, Logos), then close with a Banner that asks for the next step. --- ## Choosing a module | You need to… | Use | |---|---| | Open the page with full-screen media | Hero | | Say who the page is for, straight after the hero | Intro | | Write longer copy, in one column or several | Rich text | | Tuck extra detail away behind a button | Read more | | Let one quote stand out | Blockquote | | Show several customer quotes | Testimonials | | Show venue or partner logos | Logos | | Show big numbers | Stats | | List short, ticked features | Features | | Tell a story with a mix of photos, quotes, tiles and video | Boxes | | Show a grid of content cards with text | Cards | | Link to other pages with visual cards | Card links | | Switch between sets of cards | Tabbed cards | | Switch between panels of text and media | Tabbed content | | Answer common questions | FAQs accordion | | Show one image or video, with or without text | Media | | Show several videos | Videos | | Walk through a few items one at a time | Carousel click or Carousel slide | | Browse a set of related items | Carousel horizontal, Carousel vertical or Carousel simple | | Point to related blog posts | Blog cards | | Show a product's integrations | Integrations | | Ask for the next step, part-way down or at the end | Banner | | Put a form on the page | Landing form | | Open a form from a button | Modal form | | Let visitors book a meeting from a button | Modal meetings | --- ## Modules Each entry gives what the module is, its main options, and a do and don't. The full options and live examples are on each module's page at brand.oolio.com/website-theme/modules/[name]. ### Openers **Hero**: a full-screen opener with the page's main heading, a video, image or product shot, and a clear next step. - Options: tag, heading (the page's h1), a ticker of rotating words at the end of the heading, body text, up to two buttons, a small footer line for a secondary link. Hero type is background video (default), background image or offset product image on a brand gradient, charcoal or white. - Do use it on the Hero and Landing Hero templates, once, as the first module. - Don't rely on the video to carry the message. It doesn't play on phones, so pick a fallback image that works on its own. **Intro**: a short heading and body text that set the scene, usually straight after the hero. - Options: tag, heading, body text (a paragraph or two, or a short list). Heading on the left (default), on the right, or centred with the text below. Ticks. - Do use it once, near the top, to say who the page is for and why it matters. - Don't use it for long copy. Past two short paragraphs, use Rich text. ### Text **Rich text**: a flexible block of text and buttons, in one column or several. - Options: single or multiple columns (two or three per row), a tag and up to two buttons for the block or each column, alignment, ticks. - Do use it for longer copy that doesn't fit a more structured module. - Don't use it to rebuild other modules. If you need cards, features or FAQs, use those modules. **Read more**: a Read more button that opens extra text below it. - Options: one to twelve columns of text (three per row, then wrapping). Any of the five button styles. Ticks. - Do use it for detail that supports the page, like extra product information after an intro. - Don't hide the main message behind it. **Blockquote**: a quote card that gives one quote the whole stage. - Options: quote, name, company. Light card (default) or dark card. Left, centred or right. - Do use it for one standout quote. - Don't use more than one or two per page, or they stop standing out. ### Proof **Testimonials**: customer quotes in a carousel, with a photo and venue logo beside each quote (style 1) or the quote on its own (style 2). - Options: optional tag, body text and one button above the carousel. Quotes written in the module, or pulled from the testimonials HubDB table (pick them, or leave empty to show every testimonial from the site's brand). Arrows, swiping and arrow keys appear with more than one quote. - Do use real quotes with the customer's name and venue. - Don't mix very long and very short quotes in one carousel. Every slide grows to match the tallest. **Logos**: venue and partner logos as a scrolling carousel or a gallery. - Options: tag and body text. Your own logos (each with an optional link), or venue logos from the venues HubDB table, filtered by product and venue type. Carousel (default) or gallery, three to six per row. - Do use venue logos from the HubDB table where you can, so they stay up to date. - Don't mix logo colours. Use the black versions on light backgrounds. **Stats**: big numbers that count up as they come into view. - Options: tag and body text. Up to nine stats, each with a number, optional prefix and suffix, and a subtitle. Count-up for plain numbers, static for anything else (like a range). Light (default) or dark cards, small, medium or large. - Do use numbers you can stand behind, from a source that's kept up to date, like the About page. - Don't pad the row. Three strong numbers beat six weak ones. **Features**: short, ticked features as a grid, a vertical ticker or a carousel. - Options: tag and body text. Features are a short line with a bold lead-in. One optional image beside the grid or ticker. One to four per row in the grid. - Do use it to back up a product with quick, scannable proof points. - Don't use the ticker or carousel for anything visitors must read. They move on by themselves. **Boxes**: a flexible grid of photo, quote, tile, graphic and video boxes, with or without text beside it. - Options: tag, body text and up to two buttons. Up to nine boxes, each placed on a 12-column grid (separately for desktop and mobile), with its own background, tag and link. Boxes on the left or right at 40%, 50% or 60%, or boxes only. - Do use it in a full-width section. - Don't fill every box with text. Mix photos with a quote or tile so the grid has a focal point. ### Cards and tabs **Cards**: a grid of content cards, each with a title, short text and an optional image, icon, tags and buttons. - Options: tag and body text. Banner image, image, icon, or banner image and icon. One to six per row (two on tablet, one on mobile). Up to two tags per card. - Do keep cards consistent: the same content type and a similar amount of text. - Don't use it just to link to other pages. Use Card links. **Card links**: a grid of fully linked cards for visual navigation. - Options: tag and body text. Up to 40 cards, each with a title, link, optional tag, background image and icon. Brand colour backgrounds (charcoal by default). One to six per row. - Do keep titles short, ideally the name of the page they link to. - Don't use it for content that needs explaining. Use Cards. **Tabbed cards**: sets of cards in tabs, so visitors can switch between them without scrolling. - Options: tabs, each with its own cards and cards per row. Same card options as Cards. Links can open a tab directly (like #cafes). - Do keep the cards in every tab alike. - Don't use it for a single set of cards. Use Cards. **Tabbed content**: content in tabs, each with text, buttons and an optional image or video. - Options: per tab, text, up to two buttons, and an image or HubSpot or YouTube video on the right (default), left or centred at 40, 50 or 60%, with an optional media tag. Links can open a tab directly (like #pos). - Do use it for parallel content, like products or venue types, where visitors only need one at a time. - Don't put key information in later tabs only. Many visitors never click past the first. **FAQs accordion**: questions that open to show their answers. - Options: tag, body text and up to two buttons. Questions written in the module, or pulled from the FAQs HubDB table (filtered by product and category, or picked one by one). Questions on the right (default), left or centred. A coloured tag per question. The questions are output as FAQ schema for search engines. - Do use it for questions visitors really ask. - Don't hide information everyone needs. ### Carousels **Carousel click**: a full-screen carousel where visitors click through one slide at a time. - Options: up to four slides, each with a title, short description, button, background photo and optional offset product image. Window height (default) or a custom height. Slides on the left or right. - Do use it for a few items that each deserve their own moment. - Don't use more than one window-height carousel on a page. **Carousel slide**: opens one slide at a time, with the others collapsed to their icons. - Options: up to four slides, each with an icon, title, description, up to two buttons and an image or video background (videos need a fallback image). Optional auto transition every 4 to 12 seconds. - Do pick icons that make each slide recognisable when collapsed. - Don't put key information on later slides only. **Carousel horizontal**: a full-screen carousel that holds the page while in view and scrolls sideways through linked items. - Options: tag, body text, up to two buttons. Items with a name and optional link, on a brand gradient or background image. Style 1 changes background on hover, style 2 adds an image. - Do use it for related items visitors will want to browse, like products or venue types. - Don't use more than one on a page. **Carousel vertical**: a full-screen carousel that holds the page while in view and scrolls up through items with descriptions. - Options: as Carousel horizontal, plus a description per item. Style 1 shows it on hover, style 2 as one line above an image, style 3 in full. - Do use style 3 when the description matters. It's the only style that shows it in full on phones. - Don't use it on the same page as Carousel horizontal. **Carousel simple**: a simple carousel of linked images with titles. - Options: image, title and optional link per item. The look is fixed by the theme. - Do use images of the same shape and style. - Don't use it when items need explaining. Use Cards. ### Media **Media**: a single image or video, on its own or beside a heading and text. - Options: media and text, or media only. Image, or HubSpot or YouTube video with thumbnail, title, subtitle and duration, autoplay and loop. Media centred (default), or left or right running to the screen edge, at 40, 50 or 60%. Buttons can be images, like app store badges. - Do show the product where it's used, like a terminal on a bar. - Don't autoplay a video with something to say. **Videos**: HubSpot or YouTube videos in a grid, in landscape or portrait. - Options: tag and body text. Per video, a thumbnail, title, subtitle, tag and duration. The grid sets itself from the number of videos. Autoplay plays muted, with no thumbnail or caption. - Do give every video a title and subtitle. - Don't autoplay videos with speech. **Blog cards**: blog posts as cards, picked by hand or pulled in automatically. - Options: tag and body text. Select blogs (up to nine, the default) or Recent blogs from a chosen blog. - Do use it near the end of a page to point visitors to related reading. - Don't use Recent blogs on pages about one topic. Pick posts with Select blogs instead. **Integrations**: the integrations for each Oolio product, as a filterable grid or carousel, pulled from the integrations HubDB table. - Options: Automatic (the site's brand and region, the default) or Custom (pick products and categories). Logo-only or detail cards, three to six per row, optional category filter menu. - Do use Automatic on product sites, so the list stays right for the brand and region. - Don't hide the filter menu on a long grid. ### Conversion **Banner**: a callout that draws attention to a key message, usually with a call to action. - Options: tag, heading, body, up to two buttons. Background photo with centred text, or an offset product image on a gradient. - Do use it as a full-width section, part-way down or near the end of a page. - Don't use it at the top of the page. Use the Hero. **Landing form**: a HubSpot form beside a heading, with extra content like logos, a quote, an image or a video. - Options: tag, body text, any HubSpot form (inline thank-you or redirect). Extra content blocks below the intro. Form on the right (default), left or centred below. - Do give visitors a reason to fill it in, like a customer quote or venue logos. - Don't stack more than two or three extra blocks. Keep the form the focus. **Modal form**: a HubSpot form in a modal pop-up, opened from any button or link. - Options: tag, body text, any HubSpot form. Open it by setting a button's link to `#modal-1` (see HubSpot specifics). - Do use it to keep visitors on the page, opening a short form from a "Get in touch" button. - Don't move modals around without checking their triggers. **Modal meetings**: a HubSpot meetings calendar in a modal pop-up, for booking a time. - Options: a HubSpot meetings link. Opened the same way as Modal form. - Do use a team or round-robin link, so bookings don't depend on one person's calendar. - Don't label the button "Get in touch". Say what happens, like "Book a demo". --- ## Elements The shared pieces every module is built from. Full detail is on the [Elements page](https://brand.oolio.com/website-theme/elements). **Buttons.** Modules with buttons offer five numbered styles. They map to the Elements page like this: | Style | Looks like | Use | |---|---|---| | Button style 1 | Purple fill, white text | Primary: the main action. One per section at most | | Button style 2 | White fill, charcoal text | Secondary: an alternate action on a dark or coloured background | | Button style 3 | Transparent with a white outline | Outline: a lower-emphasis action next to a primary or secondary button, on a dark background | | Button style 4 | Charcoal fill, white text (black on hover) | A solid dark action on a light or coloured background. Don't use it on charcoal or dark backgrounds, where it disappears | | Button style 5 | Text with an arrow, no box | Text link: inline or tertiary actions like "Learn more" | Buttons are bold, uppercase and slightly rounded (6px). All styles share the same hover, press and disabled behaviour. **Tags.** One tag style works as a category tag, a filter and an eyebrow label above a heading. It comes in the brand colours, so match it to the content around it. **Surfaces.** Content inside a section sits on a small, 12px-radius surface (tiles, stat blocks, quote panels). Whole-section containers use a larger radius. Both share a soft, centred shadow that lifts slightly on hover. **Quotes and stats.** One pull-quote treatment is used everywhere a quote appears, and stat blocks use the same surface as everything else. **Forms and feedback.** Form fields use the same button styles and focus indication as the rest of the site. Success and error states have their own dedicated colours, separate from the brand palette (see DESIGN.md). **Media.** Video captions and background video overlays share one treatment, to keep text readable over moving footage. **Spacing.** Sections share a consistent amount of breathing room, with a light and a dark divider style available. --- ## Writing for the website Follow the voice and tone in DESIGN.md. On top of that, for web pages: - UK English. Say "visitors", not "users" or "readers". - Keep headings short. A question works well for a Banner heading. - Button labels say what happens next: "Book a demo", "Explore payments", "Read the story". Not "Click here" or "Submit". - Only make claims that appear on oolio.com or blog.oolio.com. Don't invent features, numbers or benefits. - Use real, attributed customer quotes, word for word. Trim only from the start or end. - Tags are short labels in sentence case: "Quick service", "QR ordering". - Write alt text for every image that describes what's in it, like "Café team serving customers at the counter". --- ## HubSpot specifics Things that matter when building a page in the HubSpot editor: - **Modal triggers.** Modal form and Modal meetings modules are numbered in page order, counting both types together. The first opens from a button or link set to `#modal-1`, the second from `#modal-2`, and so on. Moving a modal changes its number, so recheck triggers after any reorder. - **Opening a tab from a link.** Tabbed content and Tabbed cards open a tab from the URL, like `#pos`, or `#anchor-pos` when the module has an anchor ID set. - **HubDB tables.** FAQs accordion, Logos, Testimonials and Integrations can pull their content from shared HubDB tables, so one change updates every page. If a table has no matching rows, the module shows nothing on the live page and only an editor note in HubSpot. - **Editor notes.** Text in square brackets starting "[Editor note:" only shows in the HubSpot editor, never on the live page. - **Full-width sections.** Set in the section's settings in the editor, not in the module. - **Video on phones.** Hero background videos only play on screens 768px and wider, and not for visitors who prefer reduced motion. Always set a fallback image. --- ## Do's and don'ts - **Do** build every page from the four templates and the existing modules. **Don't** create custom layouts or one-off styles. - **Do** open media-led pages with one Hero on the Hero or Landing Hero template. **Don't** add a second Hero or put a Banner at the top. - **Do** follow the oolio.com pattern: Hero, Intro, proof, then a Banner with the next step. **Don't** stack several full-screen carousels on one page. - **Do** use the module's own options for layout, colour and alignment. **Don't** override the theme's fonts, colours or grid. - **Do** use HubDB-driven content (FAQs, venue logos, testimonials, integrations) where it exists. **Don't** copy the same content into modules by hand. - **Do** use button style 1 for the main action and one primary button per section. **Don't** introduce new button or tag treatments. - **Do** use real venues, real quotes and claims from oolio.com. **Don't** invent numbers, features or testimonials. --- ## Using this file with AI Add this file and DESIGN.md to your AI tool's project or knowledge base, then steer it with instructions like: - "Plan this page using only the templates and modules in the Oolio website theme reference." - "For each section, name the module and the options to use, then write the copy." - "Follow the Oolio brand & design reference for voice and tone, and the website theme reference for structure." - "Only use claims, numbers and quotes that appear on oolio.com or blog.oolio.com." - "This file is a snapshot, not the live source of truth. If something looks out of date, check [brand.oolio.com/website-theme](https://brand.oolio.com/website-theme) first."