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 · CenteredClean
Split hero, card grid, professional structure.
Sans · Split layoutBold
Huge type, full-bleed, maximum impact.
Heavy · Full widthElegant
Centered serif, refined spacing, luxury feel.
Serif · CenteredStartup
Badge hero, rounded cards, modern SaaS feel.
Round · Split layoutEditorial
Horizontal rules, big numbers, magazine layout.
Grid · No-borderCraft
Centered serif, warm dividers, artisan warmth.
Serif · WarmTechnical
Monospace, bordered rows, developer aesthetic.
Mono · BorderedStep 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 · ContactFreelancer
An individual selling their skills and time to clients.
Home · Work · Services · ContactPortfolio
Primarily showcasing creative or professional projects.
Home · Work · About · ContactOnline Shop
Selling physical or digital products direct to customers.
Home · Products · About · ContactCommunity
A group, club, charity, association, or organisation.
Home · Events · About · ContactPersonal
A personal website, blog, or individual online presence.
Home · Blog · About · ContactStep 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