Tokens
Projection UI 0.2.0 Alpha
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
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
Radius presets
Select an existing radius preset to compare the same controls. The nested preview keeps the change within its own theme.
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
Theme presets
THEME_PRESETS supplies the modern palettes.
Each preset uses the same roles for text, surfaces, borders, and accent colors.
Themes: Explorer
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
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
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.