Moon X: Creative Agency Website Template, Built in Framer by Kazi Mohammed ErfanMoon X: Creative Agency Website Template, Built in Framer by Kazi Mohammed Erfan
Moon X: a website template for creative agencies, built in Framer
Moon X is a website template for creative agencies and branding studios, with stark black and white pages, red accents and oversized type. We built it in Framer as a full studio site: home, about, work, pricing, news and contact.
Type: Website template we built in Framer · Industry: Creative agencies, branding studios · What we did: Framer development · Platform: Framer · Live: moonx.framer.website
About the template
Moon X is made for small agencies that sell branding and web design. The sample studio, “MOON®”, opens with the line “Building lasting digital connections” and shows selected work, services, the team and the latest news on one page.
The challenge
An agency site has to look like the agency's own work, and the team still has to keep it up to date.
Agency templates all look alike. A buyer needs a strong look from the first screen.
Big type breaks easily. Oversized headlines have to hold up on phones and tablets, not only on a wide screen.
Work goes out of date. New projects and news posts must go live without a developer.
Buyers want the full site. A home page alone is not enough; agencies also need about, pricing and contact pages.
What we did
A loud home page that stays readable
Built the “MOON®” hero with oversized display type and a scroll-triggered entrance.
Built the services as a moving ticker: Branding, Web Design, Digital Marketing and Copywriting.
Set out “The Team” as an editorial name list with small portraits next to each name.
Work and news that the team can edit
Set up “Selected Work” as a CMS collection with five sample projects, each with its own page.
Each project page follows the same story: Objective, What we've done, Creative Process, Results and Conclusion.
Set up “Latest News” as a second CMS collection with four sample posts.
Inner pages for the whole studio
About page with studio numbers, the team with roles and three client testimonials.
Pricing page with three packages: Starter, Growth and Premium, each with its own feature list.
Contact and news pages that share the same header, type and footer.
Built for every screen
Tuned the type scale for desktop, tablet and phone so the big headlines never overflow.
Added hover states and scroll animations across every section.
Scope
Included:
Six pages: home, about, work, pricing, news and contact
CMS collections for work and news, with detail pages
Scroll and hover animations, and layouts for desktop, tablet and phone
Not included:
Custom design for one agency: this is a ready-made template
The buyer's own projects, photos, copy and domain: the demo uses sample content
Listing and selling the template: our part was the Framer build
Results
Live as a demo at moonx.framer.website.
Six main pages, plus five project pages and four news pages from the CMS.
An agency can add a project or a news post in Framer without code.
What we'd improve next
Add a careers page. A small studio could list open roles in a CMS collection next to the team.
Add a case study filter. Let visitors sort the work by service, such as branding or web design.
Add a project inquiry form with budget and timeline fields, so leads arrive with the details an agency needs.
Working on something similar?
I design websites in Figma and build them in Framer or Webflow, so your team can edit every page without a developer. Message me here on Contra with your site or Figma file, and I'll reply with a plan and a fixed price.