Next.jsTypeScriptTailwind CSSshadcn/uiSanity CMSSEOPerformance OptimizationAccessibility

Sigma Chauffeurs

A full-scale luxury chauffeur platform built from the ground up — 9 US cities, 90+ location pages, and a perfect 100 across Lighthouse Performance, Accessibility, Best Practices, and SEO on desktop.

Role

Frontend Developer — Full Ownership

Timeline

2025 – 2026

Stack

Next.js, TypeScript, Tailwind CSS, shadcn/ui, Sanity CMS, Cloudinary, Vercel

01

Project Overview

Sigma Chauffeurs is a luxury ground transportation service operating across 9 US cities — New York, Washington DC/DMV, San Francisco, San Diego, Seattle, Austin, Los Angeles, Nashville, and Chicago. I designed and developed the entire platform from the ground up: brand identity, design system, information architecture, every page template, the booking integration, SEO infrastructure, and production deployment. This was not a redesign of an existing site — there was no prior digital presence to inherit. Everything on sigmachauffeurs.com was built by me.

02

Problem

The client was launching a luxury chauffeur service across multiple US markets simultaneously with no existing website, no brand identity, and no digital infrastructure. The core challenge was threefold: build a brand visual language that could credibly compete with established luxury transportation companies, architect a site that could serve 9 cities and 10 specific locations per city without that content becoming unmanageable, and do it on a stack that could sustain itself long-term without becoming a maintenance burden.

03

Constraints

This was a solo build with no design handoff — typography, color, layout, copy hierarchy, and component decisions were all mine to make and own. The booking system was an existing client dependency: the client already used Moovs for dispatch and customer management, so the booking flow had to embed the Moovs iframe rather than a custom-built solution. The site also needed to go from zero to production across all 9 city markets simultaneously, so the architecture had to be templated from day one rather than hand-built per city.

04

Discovery & Research

Before writing any code, the work started with competitive research across luxury transportation and high-end hospitality brands to understand how premium positioning is communicated through typography, color, and layout — and where the 'luxury transportation website' category consistently falls into visual clichés. The SEO angle required mapping the realistic query landscape for chauffeur services across each city: what people actually search for when they need a private car in Midtown Manhattan versus The Hamptons versus SoFi Stadium on game day.

05

Approach

Three priorities in order: a design system that reads as genuinely premium rather than generically dark-and-gold, a page architecture that could scale to 90+ location pages without each one requiring individual attention, and a technical foundation capable of hitting top Lighthouse scores under real-world conditions. The booking flow was integrated via the client's existing Moovs embed rather than rebuilt — the right call given the client's operational dependency on that system.

Next.js with the App Router gave the site a clean foundation for the templated location and service pages. Sanity CMS handles content for the blog and shared content layers. shadcn/ui provided the accessible component primitives that the design system was built on top of. The location page template — one well-designed layout populated per city and per neighborhood — is what made 90+ pages achievable without 90x the build time. Every city page links to its 10 location pages, every location page breadcrumbs back to the city and home, and service pages cross-link into the relevant city contexts.

06

Information Architecture

The site is structured across five main content verticals: city landing pages (9), location pages (90, 10 per city), service pages (Airport Transfers, Hourly Service, Group Transportation, Kids Booster Seats, Special Occasions, Events & Sports), special occasion sub-pages (Weddings, Galas, Anniversaries, Birthdays, Proms, Quinceañeras, Graduations, Date Nights), events pages (FIFA World Cup 2026, Super Bowl LXI, LA Olympics 2028), and a Private & Corporate section (Executive Travel, Concierge Partnerships, Corporate Accounts, Affiliate Program). Every level is internally linked to the levels above and below it, with breadcrumbs throughout.

07

Design System

Built from scratch around a small set of primitives: a five-color palette, a two-font type pairing, consistent spacing and radius tokens, and a component library on top of shadcn/ui. The goal was a system disciplined enough that every page feels like it belongs to the same brand, even across 90+ location pages generated from a shared template.

08

Typography Decisions

The type system pairs Cormorant Garamond (--font-serif) for display headings and brand moments with Raleway (--font-sans) for body copy, navigation, and UI text. Cormorant Garamond carries the brand's premium positioning — an editorial, high-contrast serif that signals ceremony and precision without the script-font cliché common in the transportation category. Raleway handles everything that needs to be read quickly: service descriptions, booking CTAs, location details. The pairing works because both fonts share an architectural quality — neither is overtly decorative — which keeps the overall system feeling refined rather than ornate.

09

Color Palette Decisions

