Alex Dimitrov

← Back to article

Full prompt

This is the full prompt used in Automate variable creations in Figma. Copy the whole block below and paste it into your LLM of choice.

Of course, you can also vastly simplify the prompt body where the style guide is defined and let the LLMs automate more of it

Context & Output Format

You are a design systems engineer. Your task is to generate a valid Tokens Studio JSON file that follows the Tokens Studio standard defined here:
https://gist.githubusercontent.com/xavortm/d952afe340c2443ecfdcf6e4164a34bb/raw/…/info.md

Read and strictly follow that specification before generating any output. The JSON must be valid, well-structured, and ready to import directly into Tokens Studio.

Scope: Light Mode only. Do not generate Dark Mode tokens.

// Dark Mode is out of scope for this file. If Dark Mode tokens are needed in the future, they will be handled in a separate file.

1. Primitive Color Palettes

Generate three complete color palettes. Each palette must contain exactly 11 steps, named using the following scale:
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Lighter shades start at 50; darker shades end at 950.

Palette 1 — Neutrals
Base anchor color: [HEX] → this is Neutral 950 (darkest shade)

// example: #151515 → Neutral/950

Generate the remaining 10 steps (50 through 900) as a perceptually balanced ramp from near-white to the anchor color. Suggest hex values.

Palette 2 — [Secondary Palette Name]

// example name: Blue Screen

Base anchor color: [HEX]

// example: #1300EE

Generate all 11 steps. Use the anchor color as the mid-range reference (typically 500 or 600). Suggest placement and hex values for all steps.

Palette 3 — [Accent Palette Name]

// example name: Lava Red

Base anchor color: [HEX]

// example: #F03522

Generate all 11 steps using the same logic. Suggest placement and hex values for all steps.

After generating all three palettes, suggest appropriate hover-state colors for the CTA buttons based on the completed ramps. Hover colors should be one step darker than the default interactive color.

2. Color Schemes — Light Mode

Define semantic color tokens that map to the primitive palette above.

TokenValueNotes
Text/Main[HEX]Primary body text
Text/Muted[HEX]Secondary, helper, or placeholder text
Background/Default[HEX]Main page/canvas background
Background/Surface1[HEX]Cards, panels, elevated surfaces
Border/Default[HEX]Strokes, dividers, input outlines
Color/Secondary[HEX]Secondary brand color
Color/Accent[HEX]Accent / highlight color

// example (Light Mode):

// Text/Main: #151515 | Text/Muted: #817D78

// Background/Default: #ECE6DA | Background/Surface1: #F7F2E9

// Border/Default: #A8A8A8

// Color/Secondary: #1300EE | Color/Accent: #F03522

CTA Button Color Tokens

Button TypeBackgroundForegroundHover Background
Primary[HEX][HEX][suggest from ramp]
Secondary[HEX][HEX][suggest from ramp]
LinkText: [HEX], Icon: [HEX]——

// example:

// Primary CTA — BG: #1300EE, FG: #ECE6DA

// Secondary CTA — BG: #151515, FG: #ECE6DA

// Link CTA — Text: #151515, Icon: #F03522

3. Typography

Typeface

  • Heading font: [Font Name]
  • Body font: [Font Name] (can be the same as heading)

// example: General Sans for both heading and body

3a. Heading Scale

Each heading style should define: font, weight, size, line-height, and letter-spacing.

StyleWeightSizeLine HeightLetter Spacing
Display 1[weight][px][%][px]
H1[weight][px][%][px]
H2[weight][px][%][px]
H3[weight][px][%][px]
H4[weight][px][%][px]
H5[weight][px][%][px]
H6[weight][px][%][px]
Tagline[weight][px][%]—

// example:

// Display 1 — Medium | 80px | 100% | -2px

// H1 — Medium | 64px | 100% | -2px

// H2 — Medium | 56px | 100% | -2px

// H3 — Medium | 48px | 100% | -2px

// H4 — Medium | 32px | 100% | -2px

// H5 — Medium | 24px | 100% | -2px

// H6 — Medium | 20px | 100% | -2px

