Design System Panel

The Design System panel provides a complete view of your design tokens, themes, and documentation. Manage colors, typography, spacing, shadows, and export to multiple formats.

Panel Tabs

Overview

Dashboard showing design system statistics:

• Total tokens by category
• Active theme
• Coverage metrics
• Quick actions

Colors

Manage color tokens:

• Primary, secondary, accent colors
• Semantic colors (success, warning, error)
• Background and surface colors
• Text color scales

Typography

Define typography tokens:

• Font families
• Size scale (xs, sm, md, lg, xl)
• Weight scale
• Line heights
• Letter spacing

Spacing

Spacing and sizing tokens:

• Spacing scale (4, 8, 12, 16, 24...)
• Component padding
• Layout margins
• Gap values

Shadows

Shadow token definitions:

• Elevation levels (sm, md, lg)
• Inner shadows
• Focus rings
• Custom shadows

Themes

Manage theme variations:

• Light and dark themes
• Brand variations
• Switch active theme
• Preview theme changes

Export

Export design tokens:

• CSS Custom Properties
• Sass/SCSS variables
• JSON (Style Dictionary format)
• JavaScript/TypeScript
• Tailwind config

Documentation

Auto-generated documentation:

• Token reference tables
• Usage guidelines
• Color contrast checks
• Export as HTML/Markdown

Creating Tokens

Add a Token

1. Go to appropriate tab (Colors, Spacing, etc.)
2. Click the + button
3. Enter token name
4. Set the value
5. Add optional description

Token Naming

Recommended naming conventions:

• color-primary-500 - Color with scale
• spacing-md - Spacing with size
• font-size-lg - Typography property
• shadow-elevation-2 - Effect with level

Theme Management

Create a Theme

1. Go to Themes tab
2. Click "Create Theme"
3. Name the theme (e.g., "Dark")
4. Set token values for theme
5. Save theme

Switch Themes

1. Select theme from dropdown
2. Click "Activate"
3. Canvas updates with theme values

Exporting

Export Process

1. Go to Export tab
2. Select format
3. Choose tokens to include
4. Configure options
5. Download or copy

Export Formats

Format	Use Case
CSS	Web projects, vanilla CSS
SCSS	Sass-based projects
JSON	Style Dictionary, custom builds
Tailwind	Tailwind CSS configuration
Swift	iOS development
Kotlin	Android development

Best Practices

• Start with a core token set
• Use semantic naming over literal (error, not red)
• Create themes early in the project
• Document token usage
• Keep token count manageable
• Review contrast for accessibility