NAVYA

Taxi Service · Bhopal

Your Journey, Our Responsibility.

Navya Taxi Service Bhopal logo
Navya design system · v1.0

Reusable foundations for the Navya Taxi Service website

Colour, type, spacing, elevation and every component used across the Services, Gallery and Contact pages — with hover, focus and pressed states. Built to extend to more pages and to a future Hindi version.

01 · Foundations

Colour tokens

#102A56

Navy 800

Primary brand / headings / dark sections

#0B1D3A

Navy 900

Deep sections / footer

#F28B35

Orange 500

Call buttons / accents / CTA

#FFC107

Taxi Yellow

Number-plate accents only

#FAF7F2

Cream

Page background

#1FA855

WhatsApp

WhatsApp actions

Contrast: orange is only used on white with bold ≥16px text or as a filled button with white text (AA large / UI); body text is navy or slate-600.

02 · Foundations

Type scale — Outfit display, Plus Jakarta Sans UI, Mukta for Devanagari

H1 — displayReliable Taxi Service
H2 — sectionInside our cars
H3 — card titleBhopal Local Rides
BodyFares and availability are confirmed at enquiry.
Small / metaTeela Jamalpura, Bhopal · +91 83197 36104
Eyebrow / plateWHAT WE DO
Devanagari (Mukta)आपकी यात्रा, हमारी ज़िम्मेदारी।
03 · Foundations

Spacing (8px grid), radius & elevation

Spacing scale

8 — icon gap
16 — inner
24 — card pad
32 — stack
48 — section gap
80 — rhythm

Radius

8px
12px
16px
Full

Elevation

soft
lift
modal

Cards rest on `soft`, lift on hover, modals float on `modal`.

04 · Components

Buttons — primary (Call), secondary (WhatsApp), ghost

Primary / Call
Secondary / WhatsApp
Ghost

All buttons: min-height 48px, visible orange focus ring on keyboard focus, scale-down on press.

05 · Components

Form fields — default, focus, error, disabled

Default

Focus

Error

Disabled

Errors are text + icon (never colour alone), announced via role="alert"; fields keep ≥48px height.

06 · Components

Cards, chips & badges

Service card

On-time pickup and drop for Raja Bhoj Airport, day or night.

Replace with real photo

Vehicle card

4+1 seats

Luggage space — confirm with us.

"Best taxi service in Bhopal."

Review card

Filter chipsPlate badgeReplace with real photo
07 · Components

FAQ item, toasts & status

Fares are confirmed at the time of your enquiry — before the trip starts.

Toasts (sonner)
Loading state
08 · Patterns

Sticky action bar, lightbox & 360° viewer

Sticky mobile action bar (live on every page)

Call NowWhatsApp

Lightbox

360° viewer pattern
Drag to look around
Demo panorama — replace with real interior

Seat layouts (per car type)

FRONTBOOT

sedan

FRONTBOOT

suv

FRONT

tempo

Passenger counts and luggage — confirm with us.

Empty state

Shown when a filter or section has nothing to display — with a hint, never a bare blank.

09 · Foundations

Icons (Lucide) & motion rules

Phone
MessageCircle
MapPin
Plane
Route
Landmark
Users
Luggage
Wind
PlugZap
Star
ShieldCheck
CheckCircle2
AlertTriangle
Navigation
ImagePlus
  • Scroll reveals fire once (amount 0.15); hover lifts use translate + shadow only.
  • Parallax exists only in the hero; the marquee pauses on hover.
  • prefers-reduced-motion disables smooth-scroll, parallax, marquee and reveals.
  • Keyboard focus: 3px orange ring, offset 2px, everywhere; tap targets ≥ 48px.
Call NowWhatsApp