diff --git a/package.json b/package.json
index 092e8545..95bf8c99 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,10 @@
       "types": "./dist/runtime/lib/util/index.d.ts",
       "import": "./dist/runtime/lib/util/index.js"
     },
+    "./lib/basemaps": {
+      "types": "./dist/runtime/composables/useBasemapLayers.d.ts",
+      "import": "./dist/runtime/composables/useBasemapLayers.js"
+    },
     "./apps/admin": {
       "types": "./dist/runtime/apps/admin/index.d.ts",
       "import": "./dist/runtime/apps/admin/index.js"
@@ -124,6 +128,7 @@
     "@maplibre/maplibre-gl-geocoder": "1.9.0",
     "@mdi/font": "7.4.47",
     "@observablehq/plot": "0.6.17",
+    "@protomaps/basemaps": "5.7.0",
     "@turf/centroid": "7.3.0",
     "@vue/apollo-composable": "4.2.2",
     "@vue/apollo-option": "4.2.2",
@@ -145,7 +150,6 @@
     "maplibre-gl": "5.2.0",
     "mixpanel-browser": "2.61.2",
     "nuxt-csurf": "1.6.5",
-    "protomaps-themes-base": "1.3.1",
     "tiny-emitter": "2.1.0",
     "unstorage": "1.15.0",
     "vega": "6.2.0",
diff --git a/src/runtime/apps/stations/basemap-control.vue b/src/runtime/apps/stations/basemap-control.vue
index 206cb065..e66228e8 100644
--- a/src/runtime/apps/stations/basemap-control.vue
+++ b/src/runtime/apps/stations/basemap-control.vue
@@ -25,7 +25,7 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  modelValue: 'carto'
+  modelValue: 'protomaps-grayscale'
 })
 
 defineEmits<{
diff --git a/src/runtime/apps/stations/level-editor.vue b/src/runtime/apps/stations/level-editor.vue
index 78f75f89..4f8049d2 100644
--- a/src/runtime/apps/stations/level-editor.vue
+++ b/src/runtime/apps/stations/level-editor.vue
@@ -235,7 +235,7 @@ const _emit = defineEmits<{
 }>()
 
 const level = ref(new Level(props.value).setDefaults())
-const basemap = ref('carto')
+const basemap = ref('protomaps-grayscale')
 const showGeojsonEditor = ref(false)
 const geojsonError = ref<string | null>(null)
 const geojsonGeometryBuffer = ref('')
diff --git a/src/runtime/apps/stations/level-map.vue b/src/runtime/apps/stations/level-map.vue
index a1cf2dea..2afac675 100644
--- a/src/runtime/apps/stations/level-map.vue
+++ b/src/runtime/apps/stations/level-map.vue
@@ -7,9 +7,10 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { Map as MaplibreMap, AttributionControl } from 'maplibre-gl'
-import { useBasemapLayers } from '../../composables/useBasemapLayers'
+import { useBasemapLayers, PROTOMAPS_GLYPHS_URL } from '../../composables/useBasemapLayers'
 import { PeliasIcons } from './basemaps'
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import { layers } from '@protomaps/basemaps'
 import type { Feature, Point, LineString, Polygon, MultiPolygon } from 'geojson'
 
 // https://github.com/maplibre/maplibre-gl-js/issues/2601
@@ -48,7 +49,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  basemap: 'carto',
+  basemap: 'protomaps-grayscale',
   width: '100px',
   height: '100px',
   showAttribution: true,
@@ -99,10 +100,29 @@ function initMap () {
   if (!mapelem.value) return
 
   const sources: Record<string, any> = {}
-  const layers: any[] = []
+  const layerList: any[] = []
+
   for (const [k, v] of Object.entries(basemapLayers.value)) {
     sources[k] = v.source
-    layers.push({ id: k, source: k, ...v.layer })
+
+    // Handle vector basemaps (Protomaps) differently from raster
+    if ((v.layer as any).isVector && (v.layer as any).flavor) {
+      // Add all Protomaps layers for this flavor
+      const protomapsLayers = layers(k, (v.layer as any).flavor)
+      // Set visibility based on whether this is the active basemap
+      for (const layer of protomapsLayers) {
+        layer.layout = layer.layout || {}
+        layer.layout.visibility = k === props.basemap ? 'visible' : 'none'
+      }
+      layerList.push(...protomapsLayers)
+    } else {
+      // Raster layers (Carto, Nearmap)
+      const layer: any = { id: k, source: k, ...v.layer }
+      // Set initial visibility for raster layers
+      layer.layout = layer.layout || {}
+      layer.layout.visibility = k === props.basemap ? 'visible' : 'none'
+      layerList.push(layer)
+    }
   }
 
   map.value = new MaplibreMap({
@@ -113,9 +133,9 @@ function initMap () {
     attributionControl: false,
     style: {
       version: 8,
-      glyphs: '/fonts/{fontstack}/{range}.pbf',
+      glyphs: PROTOMAPS_GLYPHS_URL,
       sources,
-      layers
+      layers: layerList
     }
   })
 
@@ -252,8 +272,19 @@ function drawMap () {
 // Watchers
 watch(() => props.basemap, (cur, prev) => {
   if (!map.value || !prev) return
-  map.value.setLayoutProperty(prev, 'visibility', 'none')
-  map.value.setLayoutProperty(cur, 'visibility', 'visible')
+
+  // Hide/show all layers for each basemap source
+  const style = map.value.getStyle()
+  if (style?.layers) {
+    for (const layer of style.layers) {
+      // Check if this layer belongs to the previous or current basemap
+      if (layer.source === prev) {
+        map.value.setLayoutProperty(layer.id, 'visibility', 'none')
+      } else if (layer.source === cur) {
+        map.value.setLayoutProperty(layer.id, 'visibility', 'visible')
+      }
+    }
+  }
 })
 
 watch(() => props.lines, () => {
diff --git a/src/runtime/apps/stations/pages/station-pathways.vue b/src/runtime/apps/stations/pages/station-pathways.vue
index 30ff5b83..9a581f4c 100644
--- a/src/runtime/apps/stations/pages/station-pathways.vue
+++ b/src/runtime/apps/stations/pages/station-pathways.vue
@@ -314,7 +314,7 @@ const selectMode = ref<SelectMode>('select')
 const selectedPoint = ref<LngLat | null>(null)
 const selectedStops = ref<Stop[]>([])
 const selectedPathways = ref<Pathway[]>([])
-const basemap = ref('carto')
+const basemap = ref('protomaps-grayscale')
 
 // Computed properties
 const selectedPath = computed((): PathwayEdge[] | null => {
diff --git a/src/runtime/apps/stations/pages/station-stops.vue b/src/runtime/apps/stations/pages/station-stops.vue
index 78a755ac..cabb1716 100644
--- a/src/runtime/apps/stations/pages/station-stops.vue
+++ b/src/runtime/apps/stations/pages/station-stops.vue
@@ -276,7 +276,7 @@ const nearbyStopsQuery = gql`
 
 // Reactive data
 const nearbyStops = ref<Stop[]>([])
-const basemap = ref('carto')
+const basemap = ref('protomaps-grayscale')
 const selectedLocationTypes = ref(['0', '2']) // must be stringy
 const selectedSources = ref(['nearby', 'station'])
 const selectedAgenciesShadow = ref<string[] | null>(null)
diff --git a/src/runtime/apps/stations/pathway-map.vue b/src/runtime/apps/stations/pathway-map.vue
index dd37d8e4..19883ce2 100644
--- a/src/runtime/apps/stations/pathway-map.vue
+++ b/src/runtime/apps/stations/pathway-map.vue
@@ -54,7 +54,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   station: null,
-  basemap: 'carto',
+  basemap: 'protomaps-grayscale',
   zoom: 17,
   center: () => [0, 0],
   otherStops: () => [],
diff --git a/src/runtime/apps/stations/station-editor.vue b/src/runtime/apps/stations/station-editor.vue
index 8e7d7fae..874b1ed9 100644
--- a/src/runtime/apps/stations/station-editor.vue
+++ b/src/runtime/apps/stations/station-editor.vue
@@ -145,7 +145,7 @@ const _emit = defineEmits<{
 }>()
 
 const station = ref(new Station(props.value.stop))
-const basemap = ref('carto')
+const basemap = ref('protomaps-grayscale')
 const showDeleteModal = ref(false)
 
 const editFeatures = computed((): Feature[] => {
diff --git a/src/runtime/apps/transfers/platform-pathway-map.vue b/src/runtime/apps/transfers/platform-pathway-map.vue
index bd210cd5..4ffa10e1 100644
--- a/src/runtime/apps/transfers/platform-pathway-map.vue
+++ b/src/runtime/apps/transfers/platform-pathway-map.vue
@@ -36,7 +36,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   station: null,
-  basemap: 'carto',
+  basemap: 'protomaps-grayscale',
   zoom: 17,
   center: () => [0, 0] as [number, number],
   selectedPathways: () => [],
diff --git a/src/runtime/apps/transfers/station-bbox-select-map.vue b/src/runtime/apps/transfers/station-bbox-select-map.vue
index e5080ded..63a8f540 100644
--- a/src/runtime/apps/transfers/station-bbox-select-map.vue
+++ b/src/runtime/apps/transfers/station-bbox-select-map.vue
@@ -28,7 +28,7 @@
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import { Map as MapLibreMap, NavigationControl } from 'maplibre-gl'
 import type { LngLatLike } from 'maplibre-gl'
-import { useBasemapLayers } from '../../composables/useBasemapLayers'
+import { useBasemapLayers, layers, GRAYSCALE, PROTOMAPS_GLYPHS_URL } from '../../composables/useBasemapLayers'
 
 interface Props {
   modelValue?: string | null
@@ -65,28 +65,25 @@ const dragStartY = ref(0)
 const dragStartWidth = ref(0)
 const dragStartHeight = ref(0)
 
+// Get basemap configuration from composable
+const { basemapLayers } = useBasemapLayers()
+
 function initMap (): void {
   if (!mapContainer.value) return
 
-  const { basemapLayers } = useBasemapLayers()
-  const basemaps = basemapLayers.value
+  const grayscaleBasemap = basemapLayers.value['protomaps-grayscale']
 
   const mapValue = new MapLibreMap({
     container: mapContainer.value,
     center: props.center as LngLatLike,
     zoom: props.zoom,
     style: {
+      glyphs: PROTOMAPS_GLYPHS_URL,
       version: 8,
       sources: {
-        carto: basemaps.carto.source
+        'protomaps-base': grayscaleBasemap.source as any
       },
-      layers: [
-        {
-          id: 'carto',
-          source: 'carto',
-          ...basemaps.carto.layer
-        }
-      ]
+      layers: layers('protomaps-base', GRAYSCALE)
     }
   } as any)
 
diff --git a/src/runtime/apps/transfers/station-select-map.vue b/src/runtime/apps/transfers/station-select-map.vue
index 4f9fb62f..135361bc 100644
--- a/src/runtime/apps/transfers/station-select-map.vue
+++ b/src/runtime/apps/transfers/station-select-map.vue
@@ -8,7 +8,7 @@
 import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import { Map as MapLibreMap, NavigationControl, Popup, LngLatBounds } from 'maplibre-gl'
 import type { LngLatLike, MapMouseEvent, GeoJSONSource } from 'maplibre-gl'
-import { useBasemapLayers } from '../../composables/useBasemapLayers'
+import { useBasemapLayers, layers, GRAYSCALE, PROTOMAPS_GLYPHS_URL } from '../../composables/useBasemapLayers'
 import type { StationHub } from './types'
 import { haversinePosition } from '../../lib/geom'
 
@@ -66,23 +66,23 @@ const emit = defineEmits<{
 const mapContainer = ref<HTMLElement>()
 const map = ref<MapLibreMap | null>(null)
 
+// Get basemap configuration from composable
+const { basemapLayers } = useBasemapLayers()
+
 function initMap (): void {
   if (!mapContainer.value) return
 
-  const { basemapLayers } = useBasemapLayers()
-  const basemaps = basemapLayers.value
+  const grayscaleBasemap = basemapLayers.value['protomaps-grayscale']
 
   const mapValue = new MapLibreMap({
     container: mapContainer.value,
     center: props.center as LngLatLike,
     zoom: props.zoom,
     style: {
+      glyphs: PROTOMAPS_GLYPHS_URL,
       version: 8,
       sources: {
-        'carto': {
-          type: 'raster',
-          tiles: basemaps.carto.source.tiles,
-        },
+        'protomaps-base': grayscaleBasemap.source as any,
         'station-hubs': {
           type: 'geojson',
           data: {
@@ -93,12 +93,7 @@ function initMap (): void {
         }
       },
       layers: [
-        {
-          id: 'carto',
-          source: 'carto',
-          type: 'raster',
-          ...basemaps.carto.layer
-        },
+        ...layers('protomaps-base', GRAYSCALE),
         {
           id: 'station-hubs-fill',
           type: 'fill',
diff --git a/src/runtime/components/pathway-map.vue b/src/runtime/components/pathway-map.vue
index e74d2ca6..b0291b9e 100644
--- a/src/runtime/components/pathway-map.vue
+++ b/src/runtime/components/pathway-map.vue
@@ -55,7 +55,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   station: null,
-  basemap: 'carto',
+  basemap: 'protomaps-grayscale',
   zoom: 17,
   center: () => [0, 0],
   otherStops: () => [],
diff --git a/src/runtime/composables/useBasemapLayers.ts b/src/runtime/composables/useBasemapLayers.ts
index 3cc43447..3d07fc4c 100644
--- a/src/runtime/composables/useBasemapLayers.ts
+++ b/src/runtime/composables/useBasemapLayers.ts
@@ -4,6 +4,20 @@
 
 import { computed } from 'vue'
 import { useRuntimeConfig } from '#imports'
+import { LIGHT, DARK, WHITE, GRAYSCALE, BLACK } from '@protomaps/basemaps'
+
+// Re-export Protomaps utilities for use in consuming applications
+export { layers, LIGHT, DARK, WHITE, GRAYSCALE, BLACK } from '@protomaps/basemaps'
+
+/**
+ * Protomaps glyphs URL template for MapLibre styles
+ */
+export const PROTOMAPS_GLYPHS_URL = 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf'
+
+/**
+ * Protomaps sprite URL base for MapLibre styles (append flavor name, e.g. /light)
+ */
+export const PROTOMAPS_SPRITE_URL = 'https://protomaps.github.io/basemaps-assets/sprites/v4'
 
 /**
  * Layer configuration for map display
@@ -28,8 +42,13 @@ export interface BasemapLayer {
  * Collection of available basemap layers
  */
 export interface BasemapLayers {
-  carto: BasemapLayer
-  near: BasemapLayer
+  'protomaps-light': BasemapLayer
+  'protomaps-dark': BasemapLayer
+  'protomaps-white': BasemapLayer
+  'protomaps-grayscale': BasemapLayer
+  'protomaps-black': BasemapLayer
+  'carto': BasemapLayer
+  'near': BasemapLayer
   [key: string]: BasemapLayer
 }
 
@@ -50,9 +69,77 @@ export interface BasemapLayers {
  */
 export function useBasemapLayers () {
   const config = useRuntimeConfig()
+  const protomapsApikey = config.public.tlv2?.protomapsApikey
 
   const basemapLayers = computed<BasemapLayers>(() => ({
-    carto: {
+    'protomaps-light': {
+      label: 'Protomaps (light)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        // For vector sources, we need to add multiple layers, not just one
+        // This will be handled specially in the map initialization
+        isVector: true,
+        flavor: LIGHT
+      }
+    },
+    'protomaps-dark': {
+      label: 'Protomaps (dark)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: DARK
+      }
+    },
+    'protomaps-white': {
+      label: 'Protomaps (white)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: WHITE
+      }
+    },
+    'protomaps-grayscale': {
+      label: 'Protomaps (grayscale)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: GRAYSCALE
+      }
+    },
+    'protomaps-black': {
+      label: 'Protomaps (black)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: BLACK
+      }
+    },
+    'carto': {
       label: 'Carto street map',
       source: {
         type: 'raster',
@@ -68,7 +155,7 @@ export function useBasemapLayers () {
         maxzoom: 22
       }
     },
-    near: {
+    'near': {
       label: 'Nearmap aerial imagery',
       source: {
         type: 'raster',
diff --git a/yarn.lock b/yarn.lock
index 26d4a0d2..bb4aa8c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3043,6 +3043,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@protomaps/basemaps@npm:5.7.0":
+  version: 5.7.0
+  resolution: "@protomaps/basemaps@npm:5.7.0"
+  bin:
+    generate_style: src/cli.ts
+  checksum: 10/a2c7e513f6a34a746e8a66898015edfb36838163cda409da0c08e74496145068242a0be7952a72314343e95f031fed7aca9e9fbe4b95170ddffd58296c3084d8
+  languageName: node
+  linkType: hard
+
 "@rolldown/pluginutils@npm:1.0.0-beta.29":
   version: 1.0.0-beta.29
   resolution: "@rolldown/pluginutils@npm:1.0.0-beta.29"
@@ -12697,13 +12706,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"protomaps-themes-base@npm:1.3.1":
-  version: 1.3.1
-  resolution: "protomaps-themes-base@npm:1.3.1"
-  checksum: 10/61dd7e5e239abe3386a489527f5764f3a9fc6bd1615fd2edc9e623f9cc5a70db85e52d7ceafc94a1556a7bc255b1529fd02fb1d07aa01a386be458ef8c30e49c
-  languageName: node
-  linkType: hard
-
 "proxy-addr@npm:~2.0.7":
   version: 2.0.7
   resolution: "proxy-addr@npm:2.0.7"
@@ -14535,6 +14537,7 @@ __metadata:
     "@pollyjs/adapter-fetch": "npm:6.0.7"
     "@pollyjs/core": "npm:6.0.6"
     "@pollyjs/persister-fs": "npm:6.0.6"
+    "@protomaps/basemaps": "npm:5.7.0"
     "@stylistic/eslint-plugin": "npm:5.5.0"
     "@turf/centroid": "npm:7.3.0"
     "@types/cytoscape": "npm:3.21.9"
@@ -14576,7 +14579,6 @@ __metadata:
     nuxt: "npm:4.2.0"
     nuxt-csurf: "npm:1.6.5"
     playwright-core: "npm:1.54.2"
-    protomaps-themes-base: "npm:1.3.1"
     sass: "npm:1.86.0"
     tiny-emitter: "npm:2.1.0"
     tsx: "npm:4.20.6"