Effects

13 tokens

Shadow, stroke width, and opacity. The shadow's geometry comes from the token file, but its color and opacity are defined per theme rather than aliased to a neutral, because a neutral alias resolves to a near-white in light mode, which is an invisible shadow on a light surface.

Shadow

Geometry comes from the token file; color and opacity are defined per theme, so the shadow stays dark in both modes instead of inverting.

x 0 · y 4 · blur 40 · spread -10

light#1B1B1F · 20%

dark#000000 · 48%

Stroke width

6 tokens

Preview	Token	CSS variable	Value	Source	Description
				1	1px stroke width. Base stroke-width scale used for borders, lines, diagrams, illustrations and other stroked elements.
				1.5	1.5px stroke width. Base stroke-width scale used for borders, lines, diagrams, illustrations and other stroked elements.
				2	2px stroke width. Base stroke-width scale used for borders, lines, diagrams, illustrations and other stroked elements.
				2.5	2.5px stroke width. Base stroke-width scale used for borders, lines, diagrams, illustrations and other stroked elements.
				3	3px stroke width. Base stroke-width scale used for borders, lines, diagrams, illustrations and other stroked elements.
				0.5	0.5px stroke width. Base stroke-width scale used for borders, lines, diagrams, illustrations and other stroked elements.

Opacity

Authored 0 to 100 in Figma, emitted as a 0 to 1 CSS ratio.

Preview	Token	CSS variable	Value	Source	Description
				0	Base opacity value of 0%. Fully transparent. Lean defaults to fully opaque colors and elements. Use reduced opacity only when functionally or visually necessary, such as for shadows, illustrations, or specific visual effects. Avoid using opacity as a default styling treatment.
				20	Base opacity value of 20%. Fully transparent. Lean defaults to fully opaque colors and elements. Use reduced opacity only when functionally or visually necessary, such as for shadows, illustrations, or specific visual effects. Avoid using opacity as a default styling treatment.
				40	Base opacity value of 40%. Fully transparent. Lean defaults to fully opaque colors and elements. Use reduced opacity only when functionally or visually necessary, such as for shadows, illustrations, or specific visual effects. Avoid using opacity as a default styling treatment.
				60
				80	Base opacity value of 80%. Fully transparent. Lean defaults to fully opaque colors and elements. Use reduced opacity only when functionally or visually necessary, such as for shadows, illustrations, or specific visual effects. Avoid using opacity as a default styling treatment.
				100	Base opacity value of 100%. Fully transparent. Lean defaults to fully opaque colors and elements. Use reduced opacity only when functionally or visually necessary, such as for shadows, illustrations, or specific visual effects. Avoid using opacity as a default styling treatment.