CSS Tokens

Vesper is built on top of a set of design tokens corresponding to color, spacing, radius, leading, tracking, shadow, stroke, and background. These tokens are exposed in your app as CSS variables when you import the component styles, and can also be used in Tailwind utilities.

Colors

Color tokens are split into primitive and semantic tokens.

Primitive tokens are the raw palette values from our design system.

Semantic tokens are aliases of primitive tokens intended to be more ergonomic for applied use (these will be familiar to you if you've used a library like Tailwind).

For example, the semantic token --vesper-background-primary aliases the primitive --vesper-stone-0 color token value.

We prefer using semantic tokens wherever possible, since they automatically resolve to the correct primitive for the active theme.

Primitive color tokens

Semantic color tokens

Tailwind color classes

If you imported @tenstorrent/vesper/tailwind.css into your css file where you set up Tailwind, these color tokens are available for use in Tailwind's utility classes. Every color token (primitive and semantic) is registered in Tailwind's --color-* namespace as --color-vesper-*, so any Tailwind utility that accepts a color works: bg-*, text-*, border-*, outline-*, ring-*, fill-*, stroke-*, divide-*, shadow-*, accent-*, and so on.

For example:

<div className="bg-vesper-stone-500" />;
<div className="border-vesper-border-secondary" />;
<div className="text-vesper-icon-primary" />;

Fonts

Tailwind font classes

Font tokens are registered in Tailwind's --font-* namespace, so they are available as font-family utilities:

<p className="font-vesper-sans" />;
<code className="font-vesper-mono" />;

Leading

Leading (line height) tokens are percentage-based, so they scale with the element's font size.

Tailwind leading classes

Leading tokens are registered in Tailwind's --leading-* namespace, so they are available as line-height utilities:

<p className="leading-vesper-normal" />;
<p className="leading-vesper-loose" />;

Tracking

Tracking (letter spacing) tokens are also relative to the element's font size. The values below are expressed in em, so they scale with the font size — for example, --vesper-tracking-tight resolves to -0.25px at a 16px font size.

Tailwind tracking classes

Tracking tokens are registered in Tailwind's --tracking-* namespace, so they are available as letter-spacing utilities:

<h1 className="tracking-vesper-tight" />;
<span className="tracking-vesper-wide" />;

Radius

Tailwind radius classes

Radius tokens are registered in Tailwind's --radius-* namespace, so they work with every border-radius utility, including the side- and corner-specific ones:

<div className="rounded-vesper-2" />;
<div className="rounded-t-vesper-4" />;
<div className="rounded-bl-vesper-half" />;

Shadows

Tailwind shadow classes

Shadow tokens are registered in Tailwind's --shadow-* namespace, so they are available as box-shadow utilities. Note that the inset tokens already include the inset keyword in their value, so they are also applied with shadow-* (not inset-shadow-*):

<div className="shadow-vesper-200" />;
<div className="shadow-vesper-inset-100" />;
<button className="focus-visible:shadow-vesper-focus-ring" />;

Spacing

Tailwind spacing classes

Spacing tokens are registered in Tailwind's --spacing-* namespace as --spacing-vesper-*, so they work with every spacing-based utility — padding, margin, width, height, gap, inset, translate, and so on:

<div className="p-vesper-4 gap-vesper-2" />;
<div className="mt-vesper-8 px-vesper-3" />;
<div className="size-vesper-10 top-vesper-2" />;

Animations

Use them anywhere a duration is expected so that your app's motion stays in step with Vesper's components:

transition: background-color var(--vesper-transition-duration-fast) ease-in-out;

Tailwind animation classes

Animation tokens are registered in Tailwind's --transition-duration-* namespace, so they are available through the duration-* utilities:

<div className="transition-colors duration-vesper-fast" />;
<div className="transition-transform duration-vesper-slow" />;

Backgrounds

Background tokens provide Vesper's dot pattern as ready-to-use background shorthand values.

Since the dot pattern tokens are background shorthand values, assign them to the background property rather than background-image or background-color:

background: var(--vesper-bg-dot-pattern-secondary);

Tailwind background classes

Background tokens are exposed as custom Tailwind utilities rather than theme values:

<div className="bg-vesper-dot-pattern-primary" />;
<div className="bg-vesper-dot-pattern-secondary" />;
<div className="bg-vesper-dot-pattern-tertiary" />;
<div className="bg-vesper-dot-pattern-inverse" />;

Both the default and inverse dot patterns also accept any Vesper color token as a background color, using the token name without the vesper- prefix:

<div className="bg-vesper-dot-pattern-teal-200" />;
<div className="bg-vesper-dot-pattern-background-brand-purple-base" />;
<div className="bg-vesper-dot-pattern-inverse-stone-500" />;

Strokes

Stroke tokens define the border and outline widths used throughout Vesper.

border: var(--vesper-stroke-base) solid var(--vesper-border-secondary);
outline: var(--vesper-stroke-strong) solid var(--vesper-border-focus);

Tailwind stroke classes

Stroke tokens are registered in Tailwind's --outline-width-* and --border-width-* namespaces, so they are available as outline-width and border-width utilities:

<div className="outline-vesper-base" />;
<div className="border-vesper-strong" />;