Design system · v1.1 · May 2026
Living reference for the colours, words, components, and motion that bring Nabooki to life. Built so the team can ship faster and so partners can see what we stand for.
02Brand
A short story about who we make Nabooki for, where we come from, and what we believe.
Nabooki is a booking platform built for small tourism and activity operators in Australia. Walking tours, food experiences, marine adventures, attractions, government tourism programs — the businesses that make travel personal.
We started because the existing tools were either too expensive for small teams, or too generic to fit how tourism actually works. So we built something specifically for the way you run your business.
Today, more than 1,000 operators use Nabooki to take bookings, manage availability, accept payments, and grow direct customer relationships — without handing their margin to a third-party marketplace.
03Voice & tone
How we write at Nabooki. Four principles, four pairs to show what they look like in practice.
01
Clear, professional, approachable
02
Audience-aware — we write to small operators
03
Confident without bragging
04
Practical examples beat abstract benefits
Don’t
Leverage our cutting-edge platform
Do
Take bookings online
Don’t
Synergise customer touchpoints
Do
Talk to your guests
Don’t
Best-in-class booking solution
Do
Built for small operators
Don’t
Streamline your operational workflow
Do
Spend less time on admin
04Colours
Navy as the anchor, blue as the action, orange for moments that matter. Cream and white carry everything else.
05Typography
One typeface, three jobs. Headings carry voice, body carries clarity, eyebrows carry rhythm.
Customers can book anytime from any device. No calls, no back-and-forth, no missed messages on a Saturday afternoon.
Section eyebrow
06Spacing & Layout
Every gap, every padding, every margin reaches for one of these values. The site stays in rhythm because of it.
xs — 4px
space-xs
sm — 8px
space-sm
md — 16px
space-md
lg — 24px
space-lg
xl — 48px
space-xl
2xl — 96px
space-2xl
container
max 1200px
07Motion
Five timing tokens, one easing curve. Used on hover, focus, on-load reveals, and scroll-into-view fades. Always respect prefers-reduced-motion.
motion-micro
150ms
Color shifts, focus rings, button state changes.
motion-fast
200ms
Hover lifts, link underlines, icon swaps.
motion-base
300ms
Card hover, dropdown open, default for most UI.
motion-medium
500ms
Scroll-reveal fade-ups, modal open.
motion-slow
800ms
Hero stagger on page load, big section transitions.
08Icons
Stroke 2, 24 by 24, rounded caps. We import them inline as SVG so they inherit colour from their parent text.
tabler-coins
tabler-database
tabler-world
tabler-calendar
tabler-credit-card
tabler-users
09Buttons
Blue is the everyday primary. Accent is reserved for “Request a demo.” Navy carries government and authority. Outline is the secondary on light backgrounds.
10Cards
White on cream, cream on white, navy on cream. Each one has a job, and they never argue.
card--white
Tours & activities
Keep 100% of your revenue when customers book with you directly.
card--cream
Belief
Direct relationships beat marketplace placements.
card--navy
Government
Trusted infrastructure for tourism stimulus and regional development.
Let customers book directly from your website, 24/7. No phone calls, no manual entries.
Learn more →No commissions. No per-booking fees. Keep 100% of direct revenue.
We switched from a commission-based platform and kept more revenue from day one.
Real-time availability across all booking channels. Set capacity and blackout dates easily.
These examples use the real production classes from your site. Use these as a visual guide when building new pages.
.card
Standard card. Use for feature lists, benefit breakdowns, and content grids.
.card .card--sm
Reduced padding. Use for compact grids or secondary information blocks.
.card .card--ruled
Blue top border. Use for steps, working items, or process-oriented content.
section-header controls the label + heading + body group above each content section. The .centered combo centres the whole block.
.section-header
Keep 100% of your revenue. No commissions. No per-booking fees.
.section-header .centered
Keep 100% of your revenue. No commissions. No per-booking fees.
section-label
section-label
section-label · section-label--accent
section-label · section-label--blue
card-eyebrow
card-eyebrow
card-eyebrow · card-eyebrow--accent
card-eyebrow · card-eyebrow--slateblue
step-badge
step-badge--blue
step-badge--orange
step-badge--navy
plan-card
plan-card
plan-card · plan-card--featured
section-cta
section-cta
section-comparison
section-comparison
comparison-header