A map in your colours, from your style guide.

Connected to your style guide

Keep one source of truth. Read the colours from the CSS custom properties your design system already defines, or from a design-token file on the server.

/* Your style guide, as CSS custom properties */
:root {
  --primary: #e11d48;
  --background: #fff7ed;
  --foreground: #1c1917;
}

import { brandThemeFromCss } from "instantmap-js/brand";

// Reads the same tokens the rest of your page uses.
const brand = brandThemeFromCss({
  primary: "--primary",
  background: "--background",
  foreground: "--foreground",
});

const map = document.querySelector("instant-map");
map.theme = brand.theme;
map.colors = brand.colors;

import { brandTheme, staticUrl } from "instantmap-js/server";
import tokens from "./design-tokens.json";

// On the server, so the first image is already in your colours.
export const brand = brandTheme({
  primary: tokens.color.primary,
  background: tokens.color.background,
  foreground: tokens.color.foreground,
});

const poster = staticUrl({
  center: [-122.42, 37.77], zoom: 12,
  width: 960, height: 540,
  ...brand,
});

As much control as you want

• One colour

  brandTheme({ primary }) is enough. Background, text, accent, water and parks are optional.

• Every colour

  All 36 map colours can be set by name through colors: roads, casings, labels, halos, shields, markers and more.

• Readable by default

  Labels and marker text are adjusted until they have enough contrast against what is behind them.

• No styling library to load

  The palette is plain arithmetic in a small module with no dependencies. It runs in microseconds, the same on the server and in the browser.

• The image and the map agree

  The server paints the first image with the same colours, so nothing changes when the map wakes up.

• Cards and controls follow

  Zoom buttons and cards pick up the palette. Each can also be restyled with CSS custom properties.