Penpot Workflow

Step-by-step workflows for managing design work in Penpot via the pi-penpot extension.

Project Setup

When starting a new design project:

1. Create the Penpot project with a clear, matching name (same as the code repo)
2. Set up standard pages:
   • Design System — shared components, tokens, and styles
   • Wireframes — low-fidelity layouts and flows
   • One page per major screen or user flow (e.g., Dashboard, Settings, Onboarding)
3. Define foundations first:
   • Color palette (primary, secondary, neutral, semantic: success/warning/error/info)
   • Typography scale (headings h1-h6, body, caption, label, mono)
   • Spacing scale (aligned with Tailwind: 4px base unit)
   • Border radius tokens
   • Shadow/elevation tokens