+XZERO® is a Framer website for a design agency and a template for creative businesses that want a dark, motion-rich presence. It ships with 11 pages and 10 CMS collections.
Approach
I started from a strict design system: text styles, link styles and reusable components that keep typography and rhythm consistent on every page, so the site can grow without drifting.
Vision and innovation
The look is dark and cinematic, balanced with oversized type and generous negative space. Motion design runs through the site, from scroll sections to small interactions, tuned to feel smooth rather than loud.
Identifying unique challenges
Dark interfaces can feel heavy, and motion-heavy sites often trade clarity for effect. The site had to stay expressive while remaining easy to read and edit.
Resolving complex problems
One spacing scale and a small set of components keep every section related. Ten CMS collections drive projects, articles, team and careers, with detail pages generated for the content that needs them.
User-centric design
Sections follow the questions a prospective client asks: what the agency does, how it works, what it has made and how to get in touch. Animations stay short so they guide attention instead of delaying it.
Pages and features
Home, About Us and Contact
Projects, articles and careers with CMS detail pages
Legal pages and a custom 404
Accessibility and optimization
Accessibility, SEO and performance were part of the brief from the start, with responsive layouts for every screen size.
Conclusion
+XZERO® gives agencies a polished, scalable site from day one, with modular sections ready to rearrange.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 24.635 22.866 C 25.123 23.355 25.123 24.147 24.635 24.635 C 24.147 25.123 23.355 25.123 22.866 24.635 L 12.501 14.268 L 2.135 24.635 C 1.647 25.123 0.855 25.123 0.366 24.635 C -0.122 24.147 -0.122 23.355 0.366 22.866 L 10.734 12.501 L 0.366 2.135 C -0.122 1.647 -0.122 0.855 0.366 0.366 C 0.855 -0.122 1.647 -0.122 2.135 0.366 L 12.501 10.734 L 22.866 0.366 C 23.355 -0.122 24.147 -0.122 24.635 0.366 C 25.123 0.855 25.123 1.647 24.635 2.135 L 14.268 12.501 Z" fill="rgb(0, 0, 0)" height="25.00139023844741px" id="jBymG44fK" transform="translate(7.499 7.499)" width="25.001390238447406px"/></svg>)