Styling components

Use the Properties inspector to adjust spacing, typography, layout, borders, and theme-aware colors without breaking responsiveness.

PageDesigner exposes component styles in the right Properties inspector. The available controls depend on what you selected.

Select the right levelCopy Anchor Link

Before styling, identify the scope:

Use Layers when the canvas selection is ambiguous.

Recommended styling orderCopy Anchor Link

1. Structure and content order.
2. Responsive layout.
3. Content width.
4. Spacing.
5. Typography.
6. Theme colors.
7. Borders, radius, and restrained elevation.
8. Interaction states.
9. Device and theme review.

Styling cannot rescue a section with too much or poorly ordered content.

SpacingCopy Anchor Link

Use a consistent hierarchy:

• Tight related items: gap-2, gap-3, mt-2.
• Related groups: gap-4, space-y-4, mt-4.
• Major groups: gap-8, mt-8, mt-10.
• Section padding: py-12, py-14, py-16, with larger sm: or lg: values where appropriate.

Avoid random jumps such as mt-1 beside mt-16 without an information hierarchy.

Content widthCopy Anchor Link

Keep long text readable:

mx-auto max-w-3xl
max-w-md
max-w-xl

Use wider containers such as max-w-5xl or max-w-7xl for grids, not for long uninterrupted paragraphs.

TypographyCopy Anchor Link

Useful patterns:

text-4xl font-bold leading-tight sm:text-5xl
text-3xl font-semibold
text-base leading-relaxed
text-sm text-base/70
text-xs font-semibold uppercase tracking-[0.3em]

Keep the number of unrelated type sizes and weights small. Hierarchy should be obvious without making every heading oversized.

LayoutCopy Anchor Link

Prefer normal responsive flow:

flex flex-col gap-6
grid gap-6 md:grid-cols-2 lg:grid-cols-3
flex flex-col gap-12 lg:flex-row lg:items-start

Absolute positioning can be useful for decoration but is fragile for important text and actions.

Theme colorsCopy Anchor Link

Use semantic tokens:

• bg-primary, text-primary, border-primary
• bg-secondary, text-secondary
• bg-background, bg-background-secondary
• text-base, text-base/70, text-inverted
• border-neutral, border-neutral/30
• status tokens such as text-success, text-warning, text-error, text-info

Token colors adapt to the active Paymenter theme. Hard-coded palette classes and hex values often fail in dark mode or a customized theme.

Light and dark reviewCopy Anchor Link

Theme-aware components can expose separate light and dark background, text, and border values.

1. Set the semantic values.
2. Toggle the editor theme.
3. Check muted text and borders.
4. Check buttons and focus.
5. Verify the public page with the active theme.

The editor toggle is a review aid; the visitor's theme preference controls the public appearance.

Borders, radius, and elevationCopy Anchor Link

Use a small system:

rounded
rounded-md
rounded-xl
rounded-full
border border-neutral
border-neutral/30
shadow-sm

Avoid stacking large radius, strong shadow, heavy border, gradient, and animation on every surface.

Interaction statesCopy Anchor Link

Maintain clear hover and focus:

transition-colors
hover:bg-primary/90
focus-visible:outline

Do not remove keyboard focus. Hover must not be the only way to discover information.

Custom CSSCopy Anchor Link

Use the page record's Custom CSS only when the inspector and documented utility classes cannot express a justified page-specific requirement.

Before adding custom CSS:

• identify the smallest stable selector;
• check the existing page CSS;
• avoid global selectors that affect the Paymenter shell;
• avoid hard-coded theme colors;
• test every width and theme;
• document why the rule exists.

Styling checklistCopy Anchor Link

• Correct component level is selected.
• Mobile layout works before desktop polish.
• Spacing follows a consistent scale.
• Text lines are readable.
• Theme tokens replace hard-coded colors.
• Light and dark are checked.
• Focus remains visible.
• Custom CSS is minimal and documented.
• Full Preview matches the intended result.