Metadata
Sector
- Web3
- Blockchain
Scope
- Development
- API Integration
Alchemy
Alchemy, a platform-as-a-service company in blockchain development, partnered with Monogram to build its new marketing website. Alchemy's design team produced the designs using atomic design methodology, and Monogram's development team translated them into composable Next.js components on the App Router, integrated DatoCMS as the headless CMS, styled the build with Tailwind CSS, and deployed it on Vercel. Monogram's role was development; Alchemy owned design. The site gave Alchemy's team direct control of its content across channels, with the project completed in 2024.
A Design System Waiting on a Front End
Alchemy works in platform as a service and blockchain development, and its site has to speak to developers evaluating infrastructure. Alchemy's design team had committed to atomic design: elements broken down to their smallest parts, then assembled into larger reusable components. That approach only pays off if the front end mirrors it, because a component library rendered as one-off pages loses the consistency it was built for. Alchemy came to Monogram to build the site the system described, and the division of labor held throughout: Alchemy designed, Monogram engineered.
Atomic Design, Composable Components
Monogram translated Alchemy's atoms, molecules, and organisms into dynamic Next.js components, keeping the same boundaries the design system drew. Building on the Next.js App Router gave the site dynamic routing and the rendering optimizations that come with it. The design system defines what a component is, and the App Router defines where it renders, so a new page is assembly rather than authorship.
A Content Layer Alchemy's Team Owns
Monogram integrated DatoCMS as the content backbone. Decoupling content from the presentation layer means an editorial change publishes without a deploy and without touching site performance, and DatoCMS delivers the same content to whatever channel needs it. Alchemy's team edits directly through the DatoCMS interface, which keeps updates timely and keeps the brand consistent across the site. The site is deployed on Vercel, with GitHub and Node.js in the delivery path, so a merged change reaches production the same way every time.
Tailwind CSS as the Styling Contract
Monogram styled the build with Tailwind CSS. Working in utility classes let the team prototype and adjust quickly without accumulating custom CSS, and it held the design system's spacing, type, and color decisions in one place across every screen size. The components render the way the design files specify, on every breakpoint.
Vercel Comments as the Review Channel
User acceptance testing ran through Vercel Comments. Alchemy's stakeholders left feedback on specific elements inside the deployment itself, so a comment arrived attached to the thing it described rather than in a separate document. That shortened the feedback loop and kept design and functional review against the real build.
The Site Alchemy's Team Runs
Alchemy's marketing site now runs on the component library its design system drew, rendered through the Next.js App Router and served from Vercel. Alchemy's team publishes through DatoCMS without a deploy, and new pages are assembled from parts that already carry the brand.
