Astryl Builder Early Preview
Step 1 of 8

Step 1 of 8 · Appearance

Pick a colour palette

Sets the mood of everything — backgrounds, accents, and contrast. You can refine it after the build.

Light

White base, soft greys, warm accent.

Dark

Near-black, high contrast, strong presence.

Warm

Cream, tan, and terracotta. Natural feel.

Cool Blue

Blues and grey-blues. Calm and trustworthy.

Fresh Green

Organic greens. Grounded and natural.

Vivid

White base with bold orange accent.

Slate

Grey-white with deep blue accent. Corporate.

Midnight

Deep dark with electric blue. Technical.

Rose

Soft pinks with a bold berry accent.

Purple

Deep violet with bright purple accent.

Step 2 of 8 · Design Style

Choose a design style

This shapes the layout, typography, and overall visual structure — not just colour. Each style produces genuinely different HTML.

Minimal

Centered. Lots of space. Serif elegance.

Serif · Centered

Clean

Split hero, card grid, professional structure.

Sans · Split layout

Bold

Huge type, full-bleed, maximum impact.

Heavy · Full width

Elegant

Centered serif, refined spacing, luxury feel.

Serif · Centered

Startup

Badge hero, rounded cards, modern SaaS feel.

Round · Split layout

Editorial

Horizontal rules, big numbers, magazine layout.

Grid · No-border

Craft

Centered serif, warm dividers, artisan warmth.

Serif · Warm

Technical

Monospace, bordered rows, developer aesthetic.

Mono · Bordered

Step 3 of 8 · Voice

What's the tone of voice?

This drives every word on the site — headlines, copy, and calls to action. Pick the one that fits your brand's personality.

🏛

Professional

Authoritative, polished, expertise-forward. Trust built through precision.

✌️

Friendly

Warm, conversational, human-first. Like a trusted person, not a corporation.

⚡

Bold

High-energy, confident, ambitious. Strong verbs. Makes an impression fast.

🎨

Creative

Original, personality-driven. Unexpected phrasing. Genuinely memorable.

⚙️

Technical

Precise, specific, peer-to-peer. Uses correct terminology. Earns respect.

✦

Luxury

Understated, refined, aspirational. Every word earns its place.

Step 4 of 8 · Purpose

What kind of site is this?

This determines which pages are generated and how they're structured. Choose the one that best describes what you're building.

Business

A company, agency, studio, or commercial venture with services to offer.

Home · Services · About · Contact

Freelancer

An individual selling their skills and time to clients.

Home · Work · Services · Contact

Portfolio

Primarily showcasing creative or professional projects.

Home · Work · About · Contact

Online Shop

Selling physical or digital products direct to customers.

Home · Products · About · Contact

Community

A group, club, charity, association, or organisation.

Home · Events · About · Contact

Personal

A personal website, blog, or individual online presence.

Home · Blog · About · Contact

Step 5 of 8 · Identity

What's it called?

Your business name, your own name, or the project title. This goes in the nav, footer, and browser tab.

Step 6 of 8 · Goal

What's the primary goal?

Every CTA button and closing headline will be written to serve this goal. Pick the one that matters most right now.

Generate enquiries

Drive contact form submissions, calls, or email enquiries. CTAs: "Get in touch", "Book a call".

Sell products or services

Convert visitors into paying customers. CTAs: "Shop now", "Order today", "Buy now".

Showcase work

Present projects, case studies, or a portfolio. CTAs: "View our work", "Explore projects".

Inform and educate

A hub for news, resources, or reference content. CTAs: "Learn more", "Read more".

Step 7 of 8 · Context

Where do you operate?

Location and audience context helps the AI write more specific content. Leave blank if not applicable.

This step is optional. Click Continue to skip.

Step 8 of 8 · Brief

Describe your business

Tell Astryl what you do, who you serve, and anything specific you want on the site. The more detail, the better — this is the core input for every page.

0 / 3000