Minimum Viable Done (MVD)

A component at the Minimum level meets baseline design system standards and accessibility compliance. It is

🟢 Minimum Viable Done (MVD)

Level 1 of Component Completion A component at the Minimum level meets baseline design system standards and accessibility compliance. It is functional, documented, and ready for production usage in most design scenarios, but does not yet include advanced visuals or motion.

---

🔁 MVD Phases Overview

Each component must progress through these six phases to be considered Minimum Viable Done. These phases ensure usability, consistency, and system readiness.

---

🔍 Phase 1: Discovery

Goal: Establish a foundation for the component’s purpose and structure. Activities:

• Audit existing solutions (internal + external)

• Gather design/dev requirements and edge cases

• Review accessibility considerations

• Compare industry best practices

---

💡 Phase 2: Ideation & Iteration

Goal: Explore and experiment with variations and concepts. Activities:

• Rough mocks and layout explorations

• Consider variants (size, state, content flexibility)

• Internal async design feedback and decision logging

• Align structure with token and naming conventions

---

🧱 Phase 3: Design

Goal: Finalize the system-compliant, accessible design. Activities:

• Apply tokens for color, spacing, typography, borders, etc.

• Use Auto Layout, nested components, and proper constraints

• Ensure WCAG AA contrast and label clarity

• Structure visual hierarchy with system scales

---

⚙️ Phase 4: Prototyping (Baseline Only)

Goal: Provide simple, functional interactivity for behavior preview. Activities:

• Add basic interaction logic only — no animation or micro-interactions

• Use variant toggles like is-expanded or selected

• Support click-to-toggle or on-hover state demonstration

• Focus on behavior accuracy, not polish

🛑 Note: Micro-interactions, transitions, or animation are not included at the Minimum level. These are introduced in the Production and Lovable (LD) phase.

---

🔄 Phase 5: Review + Iteration

Goal: Confirm visual and functional accuracy. Activities:

• Peer design review for naming, accessibility, and layout

• Re-check tokens, properties, and variant integrity

• Make tweaks to ensure consistency with the design system

• Confirm alignment with development expectations if needed

---

📝 Phase 6: Documentation

Goal: Write Minimum-level documentation in the component’s Figma panel. Activities:

• Complete the Minimum template fields: overview, usage, properties, appearance modes, accessibility, nested parts, and dev notes

• Link to additional specs or Notion tickets

• Validate clarity for both design and dev audiences

---

✅ MVD Exit Criteria

To mark a component as Minimum Viable Done, ensure:

• All six phases are completed

• Accessibility (WCAG AA) and appearance modes (light/dark) are validated

• Component behaves predictably and meets functional expectations

• Minimum-level documentation is written directly in the Figma configuration panel

• The design system reviewer signs off on completion