Variables

What are Variables?

Variables in Pencil are like CSS custom properties or design tokens:

• Define colors, spacing, typography once
• Use throughout your design
• Change the variable to update everywhere
• Sync with code (CSS variables, Tailwind config)

Creating Variables

From CSS:

• Ask the AI agent to create variables from your globals.css
• Automatically extracts colors, spacing, fonts

From Figma:

• Copy/paste tokens from Figma
• Or paste screenshots of token tables
• Ask the agent to create variables from them

Manual:

• Define variables directly in Pencil
• Set values for different themes

Using Variables

Apply to elements:

• Instead of hardcoded values, reference variables
• Changes propagate automatically

Sync with code:

• Update variables in Pencil → sync to CSS
• Update CSS → import back to Pencil
• Enables two-way design ↔ code workflow

Theming:

• Define different values per theme (light/dark mode)
• Switch themes to see designs adapt