Generate a Comprehensive Design System for [brand-name]

This is the assembled prompt after inserting any variables you filled in. Placeholders that are not filled remain in [brackets]. You can optionally edit the prompt below without changing the variable inputs.

### Title

Generate a Comprehensive Design System for [brand-name]

### Objective

To create a comprehensive, scalable, and well-documented design system that ensures brand consistency and accelerates product development. Success is measured by the system's completeness, clarity, and adherence to the specified [primary-purpose] and [target-audience] needs.

### Role/Persona

Act as a Lead Product Designer with deep expertise in user experience, brand strategy, and systematic design. Your voice should be authoritative, clear, and systematic, providing rationale for design decisions where appropriate.

### Context (delimited)

"""

- Brand Name: [brand-name]
- Core Idea: The foundational concept or 'why' behind the brand is [core-idea].
- Color Theme: The desired aesthetic is a [color-theme] theme.
- Primary Purpose: The main goal of the products this system will support is [primary-purpose].
- Target Audience: The primary users are [target-audience].
- Key Principles: The design should embody these values: [key-principles].
- Competitor Examples: Note the design systems of [competitor-examples] as points of reference.
  """

### Task Instructions

1. **Foundation**: Define the core philosophy, guiding principles, and voice/tone based on the provided context [web:1].
2. **Color System**: Develop a full color palette. Start with the [color-theme] and establish primary, secondary, and accent colors [web:12]. Define semantic colors for states like success, warning, error, and info [web:9]. Provide a full range of neutral grays for UI backgrounds, text, and borders [web:6].
3. **Typography Scale**: Create a responsive and harmonious typographic scale. Define font families, weights, sizes, and line heights for headings, subheadings, body text, and captions.
4. **Layout & Grid**: Specify rules for layout, spacing, and grid systems. Provide a consistent spacing scale (e.g., 4px or 8px base unit) for margins, padding, and positioning.
5. **Component Library**: Design a core set of reusable UI components. Include, at a minimum: buttons, input fields, dropdowns, cards, modals, and navigation elements. For each component, define its structure, states (default, hover, focused, disabled), and usage guidelines.
6. **Iconography**: Establish a style for icons (e.g., line, filled, duotone) and provide a starter set of 15–20 common interface icons.
7. **Documentation**: Structure the entire system with clear documentation for each section, explaining the purpose and rules for every element and component [web:5].

### Constraints and Rules

- **Scope**: Focus on digital product UI. Exclude print materials and physical branding.
- **Tone/Style**: The design system's tone should be systematic, clear, and comprehensive.
- **Compliance**: Ensure all color combinations meet WCAG AA accessibility standards for contrast [web:9].
- **Proficiency/Reading Level**: The documentation should be clear enough for a junior designer or developer to understand and apply.
- **Delimiters**: Treat the Context block as the single source of truth for all brand and goal-related inputs. Do not invent details not specified there.

### Output Format

- **Medium**: Plain text, formatted with Markdown headings.
- **Structure**: Organize the output using the following headings in this exact order:
  1. Guiding Principles
  2. Color System
  3. Typography
  4. Layout and Spacing
  5. Component Library
  6. Iconography
- **Voice/Tense**: Use active voice and present tense.

### Evaluation Criteria (self-check before returning)

- All textual placeholders ([brand-name], [target-audience], etc.) are populated using the Context block.
- The generated color palette aligns with the requested [color-theme] and includes semantic and neutral colors.
- All specified sections in the Output Format are present and correctly ordered.
- All color contrast pairings meet WCAG AA standards.
- Instructions and rules are specific, unambiguous, and directly actionable for a design and development team.

### Assumptions

- The goal is a digital-first design system.
- The provided context is complete and sufficient for making foundational design decisions.