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.