Foundation

Colors

Brand, surface, text, outline and semantic color tokens, all defined in OKLCH and swapped per preset and scheme.

Every color is a CSS custom property. Components never hardcode a color, so changing the preset, the scheme or a single token restyles the whole app.

.badge {
  color: var(--ca-brand-text);
  background: color-mix(in oklab, var(--ca-brand-main) 14%, var(--ca-surface-base));
  border: 1px solid var(--ca-outline-default);
}

The swatches below read the live tokens, so they follow the theme switcher in the header. Use --ca-brand-text for brand-colored text and --ca-brand-fill for filled brand surfaces: both are tuned to keep contrast in light and dark.

Brand

Derived from the active preset. brand-fill and brand-text keep contrast in both schemes.

brand-main

--ca-brand-main

brand-light

--ca-brand-light

brand-dark

--ca-brand-dark

brand-contrast

--ca-brand-contrast

brand-fill

--ca-brand-fill

brand-text

--ca-brand-text

Code

<script lang="ts">
	import Swatches from "./Swatches.svelte";
	const tokens = [
		"--ca-brand-main",
		"--ca-brand-light",
		"--ca-brand-dark",
		"--ca-brand-contrast",
		"--ca-brand-fill",
		"--ca-brand-text",
	];
</script>

<Swatches {tokens} />

Surfaces

A layered scale for depth: sunken, base, raised, overlay.

surface-sunken

--ca-surface-sunken

surface-base

--ca-surface-base

surface-raised

--ca-surface-raised

surface-overlay

--ca-surface-overlay

Code

<script lang="ts">
	import Swatches from "./Swatches.svelte";
	const tokens = ["--ca-surface-sunken", "--ca-surface-base", "--ca-surface-raised", "--ca-surface-overlay"];
</script>

<Swatches {tokens} bordered={true} />

Text

text-hint is the lowest readable tier (4.5:1). text-disabled is for inactive controls only.

text-primary

--ca-text-primary

text-secondary

--ca-text-secondary

text-hint

--ca-text-hint

text-disabled

--ca-text-disabled

Code

<script lang="ts">
	import Swatches from "./Swatches.svelte";
	const tokens = ["--ca-text-primary", "--ca-text-secondary", "--ca-text-hint", "--ca-text-disabled"];
</script>

<Swatches {tokens} bordered={true} />

Semantic

Success, warning, error and info. Semantic colors never change with the preset.

semantic-success

--ca-semantic-success

semantic-warning

--ca-semantic-warning

semantic-error

--ca-semantic-error

semantic-info

--ca-semantic-info

Code

<script lang="ts">
	import Swatches from "./Swatches.svelte";
	const tokens = ["--ca-semantic-success", "--ca-semantic-warning", "--ca-semantic-error", "--ca-semantic-info"];
</script>

<Swatches {tokens} bordered={false} />

Outline

Border and divider scale.

outline-subtle

--ca-outline-subtle

outline-default

--ca-outline-default

outline-strong

--ca-outline-strong

Code

<script lang="ts">
	import Swatches from "./Swatches.svelte";
	const tokens = ["--ca-outline-subtle", "--ca-outline-default", "--ca-outline-strong"];
</script>

<Swatches {tokens} bordered={true} />