Design_System

A calm, bright product site for a SaaS company, built so an AI agent can extend it without breaking it. Give the agent your company's name and it rebrands the site from one prompt.

Who is it for?

SaaS and startup teams who want a multi-page product site, and designers who want the agent to build new pages that look like the ones already there.

Ready for Framer's Agent

• A design system page: every colour, text style, spacing rule, image and component on one page, with an example prompt for each skill. The agent reads it before it builds.

• The same parts on a canvas design page, made of live styles and component instances, so it follows a rebrand.

• Four skills.

  • /design-system builds new pages and sections from the system.

  • /rebrand changes the name, colours, fonts, logo, images and copy.

  • /write-copy writes in the site's voice.

  • /launch-check sets titles, descriptions, forms, speed and dark mode before you publish.

• A Start here panel next to the home page shows where everything is and how to use the skills with Framer's Agent or with your own Claude, Codex or Cursor.

What's included?

• Home, Product, Pricing, Customers, Blog, About, Contact, Privacy and a custom 404

• Blog posts and customer stories on the CMS, each with its own page

• Monthly and yearly pricing, FAQ answers that open smoothly, and a contact form with sending, sent and error states

• 7 colour styles, each with a light and a dark value: the site follows the visitor's system setting

• 17 text styles on Switzer, one variable font file, with Geist Mono for numbers and code

• 7 components: Navigation, Button, FAQ Item, CTA Band, Pricing Plans, Submit Button and Logo

Details

• Built with Framer's own tools: styles, variants, a layout template and the CMS. No custom code.

• Every page has its own title and description, every image has alt text, and each page has one H1.

• Images under 210 KB, one font file per family, so pages load fast.

• Responsive on desktop, tablet and phone.