Palettes

Ten built-in color palettes for the LaunchApp design system. Click any palette to apply it live to this documentation site. Each card shows both light and dark mode swatches.

Import a palette CSS file

Each palette ships as a standalone CSS file. Import it in your app entry point to apply the palette globally.

import '@launchapp/design-system/themes/ocean.css';

/* Or any other palette: */
import '@launchapp/design-system/themes/forest.css';
import '@launchapp/design-system/themes/sunset.css';
import '@launchapp/design-system/themes/rose.css';
import '@launchapp/design-system/themes/amber.css';
import '@launchapp/design-system/themes/violet.css';
import '@launchapp/design-system/themes/slate.css';
import '@launchapp/design-system/themes/midnight.css';
import '@launchapp/design-system/themes/emerald.css';

Generate a custom palette

Use createTheme(brandColor) to generate a full token set from a single brand color. Pass a hex value, HSL string, or space-separated HSL values.

import { createTheme } from '@launchapp/design-system/themes/createTheme';

const { light, dark, cssString } = createTheme('#6d28d9');

/* Apply to the document */
Object.entries(light).forEach(([prop, val]) => {
  document.documentElement.style.setProperty(prop, val);
});

Live demo

Brand color