---
title: "Colors"
description: "Use token color primitives with every Tailwind color utility, and theme-aware page backgrounds with bg-layout-*."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/next/styling/colors
version: unreleased (main)
docs_index: https://docs.systhema.app/cs/next/llms.txt
---
> This page isn't translated yet. Showing English.


Every color primitive in your tokens is a Tailwind color, so `bg-*`, `text-*`, `border-*`, `fill-*` and the other color utilities accept it: `bg-theme-600`, `text-base-1000`, `border-theme-200`. Page and band backgrounds come from the color system as `bg-layout-*` classes, which follow the active theme.

## Quick reference

The primitives, shown with `bg-*`. Every other color utility takes the same names (`text-theme-600`, `border-base-200`, `ring-theme-500`).

<!-- generated:utilities colors -->

| Class          | Styles                                        |
| -------------- | --------------------------------------------- |
| `bg-base-0`    | `background-color: var(--color-white);`       |
| `bg-base-50`   | `background-color: var(--color-neutral-50);`  |
| `bg-base-100`  | `background-color: var(--color-neutral-100);` |
| `bg-base-200`  | `background-color: var(--color-neutral-200);` |
| `bg-base-300`  | `background-color: var(--color-neutral-300);` |
| `bg-base-400`  | `background-color: var(--color-neutral-400);` |
| `bg-base-500`  | `background-color: var(--color-neutral-500);` |
| `bg-base-600`  | `background-color: var(--color-neutral-600);` |
| `bg-base-700`  | `background-color: var(--color-neutral-700);` |
| `bg-base-800`  | `background-color: var(--color-neutral-800);` |
| `bg-base-900`  | `background-color: var(--color-neutral-900);` |
| `bg-base-950`  | `background-color: var(--color-neutral-950);` |
| `bg-base-1000` | `background-color: var(--color-black);`       |
| `bg-theme-50`  | `background-color: var(--color-blue-50);`     |
| `bg-theme-100` | `background-color: var(--color-blue-100);`    |
| `bg-theme-200` | `background-color: var(--color-blue-200);`    |
| `bg-theme-300` | `background-color: var(--color-blue-300);`    |
| `bg-theme-400` | `background-color: var(--color-blue-400);`    |
| `bg-theme-500` | `background-color: var(--color-blue-500);`    |
| `bg-theme-600` | `background-color: var(--color-blue-600);`    |
| `bg-theme-700` | `background-color: var(--color-blue-700);`    |
| `bg-theme-800` | `background-color: var(--color-blue-800);`    |
| `bg-theme-900` | `background-color: var(--color-blue-900);`    |
| `bg-theme-950` | `background-color: var(--color-blue-950);`    |

<!-- /generated -->

The layout backgrounds:

<!-- generated:utilities layout -->

| Class                   | Styles                                                  |
| ----------------------- | ------------------------------------------------------- |
| `bg-layout-main`        | `background-color: var(--color-layout-bg-main);`        |
| `bg-layout-alternative` | `background-color: var(--color-layout-bg-alternative);` |

<!-- /generated -->

## Basic usage

### Primitives

With the default tokens there are two palettes: `base`, a neutral scale from `0` (white) to `1000` (black), and `theme`, the brand scale from `50` to `950`.

```tsx preview title="Color primitives"
const palettes = {
  base: [
    'bg-base-0',
    'bg-base-50',
    'bg-base-100',
    'bg-base-200',
    'bg-base-300',
    'bg-base-400',
    'bg-base-500',
    'bg-base-600',
    'bg-base-700',
    'bg-base-800',
    'bg-base-900',
    'bg-base-950',
    'bg-base-1000',
  ],
  theme: [
    'bg-theme-50',
    'bg-theme-100',
    'bg-theme-200',
    'bg-theme-300',
    'bg-theme-400',
    'bg-theme-500',
    'bg-theme-600',
    'bg-theme-700',
    'bg-theme-800',
    'bg-theme-900',
    'bg-theme-950',
  ],
}

export default function Demo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {Object.entries(palettes).map(([name, swatches]) => (
        <div key={name} className="flex flex-col gap-2">
          <span className="font-mono text-xs font-semibold">{name}</span>
          <div className="grid grid-cols-7 gap-2 md:grid-cols-13">
            {swatches.map((swatch) => (
              <div key={swatch} className="flex flex-col gap-1">
                <div className={`h-10 rounded-md border border-black/10 ${swatch}`} />
                <span className="font-mono text-[10px]">{swatch.split('-').pop()}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}
```

Use primitives for one-off accents: a badge, an illustration, a highlight. They are the same in every theme, so for text and surfaces that should switch with the theme, use the color system roles below.

