# Oolio brand & design reference Drop this file into an AI tool's project knowledge (Claude Project, custom GPT, etc.) before asking it to design or build anything for Oolio outside the website — a report, a social graphic, a print piece, a deck. For web pages, use [WEBSITE.md](https://brand.oolio.com/ai-design) alongside it. It gives the AI the brand fundamentals it needs to stay on-brand without you having to repeat them every time. Sourced from the official [Brand Guidelines](https://brand.oolio.com) and the live [Oolio website](https://www.oolio.com). Those pages are the source of truth — if anything here looks out of date, check there first, since this is a static snapshot and won't update itself. **Last checked against brand.oolio.com:** 7 September 2026. Update this date whenever the file is re-verified against the live guidelines. --- ## Quick reference | | | |---|---| | Primary colour | Oolio Purple — `#673AB6` (Pantone 266 C) | | Accent colours | Light Blue `#03A9F4` · Yellow `#FFEB3B` · Charcoal `#222222` | | Typeface | Inter (only) | | Icon library | Lucide Icons, line-style, 2px stroke | | Logo | Purple on light backgrounds, white on dark/purple, black only for single-colour print | | Voice | Human, not corporate. Confident, not arrogant. Warm, not casual. Clear, not simple. | --- ## Brand foundation Oolio exists to facilitate celebration in hospitality — "more than tech, a partner that's with you at every step." The brand is built by people who've poured drinks, served tables, and fixed tills, and that experience shapes everything about how it's presented: proven in hospitality, backed by real people and real support, and built specifically for the realities of Aussie venues. The goal across every touchpoint is one cohesive identity — consistent and recognisable, not a different look per product or channel. --- ## Voice & tone **Four pillars:** Human, not corporate. Confident, not arrogant. Warm, not casual. Clear, not simple. - UK English spelling and grammar. - No jargon — avoid words like "streamline," "operational," "seamless." - Contractions are fine. Short, direct sentences beat long, formal ones. - The reader is the hero — lead with "you/your," not "we/our," except when speaking as a partner ("we're with you"). - ❌ "Streamline your operational efficiencies across your venue network." - ✅ "One system. Zero headaches." **Tone shifts slightly by context** but never drops the four pillars: - Marketing: energetic, outcome-focused — *"Pour. Plate. Pay. Everything your venue needs, connected."* - Product UI: clear, calm, functional — *"Transaction complete. Here's your summary."* - Support: warm, reassuring — *"We're on it. Here's what happens next."* - Partner materials: professional, credible — *"Your partner in service."* - Homepage, live today: *"We've lived hospitality — that's why we built better tech for it."* **Naming:** Oolio (never OOLIO or oolio). Product names — Bepoz, Ordermate, Oolio Pay — stand on their own, not written as sub-brands of Oolio. --- ## Colour **Roles at a glance** — what to reach for by function, not just by name: | Role | Colour | Hex | |---|---|---| | Background / surface | White | `#FFFFFF` | | Body text & headings | Charcoal | `#222222` | | Primary / CTA | Oolio Purple | `#673AB6` | | Links | Light Blue | `#03A9F4` | | Success | Pale green background, dark green text/border | `#CDE3CC` / `#4F7D24` | | Error | Coral-red text/border | `#EF6B51` | | Yellow | Named accent — supports the primary, not yet used by a component | `#FFEB3B` | | Extended palette (below) | Supporting use only — tags, data, illustration accents. Never the dominant colour on a page. | — | **Primary — Oolio Purple `#673AB6`** (Pantone 266 C). Use for logos, headings, key UI elements — anywhere the brand needs to make a statement. This should always dominate; nothing else should compete with it. **Accents** — support the primary, never replace it: | Colour | Hex | Pantone | |---|---|---| | Light Blue | `#03A9F4` | 2995 C | | Yellow | `#FFEB3B` | 107 C | | Charcoal | `#222222` | — | **Extended palette** — available for specific contexts (data viz, tags, illustration) but not part of the core identity: | Colour | Hex | Pantone | |---|---|---| | Red | `#F44336` | 1788 C | | Pink | `#E91E63` | 213 C | | Purple | `#9C27B0` | 253 C | | Indigo | `#4050B5` | 7455 C | | Blue | `#2196F3` | 2925 C | | Cyan | `#00BCD4` | 311 C | | Teal | `#009688` | 327 C | | Green | `#4CAF50` | 7738 C | | Light Green | `#8BC24B` | 360 C | | Lime | `#CDDC39` | 380 C | | Amber | `#FFC008` | 7549 C | | Orange | `#FF9800` | 1375 C | | Deep Orange | `#FF5722` | 172 C | A set of pre-defined gradients also exists across this palette — see the [Colour page](https://brand.oolio.com/colour) for the full set. **Print production:** Pantone values above are for spot-colour print. CMYK equivalents aren't documented here — Pantone-to-CMYK isn't a straight calculation, and an approximated conversion risks a visibly wrong brand colour on a real print run. Get exact CMYK from the official Pantone Bridge/Solid Coated conversion or your print vendor. Bleed, safe margins, and paper stock aren't documented either — confirm against your printer's specs per job. --- ## Typography **Inter, exclusively.** Free via Google Fonts. - **Black** — hero headings, section headings, large display text. - **Bold** — labels, minor headings, emphasis, callouts and quotes. - **Regular** — body text, captions, supporting copy. Headings should always be a heavier weight than the body text next to them. Body text size should sit at roughly 50% of the heading size it accompanies, to keep hierarchy clear. Line height runs 120–150% of font size — tighter for large display headings, looser for body copy. Don't adjust Inter's default kerning/tracking; it's tuned already. **Type scale:** Not yet defined as explicit point/px sizes — hierarchy today is governed by weight and the 50%-body-to-heading ratio above. If a request needs literal sizes, ask the design team for the current scale rather than guessing one that merely fits the ratio. **Grid & breakpoints:** Not documented here. The website theme defines a single mobile breakpoint (767px) but no column grid exists anywhere in the brand system. Treat multi-column layouts by feel (see Spacing rhythm, below) rather than inventing breakpoint values. --- ## Logo Three approved colour variants: - **Purple (primary)** — white or light backgrounds, the vast majority of cases. - **White** — dark or Oolio Purple backgrounds only. - **Black** — only when neither purple nor white works, e.g. single-colour print. Keep clear space around the logo at least equal to the height of the two "O" characters in the wordmark — no other design element enters that zone. Don't: stretch or distort it, recolour it outside the three variants, place it on a background that hurts legibility, add outlines/gradients/effects, use a product logo where the primary mark belongs (or vice versa), or use an outdated version. As the guidelines put it — do not alter, do not improvise. **Reseller badge lockups** A fourth category, distinct from the primary and product logos: the "Authorised Reseller — [Product]" badge, confirming reseller status. It's a fixed lockup, not the primary logo — don't merge it with a reseller's own company logo into a single combined mark, and give each badge its own clear space if more than one appears together. Downloadable assets and full rules live on the [Resellers page](https://brand.oolio.com/resellers). --- ## Iconography [Lucide Icons](https://lucide.dev/icons), line-style (outline, not filled), 2px stroke weight scaling proportionally with size. Oolio Purple by default; black or white where context requires it. Icons support content — they don't replace it. Always pair with text, a heading, or a fact rather than standing alone. Don't mix in icons from other libraries, and don't hand-adjust the stroke weight. --- ## Imagery The brief: "photography that feels like hospitality" — warm, lively, genuinely human, shot in real venues rather than staged studio setups. - Real settings: cafes, restaurants, bars, QSR — genuine moments of service and connection, not sterile mockups. - Show product in its natural environment (a bar counter, a café till, a kitchen) rather than isolated product shots — the tech supports the experience, it isn't the focus. - Relaxed, cheerful, welcoming energy. Diverse staff and customers, reflecting real hospitality communities. Avoid: hardware/tech Oolio doesn't offer, isolated equipment on non-hospitality surfaces, generic staged stock photography, screenshots with placeholder/test data, outdated product versions, or cold corporate imagery. All stock imagery should come from the approved repository. --- ## Video & motion Not yet documented. The website applies a consistent treatment to video specifically — a charcoal gradient overlay for legibility, a purple circular play button, a subtle glow on hover — but no pacing, transition, lower-third, or safe-area guidance exists for motion content generally. If you're producing video or animated social content, check with the brand team before establishing a pattern rather than inferring one from the static guidance above. --- ## Do's and don'ts The fast version of everything above — the guardrails most likely to matter when something's being generated quickly: - **Do** keep Oolio Purple dominant everywhere it appears. **Don't** invent a new brand colour, or a close-but-different shade of purple, to fill a gap. - **Do** use Inter, unmodified. **Don't** substitute a similar-looking typeface or hand-adjust its kerning/tracking. - **Do** use the three approved logo variants exactly as specified. **Don't** recolour, stretch, distort, or add effects to the logo. - **Do** use Lucide's line-style icons at a consistent stroke weight. **Don't** mix in filled icons or a different icon set. - **Do** source imagery from real hospitality settings or the approved stock repository. **Don't** use generic staged stock photography, placeholder UI data, or isolated product shots. - **Do** use soft, centred, ambient shadows for depth. **Don't** default to a hard-edged, angled drop shadow — that's reserved for one deliberate accent, not a general pattern. - **Do** keep success and error in their own dedicated colours (success `#CDE3CC`/`#4F7D24`, error `#EF6B51`). **Don't** reuse the brand green or red tokens for status messaging. - **Do** write like a person — human, warm, direct. **Don't** default to corporate jargon ("streamline," "operational," "seamless"). --- ## Accessibility Not formally published in the Brand Guidelines yet, so treat this as a practical addition rather than an official rule. Oolio Purple on white (or white on Oolio Purple) has strong contrast — roughly 7.3:1, clearing WCAG AAA — safe for body text, not just headings. Light Blue on white is the real risk: at roughly 2.6:1, it fails WCAG AA even at large sizes. Don't use it for body text or fine print on a white background — reserve it for larger link text, accents, or pair it with a darker background. --- ## How the brand shows up on the website The [website theme](https://brand.oolio.com/website-theme) is the fullest expression of this identity in a digital product. Its structural choices — corner radius, shadow, spacing, borders — follow a consistent internal logic. The exact pixel values are web-specific, but the *proportions and principles* behind them translate directly to a report layout, a social tile, or a printed piece. **Shape language** Small, interactive elements — buttons, tags, badges — are bold, uppercase, and lean toward a rounded, pill-like shape. That's a good default anywhere you need a "chip," label, or callout in any medium, not just on screen. **Corner radius — a two-tier scale** Small elements (buttons, tags, form fields) use a tight, subtle radius. Content containers (cards, tiles, panels) use a noticeably larger radius — roughly double. The largest radius is reserved for the biggest containers on the page (a footer band, a full pull-quote block). Anything circular (avatars, play buttons, dot dividers) is fully rounded. *On the website:* 6px on buttons/tags/fields, 12px on cards and tiles, 16px on large outer containers, full circle for avatars and icons. *Applying it elsewhere:* pick one small radius for buttons/badges/small elements, roughly double it for cards or content blocks, and reserve the largest radius for full-bleed containers or hero elements. Never make a big container sharper-cornered than the small elements sitting inside it. **Depth & shadow** Shadows on oolio.com are soft, wide, and centred directly behind the shape — an ambient glow, not a hard-edged shadow cast off to one side. It's barely visible at rest and only deepens slightly on hover or interaction. A single directional, angled shadow exists on the site (a "premium" badge) but it's a deliberate one-off, not the pattern to copy. *On the website:* resting shadow is `0 0 48px rgba(0,0,0,0.03)` — extremely soft, no offset. It strengthens to roughly 5x that opacity on hover. *Applying it elsewhere:* when something needs to lift off the page — a card in a report, a callout box, a product tile in a social graphic — use a soft, evenly-spread shadow with no directional offset. Avoid a sharp, angled drop shadow as the default; save a heavier directional shadow for one deliberate accent, not everything at once. **Spacing rhythm** Spacing is built from a small, repeating base unit rather than ad-hoc numbers — most gaps and padding on the site are that unit or a clean multiple of it. The gap between one major section and the next is dramatically larger than the spacing used inside a single component, which is what makes the site feel organised rather than cramped. *On the website:* 16px is the single most common spacing value by a wide margin; the gap between full-width sections is 80–100px, several multiples larger than anything used within a component. *Applying it elsewhere:* pick one base spacing unit for a layout and stick to clean multiples of it for margins, gutters and gaps, rather than eyeballing each one. Keep a clear, large jump between major sections versus the tighter spacing used within one section. **Borders & dividers** Borders are thin and quiet — they define an edge without adding visual weight, and typically match the colour of what they're outlining rather than contrasting with it. The only time a border carries real visual weight is when it's the only thing giving an element its shape, like an outline-style button with no fill. Divider lines are hairline-thin by default, with a bolder version reserved specifically for dark or coloured backgrounds, where a thin line would otherwise disappear. *On the website:* 1px grey borders on form fields, 2px self-coloured borders on buttons; a 1px light-grey divider by default, stepping up to 4px white only on dark backgrounds. *Applying it elsewhere:* use borders to quietly separate content, not to decorate it. If a border needs to carry real visual weight — framing an image, say — make that a deliberate, slightly heavier choice rather than defaulting to a thin line and hoping it reads. **Colour in practice** Success and error states use their own dedicated colours, deliberately kept distinct from the core brand palette (see Colour). Worth carrying into any medium that needs a status or confirmation colour, so it's never confused with a brand accent. For the full technical detail behind all of this (exact values, states, code) — relevant if you're actually building on the website theme, not for other design work — see the [Elements page](https://brand.oolio.com/website-theme/elements). --- ## Using this file with AI Add this file to your AI tool's project or knowledge base before asking it to design something, then steer it with instructions like: - "Follow the Oolio brand & design reference above exactly — colour, typography, logo, iconography and tone as documented." - "If a request isn't covered here, default to the visual language in 'How the brand shows up on the website' rather than inventing a new style." - "Never introduce a colour, font, or icon style outside what's documented above." - "This file is a snapshot, not the live source of truth — if something looks out of date or a request conflicts with it, check [brand.oolio.com](https://brand.oolio.com) first."