Cross-platform UX Theme for [app_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

Design a production-ready cross-platform UX theme for [app_name]

### Objective

Create a complete, named UX theme for [app_name] that is immediately usable by designers and engineers: include a concise theme definition, design tokens (colors, spacing, radius, shadows, typography), a minimal component spec, platform-specific adaptations for [platforms], accessibility checks (WCAG), UX flow guidance, and 2 photo briefs. Success is measured by clear acceptance criteria and two short usage examples referencing [feature].

### Role/Persona

You are a Senior UX Systems Designer and Product Design Lead. Write in a concise, technical, and actionable voice suitable for hand-off to designers and engineers. Prioritize clarity, reusability, and measurable acceptance criteria.

### Context (delimited)

"""
I plan to design the UX for a new application.
Before proceeding, I need to establish a suitable theme based on the app’s concept.
If there are any organizational guidelines or brand standards, the chosen theme should align with them.
The app will be developed for Android, iOS, Linux, Windows, macOS, and Web.

1.  Theme Definition

    Below are theme options defined by tone, color, shape, and typography. Font suggestions are provided as guidance, not mandates, allowing flexibility for designers and developers.

    Productivity / Enterprise
    Colors: Muted, neutral base with strong accents.
    Shapes: Rectangular forms with subtle rounding.
    Motion: Minimal and functional, emphasizing speed and clarity.
    Mood: Serious, reliable, calm.

    Suggested Fonts:

    Headings → Formal sans-serif or slab serif
    Subheadings → Clean sans-serif
    Body → Readable sans-serif for long text
    Captions → Neutral sans-serif

    Social / Lifestyle

    Colors: Bright and vibrant (purple, coral, teal, yellow).
    Shapes: Rounded, soft, and approachable.
    Motion: Dynamic and fluid, with micro-interactions.
    Mood: Energetic, friendly, welcoming.

    Suggested Fonts:
    Headings → Rounded or geometric sans-serif
    Subheadings → Friendly sans-serif
    Body → Approachable sans-serif
    Captions → Playful and legible

    Creative / Futuristic
    Colors: Dark mode first, with neon or cyberpunk accents.
    Shapes: Geometric and angular, often paired with gradients.
    Motion: Smooth and cinematic, emphasizing visual storytelling.
    Mood: Bold, innovative, cutting-edge.

    Suggested Fonts:
    Headings → Tech-inspired sans-serif
    Subheadings → Modern sans-serif with character
    Body → Clean futuristic sans-serif
    Captions → Minimal, tech-focused

    Once the theme is finalized, all subsequent design elements—components, layout, and tone—will flow from it.

2.  Cross-Platform UX Alignment

    The app will maintain a consistent brand identity across platforms while respecting native UX conventions.

    Core Brand Elements (consistent):
    Colors, typography, iconography style, spacing.

    Platform Adaptations:
    iOS: Bottom tabs, swipe gestures, translucent UI.
    Android: Material 3 patterns, FABs, navigation drawers.
    Desktop: Sidebars, toolbars, resizable windows, keyboard shortcuts.
    Web: Responsive grids, sticky headers, hover states.
    Principle: Same soul, different clothes.
    The app should feel unified across platforms but behave natively within each environment.

3.  Design System Foundation

    Establish a lightweight design system to ensure scalability and consistency.

    Design Tokens:
    Colors → primary, secondary, neutrals, success, warning, error
    Spacing → 4/8/16/24px system
    Radius → define (e.g., 4px = enterprise; 12px = social)
    Shadows → subtle vs. bold elevation
    Typography → heading, subheading, body, caption

    Component Library:
    Buttons, forms, navigation (tabs, sidebars), containers (cards, modals), and feedback (snackbars, dialogs).
    Maintain consistent iconography style (outline, filled, or rounded).

4.  Accessibility & Inclusivity

    Ensure WCAG AA color contrast.
    Support scalable typography and system font scaling.
    Design for multiple input methods: touch, keyboard, mouse, screen reader.
    Offer a reduced motion mode for sensitive users.

5.  UX Flow Principles

    Design experiences around human behavior, not just screens.

    Onboarding:
    Brief (2–3 screens), value-oriented, skippable.

    Navigation:
    Flat hierarchies (2–3 levels max), predictable placement.

    Empty States:
    Use guidance and subtle illustrations.

    Feedback:
    Clear success/failure cues; haptic or hover feedback where applicable.

    Performance UX:
    Prefer skeleton loaders over spinners, provide async feedback (“saving…” → “saved”).

6.  Process Workflow

    A structured path from idea to polished cross-platform UX:
    Moodboard: Collect visual references (colors, apps, Dribbble, Behance).
    Wireframes (Low-fi): Define flow and usability before visuals.
    High-fi Visuals: Apply chosen theme, spacing, and typography.
    Prototyping: Build interactive flows for usability testing.
    Cross-Platform Testing: Validate native behavior on all platforms.
    Design Tokens → Code: Deliver structured tokens for dev integration.
    Iteration: Gather feedback and refine continuously.

7.  Reference Design Languages

    Use existing systems to guide, not constrain:

    Google Material Design 3 → Android, Web
    Apple Human Interface Guidelines → iOS, macOS
    Microsoft Fluent Design → Windows

    """

### Task Instructions

- Validate inputs: List up to three missing items (do not ask questions). If any are missing, state explicit assumptions and proceed.
- Choose a theme: pick and name one theme from the Context (Productivity / Enterprise, Social / Lifestyle, Creative / Futuristic) and set `[theme_choice]`. Provide a 2–3 sentence justification linking the choice to `[industry]` and user expectations.
- Produce design tokens:

  - Colors: provide `primary`, `onPrimary`, `secondary`, `neutrals` (light & dark), `success`, `warning`, `error` with hex codes and contrast notes (WCAG AA pass).
  - Spacing: 4px scale (4px, 8px, 16px, 24px).
  - Radius: give numeric px (e.g., 4px / 8px / 12px) and rationale.
  - Shadows: 2 elevation levels with CSS-like examples.
  - Typography: sizes for `H1, H2, H3, body, caption` (px), weight, and recommended system font stack.

- Provide a minimal component spec (for Buttons, Inputs, Cards, Nav):

  - For each: anatomy, states (default/hover/active/disabled), token values, and one short usage example referencing `[feature]`.

- Platform adaptations:

  - For each platform in `[platforms]`, list 3 specific adaptations (navigation pattern, primary control placement, a recommended native affordance).

- Accessibility checklist:

  - Color contrast, keyboard focus, reduced motion, ARIA/semantic guidance, scalable typography.

- UX flow highlights:

  - Onboarding (2–3 screens), navigation depth (2–3 levels), empty states, feedback patterns.

- Photo Briefs (include exactly the two briefs below—Hero and Onboarding—and ensure they reference `[theme_choice]`, `[app_name]`, and `[feature]`).
- Deliver acceptance criteria: concrete checks that qualify the theme as complete (e.g., contrast ratios, token completeness, components with states, platform adaptation list present).
- Include two usage examples (2–3 lines each) showing the theme applied to `[feature]` (UI copy + token usage).
- Output the whole response as compact, actionable sections in the order above.

### Constraints and Rules

- Scope: Deliver a UX theme spec only — do not write production code or create full mockups.
- Length: Body content should be concise and aim for 400–1200 words.
- Tone/Style: Technical, procedural, and actionable. Use active voice and present tense.
- Accessibility: Follow WCAG AA minimum; include contrast numbers where relevant.
- Proficiency: Assume the consumer is an experienced product designer or developer.
- Delimiters: Context block is reference data only.

### Output Format

**Medium:** Plain-text Markdown containing the actual UX theme specification, ready for use by designers and developers.
**Structure (must appear in order):**

1. **Title:** Concise, descriptive title of the theme (e.g., “\[theme_choice] Theme for \[app_name]”).
2. **Objective:** 1–2 sentences summarizing the theme’s purpose and expected outcomes.
3. **Theme Definition:** Detailed description of `[theme_choice]` including mood, personality, motion style, and color philosophy.
4. **Design Tokens:** Concrete values for colors (with hex codes and WCAG contrast levels), spacing (px), radius (px), shadows, and typography (font stack, size, weight).
5. **Component Library:** Fully specified components including Buttons, Inputs, Cards, Navigation, and Feedback elements; each with states (default, hover, active, disabled) and usage examples referencing `[feature]`.
6. **Platform Adaptations:** Specific adaptations for each platform in `[platforms]` (navigation pattern, primary control placement, recommended native affordance).
7. **Accessibility Checklist:** Concrete WCAG AA contrast checks, keyboard navigation, ARIA guidance, scalable typography, and motion sensitivity.
8. **UX Flow Highlights:** Key patterns for onboarding, navigation depth, empty states, feedback, and micro-interactions.
9. **Photo Briefs:** If visuals are included, provide fully specified hero and onboarding images with style, composition, resolution, and alt-text.
10. **Usage Examples:** 2–3 short examples demonstrating how `[feature]` applies the theme.
11. **Evaluation Criteria:** Checks confirming tokens, components, platform adaptations, accessibility, and UX flows are complete and coherent.
12. **Optional Reasoning:** Brief rationale explaining theme decisions.
13. **Final Check:** Confirmation that the theme is production-ready.
14. **Assumptions:** Any assumptions made in absence of missing inputs.

**Voice/Tense:** Active voice, present tense, instructive but descriptive.

**Units & Values:** Use pixels for spacing and radius; hex codes for colors; typography in px and weight; shadows in CSS-like RGBA or offset values; provide WCAG contrast ratios.

**Deliverable Nature:** The output must be a **fully specified theme**, not a prompt, so that a designer or developer can directly implement it without further interpretation.

### Photo Briefs

- **Image 1 — App Hero (Primary)**:

  - Purpose/Placement: App store / marketing hero banner for `[app_name]`.
  - Subject/Key Elements: Clean interface mockup of the main screen, device frames (desktop + mobile), visible primary accent from `[theme_choice]`.
  - Composition: Wide horizontal (16:9), center-left interface, negative space for headline.
  - Style: Editorial product-photo, minimal UI overlays, soft shadows.
  - Lighting & Palette: Neutral background with accent highlights matching `[theme_choice]`.
  - Specs: 3840×2160 px (16:9), PNG, include alt text: "Hero image showing [app_name] main screen with [theme_choice] accents."

- **Image 2 — Onboarding Illustration**:

  - Purpose: 2–3 screen onboarding art for in-app use.
  - Subject: Stylized illustration that conveys the primary value using `[feature]` as the focal metaphor.
  - Ratio & Specs: 4:3 or square for mobile, 2048×1536 px, flat/vector style, 2–3 brand colors, include high-contrast variant.
  - Accessibility: Alt-text draft: "Onboarding illustration for [app_name] showing [feature]."

### Evaluation Criteria

- Theme is named (`[theme_choice]`) and justified for `[industry]`.
- Design tokens include colors (with hex + contrast), spacing (px), radius (px), shadows, typography (px + weight).
- Component spec covers Buttons, Inputs, Cards, Nav with states and one `[feature]` usage example each.
- Platform adaptations listed for every platform in `[platforms]`.
- Accessibility checklist present with at least WCAG AA checks.
- Photo briefs included and reference placeholders exactly.
- All variable tokens are bracketed and match frontmatter `placeholders`.

### Optional Reasoning

Provide a 1–2 sentence public rationale explaining major trade-offs (for example: why `[theme_choice]` balances branding vs. platform expectations).

### Final Check

Confirm that frontmatter `placeholders` equals the set of bracketed tokens used: `[app_name]`, `[feature]`, `[industry]`, `[theme_choice]`, `[platforms]`. Confirm output follows the Process steps: Validate Inputs → Choose theme → Deliver tokens & components → Platform adaptations → Accessibility → Photo briefs → Acceptance criteria → Return.

### Assumptions

- Visuals Required: assumed **yes**.
- Missing inputs (assumed): exact `[app_name]`, primary `[feature]` to highlight, definitive `[industry]`, and final `[platforms]`. Defaults: `[platforms]` = "Android, iOS, Linux, Windows, macOS, Web".
- Fonts: system font stack recommended; do not lock to a specific web font unless provided.