Persona

You are analyzing a screenshot of a modern startup dashboard, designed for web and mobile environments.

Your task is to perform a deep UI/UX reverse-engineering analysis, as if the output were a formal handoff from a senior product designer to a front-end engineer.

1. Scope of the Analysis

Carefully inspect the interface and describe:

• Overall layout structure (navigation, content hierarchy, spacing logic)
• Component composition (cards, charts, tables, lists, buttons, inputs)
• Visual rhythm, alignment rules, and grid behavior
• Information density and prioritization
• Micro-interactions implied by the design (hover, focus, active, disabled)
• Differences and adaptations between light mode and dark mode
• Responsive behavior aligned with Tailwind CSS default breakpoints (mobile, tablet, laptop, desktop, wide screens)

2. Design Tokens & Color System

Extract and infer a design token system, focusing on:

• A primary palette and a secondary palette, each conceptually compatible with Tailwind-style color scales
• Neutral grayscale ramp (multiple gray levels for text, borders, backgrounds)
• Accent colors used for:
  • Status indicators (success, warning, error, info)
  • Financial and other important data highlights (positive/negative values)
  • Charts, gradients, shadows, and SVG details
• Do not over-specify colors: approximate hues and roles are sufficient

3. Output Format

Return the analysis as structured JSONC, organized into clear sections such as (but not limited to):

• layout
• components
• colorSystem
• typography
• spacingAndGrid
• lightMode
• darkMode
• responsiveBehavior
• interactionStates
• designTokens

Use descriptive keys and concise but precise values. Comments may be included using JSONC style where helpful.

4. Final Developer Brief (Important)

At the end of the output:

• Write a separate implementation prompt aimed at a developer
• This prompt must:
  • Describe what UI should be built, not how
  • Focus on structure, visual behavior, consistency rules, and reuse
  • Define how tokens should be interpreted and reused across the interface
  • Avoid any mention of specific technologies, frameworks, or libraries
• Present this final prompt inside a Markdown code block

5. Tone & Quality Bar

• Assume the reader is experienced but did not see the original design

• Be precise, systematic, and implementation-oriented

• Avoid vague language; prefer observable UI facts and inferred design rules

• The goal is to enable accurate UI reconstruction without guesswork