SolaceThermasol Design System
Brand
Scheme

System

Resources

Everything you need to build on Solace — tokens, fonts, logos, and install steps.

Install

# Tokens + components live as workspace packages
pnpm add @solace/tokens @solace/ui @solace/assets

# Wire it up once, at your app root
import '@solace/tokens/tokens.css';   // CSS variables + the four themes
import '@solace/assets/fonts.css';    // The Seasons + Poppins
import '@solace/ui/styles.css';       // component styles

// Set the theme anywhere up the tree
<html data-brand="warm" data-scheme="light">

Theming

Two attributes drive everything: data-brand (warm for B2C, cool for B2B) and data-scheme (light or dark). Every semantic token resolves per combination — no per-component theme code required.

Downloads

Design tokens (CSS)

All variables, four themes.

Download

Design tokens (JSON)

Nested token values for tooling.

Download

The Seasons (Light)

Headline font · weight 300

Download

The Seasons (Regular)

Headline font · weight 400

Download

Poppins (Light)

Body font · weight 300

Download

Poppins (Regular)

Body font · weight 400

Download

Logo — Primary (Obsidian)

SVG · warm, for light backgrounds

Download

Logo — Mark (Obsidian)

SVG · CircleT mark

Download