Most booked 4 3
Executive saloon
Leather seats, bottled water and a suited driver. Ideal for airport runs and business trips.
See the fleetFrom$2.40 / km
Phase 2 · Design system
Taxi yellow, made modern.
Every colour, size and component CarrGo's blocks are built from. Blocks only use the semantic tokens, so changing one value here re-skins the whole theme, in light and dark.
01
Colour scales
Five families, eleven steps each, generated in OKLCH so every step feels evenly spaced. The yellow's middle steps sit a little lighter so they stay vivid. Source: scripts/palette.mjs.
taxiBrand · taxi yellow. Book buttons, marks, ratings. Always black text on it.
- 50#fef6e3
- 100#f9eac3
- 200#fee297
- 300#f6cc53
- 400#e3b403
- 500#a98608
- 600#8b6e01
- 700#705801
- 800#564200
- 900#3c2e01
- 950#251c00
asphaltNeutrals · cool road greys for text, lines, surfaces and the black second button.
- 50#f6f7f8
- 100#e9ebee
- 200#d6d9de
- 300#bdc1c8
- 400#a0a5ad
- 500#868b93
- 600#6d727a
- 700#575b62
- 800#41454b
- 900#2d3035
- 950#1b1d21
routeRoute · map lines, pickup markers, info and focus rings.
- 50#f2f7fe
- 100#dfecfe
- 200#c1dbfe
- 300#98c4ff
- 400#64a6fe
- 500#418be9
- 600#2570cc
- 700#1359ab
- 800#024389
- 900#002e64
- 950#001c40
goGo · success and "driver available".
- 50#ecfbef
- 100#d6f4dd
- 200#b1e9bf
- 300#82d79a
- 400#54be77
- 500#2ca45b
- 600#028844
- 700#046d36
- 800#035428
- 900#013b1a
- 950#00250e
redDanger · form errors only.
- 50#fef4f3
- 100#fee4e1
- 200#ffcbc4
- 300#fea69c
- 400#fe7367
- 500#e74f46
- 600#c9302d
- 700#a71a1c
- 800#85050c
- 900#610106
- 950#3e0102
02
Semantic tokens
What blocks actually use. Each token has a light and a dark value; both panels below are live.
Light
Surfaces & text
--bgPage background--surfaceCards, fields--surface-2Sunken areas--inkBody text--ink-mutedSecondary text--ink-subtleHints, meta--lineDividers--field-borderInput borders
Brand & accent
--brandBook / primary--brand-hoverPrimary hover--brand-inkYellow-family text--brand-softYellow tint--accentSecond button--on-accentSecond button text--highlightMarks, stars--focusFocus ring
Route & status
--routeMap lines--route-inkRoute text--route-softRoute tint--goAvailable--go-inkSuccess text--go-softSuccess tint--dangerErrors--danger-softError tint
Dark
Surfaces & text
--bgPage background--surfaceCards, fields--surface-2Sunken areas--inkBody text--ink-mutedSecondary text--ink-subtleHints, meta--lineDividers--field-borderInput borders
Brand & accent
--brandBook / primary--brand-hoverPrimary hover--brand-inkYellow-family text--brand-softYellow tint--accentSecond button--on-accentSecond button text--highlightMarks, stars--focusFocus ring
Route & status
--routeMap lines--route-inkRoute text--route-softRoute tint--goAvailable--go-inkSuccess text--go-softSuccess tint--dangerErrors--danger-softError tint
03
Contrast checks
Every pairing the blocks rely on, measured at build time against WCAG 2.2 AA (4.5:1 for text, 3:1 for borders and focus rings).
All 32 checks pass AA in light and dark.
| Pairing | Needs | Light | Dark |
|---|---|---|---|
| Body text on page | 4.5:1 | Aa 15.72 Pass | Aa 17.17 Pass |
| Muted text on page | 4.5:1 | Aa 8.98 Pass | Aa 10.20 Pass |
| Subtle text on sunken | 4.5:1 | Aa 5.86 Pass | Aa 5.35 Pass |
| Book button label | 4.5:1 | Aa 8.68 Pass | Aa 8.68 Pass |
| Book button hover | 4.5:1 | Aa 10.99 Pass | Aa 10.99 Pass |
| Second button label | 4.5:1 | Aa 16.88 Pass | Aa 15.73 Pass |
| Yellow text on page | 4.5:1 | Aa 9.00 Pass | Aa 12.00 Pass |
| Yellow text on tint | 4.5:1 | Aa 8.09 Pass | Aa 9.76 Pass |
| Route text on tint | 4.5:1 | Aa 5.77 Pass | Aa 8.75 Pass |
| Success text on tint | 4.5:1 | Aa 5.50 Pass | Aa 8.91 Pass |
| Error text | 4.5:1 | Aa 4.96 Pass | Aa 6.90 Pass |
| Input border | 3:1 | Aa 3.43 Pass | Aa 3.49 Pass |
| Focus ring | 3:1 | Aa 4.58 Pass | Aa 10.24 Pass |
| Taxi tone: text | 4.5:1 | Aa 8.68 Pass | Aa 8.68 Pass |
| Taxi tone: muted | 4.5:1 | Aa 6.81 Pass | Aa 6.81 Pass |
| Taxi tone: button | 4.5:1 | Aa 10.99 Pass | Aa 10.99 Pass |
04
Section tones
Any block takes tone: route (or any name below) and everything inside re-colours itself. Taxi stays yellow and Night stays dark in both modes.
05
Typography
Headings in Archivo, a sturdy grotesque with the feel of road signs (one 35 KB variable file, self-hosted). Body in the visitor's system font, which costs nothing to load. Sizes scale smoothly from phone to desktop.
-
Your ride, right on time
-
Fixed fares to every airport
-
Choose your vehicle
-
Executive saloon
-
How booking works
-
Licensed drivers, fixed airport fares and a car at your door in minutes, day or night.
-
Every CarrGo driver is licensed, background-checked and rated by riders after every trip.
-
Licensed private hire operator no. 00123 · Prices include VAT
-
Badges, captions and legal lines
Aa 400Aa 500Aa 600Aa 750Aa 900
Long-form text
Blog posts, service and city pages use the .prose style: a comfortable line length, generous spacing and links with a yellow underline. Lists get yellow markers:
- Meet and greet in arrivals
- 60 minutes' free waiting on airport pickups
- Child seats on request
"Booked at midnight, picked up in six minutes. The driver even helped with my bags."
06
Spacing
Nine fluid steps. Sections use --space-3xl top and bottom; cards use m; gaps inside components use 2xs–s.
--space-3xs--space-2xs--space-xs--space-s--space-m--space-l--space-xl--space-2xl--space-3xl
07
Radius, shadow & chequer
Crisp corners, like a roof sign. Shadows get stronger in dark mode so cards still lift. The taxi chequer is the one decorative motif, used sparingly.
--radius-xs--radius-s--radius-m--radius-l--radius-xl--radius-pill--shadow-s--shadow-m--shadow-l09
Forms & booking controls
Trip type and vehicle chips are real radio buttons: they work without JavaScript and with a keyboard. Fields with icons keep their labels for screen readers.
10
Elements
Badges, ratings, prices, routes, cards and notices. Blocks combine these; they never invent their own.
Badges
DefaultMost bookedFixed fare Airport 3 drivers nearbyFully booked$45
Icon discs
Rating
4.9from 12,400 rides
Trip summary (ticket)
- Grand Central HotelPickup · 06:15
- Harbour BridgeStop · 06:30
- Airport, Terminal 2Drop-off · about 07:05
28 km · 50 min$54 fixed
Notices
We track your flight and wait if it's late, at no extra cost.
Booked! Your driver's details arrive by text.
Night rate applies between midnight and 5 am.
We couldn't send your booking. Please call us instead.
11
Icons
Any of Lucide's 1,600+ icons by name: <Icon name="car-taxi-front" />. Inlined at build, so a page carries only the icons it uses. These are the ones CarrGo's blocks will use.
car-taxi-frontcar-frontcarbusplaneplane-landingmap-pinmap-pinnednavigationroutelocate-fixedclockcalendar-daysusersluggagebabyaccessibilitybriefcase-businessshield-checkbadge-checkstarwalletcredit-cardsmartphonephonemessage-circlearrow-rightchecksunmoon