# M8 **Completed:** 2024 **Scope:** uiUxDesign, development --- 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. ## Technologies Next.js, Turborepo, Sanity, Vercel, Tailwind CSS, Pinecone, OpenAI, WebGL, Basin, Raster, GitHub, Shopify Hydrogen, Shopify Plus, Remix ## Sectors Engineering, AI ![Image](https://cdn.sanity.io/images/zep746qw/production/156ec1627448e553224a251dacc8c014a1c0600d-4320x1614.png) ![Image](https://cdn.sanity.io/images/zep746qw/production/5bc30ee872bb89711ea051e89d313dc359590eeb-1920x1155.png) ![Image](https://cdn.sanity.io/images/zep746qw/production/79850acea87089cc9c7ea49d3247bf1b0132a958-4320x2205.jpg) ## 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](https://turbo.build/repo/docs) 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. ![Image](https://cdn.sanity.io/images/zep746qw/production/26c67456b1cde51b9e1beeac5fec587a0407c153-2883x2160.jpg) ![Image](https://cdn.sanity.io/images/zep746qw/production/d9ca84fedaf4338f414469e1a649640a2d165de0-4320x2457.png) ## WebGL Animations There are two background animations on the [AI page](https://monogram.io/ai). 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](https://oframe.github.io/ogl/examples/?src=post-fluid-distortion.html) example from [OGL](https://github.com/oframe/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. ![Image](https://cdn.sanity.io/images/zep746qw/production/2d04c4b2a39e220118eb30dc7cf3529552192c77-5760x3240.png) ![Image](https://cdn.sanity.io/images/zep746qw/production/251f2d2b8b5a2675bfc5c19798f7f6142814899a-4472x3000.png) ## M8 Shop The M8 shop combines Shopify Hydrogen with [Builder.io](http://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](http://builder.io/)'s Shopify plugin to automatically sync product data between platforms, enabling dynamic product showcases throughout the site. [Builder.io](http://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. ![Image](https://cdn.sanity.io/images/zep746qw/production/0b4af6a9ec2f7d87a56887b8ef2dca09bbf28d2d-2883x2160.jpg) ![Image](https://cdn.sanity.io/images/zep746qw/production/25afb2bbef2535e2aebb59c1c535d12b2d45dc2e-4320x2205.jpg) ![Image](https://cdn.sanity.io/images/zep746qw/production/a8e168ac67cfa07e5a9cdca02692650374851b68-3861x2520.png) ## 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. --- **View Project:** [M8](https://monogram.io/) ## Contact Us [Build what comes next](https://monogram.io/#contact) | Email: [hello+llm@monogram.io](mailto:hello+llm@monogram.io) Provide your contact details and claim a time to meet. We'll help you do the rest. Monogram is an Applied AI Studio based in Atlanta that designs and deploys production AI systems — connecting models, data, workflows, and enterprise software to automate real work. The contact form collects: name, email, company, estimated budget (USD), a project description, and how you heard about Monogram. Not sure where to start? Tell us what you're trying to automate or build — we'll help you figure out where AI fits. --- **More content:** [Home](/.md) | [About](/about.md) | [Blog](/blog.md) | [Engineering](/engineering.md) Monogram helps companies, organizations, and firms adopt AI by designing and building proof of concepts (POCs), MVPs, intelligent workflows, and production-ready AI applications. Website designed and developed by [Monogram](https://monogram.io)