Foundations1 tokens
Light
The soft white light that follows the cursor across lit surfaces.
- Source
tokens/light.json- Figma
- Collection Effect
- In code
<Light> · var(--light-cursor-*)
Rule
Light falls on everything except media.
Part
Rule
Where
One light per screen, above all content. The background, surfaces, fills, items, text, icons and open menus all catch it.
How much
It blends (soft-light), so each surface brightens in proportion to its own lightness: subtle on the background, a little more on every step up. The change feels the same everywhere.
Media
Images, video and generated output sit above the light. It passes behind them and dims to 25% while the cursor is over media.
Off
On touch screens and with reduced motion.
In code
Docs: the page frame has the class
lit (LightField moves the light). Screens: <Light> around the screen. Mark media with data-media.Try it
Move the cursor across the steps, the button and the media. The light grows with each surface and dims over media.
background
surface/primary
surface/secondary
surface/tertiary
surface/elevated
Media
Tokens
Source: tokens/light.json · from Figma 693:3121.
Token
Value
light/cursor/fillcontent/primary (#F1EEEC)
light/cursor/blendsoft-light
light/cursor/opacity80%
light/cursor/media-opacity25%
light/cursor/size75px
light/cursor/blur75 (Figma) · 37.5px in CSS
light/cursor/fade200ms · duration/base