Theme and CSS classes reference

Advanced reference for PageDesigner theme tokens, layout utilities, responsive patterns, safe HTML, and component authoring conventions.

This reference is for advanced editors, developers preparing custom components, and connected assistants. Normal page work can stay in the Properties inspector.

Theme color tokensCopy Anchor Link

Use slash opacity:

text-base/70
bg-primary/90
border-neutral/30

Page and section structureCopy Anchor Link

<section class="bg-background px-4 py-14 sm:py-20">
  <div class="mx-auto max-w-6xl">
    <h2 class="text-3xl font-semibold text-base">Section title</h2>
    <p class="mt-3 max-w-xl text-base/70">Supporting copy.</p>
  </div>
</section>

Recommended widths:

• max-w-md, max-w-xl — focused copy.
• max-w-3xl — long-form content.
• max-w-5xl, max-w-6xl, max-w-7xl — grids and wide page sections.
• mx-auto — center a constrained container.

Responsive prefixesCopy Anchor Link

Use mobile-first classes, then enhance:

Example:

text-3xl sm:text-4xl lg:text-5xl
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
px-4 py-12 sm:py-16 lg:py-20

Flex and grid patternsCopy Anchor Link

Stacked actions that become a rowCopy Anchor Link

flex flex-col items-stretch gap-3 sm:flex-row sm:items-center

Two-column marketing sectionCopy Anchor Link

flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between

Responsive cardsCopy Anchor Link

grid gap-6 md:grid-cols-2 lg:grid-cols-3

Wrapping rowCopy Anchor Link

flex flex-wrap items-center gap-4

Spacing referenceCopy Anchor Link

Use a hierarchy, not every possible value:

Typography referenceCopy Anchor Link

Hero:        text-4xl font-bold leading-tight sm:text-5xl
Section:     text-3xl font-semibold
Subheading:  text-xl font-semibold
Body:        text-base leading-relaxed
Small body:  text-sm leading-relaxed
Eyebrow:     text-xs font-semibold uppercase tracking-[0.3em] text-base/60

Use max-width constraints for readable lines.

ButtonsCopy Anchor Link

PrimaryCopy Anchor Link

<a class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 font-medium text-inverted transition-colors hover:bg-primary/90" href="/store">
  View plans
</a>

SecondaryCopy Anchor Link

<a class="inline-flex items-center justify-center rounded-md border border-neutral px-6 py-3 font-medium text-base transition-colors hover:bg-background-secondary" href="/contact">
  Contact us
</a>

Use descriptive text, a real href, and sufficient padding.

CardsCopy Anchor Link

<article class="rounded-xl border border-neutral/30 bg-background-secondary p-6">
  <h3 class="text-xl font-semibold text-base">Managed backups</h3>
  <p class="mt-2 text-sm leading-relaxed text-base/70">Explain the approved benefit.</p>
</article>

ImagesCopy Anchor Link

<img class="h-auto w-full rounded-xl object-cover" src="https://example.com/image.jpg" alt="Service dashboard showing backup status">

Use stable HTTPS URLs. Alt text is required for informative images.

Class-editing rulesCopy Anchor Link

• Add or remove a small set for a small change.
• Replace the full class list only when you understand every removed layout and responsive class.
• Change color tokens as a coherent pair, such as bg-primary with text-inverted.
• Preserve flex, grid, gap, width, and breakpoint classes unless layout is in scope.
• Avoid enormous experimental class strings.

Safe custom component HTMLCopy Anchor Link

Allowed component markup should be semantic and declarative.

Do not include:

• <script>;
• inline onclick, onload, or other on* handlers;
• javascript: URLs;
• secrets or server-only data;
• editor-internal data-gjs-* attributes;
• inline theme colors that bypass tokens.

Safe attributes include normal href, src, alt, title, target, rel, aria-*, and reviewed component data-* attributes.

Translation bindingsCopy Anchor Link

Advanced components can bind text with:

<h2 data-pd-i18n="features.title">Features</h2>

Keys:

• must remain stable;
• should describe meaning, not the current wording;
• must use the safe PageDesigner key pattern;
• should not be casually reused for unrelated text.

Custom code boundaryCopy Anchor Link

Canvas HTML must not contain scripts. When a page genuinely needs JavaScript:

1. Read the existing custom-code slots.
2. Use Custom JavaScript after content by default.
3. Use head placement only when the script must load in the document head.
4. Append by default.
5. Replace only with explicit intent.
6. Review the code as executable public-page code.

AvoidCopy Anchor Link

• bg-blue-600, text-slate-900, and arbitrary palette classes for theme surfaces.
• Pure black/white assumptions.
• Inline style="color:..." for theme colors.
• Fixed widths on essential content.
• Hover-only interactions.
• Rebuilding a suitable library model from scratch.
• Editing an official Hosted source in place; fork it instead.