Inicio - Documentación - POM Theme - 03 Design system - Create a consistent design system

Create a consistent design system

POM Theme centralizes shared visual decisions under Settings → POM Theme → Design system. Configure these settings before adding page-level exceptions so colors, type, buttons, icons, and common components remain consistent.

POM Theme Design system

Recommended path

  1. Use Turn a design into reusable POM settings to prepare the source design.
  2. Configure Brand identity and social profiles.
  3. Define the global color palette.
  4. Add font files and configure global typography.
  5. Create button styles and SVG icon libraries.
  6. Establish spacing and responsive behavior.
  7. Configure the supported component styles.
  8. Review the complete system in Theme preview and on real public pages.

Global default or local setting?

Use the design system when the decision should be shared across templates and pages. Use a Page Builder setting only for a genuine local exception. If the same override appears repeatedly, return to the design system instead of reproducing it.

Chapter contents

  1. Design system overview
  2. Global styles reference
  3. Turn a design into reusable POM settings
  4. Configure brand identity and social profiles
  5. Create and maintain the global color palette
  6. Configure global typography
  7. Configure reusable button styles
  8. Create and use SVG icon libraries
  9. Use spacing controls consistently
  10. Understand responsive ranges and fluid typography
  11. Configure shared component styles
Create and use SVG icon libraries
Anterior
Design system overview
Siguiente