AstroTypeScriptTailwind CSSSEOTechnical SEOPerformance OptimizationAccessibilityResponsive Design

Emerald City Limos

A luxury chauffeur and limousine service website optimized for performance, SEO, accessibility, and AI discoverability.

Role

Freelance Frontend Developer & SEO Engineer

Timeline

2026

Stack

Astro, TypeScript, Tailwind CSS, Vercel, Technical SEO, Schema Markup

01

Project Overview

Emerald City Limos is a luxury chauffeur and limousine service operating across the Seattle metro area. The business needed a website that matched the caliber of the service it sells a fleet of premium vehicles, an experience built on discretion and reliability but the existing site was working against that positioning rather than for it. I led the full redesign as freelance Frontend Developer & SEO Engineer: architecture, implementation, technical SEO, performance, and accessibility, deployed to production on Vercel.

02

Problem

The previous site had three compounding issues. First, it didn't read as luxury generic layout patterns and inconsistent typography undercut a brand built on premium positioning. Second, it had almost no structured path for local search: a handful of static pages with no architecture for the location- and service-specific queries that actually drive limousine bookings. Third, mobile performance and Core Web Vitals were poor enough to plausibly cost bookings outright.

03

Constraints

This was a solo build against a real production domain with existing search equity a full rebuild risked losing whatever organic visibility the old site had if redirects, metadata, or page structure weren't handled carefully. No dedicated design or content team meant typography, color, IA, and copy decisions were mine to make and justify. The site also needed to ship on static-friendly infrastructure capable of scaling to many location pages without each becoming a hand-built one-off.

04

Discovery & Research

Before any code, the work was diagnostic: auditing the existing site's Core Web Vitals and Lighthouse scores to quantify exactly what was underperforming, reviewing what location- and service-based queries the business should realistically rank for given its actual service area, and studying how comparable luxury hospitality and transportation brands use typography and color to signal premium positioning without tipping into the generic gold-on-black 'luxury template' look.

05

Approach

The rebuild prioritized three things in order: a typography and color system that actually reads as premium rather than just claiming to, a page architecture that could scale to dozens of location- and service-specific pages without duplicating work, and a performance/SEO foundation strict enough that none of the above would matter if pages loaded slowly or weren't indexable.

Astro was the framework decision underpinning the performance goal ships minimal JavaScript by default, renders to static HTML, and made a 99 Lighthouse score a realistic target rather than an aspiration fought against the framework.

06

Information Architecture

The site is structured around a small set of reusable page templates rather than one-off pages: a service template, a location template, and a small number of fixed pages (home, fleet, contact). One well-designed template, populated with real content per instance, scales far better than hand-building each page individually, both for initial build time and for long-term maintenance as the business adds new service areas.

07

Design System

The system was built around a small, disciplined set of primitives a five-color palette, a two-font type system, consistent spacing and radius values rather than a sprawling, undocumented set of one-off styles. Every visual decision traces back to one of these primitives, keeping the site feeling considered rather than assembled piecemeal.

08

Typography Decisions

The site pairs Cormorant Garamond for display type with Inter for body and UI text. Cormorant Garamond carries the brand's premium positioning an editorial, elegant serif that signals the ceremony associated with limousine service without being a cliché 'luxury script' font. Inter handles everything that needs to be read quickly: navigation, body copy, form labels, and booking details. Tabular numerals are used specifically for booking and contact information, so phone numbers, dates, and prices align cleanly rather than shifting width character to character.

09

Color Palette Decisions

Deep Forest Green anchors the palette as the primary background a depth of green that reads as understated wealth rather than the more expected black, avoiding the visual cliché of 'luxury = black and gold.' Luxury Gold is reserved for calls-to-action and key brand moments, deliberately muted rather than bright and metallic. Soft Gold handles hover states and supporting accents. Champagne serves as the warm light neutral for text-on-dark and light contexts. Emerald Accent, a brighter and more saturated green, is reserved for small functional moments like success states distinct enough to read as a different signal without introducing an unrelated hue.

Deep Forest Green

#0A2318

Forest Green (Dark)

#06170F

Luxury Gold

#A37E2C

Soft Gold

#C39A45

Champagne

#FAF8F4

Emerald Accent

#6DBF9E

10

Technical Decisions

Astro was chosen specifically for its island-architecture model pages ship as static HTML with JavaScript only where interactivity is actually needed (the booking form, mobile nav). TypeScript across the codebase catches data-shape errors at build time, which matters more than usual on a site whose location and service pages are templated and reused. Tailwind CSS enforced the design system's primitives at the utility level, making it structurally harder to introduce an off-palette color or arbitrary spacing value by accident.

11

Accessibility Considerations

Semantic HTML was treated as the foundation, not a pass at the end proper heading hierarchy, landmark regions, and native interactive elements wherever possible. Color contrast was checked against the actual palette, particularly the gold-on-forest-green CTA combinations, since accent colors at lower saturation can quietly fail contrast ratios. All interactive elements carry visible focus states, and the booking flow was tested for keyboard-only completion.

12

Performance Optimization

The performance work focused on metrics that actually correlate with real user experience. Image delivery was optimized for the hero and fleet imagery specifically. Render-blocking resources were minimized by leaning on Astro's static output and limiting client-side JavaScript to genuinely interactive components.

13

SEO Strategy

The core SEO bet was architectural: instead of one generic 'areas we serve' page, the site uses a scalable location-page template, so each service area gets its own indexable, semantically structured page. This was paired with schema markup and an llms.txt file aimed at AI-driven discovery tools. None of this works without genuinely fast, accessible pages underneath it — the performance and accessibility work is load-bearing for the SEO results themselves.

14

Solution

The shipped site pairs the Cormorant Garamond / Inter typography system and the five-color forest-and-gold palette with a templated, scalable page architecture, built on Astro for a minimal-JavaScript, SEO-first foundation. First production code went live May 10, 2026.

15

Impact & Metrics

The impressions growth traces directly back to the location-page architecture the redesigned site has far more indexable, query-relevant pages than the version it replaced, and search engines responded accordingly within a relatively short post-launch window.

99

Lighthouse Performance (Desktop)

87

Lighthouse Performance (Mobile)

+170%

Daily Organic Clicks

+10x

Daily Search Impressions

0.8s

Desktop LCP

100 / 100

SEO / Best Practices

16

Reflection

This project was the first time I had a genuine before/after dataset to evaluate a redesign against, rather than a general sense that the new version was 'better.' It sharpened how I think about the relationship between design decisions and measurable outcomes the color and typography system matters for brand perception, but the architectural decisions are what the metrics actually moved on.

17

Next Steps

  • Integrate more advanced booking functionality directly into the site
  • Add analytics dashboards and conversion tracking tied to the new location pages
  • Expand local SEO targeting into additional service areas
  • Implement customer testimonials and review integrations
Emerald City Limos | Joshua Kibwage