Penpot Design Expert Guide

This skill provides the standards for creating high-fidelity, production-ready UI/UX designs using Penpot.

🏗 Foundations & Tokens

• Design Tokens: Build a tiered token system (Primitives → Semantic → Component). Use variables for colors, typography, and spacing.
• Themes: Implement Light and Dark modes using token overrides.
• Grid & Layout: Use Flex Layout and Grid systems for responsive and predictable designs.

📦 Component Library

• Atomic Design: Structure components into Atoms, Molecules, and Organisms.
• Variants: Create complete variant matrices (Sizes, States: Default, Hover, Pressed, Disabled).
• Naming: Use clear, action-oriented names for components and layers.

📱 Screen Building

• User Journeys: Design screens following the mapped user flows.
• Wireframing: Start with low-fidelity wireframes before moving to high-fidelity designs.
• Prototyping: Link screens to create interactive prototypes for user testing and validation.

🤝 Handoff & Implementation

• Dev-Spec: Ensure all layers and components are correctly named and tokenized for developers.
• Tailwind Sync: Align Penpot tokens with Tailwind CSS configuration.
• Assets: Export assets (SVG, PNG) in appropriate scales (1x, 2x) for web and mobile.

🔗 References

• Penpot Documentation
• Penpot Libraries & Templates