​
Start with the Style Guide

Always begin your project by copying the Pagifye Style Guide into your Webflow file. This ensures:
  • Consistent colors, spacing, and typography
  • Seamless integration of future components
  • Alignment with your brand/design system from the start

​
Use Wireframes for Early Layouts

Each component includes a wireframe version to help with early-stage layout planning. Use these before adding color, imagery, or final copy to:
  • Focus on structure and content flow
  • Speed up iteration without visual distractions

​
Stick to One Theme Per Project

Choose one theme — Light, Gray, or Dark — and apply it consistently across your entire project. Mixing themes can lead to inconsistencies and extra maintenance. Only do so if you have a deliberate use case.

​
Use the Pagifye Sync Extension (Webflow)

If you’re working in Webflow, install the Pagifye Sync Extension to:
  • Keep classes aligned with the Style Guide
  • Prevent duplicate styles
  • Automatically map components to design tokens
  • Save time and reduce styling errors

​
Duplicate & Reuse Components

Pagifye components are fully modular. You can:
  • Duplicate sections across different pages
  • Rearrange blocks to create new layouts
  • Mix elements from different components to build custom sections
This speeds up development and reduces design debt.

​
Organize Your Files as You Go

A clean file equals to a smooth workflow. To stay organized:
  • Use consistent naming conventions
  • Structure your layers or folders logically
  • Remove unused sections from your working file
This improves collaboration and simplifies handoff to developers or other teammates.