Design System/Style Guide Creation
Crafting a Consistent Design Token System
This prompt helps teams establish a design token system to standardize values for colors, typography, spacing, and other design elements. A design token system ensures consistency across platforms and simplifies collaboration between design and development teams.
Responsible:
Product Design
Accountable, Informed or Consulted:
Design, Product, Engineering
THE PREP
Creating effective prompts involves tailoring them with detailed, relevant information and uploading documents that provide the best context. Prompts act as a framework to guide the response, but specificity and customization ensure the most accurate and helpful results. Use these prep tips to get the most out of this prompt:
Review existing design assets and identify repetitive or inconsistent patterns.
Define the primary platforms (e.g., web, iOS, Android) and tools used by design and development teams.
Gather input from cross-functional teams about token requirements and priorities.
THE PROMPT
Help create a design token system for [specific product or platform]. Focus on:
Color Tokens: Standardizing colors for primary, secondary, and background elements, including variations for light and dark themes.
Typography Tokens: Defining tokens for font families, sizes, weights, and line heights for various text elements (e.g., headings, body text).
Spacing Tokens: Establishing consistent spacing values for padding, margins, and layout gaps.
Component Tokens: Creating reusable tokens for buttons, cards, and input fields, such as border-radius, shadows, and states.
Cross-Platform Adaptation: Ensuring tokens are adaptable for web, mobile, and desktop platforms.
Provide detailed recommendations for organizing and documenting the design token system. Include tools (e.g., Style Dictionary, Figma Tokens) and workflows for seamless integration with codebases. If additional context about the project scope or team workflows is needed, ask clarifying questions to refine the suggestions.
Bonus Add-On Prompts
Suggest a structure for organizing design tokens into logical categories and subcategories.
Propose methods for syncing design tokens between design tools and development environments.
Highlight best practices for managing token updates to ensure consistency and avoid conflicts.
Use AI responsibly by verifying its outputs, as it may occasionally generate inaccurate or incomplete information. Treat AI as a tool to support your decision-making, ensuring human oversight and professional judgment for critical or sensitive use cases.
SUGGESTIONS TO IMPROVE
Focus on specific token types, such as color palettes or typography hierarchies.
Include recommendations for dynamic tokens, like theming or responsive adjustments.
Propose naming conventions for clarity and maintainability.
Highlight tools and plugins that facilitate token generation and management.
Add tips for testing token implementation across platforms for consistency.
WHEN TO USE
During the creation or overhaul of a design system.
To improve collaboration between design and development teams.
When scaling design standards across multiple products or platforms.
WHEN NOT TO USE
If the project does not require reusable design assets or components.
When focusing on one-off designs without standardization needs.