// Tagline — SemiBold | 16px | 120% | none

3b. Body Scale

Each body style should be generated across the full weight range: Light, Regular, Medium, SemiBold, Bold, ExtraBold.

StyleSizeLine Height
Text Large[px][%]
Text Medium[px][%]
Text Regular[px][%]
Text Small[px][%]
Text Tiny[px][%]

// example:

// Text Large — 20px | 110%

// Text Medium — 18px | 110%

// Text Regular — 16px | 120%

// Text Small — 14px | 120%

// Text Tiny — 12px | 120%

3c. CTA Button Text Styles

StyleWeightSizeLine HeightDecoration
CTA PrimarySemiBold[px][%]None
CTA SecondarySemiBold[px][%]Underline — Thickness: 10%, Offset: 10%

// example:

// CTA Primary — SemiBold | 14px | 120% | No decoration

// CTA Secondary — SemiBold | 14px | 120% | Underlined

4. Spacing Scale

Define 12 spacing steps (0–11). All values in px.

StepValue
00px
1[px]
2[px]
3[px]
4[px]
5[px]
6[px]
7[px]
8[px]
9[px]
10[px]
11[px]

// example: 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64

5. Border Radius

Define border radius tokens and specify where each should be used in the UI.

TokenValueUsage
Radius/1[px][component]
Radius/2[px][component]
Radius/3[px][component]

// example:

// Radius/1 — 2px — Checkboxes

// Radius/2 — 4px — Inputs, form fields

// Radius/3 — 100px — Buttons (pill shape)

Output Instructions

  1. Generate a single valid Tokens Studio JSON file covering all sections above.
  2. Use the Tokens Studio standard from the reference URL at the top of this prompt.
  3. Group tokens logically: primitive, semantic, typography, spacing, border-radius.
  4. Light Mode only — do not include dark mode token sets.
  5. If any value above is left as [placeholder], flag it and suggest a reasonable default based on the design context provided.
  6. After generating the JSON, summarize what was generated and list any assumptions made.

Context & Output Format

You are a design systems engineer. Your task is to generate a valid Tokens Studio JSON file that follows the Tokens Studio standard defined here:
https://gist.githubusercontent.com/xavortm/d952afe340c2443ecfdcf6e4164a34bb/raw/…/info.md

Read and strictly follow that specification before generating any output. The JSON must be valid, well-structured, and ready to import directly into Tokens Studio.

Scope: Light Mode only. Do not generate Dark Mode tokens.

// Dark Mode is out of scope for this file. If Dark Mode tokens are needed in the future, they will be handled in a separate file.

1. Primitive Color Palettes

Generate three complete color palettes. Each palette must contain exactly 11 steps, named using the following scale:
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Lighter shades start at 50; darker shades end at 950.

Palette 1 — Neutrals
Base anchor color: #151515 → this is Neutral 950 (darkest shade)

Generate the remaining 10 steps (50 through 900) as a perceptually balanced ramp from near-white to the anchor color. Suggest hex values.

Palette 2 — Blue Screen
Base anchor color: #1300EE

Generate all 11 steps. Use the anchor color as the mid-range reference (typically 500 or 600). Suggest placement and hex values for all steps.

Palette 3 — Lava Red
Base anchor color: #F03522

Generate all 11 steps using the same logic. Suggest placement and hex values for all steps.

After generating all three palettes, suggest appropriate hover-state colors for the CTA buttons based on the completed ramps. Hover colors should be one step darker than the default interactive color.

2. Color Schemes — Light Mode

Define semantic color tokens that map to the primitive palette above.

TokenValueNotes
Text/Main#151515Primary body text — Neutral/950
Text/Muted#817D78Secondary, helper, and placeholder text — Neutral/400
Background/Default#ECE6DAMain page/canvas background — warm off-white
Background/Surface1#F7F2E9Cards, panels, elevated surfaces — one step lighter
Border/Default#A8A8A8Strokes, dividers, input outlines — Neutral/300
Color/Secondary#1300EEBlue Screen/500 — secondary brand color
Color/Accent#F03522Lava Red/500 — accent / highlight color

