Box is the preferred approach. Pass token names directly as props. Box translates them to atomic CSS classes without any manual .css.ts authoring.

1
<Box
2
    padding="large"
3
    background="neutralLight"
4
    borderRadius="md">
5
    <Text>Token names map directly to atomic CSS classes.</Text>
6
</Box>

Tokens are plain TypeScript constants consumed by .css.ts files at build time. Vanilla Extract compiles them to static CSS, so the browser receives an ordinary stylesheet and no JavaScript.

1
export const card = style({
2
    padding: space.large,
3
    borderRadius: radius.md,
4
    background: vars.backgroundColor.neutralLight,
5
});

Token values are inlined at build time. Theme colors stay CSS variables, so themes switch at runtime without a rebuild.

1
.card_1skp7a2o {
2
    padding: 1.25rem;
3
    border-radius: 0.375rem;
4
    background: var(--backgroundColor-neutralLight__1hqmkoh);
5
}

Token names are typed as string literal unions. Passing an invalid value is a TypeScript error caught before the browser sees it.

1
applyPadding('giant'); // Argument of type '"giant"' is not assignable to type 'Space'
2
applyPadding('large');

Semantic text colors from the theme contract, applied with the tone prop on Text. Values follow the active theme.

Semantic surface colors from the theme contract, applied with the background prop on Box. Interactive tokens include Hover and Active variants.

Semantic border colors from the theme contract.

Focus outline thickness from the theme contract, drawn with the focus border color.

Padding, margin, and gap values in rem, relative to a 16px base.

Corner rounding. The full token creates pills and circles.

Raw size scale consumed by typography styles. Use Text or Heading rather than these tokens directly.

Available through the weight prop on Text.

Sans for interface text, mono for code.

Available through the letterSpacing prop on Text. Widest suits uppercase labels.

Widths for constraining containers. A separate scale from space.

Minimum widths used by responsive props. Mobile is the unprefixed default.

Query strings derived from the breakpoints, consumed by .css.ts files.

Used for borders and for boxShadow borders that avoid layout shift.

Minimum touch target size per WCAG 2.5.5 and the Apple Human Interface Guidelines.