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
Description
Type
Required

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

Name
Description
Type

Token

The complete design token object

Object

How to Use It

  1. Drag the Create Box Shadow Design Token node into your graph.

  2. Connect a string to the "Name" input to identify your token.

  3. 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.

  4. Optionally add a description and any extension metadata.

  5. The node will output a complete box shadow token object that follows the Tokens Studio format.

Create Box Shadow Design Token Example

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