```tsx preview title="text-*, bg-* and border-* with primitives"
export default function Demo() {
  return (
    <div className="flex flex-wrap gap-3">
      <span className="bg-theme-50 text-theme-700 border-theme-200 rounded-full border px-3 py-1 text-sm font-medium">
        New
      </span>
      <span className="bg-base-100 text-base-700 border-base-300 rounded-full border px-3 py-1 text-sm font-medium">
        Draft
      </span>
      <span className="bg-theme-600 text-base-0 rounded-full px-3 py-1 text-sm font-medium">
        Published
      </span>
    </div>
  )
}
```

### Opacity

Add an opacity modifier to any color utility: `bg-theme-500/20` mixes the color with transparency.

```tsx preview title="Opacity modifiers"
const steps = ['bg-theme-500/10', 'bg-theme-500/25', 'bg-theme-500/50', 'bg-theme-500/75', 'bg-theme-500']

export default function Demo() {
  return (
    <div className="grid w-full max-w-[480px] grid-cols-5 gap-2">
      {steps.map((step) => (
        <div key={step} className="flex flex-col gap-1">
          <div className={`h-12 rounded-md ${step}`} />
          <span className="font-mono text-[10px]">{step.replace('bg-theme-500', '') || '/100'}</span>
        </div>
      ))}
    </div>
  )
}
```

### Layout backgrounds

`bg-layout-main` and `bg-layout-alternative` set a band's background from the color system, so they switch with the theme. They are what the `layoutBackground` prop of [`Section`](https://docs.systhema.app/cs/next/components/section.md) and the other layout components renders. Switch the preview to the dark color system to see both change.

```tsx preview iframe height=240 title="bg-layout-main and bg-layout-alternative"
export default function Demo() {
  return (
    <div className="grid w-full grid-cols-2 overflow-hidden rounded-lg border border-(--color-foundations-surface-border)">
      <div className="bg-layout-main flex h-32 items-center justify-center">
        <span className="color-body font-mono text-sm">bg-layout-main</span>
      </div>
      <div className="bg-layout-alternative flex h-32 items-center justify-center">
        <span className="color-body font-mono text-sm">bg-layout-alternative</span>
      </div>
    </div>
  )
}
```

### Color system roles

The other color system roles (foundations, links, components) have CSS variables but no classes of their own. Use them through Tailwind's variable shorthand: `bg-(--color-foundations-surface-bg)`, `text-(--color-foundations-text)`, `border-(--color-foundations-surface-border)`. Every role and its variable is listed in [Color tokens](https://docs.systhema.app/cs/next/reference/tokens/colors.md#color-system).

## Responsive and state variants

Color utilities take every Tailwind variant: `hover:bg-theme-700`, `focus-visible:ring-theme-500`, `md:bg-layout-alternative`.

```tsx preview title="hover:bg-theme-700"
export default function Demo() {
  return (
    <button
      type="button"
      className="bg-theme-600 text-base-0 hover:bg-theme-700 focus-visible:ring-theme-300 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-4 focus-visible:outline-none"
    >
      Hover me
    </button>
  )
}
```

Theme switching does not need a variant. The color system roles (and `bg-layout-*`, `color-heading`, `color-body`, `color-label`) take their value from the nearest `data-theme` ancestor, so `<section data-theme="dark">` recolors everything inside it. The `theme-default` and `theme-dark` classes do the same without the attribute; see [Variable utilities](https://docs.systhema.app/cs/next/styling/css-variables.md#variable-utilities). Tailwind's `dark:` variant follows the operating system's color scheme, not `data-theme`, unless you redefine it.

## Customizing

The primitives come from the `colorPrimitives` collection and the roles from `colorSystem`, one mode per theme. Change them in Figma, generate a palette with [Systhema Design](https://docs.systhema.app/cs/next/design/palettes.md), or override them in `systhema.config`:

```ts title="systhema.config.ts"
const config: SysthemaConfig = {
  customTokens: {
    colorPrimitives: {
      theme: { 500: '#7c3aed', 600: '#6d28d9' },
    },
    colorSystem: {
      default: { layout: { bg: { alternative: '#f5f3ff' } } },
    },
  },
}
```

A new palette key becomes a Tailwind color of the same name, and a new `layout.bg` key a `bg-layout-<name>` class. See [Color tokens](https://docs.systhema.app/cs/next/design/color-tokens.md), [Custom tokens](https://docs.systhema.app/cs/next/design/custom-tokens.md) and [Themes and backgrounds](https://docs.systhema.app/cs/next/concepts/themes.md). `blocks.layout: false` removes the `bg-layout-*` classes.

## Related

- [Color tokens reference](https://docs.systhema.app/cs/next/reference/tokens/colors.md)
- [CSS variables](https://docs.systhema.app/cs/next/styling/css-variables.md)
- [Color palettes](https://docs.systhema.app/cs/next/design/palettes.md)
- [Themes and backgrounds](https://docs.systhema.app/cs/next/concepts/themes.md)