Singleton SD Design System

Public design tokens

A browser-friendly reference for Singleton SD tokens. Switch between light and dark mode, inspect semantic theme values, and copy the CSS variable names used by applications.

Primary domain: tokens.design.singletonsd.com
GitLab Pages: singleton-sd.gitlab.io/design-system/tokens

Explore colors Light CSS Dark CSS Git repository

Theme modes

Semantic color tokens

Light and dark modes share token names while swapping values. Apps can import both theme files and set data-theme="light" or data-theme="dark" on the document.

Light mode

Dark mode

Main colors

Core palette and color codes

These foundational color scales power the semantic theme tokens. Each swatch shows the CSS variable name and the resolved color code from the published token CSS.

Implementation

Use the tokens in code

Import the generated CSS files from GitLab Pages or the npm package, then style with the stable custom property names.

<!-- HTML -->
<link
  rel="stylesheet"
  href="https://tokens.design.singletonsd.com/css/light/_variables.css"
/>
<link
  rel="stylesheet"
  href="https://tokens.design.singletonsd.com/css/dark/_variables.css"
/>
<!-- GitLab Pages fallback -->
<link
  rel="stylesheet"
  href="https://singleton-sd.gitlab.io/design-system/tokens/css/dark/_variables.css"
/>

/* CSS */
body {
  background: var(--bg-default);
  color: var(--fg-default);
}

.button {
  background: var(--accent-default);
  color: var(--accent-on-accent);
}