✅ Definition of Done (DoD) Levels

These levels define the maturity and readiness of a component in the design system. Each level builds upon the last, progressing from functional MVP to refined, delightful, and validated patterns.

🟢 Minimum Viable Done (MVD)

Definition: The component meets essential design standards and accessibility requirements. It is available for use internally and serves as a foundation for future refinement.

Goal: Establish a consistent, accessible baseline for all components.

✅ Requirements:

  • Designed using system variables (spacing, color, typography)

  • Built with Auto Layout and reusable subcomponents

  • Minimum level documentation written within the Figma configuration panel

  • Accessibility considerations addressed (contrast, semantics, keyboard navigation)

  • Component Properties clearly defined

  • Appearance Modes support defined (theme, device, status if applicable)

  • Nested components identified

  • Known issues acknowledged

MVD Details

🟡 Production Ready Done (PCD)

Definition: The component is refined, stable, and fully documented. It’s visually aligned with the design system, tested in different contexts, and ready for handoff or release.

Goal: Deliver a high-quality, consistent, and production-ready design asset.

✅ Requirements (Includes all MVD + the following):

  • Visual polish aligned with brand system

  • Full component documentation completed (Figma + GitHub)

  • Component tested in layout contexts (desktop, mobile, etc.)

  • Developer specs confirmed or mapped to frontend implementation

  • Variants/props tested for logic and behavior

  • Updated accessibility validation (keyboard traps, tab order, ARIA attributes)

  • QA of responsive behavior and interaction states

  • Usage examples shown in situ (real-world mockups or flow)

PCD Details

🔵 Lovable Done (LD)

Definition: This component or pattern is fully refined with animations, advanced visuals, and user-informed improvements. It delights, scales, and demonstrates mature system thinking.

Goal: Elevate the component to best-in-class, considering nuance, delight, and real-world performance.

✅ Requirements (Includes all MVD + PCD + the following):

  • Motion/animation added where appropriate

  • Advanced appearance customizations included (e.g., contextual styling, mode awareness)

  • Visual nuances refined (micro-interactions, shadows, easing, transitions)

  • Feedback from users, engineers, or stakeholders incorporated

  • Component tested in production (live or staging environments)

  • Edge cases and empty/error states documented

  • Accessibility validated through tooling + manual QA

  • Documented rationale for design choices (linked research or testing insights)

LD Details

📊 Summary Table:

Level
Purpose
Key Characteristics

MVD

Internal use, baseline complete

Variables, accessibility, Figma doc basics, nested logic

PCD

Ready for developer handoff or release

Responsive, polished, tested, fully spec’d, real-world ready

LD

Best-in-class, delightful & evolved

Motion, nuanced styling, user-informed, validated in prod

PreviousNew Component RequestsNextMinimum Viable Done (MVD)

Last updated

Was this helpful?