Create Box Shadow Design Token
What It Does
The Create Box Shadow Design Token node constructs a box-shadow-type design token from provided inputs. It allows you to define shadow properties such as x-offset, y-offset, blur, spread, and color, and generates a standardized token object that can be used in a design system.
Inputs
Name
The name identifier for the token
String
Yes
Reference
A reference to another token (used when the token references another token)
String
No*
Value
Array of box shadow values defining x, y, blur, spread and color
Array
No*
Description
Optional description of what the token represents
String
No
$extensions
Optional metadata for the token
Object
No
*Either Reference or Value must be provided
Outputs
Token
The complete design token object
Object
How to Use It
Drag the Create Box Shadow Design Token node into your graph.
Connect a string to the "Name" input to identify your token.
Either:
Connect an array of box shadow values to the "Value" input, or
Connect a reference string to the "Reference" input if this token references another token.
Optionally add a description and any extension metadata.
The node will output a complete box shadow token object that follows the Tokens Studio format.

Tips
Box shadow tokens typically include properties like x-offset, y-offset, blur radius, spread radius, and color.
You can create multiple shadow layers by providing an array of shadow objects.
The "Reference" input allows you to create alias tokens that point to other tokens.
Make sure your shadow values follow the expected structure with x, y, blur, spread, and color properties.
See Also
Create Color Design Token: For creating color tokens.
Create Typography Design Token: For creating typography tokens.
Create Border Design Token: For creating border tokens.
Flatten Token Sets: For managing collections of tokens.
Use Cases
Elevation System: Create consistent shadow styles for different elevation levels.
Component States: Define shadow tokens for different interactive states (hover, active, etc.).
Modal Overlays: Establish shadow tokens for modal and popup components.
Card Depth: Create standardized shadow tokens for indicating visual hierarchy through depth.
Last updated