Skylight is a staple in the smart home space, with products that live in hundreds of thousands of homes. Their calendars and digital frames are already part of people’s daily routines, so the website needs to carry that same level of trust and clarity.

They came in with strong Figma concepts, but the goal wasn’t just to translate them into Framer. We needed to turn those concepts into a system their team could use and grow with over time.

That meant building a real foundation behind the design, where components stay consistent across pages and the CMS can handle new products without breaking structure. The goal was to give their team something they can move quickly in, without needing developer support every time content changes.

✨ Check out Skylight on Instagram 💻

The modular library (cards, sections, etc.) was built out by Skylight's lovely internal team in Figma. What followed was a careful rebuild in Framer, where each component was given behavior, responsiveness, and a place within a system that actually functions on the web.

There’s a difference between something that looks consistent and something that stays consistent once it’s live. Spacing, hierarchy, and interactions all had to be defined in a way that wouldn’t drift as pages evolved or content shifted.

By the end, the library wasn’t just mirrored, it was operational. What existed in Figma had a direct counterpart in Framer that the team could easily tweak and reuse, not just reference.

The CMS was where this project really came together. Every section on the site—features, FAQs, testimonials, user-generated content, product specs—pulls from structured CMS collections. Nothing is hardcoded. The content team can update copy, swap images, add new feature pages, or rearrange sections without ever opening the codebase or having to edit on the art board.

This matters because Skylight's product line keeps growing. New devices, new features, new use cases, and the site needs to keep up without a full redesign every quarter. The CMS structure was built with that in mind: modular, scalable, and easy for anyone on the team to manage.

The site carries over all of the components and sections outlined in Figma while functioning as a system the team can actually use day to day on a live site.

Updates don’t require extra lift, new content fits into the structure naturally, and the build holds up as the product evolves. It does what it needs to do without getting in the way.