It's quite doable to run your own tileserver. You will have full control over the colors, and you can hide/show things to create a more minimalist map. With some tricks you can 2x the resolution, making it look better than OSM on modern high-DPI screens. Tile generation is quite CPU heavy though, so you may have to pre-generate tiles ideally. So it is not that easy actually.

In case you haven't already read the TOS for the OpenStreetMap tile servers, they are here: https://operations.osmfoundation.org/policies/tiles/

If going with client-side CSS rendering, I'd also play with CSS filter functions like contrast. The OSM tiles have always looked too low on contrast for me and thus difficult to read. Making them grayscale makes it worse.

To not load openstreetmap's servers, you could pull the tiles to your server and host them. Then only grab a tile from OSM when you are missing one.

This would also let you set the grayscale on the tiles using imagemagick convert.

Neat project and thanks for the write up.

The Protomaps basemap has also a grayscale style. The grayscale map looks like this: https://maps.protomaps.com/#map=5.09/47.14/8.64&theme=graysc...

Instructions for self-hosting a PMTiles file are available here: https://docs.protomaps.com/.

Love this, the pure CSS option is really elegant

Another option would be self hosting vector tiles(or finding the most generous free tier vector tiles) and using a custom grey scale styling that you could tweak to your needs.

Maputnik is a great tool for building custom vector stylesheets. (1)

1. https://maputnik.github.io/

Much ado about a single line of CSS :P I thought this would lead to something a little more interesting, like dynamically modifying/drawing the elements of the map or something. CSS filter is the way to go; and I'm glad to see that applying the filter on-the-fly client-side was performant!