Studio
Bold creative agency theme with coral accents and playful personality. Italic serif headings meet modern sans.
See Studio in action
Every page and section is part of the download. Use these as launch-day templates — keep the structure, swap the copy.
Studio is for creative agencies, design studios, and freelancers who want their portfolio to feel as bold as their work. Coral accents, italic serif headings, and a playful personality that corporate templates can't match.
Best Fit For
- Creative agencies
- Design studios
- Branding firms
- Freelance designers
- Digital agencies
- Marketing teams
Full Page Set
Every page is real and editable — no placeholders, no "coming soon" stubs.
28 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
Typography That Shows Personality
Studio pairs italic serif headings with a clean sans-serif body to create a visual rhythm that feels both creative and professional. The typographic contrast tells visitors you care about craft before they read a single word.
Portfolio Built for Impact
The work grid uses hover reveals and generous spacing to let each project breathe. Click through to a full case study layout with hero images, challenge/solution sections, and a next-project navigation that keeps visitors exploring.
Coral Accents, Not Coral Overload
The coral palette is used surgically — accent links, hover states, and key CTAs — so it energizes the design without overwhelming it. The rest stays neutral and clean, letting your work be the loudest thing on the page.
Forms, newsletter, and analytics — pre-wired
Studio is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live — no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup — just an email confirmation
- Netlify FormsFree 100/month — Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Studio-specific page — all live now.