How to use Adobe Design tokens - Spectrum

Official link:https://spectrum.adobe.com/
My Sample

Tutorial: add a Spectrum button
1. Installing Spectrum CSS
$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page
2. Setting up global variables
<html class="spectrum spectrum--medium spectrum--light">
3. Adding Spectrum CSS
<head>
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
</head>
4. Add button
<button class="spectrum-Button spectrum-Button--cta">
<span class="spectrum-Button-label">Button</span>
</button>
5. Final html
<html class="spectrum spectrum--light spectrum--medium">
<head>
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
</head>
<body>
<button class="spectrum-Button spectrum-Button--cta">
<span class="spectrum-Button-label">Button</span>
</button>
</body>
</html>

1. Install the corresponding component
npm install @spectrum-css/card@2.0.0
2. Import card css
@import "./node_modules/@spectrum-css/card/dist/index-vars.css";
<div class="content-card">
<a href="subpage/post.html">
<div class="spectrum-Card" tabindex="0" role="figure">
<div class="spectrum-Card-coverPhoto"
style="background-image: url(img/download.jpeg)"></div>
<div class="spectrum-Card-body">
<div class="spectrum-Card-header">
<div class="spectrum-Card-title">Blog Post 1</div>
</div>
<div class="spectrum-Card-description">
<p>
Consulted he eagerness unfeeling deficient existence of.
Calling nothing end fertile for venture way boy.
Esteem spirit temper too say adieus who direct esteem.
</p>
<p>
It esteems luckily mr or picture placing drawing no.
Apartments frequently or motionless on reasonable projecting expression.
Way mrs end gave tall walk fact bed.
</p>
</div>
</div>
</div>
</a>
</div>
Last updated
Was this helpful?