Studio

Saves designer-in-you.tokens.json. In Figma, use a plugin (e.g. Tokens Studio for Figma or Variables Import) and choose Import, then select this file.

Step	OKLCH
brand-50	oklch(92% 0.11 250)
brand-100	oklch(87.5% 0.13435986159169552 250)
brand-200	oklch(78.4% 0.17394463667820068 250)
brand-300	oklch(69.4% 0.2013494809688581 250)
brand-400	oklch(60.3% 0.21657439446366783 250)
brand-500	oklch(51.2% 0.21961937716262975 250)
brand-600	oklch(42.2% 0.21048442906574394 250)
brand-700	oklch(33.1% 0.18916955017301043 250)
brand-800	oklch(24.1% 0.15567474048442909 250)
brand-900	oklch(15% 0.11000000000000003 250)

Step	OKLCH
gray-50	oklch(95% 0.015 110)
gray-100	oklch(90.3% 0.01832179930795847 110)
gray-200	oklch(80.9% 0.023719723183391 110)
gray-300	oklch(71.5% 0.02745674740484429 110)
gray-400	oklch(62.1% 0.02953287197231834 110)
gray-500	oklch(52.6% 0.029948096885813145 110)
gray-600	oklch(43.2% 0.02870242214532872 110)
gray-700	oklch(33.8% 0.025795847750865054 110)
gray-800	oklch(24.4% 0.021228373702422147 110)
gray-900	oklch(15% 0.015000000000000003 110)

Step	OKLCH
red-50	oklch(95% 0.11 0)
red-100	oklch(90.3% 0.13435986159169547 0)
red-200	oklch(80.9% 0.17394463667820068 0)
red-300	oklch(71.5% 0.20134948096885813 0)
red-400	oklch(62.1% 0.21657439446366783 0)
red-500	oklch(52.6% 0.21961937716262975 0)
red-600	oklch(43.2% 0.21048442906574394 0)
red-700	oklch(33.8% 0.1891695501730104 0)
red-800	oklch(24.4% 0.15567474048442909 0)
red-900	oklch(15% 0.11000000000000003 0)

Step	OKLCH
green-50	oklch(92% 0.09 142)
green-100	oklch(87.5% 0.10993079584775087 142)
green-200	oklch(78.4% 0.142318339100346 142)
green-300	oklch(69.4% 0.16474048442906572 142)
green-400	oklch(60.3% 0.17719723183391003 142)
green-500	oklch(51.2% 0.1796885813148789 142)
green-600	oklch(42.2% 0.1722145328719723 142)
green-700	oklch(33.1% 0.15477508650519034 142)
green-800	oklch(24.1% 0.12737024221453289 142)
green-900	oklch(15% 0.09000000000000001 142)

Step	OKLCH
yellow-50	oklch(95% 0.11 85)
yellow-100	oklch(90.3% 0.13435986159169547 85)
yellow-200	oklch(80.9% 0.17394463667820068 85)
yellow-300	oklch(71.5% 0.20134948096885813 85)
yellow-400	oklch(62.1% 0.21657439446366783 85)
yellow-500	oklch(52.6% 0.21961937716262975 85)
yellow-600	oklch(43.2% 0.21048442906574394 85)
yellow-700	oklch(33.8% 0.1891695501730104 85)
yellow-800	oklch(24.4% 0.15567474048442909 85)
yellow-900	oklch(15% 0.11000000000000003 85)

Step	OKLCH
blue-50	oklch(92% 0.11 225)
blue-100	oklch(87.5% 0.13435986159169552 225)
blue-200	oklch(78.4% 0.17394463667820068 225)
blue-300	oklch(69.4% 0.2013494809688581 225)
blue-400	oklch(60.3% 0.21657439446366783 225)
blue-500	oklch(51.2% 0.21961937716262975 225)
blue-600	oklch(42.2% 0.21048442906574394 225)
blue-700	oklch(33.1% 0.18916955017301043 225)
blue-800	oklch(24.1% 0.15567474048442909 225)
blue-900	oklch(15% 0.11000000000000003 225)

Step	OKLCH
orange-50	oklch(95% 0.12 25)
orange-100	oklch(90.3% 0.14657439446366777 25)
orange-200	oklch(80.9% 0.189757785467128 25)
orange-300	oklch(71.5% 0.21965397923875432 25)
orange-400	oklch(62.1% 0.2362629757785467 25)
orange-500	oklch(52.6% 0.23958477508650516 25)
orange-600	oklch(43.2% 0.22961937716262976 25)
orange-700	oklch(33.8% 0.20636678200692044 25)
orange-800	oklch(24.4% 0.16982698961937717 25)
orange-900	oklch(15% 0.12000000000000002 25)

Semantic light and dark roles mapped to primitives. Reset to Studio defaults anytime.

Background

Token	Light	Dark
background-base
background-highlight
background-muted
background-emphasis
background-disabled

Text

Token	Light	Dark
text-base
text-muted
text-disabled
text-inverse
text-brand

Border

Token	Light	Dark
border-base
border-muted
border-disabled

Interactive

Token	Light	Dark
button-primary
button-primary-foreground
button-secondary
button-secondary-foreground
button-ghost-foreground
link-base
link-hover

Feedback

Token	Light	Dark
feedback-error-base
feedback-error-text
feedback-success-base
feedback-success-text
feedback-warning-base
feedback-warning-text
feedback-info-base
feedback-info-text

Live preview:

Acme Dashboard

Overview

Total revenue

$84,432

+12.4% from last month

Active users

2,847

+8.2% from last month

Conversion

0.00%

-0.4% from last month

Team

Name	Role	Status
ACAlice Chen	Admin	Active
BMBob Martinez	User	Pending
CKCarol Kim	Viewer	Inactive

Recent activity

New signup
alice@company.com
2m ago
Payment received
$1,200 · Invoice #4021
15m ago
Task completed
Design review
1h ago