Studio Workflow

The studio is organized as six sections on the left rail. Completing them in order produces a deployable campaign site.

Section Order

Layout

Pick one of four layout presets. Every subsequent preview uses this layout.

Theme

Set colors, fonts, and border radius. Semantic tokens are derived from your base palette automatically.

Brand

Configure names, copy, images, block visibility, and button labels.

Create Airdrop

Create the on-chain airdrop through real Solana transactions. Four steps: Draft, Recipients, Deposit, Start.

Review

Check the readiness of every section before generating the app.

Generate App

Produce a standalone Vite + React project ready to deploy.

Section 1. Layout

Choose the page structure. The layout you pick controls how content and the claim button are arranged.

Preset	When to use
`Centered`	Single-column, center-aligned. The safest default
`Two-Column`	Left hero image, right content column
`Hero Banner`	Content overlaid on a full-bleed hero image
`Step Card`	Step-by-step card sequence for guided campaigns

Common options:

CTA Arrangement — inline or stacked CTA buttons
Countdown Emphasis — compact or hero
Stats Size — compact or prominent

Layout-specific options:

Hero Banner — Hero Banner Stats Placement (top-bar or inline)
Centered — Content Width, Density, Announcement Style

Studio Layout panel with four presets — Layout panel

Section 2. Theme

Set the visual tone.

Theme presets — curated color combinations
Font presets — geometric, modern, rounded, mono, system
Custom colors — five base colors: primary, secondary, accent, background, surface
Global Radius — single border-radius applied across all UI components

Semantic tokens (foreground, card, muted, border, etc.) are derived from your base colors automatically.

Section 3. Brand

Configure copy, assets, and per-block label editing in one place.

Brand basics

Brand name, logo image, token symbol image
Hero title, hero body
Hero image with adjustments: scale, position, overlay, glass blur

UI blocks — visibility and labels together

Announcement bar
Countdown — three eyebrow labels and unit labels
Status Badge — Starting Soon, Live, Ended
Stats — total claims, allocated, claimed (toggle each + edit labels)
Footer — link list, tagline

Button labels

Connect Wallet
Claim
Eligibility

Visibility toggles for Announcement, Countdown, Status Badge, Stats, and Footer live on the Brand panel, not the Layout panel. This keeps label editing and show or hide in the same place.

Image

Brand panel

Brand section of the studio inspector showing the brand basics, hero image adjustments, and the per-block visibility toggles paired with their label inputs.

Section 4. Create Airdrop

Create the airdrop through real Solana transactions. See Create Airdrop for the full walkthrough.

Section 5. Review

Review displays a checklist across all sections and blocks generation when anything is incomplete:

Required items completed across every section
Unsaved changes warning
Click through to any incomplete section directly

Section 6. Generate App

Generate the deployable project. See Generated App for the output structure.

Success Looks Like

Every left rail section shows a completion check
Preview matches what you expect the claim page to look like
Generate App produces a Vite project you can build and deploy

Next Step

Go to Create Airdrop for the on-chain setup flow.