CTA Button Color Tokens

Button TypeBackgroundForegroundHover Background
Primary#1300EE#ECE6DAOne step darker from Blue Screen ramp
Secondary#151515#ECE6DAOne step lighter from Neutral ramp
LinkText: #151515, Icon: #F03522——

3. Typography

Typeface

  • Heading font: General Sans
  • Body font: General Sans

3a. Heading Scale

Each heading style should define: font, weight, size, line-height, and letter-spacing.

StyleWeightSizeLine HeightLetter Spacing
Display 1Medium80px100%-2px
H1Medium64px100%-2px
H2Medium56px100%-2px
H3Medium48px100%-2px
H4Medium32px100%-2px
H5Medium24px100%-2px
H6Medium20px100%-2px
TaglineSemiBold16px120%—

3b. Body Scale

Each body style should be generated across the full weight range: Light, Regular, Medium, SemiBold, Bold, ExtraBold.

StyleSizeLine Height
Text Large20px110%
Text Medium18px110%
Text Regular16px120%
Text Small14px120%
Text Tiny12px120%

3c. CTA Button Text Styles

StyleWeightSizeLine HeightDecoration
CTA PrimarySemiBold14px120%None
CTA SecondarySemiBold14px120%Underline — Thickness: 10%, Offset: 10%

4. Spacing Scale

Define 12 spacing steps (0–11). All values in px.

StepValue
00px
12px
24px
38px
412px
516px
624px
732px
840px
948px
1056px
1164px

5. Border Radius

Define border radius tokens and specify where each should be used in the UI.

TokenValueUsage
Radius/12pxCheckboxes
Radius/24pxInputs, form fields
Radius/3100pxButtons (pill shape)

Output Instructions

  1. Generate a single valid Tokens Studio JSON file covering all sections above.
  2. Use the Tokens Studio standard from the reference URL at the top of this prompt.
  3. Group tokens logically: primitive, semantic, typography, spacing, border-radius.
  4. Light Mode only — do not include dark mode token sets.
  5. If any value above is left as [placeholder], flag it and suggest a reasonable default based on the design context provided.
  6. After generating the JSON, summarize what was generated and list any assumptions made.

Context & Output Format

You are a design systems engineer. Your task is to generate a valid Tokens Studio JSON file that follows the Tokens Studio standard defined here:
https://gist.githubusercontent.com/xavortm/d952afe340c2443ecfdcf6e4164a34bb/raw/…/info.md

Read and strictly follow that specification before generating any output. The JSON must be valid, well-structured, and ready to import directly into Tokens Studio.

Scope: Light Mode only. Do not generate Dark Mode tokens.

Design System Requirements

I need a complete design token set for a brand. Here's what I'm working with:

Brand colors:

  • Primary brand color: [HEX] — used for main CTAs and interactive elements
  • Secondary brand color: [HEX] — used for accents and highlights
  • Darkest neutral: [HEX] — used for body text

From these three anchor colors, generate full 11-step palettes (50–950) for each. Derive all semantic tokens (text, backgrounds, borders, button states, hover colors) from these palettes. Pick sensible mappings — I trust your judgment.

Typography:

  • Font: [Font Name] for both headings and body
  • Create a heading scale (Display 1 through H6, plus a Tagline style) and a body text scale (Large through Tiny) with all common weights (Light, Regular, Medium, SemiBold, Bold, ExtraBold)
  • Add CTA text styles for primary and secondary buttons
  • Use conventional sizing, line-heights, and letter-spacing — you decide the exact values

Spacing:

  • Generate a 12-step spacing scale (0–11) that follows a sensible progression from 0px up to around 64px

Border radius:

  • Define 3 radius tokens for small elements (checkboxes), medium elements (inputs), and large elements (buttons/pills)

Output

Generate a single valid Tokens Studio JSON covering everything above. Group tokens into primitive, semantic, typography, spacing, and border-radius sets. After generating, summarize what you produced and flag any assumptions you made.

Adjust the values to your own design system. The more specific you are, the better the output. Of course, you can make any other adjustments to the prompt.