Themes

Theme switching is a first-class Aspyn feature. The default is Aspyn graphite — precise neutrals where color carries meaning — and every product can switch to Ember, Ocean, Aptive, or a custom brand at runtime with one attribute. Try the palette icon in the header: everything on this site adapts, including the maps.

Current palette

primary

secondary

accent

muted

chart-1

chart-2

chart-3

chart-4

chart-5

Live preview

Create account

The same components, themed by tokens.

Product updates

Default

Success

Warning

Data visualization

Chart tokens re-map per brand automatically.

Shipping a brand theme

Brand themes are scoped CSS files that override tokens under a data-brand attribute. Aspyn is the default (no attribute needed):

@import "tailwindcss";
@import "@aspyn-io/tokens/theme";           /* Aspyn graphite (default) */
@import "@aspyn-io/tokens/themes/ember";    /* warm copper */
@import "@aspyn-io/tokens/themes/ocean";    /* deep teal */
@import "@aspyn-io/tokens/themes/aptive";   /* Aptive Environmental */

import { setBrand } from "@aspyn-io/tokens";

setBrand("ember");  // <html data-brand="ember"> — every token re-maps
setBrand("aspyn");  // back to the graphite default

// Scoped previews: data-brand works on ANY element
<span data-brand="ocean" className="bg-primary" />  // ocean's primary

New brand? Copy themes/aptive.css, change the attribute and the oklch values, and ship it. Components never change.