Site Builder

How Ploy sites are built, structured, and styled.

Every Ploy site runs on a modern web stack — Astro, React, TypeScript, and Tailwind CSS. You don't need to know any of this to use Ploy. Korra handles the implementation. This page explains how things work under the hood for users who want to understand the architecture or make manual edits.

How Sites Are Structured

A Ploy site is organized into pages, sections, and components:

ConceptDescription
PageA route on your site (e.g. /, /about, /pricing). Each page is an Astro file that composes sections together.
SectionA reusable block of content — hero, features grid, testimonials, pricing table, FAQ, footer, etc. Sections are React components with props for customization.
ComponentSmaller UI building blocks used inside sections — buttons, cards, badges, inputs. Pulled from a shared component library.

Example Structure

src/
├── pages/
│   ├── index.astro        (homepage)
│   ├── about.astro         (about page)
│   └── pricing.astro       (pricing page)
├── sections/
│   ├── Hero.tsx
│   ├── Features.tsx
│   ├── Testimonials.tsx
│   └── Pricing.tsx
└── components/
    ├── Button.tsx
    ├── Card.tsx
    └── Badge.tsx

Design System

Your brand's visual identity is stored as a design system — a set of tokens that control colors, typography, spacing, border radius, and shadows across your entire site.

What's Included

  • Colors — Primary, secondary, accent, neutral, and semantic colors in light and dark mode.
  • Typography — Heading and body font families, weights, and a type scale from xs to 9xl.
  • Spacing — Consistent spacing tokens for margins, padding, and gaps.
  • Border Radius — Configurable for buttons, cards, inputs, and global defaults.
  • Shadows — Shadow color and elevation tokens.

How It Works

The design system is defined in your workspace and compiled into CSS custom properties (Tailwind theme tokens). Every section and component references these tokens, so changing a color in your design system updates it everywhere instantly.

Updating Your Design System

  • From chat: Ask Korra — "Change our primary color to navy blue" or "Use Inter for headings."
  • From Figma: Connect a Figma file and Korra will extract your brand tokens automatically.
  • From a website: When you clone a site, Ploy extracts the design system from the source.

Creating Pages

Ask Korra to create a page and she'll handle the rest:

  • "Add an about page with our team story, values, and a team photo grid"
  • "Create a pricing page with three tiers: Free, Pro, and Enterprise"
  • "Build a blog with posts from our Notion database"

Korra will create the page file, build or reuse sections, apply your design system, and add it to your site's navigation if appropriate.

Cloning Sites

Ploy can clone an existing website from a URL:

  • Full site clone — Imports the entire site's design, content, and structure, plus extracts the brand design system.
  • Page clone — Import a specific page from any URL into your site.
  • Section clone — Grab a specific section (hero, nav, footer) from any page and add it as a reusable component.

Tip: Cloning a competitor's site and then asking Korra to adapt it to your brand is one of the fastest ways to get started.

Preview & Iteration

Every site has a live preview in the dashboard that updates in real time as Korra makes changes. You can:

  • See desktop and mobile views
  • Click through pages
  • Watch changes appear as Korra implements them
  • Take screenshots for review

What's Next?