Brand Guidelines
Brand
Guidelines
The visual language, principles, and standards that define how Roam shows up in the world.
Edition 2 · 2026
Brand Essence
Freedom on
your terms.
Roam is a long-term car rental and subscription service for the digital era. Our visual language conveys vibrancy, freedom, and friendliness — a brand that feels energetic and confident without ever being loud.
The palette is intentionally bold. That is precisely why restraint in application matters. Vibrant colours used at scale become overwhelming. Used as accents, they feel alive.
“Long-term car rentals.
Done better.”
Core tagline — used across all surfaces
Vibrant, not loud
Bold brand colours are used with intention as accents, not fills. White space is a primary design tool.
Clean and modern
Open layouts, generous spacing, and a restrained palette create a premium, contemporary feel.
People first
The customer and their lifestyle are always the hero. The vehicle plays a supporting role.
Logo
The wordmark
The R in the wordmark represents a winding road — communicating journey, adventure, and freedom. It is the most recognisable element of the Roam brand.
Logo colour variations
The wordmark is available in four approved colours. Choose based on background contrast and context.
Dark Blue
#13013F
Black
#000000
Fuchsia
#F93771
White
#FFFFFF
Symbol colour variations
The stylized R can appear independently in communications. It should never be the only brand identifier — the full wordmark must appear somewhere on the piece.
Dark Blue
#13013F
Black
#000000
Fuchsia
#F93771
White
#FFFFFF
Approved backgrounds
Use the appropriate logo colour for each background surface. Never place the logo on a low-contrast background.
White
Black
Fuchsia
Light Grey
Clear space
Maintain a minimum clear space equal to the x-height of the logo on all sides. No competing elements should appear within this zone.
Logo misuse
Protect the integrity of the wordmark. Never alter, distort, or recolour the logo outside of approved variations.
Don’t stretch or distort
Don’t rotate
Don’t skew
Don’t use unapproved colours
Don’t add effects
Don’t change proportions
Minimum sizes
Digital — 76 × 24px
Recommended — 140px+ wide
Colour
A bold palette, used with restraint
The interface is built on neutral tones. Brand colours are not the primary colours of the UI — they are accents and highlights that appear on top of a quiet, neutral foundation. This restraint is what makes them stand out.
What you see most
Neutral surfaces, neutral text, neutral borders. The zinc scale is the dominant colour on every page. This quiet foundation makes the brand colours count when they appear.
Where brand colours appear
Icons, badges, highlights, links, and the occasional full-colour section or card. Brand colours are deliberate moments — not the default.
Brand Colours
These are Roam’s brand colours. They are not the primary colours of the interface — they are used for accents, highlights, and occasional full-colour moments.
Black (CTA)
#0A0A0A
zinc-950
Primary CTA colour, buttons, and dark surfaces. Replaces the former dark blue CTA.On dark mode, CTA inverts to white on dark surfaces.
Fuchsia
#F93771
pink-700
The primary accent colour. Used on icons, badges, links, highlights, and small UI elements that need brand energy. This is the colour users see most often.
Purple
#5A49BB
brand-purple-900
Gradient endpoint, secondary accents. Bridges between dark blue and fuchsia in the brand palette.
Supporting Tints & States
Light Purple
#E3E0F4
Tint backgrounds (light mode)
Light Fuchsia
#FEEBF1
Badge backgrounds, subtle highlights
Fuchsia Hover
#D20643
pink-800
Fuchsia hover / active state
Purple Active
#4A3B9E
brand-purple-800
Purple active state
Fuchsia Light
#FCA8C1
pink-300
Fuchsia on dark surfaces
Brand Gradient
Brand Gradient
linear-gradient(254.33deg, #5A49BB 0%, #13013F 100%)
Reserved for hero sections and marquee moments. Not for general UI.
Neutral Palette
These are the colours you see most on the interface. Surfaces, text, and borders are all neutral — the zinc scale in Tailwind. This is what makes the brand colours stand out when they appear.
Background
#FFFFFF
background
Page background
Foreground
#0A0A0A
foreground
Headings, body text
Muted FG
#737373
muted-foreground
Secondary text
Muted
#F5F5F5
muted
Muted / sunken surfaces
Border
#E5E5E5
border
Dividers, outlines
Ring
#A1A1A1
ring
Focus rings
Where Each Colour Appears
Fuchsia
Icons, badges, links, highlights, active states, check marks
Button backgrounds, large fills, body text
Dark Blue
Full-colour sections (light mode only), dark surface cards, gradient start
Default CTA background, dark mode surfaces, body text
Purple
Gradient end, secondary accent details
Primary actions, text, large fills
Light Fuchsia / Purple tints
Badge backgrounds, subtle highlighted areas (light mode)
Dark mode — use deep tinted variants instead
Neutrals (zinc scale)
Everything else — surfaces, text, borders, buttons, cards, inputs
Nothing — this is the default
Colour in Context
Notice how the neutral foundation dominates. Brand colours appear only where they need to draw attention.
Buttons
Buttons are neutral (dark on light, inverted on dark). Brand colours do not appear on default buttons.
Accents & Badges
This is where fuchsia lives — small, intentional moments that draw the eye. Badges, status indicators, and highlights.
Do
- Use neutrals as the dominant interface colour
- Use fuchsia for icons, badges, links, and highlights
- Reserve dark blue for occasional full-colour sections (light mode)
- Keep backgrounds predominantly white or neutral dark
Don’t
- Use brand colours as the default button or surface colour
- Use fuchsia for button backgrounds — it reads as destructive
- Use dark blue for CTAs or buttons — use black instead
- Use brand colours for body text — always use black or white
Colour System
Neutral foundation,
brand accents
The interface is built on neutral tones. Surfaces, text, and borders are all neutral — this lets brand colours stand out when they appear. Brand colours are reserved for accents, highlights, and the occasional full-colour section.
Neutrals dominate
Surfaces, text, and borders are all neutral tones. This is what users see 90% of the time. Clean, quiet, and scannable.
Brand colours accent
Fuchsia and purple appear on icons, badges, and small highlights. Black is used for primary buttons. Brand colours draw the eye because the surrounding UI is quiet.
Full-colour sparingly
An occasional gradient banner or brand-colour section adds energy. These are deliberate moments — not the default.
Neutral Foundation
The interface is built on these neutral tokens. They handle surfaces, text, and borders in both light and dark mode.
surface
Page background
surface-raised
Cards, elevated content
surface-sunken
Inset / muted areas
surface-overlay
Modals, popovers
on-surface
Primary text
on-surface-muted
Secondary text
border
Default borders
border-strong
Emphasized borders
Brand Accents
These brand colours appear on top of the neutral foundation. They are only used for accents and highlights — never as the dominant colour of the interface.
accent
Fuchsia highlights, icons, badges
accent-subtle
Tint backgrounds for badges
cta
CTA buttons
secondary
Gradients, secondary accents
Dark Mode Approach
Dark mode inverts the neutral foundation. Brand colours are adjusted only where needed for contrast.
Surfaces
Clean zinc darks — not brand-tinted. The neutrality lets accents pop.
Text
Standard near-white (#FAFAFA) and zinc muted. No brand tinting on body text.
Borders
Zinc scale borders. Consistent with surfaces.
CTA buttons
Inverted — white button on dark background. Dark blue has zero contrast on dark surfaces, so we don't use it.
Fuchsia accent
Slightly lighter and more saturated (#FF5C90). Dark backgrounds absorb vibrancy, so we push the colour.
Accent-subtle tint
Inverted from near-white (#FEEBF1) to deep fuchsia-black (#2D0F1E). Same role, opposite lightness.
Brand gradient
Both endpoints lifted in lightness so it remains visible against dark surfaces.
Side-by-Side Preview
The same card in both modes. Neutral foundation, brand accents only on the badge and CTA.
Light mode
Kia Sportage
2025 · SUV · Automatic
Dark mode
Kia Sportage
2025 · SUV · Automatic
Full-colour sections
Examples of the colour system applied to full-width sections and cards — showing how surfaces, text, and accents work together at scale.
Full-Colour Brand Section
The car you want, for as long as you need it.
Browse 50+ models online. Book in minutes. Get it delivered or pick it up.
Gradient Feature Banner
Roam For Business
Fleet solutions for
modern companies.
From individual company cars to full fleet management. Flexible terms, one monthly payment, everything included.
Mixed Surface Cards
Saved vehicles
Keep track of the vehicles you’re interested in and get notified when prices drop.
Upcoming booking
Your next rental starts April 12. We’ll send you a reminder the day before.
Refer a friend
Share Roam with a friend and you both get $50 off your next month.
Accent Section (Restrained Fuchsia)
Insurance that keeps up with you.
Every Roam vehicle comes with comprehensive coverage through our insurance partners. No gaps, no surprises.
Pricing Cards
Short-Term
7–29 days
Full flexibility for short trips and temporary needs.
- Maintenance included
- 24/7 roadside
- Bring your own insurance or add ours
Long-Term
30+ days
Lowest rates. Auto-renews monthly. Cancel anytime after your minimum term.
- Maintenance included
- 24/7 roadside
- Insurance through Roam
- Lowest monthly rates
Full-Width CTA Banner
Ready to get on the road?
Browse our fleet, pick your plan, and we’ll handle the rest.
Dashboard Overview
Welcome back, Jane
2 active rentals
2
Active rentals
18
Days remaining
$420
Total saved
Kia Sportage
Long-Term
Hyundai Tucson
Short-Term
Typography
Maison Neue
Our brand typeface across all digital surfaces. A clean, contemporary sans-serif that feels approachable at body sizes and commanding at display scale.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @#$%
The obvious way to get a car.
Light
Body copy, long-form text
The obvious way to get a car.
Book
Default body, UI labels
The obvious way to get a car.
Medium
Subheadings, emphasis
The obvious way to get a car.
DemiBold
Section headings, card titles
The obvious way to get a car.
Bold
Strong headings, CTAs
The obvious way to get a car.
Black
Hero display text only
Font Stack
'Maison Neue', Arial, Helvetica, Roboto, system-ui, sans-serif
Maison Neue is self-hosted. The fallback chain ensures a clean sans-serif experience on all platforms.
Type Scale
Follow Tailwind's default type scale. Do not invent custom sizes.
Typography in Context
Hero
The car you want.
For as long as
you need it.
Browse online, book your vehicle, and get it delivered to your door.
Card
Kia Sportage
2025 · SUV · Automatic
Iconography
Consistent, purposeful icons
Icons default to Lucide via shadcn/ui. Consistent stroke weight, sized with Tailwind classes, coloured with currentColor so they adapt to light and dark mode automatically.
Sizing
w-4 h-4
16px
w-5 h-5
20px
w-6 h-6
24px
Colour
Default
Accent
Muted
Use currentColor by default so icons adapt to dark mode.
Rules
- Consistent stroke weight
- Size with Tailwind classes only
- Min 16px inline, 24px standalone
- Mixing line and filled styles
- Custom SVG when library icon exists
Feature Icon Pattern
Maintenance included
24/7 roadside
Delivery available
No credit impact
Photography
Real life, real people
Imagery should convey freedom, simplicity, and authenticity. The person and their lifestyle are always the hero — the car is present but plays a supporting role.
Subject matter
- Real, authentic, unposed people
- Mix of people, city environments, and open roads
- Scenarios where a car plays a natural role
- Diverse representation across age and background
Aesthetic
- Cool tones, clean backgrounds, open skies
- Avoid busy, cluttered, or moody compositions
- Visual breathing room for text overlay
- Complement the brand palette naturally
Composition
- People-first — vehicle is supporting context
- Leave room at edges for text and UI overlay
- Simple and clean — remove anything non-essential
- Natural light, candid moments over studio setups
What to avoid
- Car-as-hero studio shots with dramatic lighting
- Stock photography with staged, unnatural poses
- Dark, moody, or high-contrast color grading
- Cluttered backgrounds that compete with the subject
Image treatment
Photos should feel natural and unfiltered. Avoid heavy colour grading or filters that shift away from the brand palette. Images with cool tones and clean backgrounds pair best with our design language.
When overlaying text on photography, ensure sufficient contrast. Use a subtle dark gradient overlay when placing white text on light images.
Image Examples
A selection of imagery that reflects the brand direction — authentic moments, clean compositions, and natural light.
Dynamic vehicle shot — motion and energy
People-first — the person is the hero
Authentic, unposed lifestyle moment
Cool tones, clean background — complements the brand palette
Voice & Tone
How we sound
Friendly and approachable. Confident but not pushy. Direct and clear. Customer-first. Reassuring without being defensive.
Friendly
Warm and approachable, never corporate or stiff
“We’ll have you on the road in no time.”
Confident
State the benefit clearly and let it land
“50+ vehicle models. Delivered to your door.”
Direct
No jargon, no hedging, no filler
“Book online in minutes.”
Reassuring
Acknowledge anxieties without sounding defensive
“All fees shown upfront — no hidden charges.”
Language Rules
In Use
The brand on digital surfaces
Examples of how Roam’s brand elements, built on shadcn/ui and Tailwind, come together across our website and digital products.
Hero Section
The car you want, for as long as you need it.
Browse online. Book in minutes. Get it delivered to your door or pick it up from us.
Navigation
Page content area
Vehicle Cards
Kia Sportage
2025 · SUV
Hyundai Tucson
2025 · SUV
Hyundai Elantra
2025 · Sedan
Feature Section
Why Roam
Everything you need, nothing you don’t.
Maintenance included
Oil changes and routine service, covered.
24/7 roadside
Emergency assistance, around the clock.
No credit impact
Soft check only. No effect on your score.
Plan Selector
Short-Term
7–29 days
Perfect for short trips and temporary needs. Full amount upfront.
- Maintenance included
- 24/7 roadside assistance
- Bring your own insurance or add ours
Long-Term
30+ days
Our lowest rates. Auto-renews monthly. Cancel anytime after your minimum term.
- Maintenance included
- 24/7 roadside assistance
- Insurance through Roam
- Lowest weekly & monthly rates
Form Elements
Book your vehicle
Fill in the details below to get started.
Add vehicle delivery
We’ll deliver the vehicle to your home or office.
Note: All form elements follow shadcn/ui conventions — consistent spacing, border radius, and focus ring styling.
Data Table
Fleet Inventory
| Vehicle | Type | Status | Rate | Actions |
|---|---|---|---|---|
| Kia Sportage | SUV | Available | $89/day | |
| Hyundai Tucson | SUV | Reserved | $95/day | |
| Hyundai Elantra | Sedan | Available | $59/day | |
| Mercedes C-Class | Sedan | In service | $129/day | |
| Tesla Model 3 | Electric | Available | $119/day |
Alerts & Notifications
Booking confirmed
Your Kia Sportage is reserved for April 5.
Payment failed
Please check your card details and try again.
Insurance reminder
Long-term plans require Roam’s insurance coverage.
Return date approaching
Your rental ends in 3 days. Extend or arrange return.
Vehicle added to favourites
Dashboard Cards
Active rentals
1,247
+12% from last month
Revenue (MTD)
$482K
+8.3% from last month
New signups
328
+23% from last month
Avg. duration
47 days
-2% from last month
Dialog / Modal
Confirm your booking
Review the details below before confirming.
Kia Sportage 2025
Long-Term · Starting Apr 5
Social Proof
“This is like the Apple of car experiences.”
Shane S.
Verified customer · 4.8 on Google
Mobile Notification
Roam
Now
Your Kia Sportage is ready for pickup at our service location. See you soon!
Footer
Long-term car rentals.
Done better.
Product
- Browse vehicles
- How it works
- Pricing
- Business
Company
- About us
- Careers
- Blog
- Support
Legal
- Terms
- Privacy
- Insurance
© 2026 Roam. Proudly Canadian.
Roam Brand Guidelines · Edition 2 · 2026
For questions or asset requests, contact the design team.