Design Foundation

What it does

This skill helps you establish or formalize a design foundation for your products, going beyond just colors and fonts to create a structured system of design decisions. It focuses on generating foundational elements like color palettes, typography pairings, spacing scales, shadow definitions, and border radii using a token-based approach. The goal is to enable teams to build consistently and efficiently by centralizing design choices in reusable tokens.

When to use it

• You're starting a new product and need to define its initial visual style.
• Your existing designs are inconsistent and you want to create a unified look and feel.
• You want to document the current design decisions for your product.
• You’re transitioning to or refining an existing token-based design system.
• You need to establish governance around how design decisions are made and maintained.

Key capabilities

• Generates global design tokens including colors, typography, spacing, shadows, and border radii.
• Creates semantic tokens that assign meaning and context to global tokens (e.g., Background-Primary, Heading-1).
• Supports a hierarchical token structure from abstract base values to concrete implementation details.
• Provides examples of token organization and usage based on a token-based design system methodology.

Example prompts

• "Generate a color palette with primary, secondary, success, warning, error, and neutral shades."
• "Suggest typography pairings for body text and headings using the Inter font family."
• "Create a spacing scale from 0 to 12 units."

Tips & gotchas

• The skill operates on the principle of design tokens – understanding this concept is helpful for effective use.
• This skill generates foundational elements; it doesn't create complete designs or user interfaces.
• The provided examples (colors, fonts, spacing) are illustrative and can be customized based on your specific needs.