Using Templates

Based Page offers two approaches for building pages: composable blocks for maximum flexibility, and classic templates for a quick start. Both deploy live immediately.

Composable Blocks (Recommended)

Blocks are pre-built, themed page sections that Claude can mix and match. This is the most flexible approach.

Available blocks

Claude has 22 blocks across 15 categories:

Category	Blocks
Hero	Centered hero, Split hero, Typed hero
Navigation	Simple navbar
Features	Feature grid, Bento grid
Pricing	Three-tier pricing
Testimonials	Testimonial cards
FAQ	Accordion FAQ
CTA	Call-to-action banner
Stats	Stats row
Contact	Contact form, Waitlist form
Countdown	Countdown timer
Gallery	Image gallery
Team	Team grid
Effects	Big message, Emoji rain, Confetti burst
Social Proof	Logo cloud
Footer	Simple footer, Full footer

Ask Claude to show what's available:

"What page blocks can you build?"

Claude calls list_blocks and returns the catalog with descriptions and configurable properties.

Style presets

Each page gets a visual style. Four maximally distinct presets are available:

Style	Vibe
Noir	spell.sh-inspired dark theme — pure black, pill buttons, layered inset shadows, tight tracking
Editorial	Serif headings (Playfair Display), generous whitespace, muted palette, uppercase buttons
Bold	Gradient buttons, purple glow shadows, dramatic type scale, Plus Jakarta Sans
Fun	Bouncy interactions, rounded-full buttons, confetti effects, Fredoka headings, rose-pink palette

"What styles are available?"

Claude calls list_styles and presents the options.

Building a page with blocks

Tell Claude what you want:

"Build a landing page for Beacon with the noir style. Include a hero, features section, pricing, and a footer."

Claude:

1. Calls compose_page with the selected style and blocks
2. Customizes block content with your branding
3. Calls deploy — the page is live immediately

Customizing blocks

Each block has configurable properties. You only need to specify what you want to change — defaults handle the rest.

"Use the pricing block but change it to two tiers: Free and Pro at $19/month"

Claude overrides just the pricing props while keeping the rest of the block's defaults.

Classic Templates

Based Page also ships with five classic templates — complete HTML files that Claude can modify before deploying.

Template ID	Description
waitlist	Email capture page with gradient background and social proof counter
contact	Multi-field contact form with floating labels and client-side validation
product-launch	Multi-section launch page with navbar, hero, countdown, features, and email signup
event	Event page with schedule accordion, speaker grid, RSVP section, and countdown
saas-landing	Complete SaaS marketing page with hero, features, pricing, testimonials, FAQ

"List the available Based Page templates"

Claude calls list_templates and returns the template IDs with descriptions.

Using a template

"Use the waitlist template but change the headline to 'Join the Nimbus Beta', make the background dark blue, and add a subtitle."

Claude retrieves the template source, applies your changes, and deploys it live.

Deploying a template

deploy called with template HTML → live URL at {slug}.based.page

You can optionally specify a slug:

"Deploy it to nimbus-beta"

This creates nimbus-beta.based.page. If you omit the slug, one is generated automatically.

Notes

• Blocks use Tailwind CSS with semantic color tokens so they automatically adapt to any style preset.
• Blocks include Alpine.js for interactivity (FAQ accordion, navbar mobile menu), Lenis for smooth scrolling, and vanilla IntersectionObserver scroll-reveal animations.
• Some blocks include on-demand CDN dependencies (e.g., Typed.js, canvas-confetti) — only loaded when the block is used.
• Template source is plain HTML with inline CSS and JavaScript — no proprietary structure. You can restructure or rewrite anything.
• Templates use Alpine.js for interactivity and vanilla scroll-reveal animations.
• If you don't need templates or blocks, you can deploy any arbitrary HTML instead.