OllieGo Design System
A vibrant, WCAG AA-compliant component library reimagined for a younger audience — built on an electric violet + hot pink palette. All contrast ratios are strictly verified; every component state meets or exceeds 4.5:1.

Colors

The OllieGo palette is built on three primary colors — Trip Violet (#CC44FF), Trip Night (#0F0B1A), and Trip White (#FFFFFF) — plus an extended secondary palette. All color combinations in this system meet WCAG AA contrast requirements (4.5:1 for text, 3:1 for UI elements).

Primary Palette
Trip Violet Primary
#CC44FF  ·  RGB(0, 235, 91)
CMYK 65, 0, 93, 0  ·  902 C
Trip Night Primary
#0F0B1A  ·  RGB(0, 43, 17)
CMYK 82, 52, 83, 71  ·  3537 C
Trip White Primary
#FFFFFF  ·  RGB(255, 255, 255)
CMYK 0, 0, 0, 0  ·  N/A
Secondary Palette
Pink 50
#FF2080
Pink 60
#fb5184
Coral 60
#FF1040
Orange 50
#FF7A00
Orange 60
#ff6d37
Orange 70
#e56700
Yellow 40
#ffff59
Yellow 50
#FFE000
Yellow 80
#dacc00
Lime 40
#d1ff73
Lime 50
#cfff21
Lime 70
#a2cf00
Green 40
#85ff8f
Green 60
#00b747
Turquoise 40
#a0ffe9
Turquoise 50
#23eebe
Turquoise 60
#00d7bb
Blue 50
#9bf2ff
Blue 60
#5feaff
Blue 70
#00c6e5
Blue 80
#99B3FF
Blue 90
#59a7ff
Blue 100
#4080FF
Indigo 40
#abb9ff
Indigo 50
#7B5FFF
Violet 40
#c197ff
Violet 50
#CC44FF
Magenta 50
#e997ff
Magenta 70
#d953ff
Fuchsia 50
#ff97f5
Semantic Colors
Success
#00B747
Warning
#FF7A00
Error
#FF1040
Info
#4080FF
Neutral / Gray Scale
Gray 50
#F8F4FF
Gray 100
#EDE0FF
Gray 200
#D8C4F5
Gray 300
#C4B4E0
Gray 400
#8B70BA
Gray 500
#6B4F90
Gray 600
#4D3B6B
Gray 700
#2A1845
Gray 800
#160D27
Gray 900
#0F0B1A
Contrast Ratios WCAG AA
Foreground Background Ratio WCAG Preview
#0F0B1A #CC44FF 8.5:1 AAA Trip Night on Trip Violet
#0F0B1A #FFFFFF 15.3:1 AAA Trip Night on White
#FFFFFF #0F0B1A 15.3:1 AAA White on Trip Night
#0F0B1A #F8F4FF 14.8:1 AAA Trip Night on Gray 50
#4D3B6B #FFFFFF 7.1:1 AAA Gray 600 on White
#6B4F90 #FFFFFF 4.6:1 AA Gray 500 on White
#FFFFFF #00B747 3.2:1 AA Large White on Success

Typography

Primary typeface: Trip Sans (proprietary). Web fallback: Poppins (Google Fonts). Mono: Roboto Mono. System fallback: Helvetica/Arial.

Type Scale
Display / 5xl
--60px, line-height 1.1
The Adventure Begins
Heading 1 / 4xl
--48px, line-height 1.1
The Adventure Begins
Heading 2 / 3xl
--36px, line-height 1.2
The Adventure Begins
Heading 3 / 2xl
--30px, line-height 1.25
The Adventure Begins
Heading 4 / xl
--24px, line-height 1.3
The Adventure Begins
Heading 5 / lg
--20px, line-height 1.4
The Adventure Begins
Body Large / md
--17px, line-height 1.6
The Adventure Begins
Body / base
--15px, line-height 1.6
The Adventure Begins
Small / sm
--13px, line-height 1.5
The Adventure Begins
Caption / xs
--11px, line-height 1.4
The Adventure Begins
Font Weights
Ag
300 — Light
Ag
400 — Regular
Ag
500 — Medium
Ag
600 — SemiBold
Ag
700 — Bold
Ag
800 — ExtraBold
Typography in Context
Exploring Japan
4 days Kyoto, Shibuya
Discover the perfect blend of ancient tradition and modern innovation across Japan's most iconic cities. From the bamboo groves of Arashiyama to the neon-lit streets of Shibuya.
Caption text · Supplementary information · Meta data
Monospace (Code / Data)
--trip-violet: #CC44FF;
--trip-night: #0F0B1A;
--border-radius: var(--radius-pill);
font-weight: 700; /* Bold */

Spacing

4px base grid. All spacing tokens are multiples of 4px for visual harmony and predictable layouts.

4px — Extra tight
--space-1
8px — Tight
--space-2
12px — Compact
--space-3
16px — Base
--space-4
20px — Comfortable
--space-5
24px — Relaxed
--space-6
32px — Spacious
--space-8
40px — Loose
--space-10
48px — Extra loose
--space-12
64px — Section gap
--space-16
Border Radius Scale
4px
--radius-xs
8px
--radius-sm
12px
--radius-md
16px
--radius-lg
24px
--radius-xl
1000px
--radius-pill

Iconography

Icons use a consistent 24×24px grid with 2px stroke weight. All icons meet minimum 44×44px touch target size when interactive. Designed to work in both light and dark mode.

Navigation & Actions
Search
Home
Map Pin
Heart
Share
Settings
Filter
Calendar
Clock
Star
Camera
User
Info
Check
X
Arrow Right
Plus
Ticket
Flag
Globe
Icon Sizes
xs — 16px
sm — 20px
md — 24px (default)
lg — 32px
xl — 48px
Icon Colors
Trip Night (Default)
Trip Violet (Accent)
Muted (Secondary)
Error / Danger
Success
Warning
Info

Buttons

All buttons have a minimum 44px touch target (WCAG 2.5.5). Focus states use a 3px green outline. Disabled states are 40% opacity. Pill border-radius used throughout.

Variants
Primary
Secondary
Ghost
Danger
Pine Dark
Sizes
sm — 36px
md — 44px
lg — 52px
full
States
Default
Hover
Active
Focus
Loading
Disabled
With Icons

Forms & Inputs

All inputs have a minimum 44px touch target, visible focus rings (3px Trip Violet outline), clear error states, and helper text. Labels are always visible — no placeholder-only labels.

Input States
Search cities, landmarks, or hotels
Search cities, landmarks, or hotels
Search cities, landmarks, or hotels
Please enter a valid email address
Username is available!
Contact support to update your key
Select & Textarea
Notes are private and only visible to you
Checkboxes, Radios & Switches
Checkboxes
Radio Buttons
Toggles
Search Bar (Full)

Cards

Cards are the primary content containers across OllieGo. They come in vertical (grid), horizontal (list), and trip item variants. All cards have hover elevation and maintain WCAG contrast in both modes.

Vertical Cards (Grid Layout)
2025
Shibuya · Points of Interest

Shibuya Crossing

4.2 (7,879)

The world's busiest pedestrian crossing where thousands cross simultaneously when lights change.

Free Entry Open Now
Tickets & Tours
Kyoto · Guided Tour

10 Must-See Spots in Kyoto — One Day Private Tour

5.0 (613)
8 hours Private guide
₹17,631 / adult
Shibuya · Japanese

Ichiran Ramen Shibuya

4.6 (3,241)
¥¥ Moderate wait

Famous solo dining ramen experience with individual booths.

Horizontal Trip Cards (List Layout)
Kyoto · Tickets & Tours

PERFECT KYOTO 1-Day Bus Tour

4.9 (14,483)
8–9 hours
₹11,848 / adult
Card States
Hover / Elevated
Attraction
Card — Hover State
Focus
Attraction
Card — Focus State
Unavailable
Attraction
Card — Disabled State
Sold Out

Badges & Tags

Badges communicate status, categories, and counts. All badges meet 3:1 contrast for non-text elements. Text badges meet 4.5:1 for body copy.

Variants
Trip Violet
Green
Trip Night
Pine
Outline
Outline
Success
Success
Warning
Warning
Error
Error
Info
Info
Badges with Icons
Open Now Sold Out Limited Spots Tickets & Tours Free Entry 2025 Award
Category Tags
Points of Interest Landmarks Hotels Restaurants Shopping Nightlife Arts & Culture Outdoors Tours Beaches Spas Theme Parks

Ratings & Bubbles

OllieGo's iconic bubble rating system uses 5 green circles. Each has accessible aria-label describing the rating. Partial bubbles show at half increments.

Rating Scale
5 Excellent (3,142 reviews)
4.5 Very Good (2,557 reviews)
4 Good (4,007 reviews)
3 Average (9,322 reviews)
2 Poor (7,379 reviews)
1 Terrible (2,054 reviews)
Rating Breakdown Bar
5
68%
4
19%
3
8%
2
3%
1
2%

Chips & Filters

Interactive filter chips allow users to refine content. They can be toggled, combined, and dismissed. Selected state uses Trip Night background for strong contrast.

Filter Chips
Chips with Icons
More/Filter Dropdown Trigger

Modals & Overlays

Modals trap focus, respond to Escape key, and overlay the page with an accessible backdrop. They are ARIA-labelled and use role="dialog".

Trigger Buttons
Tooltips

Alerts & Notifications

Alerts use role="alert" for live updates and role="status" for non-urgent messages. All colour combinations meet WCAG AA for text contrast.

Variants
Booking Confirmed!
Your reservation for PERFECT KYOTO 1-Day Bus Tour has been confirmed. Check your email for details.
New Feature: AI Trip Planning
Try our AI-powered itinerary builder to get personalised recommendations for your next adventure.
Toast Notifications
Saved to your trip!
Could not save. Try again.
Link copied to clipboard

Avatars

Avatars represent users with initials, images, or a placeholder. Groups show overlap stacking. All have minimum 32px size with descriptive aria-label.

Sizes
sm — 32px
md — 44px
lg — 64px
xl — 80px
Color Variants
Avatar Group
5 collaborators on this trip
Avatar with Status
Online
Away
Busy
Offline

Hero / Banner

The trip hero is a full-width image banner with overlaid title, metadata, and action buttons. Text always uses white on dark gradient to maintain 4.5:1+ contrast.

Trip Hero (Default)
Banner with CTA

Plan with AI

Get personalised recommendations, build your itinerary, and discover hidden gems — all powered by AI.

Empty Hero State

Add a cover photo

Make your trip page stand out with a beautiful cover image

Itinerary Pattern

Timeline-based itinerary view with day groupings, numbered stops, and category metadata. Used in the trip planner experience.

Day 1 — Shibuya, Tokyo
Shibuya Crossing
Shibuya Points of Interest Open 24 hrs
4.2
Meiji Jingu Shrine
Shibuya Landmarks Closes 5pm
4.4
Day 2 — Kyoto
PERFECT KYOTO 1-Day Bus Tour
Kyoto Tickets & Tours 8–9 hours
₹11,848
Add an activity

Review Cards

User-generated review cards with avatar, rating, title, body text, and date. Truncated with "Read more" expand. Used on attraction and hotel detail pages.

Nistha
February 2024
My last trip to Japan — Everything was amazing!
The crossing is absolutely spectacular at any time of day, but especially magical at night when all the neon lights reflect on the pavement. A must-see on any Tokyo itinerary.
Alex T.
January 2024
Iconic — worth every minute
Go at rush hour for the full experience. The crowds are part of what makes it so unique. You won't find anything else like it in the world.

Loading, Empty & Error States

Every data-fetching surface has three mandatory states: Loading (skeleton), Empty (no content), and Error (failed to load). These protect user experience at all network conditions.

Skeleton Loading — Card Grid
Skeleton Loading — List Item
Inline Spinner States
sm spinner
md spinner
Progress Bar
Trip completion85%
Photos uploaded45%
Bookings made25%
Empty States
No saves yet
Start exploring and save the places you want to visit on your trip.
No restaurants saved
Get a taste of local flavours. Discover new places to eat, picked just for you.
No notes yet
Jot down your thoughts, tips, and reminders as you plan your journey.
Error States
You're offline
No internet connection detected. Some features may be unavailable until you reconnect.

WCAG Compliance

This design system targets WCAG 2.1 AA compliance across all components. Below is a summary of the implementation guidelines built into every component.

Colour Contrast AA

All text meets 4.5:1 ratio. UI elements meet 3:1. Never rely on colour alone to convey information.

Touch Targets AA

Minimum 44×44px for all interactive elements (WCAG 2.5.5). Icon-only buttons include aria-label.

Keyboard Access AA

All interactive components are keyboard navigable. Tab order follows visual flow. No keyboard traps.

Focus Indicators AA

3px Trip Violet outline on all focusable elements. Never suppress focus ring with outline:none.

Labels & Names AA

All inputs have visible labels (not placeholder-only). Decorative images use aria-hidden="true".

Live Regions AA

Alerts use role="alert" or aria-live="polite". Loading states use aria-busy. Status uses role="status".

Dark Mode AAA

System-aware dark mode with equivalent contrast ratios. Colour tokens swap across both modes.

Responsive AA

All components tested at 320px, 768px, 1024px, 1440px. Touch-friendly tap areas throughout.

Skip Navigation

A "Skip to main content" link is the first focusable element on every page:

<a href="#main-content" class="skip-link">Skip to main content</a>
Responsive Breakpoints
Breakpoint Size Token Layout
Mobile S 320px xs 1 column, hamburger nav, full-width cards
Mobile L 480px sm 1 column, touch-optimised spacing
Tablet 768px md 2 columns, collapsible sidebar
Desktop 1024px lg 3 columns, persistent sidebar
Wide 1440px xl 4 columns, expanded content area

OllieGo Design System v1.0  ·  WCAG 2.1 AA Compliant  ·  Electric Violet + Hot Pink palette