Back to Products
Design Assets
$29.00USD
FormatFigma / JSON / CSS / Tailwind Config
Files24
LanguageEnglish
Versionv3.0
#token#figma#tailwind#color#design-system
Design AssetsSaaS
Design Token System Pro
A complete, production-ready design token system covering color, typography, spacing, shadow, and motion — with Figma Variables, Tailwind config, and Style Dictionary JSON out of the box.
Core Content
内容预览
77+ 行内容# Design Token System Pro
## What Are Design Tokens?
Design tokens are the atoms of your design system — color decisions, type sizes, spacing values — stored as structured data that can sync between Figma, code, and documentation without manual translation.
## Complete Color System
### Primitive Palette (12 shades …付费解锁全部内容
$29.00 · 一次购买永久有效
What's Included
Figma source file with Variables
Style Dictionary JSON
Tailwind config file
CSS custom properties file
Dark mode extension
Token documentation PDF
Product Details
What Are Design Tokens?
Design tokens are the atoms of your design system — color decisions, type sizes, spacing values — stored as structured data that can sync between Figma, code, and documentation without manual translation.
What's Included
Color System
- Primitive palette: Gray, Blue, Green, Red, Yellow, Purple — 12 shades each (50–950)
- Semantic layer:
background,surface,border,text,interactive,feedbackroles - Brand overlay: 3 brand color slots with light and dark mode mappings
Typography Scale
- 9 steps from
xs(12px) to5xl(48px) - Line height and letter spacing paired with each step
- Font weight tokens: regular, medium, semibold, bold
Spacing
- 4px base unit, 16 steps (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32)
- Semantic aliases:
inset-xsthroughinset-xl
Elevation & Shadow
- 5 shadow layers, calibrated for light and dark mode
- Each layer has a color-matched shadow (not pure black)
Motion
- Easing curve tokens: ease-in, ease-out, ease-in-out, spring
- Duration tokens: instant, fast, normal, slow
File Formats
- Figma: Variables panel ready, with light/dark mode switch
- JSON: Style Dictionary format, ready for custom transformations
- Tailwind:
tailwind.config.jswith all tokens mapped - CSS Custom Properties: Drop-in CSS file
Specifications
File Format
Figma / JSON / CSS / Tailwind Config
Files
24
Language
English
Version
v3.0
SKU
AST-001
Updated
5/20/2026