Claude Designerer
FeaturesBenefits
TutorialsProductsDesign Tips
Start Designing
Back to Products
Design Assets
$29.00USD
Preparing files
Coming Soon

Will be available for purchase and download after launch, stay tuned

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 · 一次购买永久有效

Related Products

View All
Design Assets

E-commerce Icon Set — 500+ Icons

500+ pixel-perfect SVG icons for e-commerce products — cart, payment methods, shipping, product categories, reviews, promotions, and account management. Three visual styles in one library.

$35.00View
Design Assets

B2B SaaS Illustration Pack

40 customizable vector illustrations for B2B SaaS marketing pages — feature highlights, integrations, security, teams, analytics, and empty states. Figma source with swappable brand colors.

$45.00View

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, feedback roles
  • Brand overlay: 3 brand color slots with light and dark mode mappings

Typography Scale

  • 9 steps from xs (12px) to 5xl (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-xs through inset-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.js with 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
Design Assets

Retail Product Mockup Pack

60 high-resolution product mockup scenes for retail and e-commerce — packaging showcases, lifestyle photography contexts, and flat-lay compositions. PSD smart objects, one-click swap.

$25.00View