Metadata
Sector
- Engineering
- AI
Scope
- Development
- UI/UX Design
M8
As the eighth iteration of Monogram’s website, M8 reflects our ongoing evolution in design and development. The name combines “M” for Monogram with “8” to signify this latest version. For this iteration, we introduced an entirely new design aesthetic and four key improvements: adopting a monorepo architecture with Turborepo, transitioning to a new headless CMS architecture, implementing a vector database-powered AI chat interface, and adding custom WebGL animations. The new architecture emphasizes performance and maintainability while enabling more dynamic user interactions.
M8 Design
The foundation of M8's visual system is built around exposing our grid layout rather than hiding it - a deliberate choice that reflects our engineering ethos. We implemented a modular design pattern where page sections are clearly delineated by borders, enabling content blocks to be reordered and recombined while preserving visual consistency. The visual language is defined by a custom glitch effect shader applied selectively to images and icons, along with our exposed grid system. We also solved a long-standing technical challenge with our brand identity by replacing our signature gold (which had inconsistent rendering across different screens and color spaces) with a carefully calibrated yellow that maintains brand recognition while ensuring predictable digital display.
Monorepo Setup with Turbo
For M8 we adopted Turborepo to manage our monorepo. Turborepo enables us to share styling, components, icons, and Tailwind configuration across all projects in our repository. Beyond solving immediate workflow challenges, the monorepo structure positions us to efficiently scale - new projects can leverage our shared component library and established build processes without duplicating core resources.
WebGL Animations
There are two background animations on the AI page. First the background hero of ellipse shapes are procedurally generated, and then in keeping with the glitch effect theme we’ve added a mouse-based distortion with chromatic aberration, based on the Fluid Distortion example from OGL. Second, further down the page are a scrolling list of suggested AI prompts, with a wireframe sphere spinning in the background. The wireframe, line animations and glitch effects compliment the developer and engineering-focused design.
AI Chatbot
We developed a custom AI chat interface for M8 that leverages vector embeddings for fast, accurate responses. Content from our CMS is processed and stored in a vector database, allowing the system to efficiently retrieve relevant information. The chat interface uses large language models to understand user queries and generate contextually appropriate responses. This architecture enables the chatbot to pull from our content to answer questions about Monogram and our work.
M8 Shop
The M8 shop combines Shopify Hydrogen with Builder.io to create an optimized storefront that reduces maintenance complexity. Hydrogen, built on Remix, provides a framework for creating custom storefronts that connect directly with Shopify's commerce data. We leverage Builder.io's Shopify plugin to automatically sync product data between platforms, enabling dynamic product showcases throughout the site. Builder.io offers visual content management capabilities, allowing for quick updates to layouts and product displays without requiring developer time. This architecture gives us both the technical foundation needed for a high-performing storefront and the flexibility to manage content efficiently.
End-to-End Confidence
We built our end-to-end test suite with Playwright, focusing on key user stories. The tests simulate real user journeys through M8, ensuring critical flows and functionality work as expected. This approach helps us catch issues early and maintain confidence when shipping new features.
Content Management with Sanity
We built M8's content management system using Sanity's headless CMS architecture. GROQ queries handle our data transformations and content retrieval, while live previews let content creators see changes in real-time. We use Sanity Typegen to automatically generate TypeScript types from our GROQ queries, streamlining development by ensuring our content models match our codebase.