# Tokens

A token is a named design value.
`DEFAULT_THEME` supplies the palette and theme fields.
`UI_FOUNDATIONS` supplies shared scales.
`RADIUS_SCALE` supplies the existing sharp, soft, and rounded presets.

These previews read the packed package values.
They do not maintain a separate token list.

[Tokens: Palette](/examples/?path=/story/foundations-tokens--palette)

## Shared scales

Type sizes pair with line-height values.
Spacing, borders, elevation, and motion values remain available for consumer compositions.
Use the scale exports and CSS variables instead of copying a value from this page.

[Tokens: Scales](/examples/?path=/story/foundations-tokens--scales)

## Radius presets

Select an existing radius preset to compare the same controls.
The nested preview keeps the change within its own theme.

[Tokens: Radius](/examples/?path=/story/foundations-tokens--radius)

## Responsive use

Keep content widths fluid and allow labels to wrap.
Place wide data tables and charts in containers with usable width.
Use the same shared values in your application media queries.
Test your actual copy at narrow widths and at 200 percent zoom.

## Projection glow

ProjectionGlow adds a decorative light field with the current primary color.
It remains still by default and stays inside its own container.
The optional reveal runs once and stops when the viewer reduces motion.
Place headings and controls beside the effect, so they stay readable without it.

[ProjectionGlow: Default](/examples/?path=/story/components-projectionglow--default)

## Theme presets

`THEME_PRESETS` supplies the modern palettes.
Each preset uses the same roles for text, surfaces, borders, and accent colors.

[Themes: Explorer](/examples/?path=/story/foundations-themes--explorer)

[Themes: Presets](/examples/?path=/story/foundations-themes--presets)

## Materials

`Surface` supports solid and glass materials.
Glass uses background blur while text keeps its full opacity.
`edgeLight` adds a top edge; `underglow` adds light beneath the panel.

[Themes: Materials](/examples/?path=/story/foundations-themes--materials)

## Gradient backgrounds

`GradientBackground` supports wash, spotlight, horizon, and atmosphere.
`GradientText` is for display headings.
Projection uses a subtle lime gradient.
Coastal Day uses a soft blue shift.

[Themes: Gradients](/examples/?path=/story/foundations-themes--gradients)

## Font roles

Syne carries headings, IBM Plex Sans carries reading text, and IBM Plex Mono carries labels and code.
The package sets font families. Your application loads the font files.

[Themes: Typography](/examples/?path=/story/foundations-themes--typography)