Global styles reference

This reference explains how the Design system sections work together and where their values are consumed.

Shared palette

Color palette provides Color #1 through Color #15. Palette-aware fields store a reference to one of those entries, so replacing a color updates every setting that still points to that number.

Define semantic roles for the numbers before assigning them to text, links, backgrounds, borders, buttons, headers, forms, or components.

Fonts and typography

Fonts provides a Safe font and custom Font Families with variants. General styles then chooses the body and heading families and sets:

• Body font size;
• main text, link, and link-hover colors;
• paragraph margin, size, weight, line height, and letter spacing;
• heading margin and individual H1–H6 settings;
• Display 1–4 settings.

Heading and display sizes can combine a base size with viewport width relative font-size. An optional max font size applies from the theme's large-screen threshold.

Page canvas

General styles can use a solid, gradient, or image body background. It also provides Boxed layout and page-border controls for style, width, and palette color. Enable Display page border on small screens when the border should also appear below the theme's 576px breakpoint.

These controls affect the canvas around page content. Section backgrounds and local spacing still belong to Page Builder rows and columns.

Customize the fixed page border with CSS

The following recipes extend the Fixed frame style. They do not change Padding on body because that style does not render the SVG frame. Add the required declarations under Settings → POM Theme → Advanced → Custom CSS.

When Display page border on small screens is disabled, wrap custom rules that create additional visible elements in the same breakpoint used by the generated frame:

@media (min-width: 576px) {
  /* Add the selected page-border recipes here. */
}

The wrapper is unnecessary when the page border and its custom effects should appear at every viewport width.

Reuse the configured frame geometry

The generated stylesheet exposes the selected frame width as --pom-page-border-width and the inner page radius as --pom-page-border-radius. Small, Medium, and Big respectively set the width to 15px, 25px, and 35px. The default radius is zero so the standard appearance remains square.

Do not override --pom-page-border-width unless the custom frame geometry intentionally differs from the saved theme setting.

Round the inner page corners

Override the radius to make the inner page surface appear rounded while the SVG mask keeps the viewport's four outer corners filled by the frame:

body.web-has-page-border {
  --pom-page-border-radius: 30px;
}

The mask changes only the visible boundary. It does not apply overflow: hidden to .web-main, so menus, positioned decorations, and other elements are not unexpectedly clipped.

Add an outer border

This places a two-pixel line against the visible outer edge of the viewport. The negative offset keeps the outline inside the viewport instead of allowing it to be clipped outside the page:

.web-page-border {
  outline: 2px solid #111111;
  outline-offset: -2px;
}

Add an inner border

Create a fixed, non-interactive surface at the boundary between the frame and the page. It automatically follows both generated geometry properties:

body.web-has-page-border::before {
  content: "";
  position: fixed;
  z-index: 2001;
  top: var(--pom-page-border-width);
  right: var(--pom-page-border-width);
  bottom: var(--pom-page-border-width);
  left: var(--pom-page-border-width);
  border-radius: var(--pom-page-border-radius);
  outline: 2px solid rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

Make the page float above the frame

Use an outer shadow on the same fixed surface so the shadow falls into the page border. This recipe can replace the inner-border rule above, or its box-shadow can be added to that rule when both effects are required:

body.web-has-page-border::before {
  content: "";
  position: fixed;
  z-index: 2001;
  top: var(--pom-page-border-width);
  right: var(--pom-page-border-width);
  bottom: var(--pom-page-border-width);
  left: var(--pom-page-border-width);
  border-radius: var(--pom-page-border-radius);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.25),
    0 0 28px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

Use different gradient colors

The generated frame starts with the same palette color at both ends, which preserves the standard solid appearance. Override the two SVG stops to introduce a gradient:

.web-page-border .web-page-border-gradient-start {
  stop-color: #ff006e;
  stop-opacity: 1;
}

.web-page-border .web-page-border-gradient-end {
  stop-color: #3a86ff;
  stop-opacity: 0.65;
}

Make the gradient diagonal

The first transformation runs from the upper-left corner to the lower-right corner:

#pom-page-border-gradient {
  transform: matrix(1, 0, 1, 1, 0, 0);
  transform-origin: 0 0;
}

Use the following transformation for the opposite direction:

#pom-page-border-gradient {
  transform: matrix(1, 0, -1, 1, 1, 0);
  transform-origin: 0 0;
}

SVG gradient coordinates such as x1, y1, x2, and y2 are not presentation attributes and therefore cannot be overridden directly by CSS. The SVG transform property provides the CSS-controlled orientation used in these examples. See the SVG 2 paint-server specification.

The outer outline remains rectangular, while the inner-border and page-shadow recipes follow the configured radius. If custom JavaScript replaces the mask opening with a wave or another irregular path, additional SVG layers are required when every outline must follow that modified contour exactly.

Buttons

Buttons contains one default style plus repeatable additional styles. Each style can define normal and hover colors, solid or gradient backgrounds, border widths, border style, radius, shadow, font, weight, text transform, line height, letter spacing, and supported hover effects.

Additional styles use a durable slug and become selectable in compatible theme, Page Builder, and form controls.

Brand, icons, and components

Brand supplies shared logos, identity settings, default interface icons, and social profiles. Icons adds custom SVG libraries. Components currently covers the optional Inner Row content toggler and colors for success, standard notice, and error messages.

Validate the complete system

1. Save one subsection at a time.
2. Review it in Theme preview.
3. Open representative public pages while signed out.
4. Check hover and keyboard-focus states for interactive elements.
5. Test long content and every responsive range used by the layout.
6. Inspect local overrides before changing the global setting again.