The palette was built entirely in OKLCH color space for perceptual uniformity — colors behave predictably across light and dark contexts rather than shifting in unexpected ways. The background is a warm near-white (oklch 98.2%) with a subtle warm cast, deliberately avoiding the cold blue-white of generic sites. The primary brand color is a champagne gold (#E2C47A, oklch 82.4%) — warm and refined rather than metallic and flashy, reserved for CTAs and key brand moments. Surfaces use a tight family of warm neutrals: card backgrounds sit just above the page background, borders are barely perceptible, and muted foregrounds carry secondary text without competing with the gold. The result is a palette that reads as premium through restraint rather than through loudness.

Background

#F9F5EE

Champagne Gold

#E2C47A

Foreground

#3A2E1F

Card Surface

#FDFAF5

Muted

#F1EBE0

Border

#DDD5C4

10

Technical Decisions

Next.js App Router for the templated page architecture and static generation of the 90+ location pages — on a site of this scale, static generation meant every page loads fast without runtime overhead per request. TypeScript throughout: when one template generates 90 pages, a type error at the data shape level is caught at build time rather than silently producing broken pages in production. shadcn/ui provided accessible, ARIA-compliant component primitives as the foundation for the design system. Sanity CMS powers the blog, enabling the client to publish content without touching code. Cloudinary handles all image storage and delivery — transformation URLs mean images are served at the correct size and format per context without maintaining multiple source files. Vercel for deployment, which pairs naturally with Next.js and handled the full location-page scale without configuration overhead. The Moovs iframe embed was integrated at the service and city page level — the right architectural call given the client's existing operational dependency on Moovs for dispatch.

11

Accessibility Considerations

Semantic HTML as the foundation: proper heading hierarchy across all templated pages, landmark regions, and native interactive elements wherever possible. The shadcn/ui primitives provided ARIA-compliant component behavior out of the box, which mattered on a site with complex navigation patterns across city, location, service, and corporate pages. Keyboard navigation and visible focus states were implemented across all interactive elements. The Lighthouse audit returned 100 Accessibility on both desktop and mobile.

12

Performance Optimization

Desktop Lighthouse score: 100 Performance. Mobile: 87. Desktop metrics — FCP 0.3s, LCP 0.6s, TBT 20ms, CLS 0, Speed Index 1.0s. The performance foundation came from Next.js's static generation for the location pages, disciplined image optimization, and keeping client-side JavaScript minimal across the templated pages. The render-blocking CSS flagged in the Lighthouse audit is a known artifact of Next.js's CSS chunking strategy on Vercel deployments — the scores reflect the real-world result rather than a simulated clean environment.

13

SEO Strategy

The core SEO architecture is the location page system itself — 90 indexable, semantically structured pages each targeting specific neighborhood-level queries that a single 'areas we serve' page could never rank for. Every location page has unique content, proper heading hierarchy, internal links to related service and city pages, and breadcrumb structured data. Service pages follow the same pattern: specific, internally linked, and structured for the queries they're targeting. An llms.txt file was also implemented for AI-driven discovery — Sigma Chauffeurs ranks and appears in AI assistant responses for chauffeur service queries in its target markets.

14

Solution

A full luxury chauffeur platform: brand identity and design system built from zero, 90+ templated location pages across 9 US cities, service and occasion sub-pages with full internal linking, a Moovs booking embed integrated at the service level, events pages for FIFA World Cup 2026, Super Bowl LXI, and LA Olympics 2028, a Private & Corporate section, and a Sanity-powered blog. Deployed to production on Vercel.

15

Impact & Metrics

Perfect 100 across Performance, Accessibility, Best Practices, and SEO on desktop Lighthouse. 87 Performance on mobile under Lighthouse's slow 4G throttling. 0ms Total Blocking Time on mobile. Zero Cumulative Layout Shift on both. The site launched across all 9 city markets simultaneously and currently serves as the primary digital presence for the business.

100

Desktop Performance

87

Mobile Performance

100

Accessibility

100

Best Practices

100

SEO

0.3s

Desktop FCP

0.6s

Desktop LCP

20ms

Desktop TBT

0

CLS

90+

Location Pages

9

Cities Served

0ms

Mobile TBT

16

Reflection

Building Sigma Chauffeurs from zero was the most complete project I've owned — design system, architecture, content strategy, SEO infrastructure, and deployment, all on a live production domain serving a real business. The constraint that shaped everything was scale: knowing from day one that the site would need 90+ location pages meant every architectural decision had to be made with that multiplier in mind. A design system that required hand-adjustment per page would have made the project undeliverable. The templated approach made it achievable solo. The 100 desktop Lighthouse score was a direct consequence of those early architectural decisions, not something optimized for at the end.

17

Next Steps

  • Replace the Moovs booking embed with a custom-built booking flow on the shared Hono + Supabase backend currently in development
  • Expand the events section as FIFA World Cup 2026 match schedules are confirmed across the 9 host cities Sigma serves
  • Add customer testimonials and review integrations per city market
  • Implement PostHog analytics to track conversion paths from location pages to booking
Sigma Chauffeurs | Joshua Kibwage