Turn a design into reusable POM settings

Use this workflow when translating an approved design into POM Theme. The goal is a small set of reusable choices, not a separate collection of overrides for every page.

Prepare the source design

Collect:

• primary, secondary, neutral, success, notice, and error colors;
• logo variants and a square Site Icon;
• licensed font files with the weights and styles actually used;
• body, paragraph, heading, and display-heading specifications;
• default and alternate button states;
• approved interface and social icons;
• spacing examples at wide and narrow viewports.

Remove duplicate values that serve the same purpose before entering settings.

1. Establish foundations

1. Add the logo variants under Design system → Brand.
2. Assign semantic colors to Color #1 through Color #15.
3. Choose the Safe font.
4. Add custom Font Families and their required variants.

These choices supply later palette and font selectors.

2. Configure text and actions

1. Under General styles, set body, paragraph, link, H1–H6, and Display 1–4 values.
2. Configure the default button.
3. Add only the alternate button styles needed for distinct actions.
4. Give every additional button a descriptive, stable slug.

3. Add shared assets and states

Create SVG libraries only for approved icons that are not already available. Configure default interface icons under Brand. Under Components, set notice colors and enable the Inner Row content toggler only when the site needs that behavior.

4. Build a representative page

Create a draft containing:

• body text and all heading levels used by the site;
• text and background palette combinations;
• default and alternate buttons;
• a form with success and error feedback;
• a multi-column section with real content;
• any custom icons.

Use this page to test the system, not to redefine it locally.

5. Review and release

Check Theme preview, the representative draft, and relevant public templates. Test contrast, keyboard focus, long text, font fallback, wide screens, and all four Page Builder responsive ranges. Record intentional local exceptions so later editors do not copy them as defaults.