Riccardo Marconato
ProjectsAboutContact
Back to projects
2026AdamarantDesign and engineering

Adamarant. A design and engineering studio.

Adamarant builds products where the design and the code are the same job. Its own site is the proof: the brand, the interface, the software underneath.

Next.jsTypeScriptDesign SystemSupabaseCloudflare R2Vercel
Adamarant. A design and engineering studio.

Brand identity

The wordmark had to hold two disciplines at once: design and engineering. Geometric letterforms for one, a single weight and no ornament for the other. It looks the same on every surface, favicon, header, social card, and takes its color from the text around it.

The brief

Every page is a working surface, run by the same admin the studio uses for client projects. Three languages from launch, EN, IT and ES, each one written on its own.

A two-column grid of case study cards. Each card has a preview image, a name in bold, a short description, and three tags.
The projects on the home page.
A case study subpage. Back link in the top-left, header with year/client/role overline, large editorial title, lede paragraph, a tag row, and the first content block below.
A case study, built from the same blocks as every other page.

One layout, many pages

Services, about, contact and every case study are built from the same handful of blocks. Adding a page means writing it; the layout is already there.

A page with a header at the top and a two-column grid of items below. Each cell has a heading, a paragraph, and three small tag pills.
Services page.
A page section with an overline, headline, paragraph, a grid of round avatar portraits in three rows, and a single dark pill CTA underneath.
Team section.

A contact form that prices itself

The contact page works like a configurator. You pick the type of project, how much work each part needs, and how soon you want it; the price updates as you go. The number on screen is the number the brief quotes. Leave halfway through and a link brings you back to the same quote days later.

A blog that writes itself

Every night the site writes and files its own article in all three languages. It follows the studio's house style and a long list of topics, drafts the piece, picks a cover, checks it for accessibility, and leaves it ready for review by morning. Each one is shaped to be quoted by AI search, the answers ChatGPT, Claude, Perplexity and Google now give directly.

Blog index page. Overline, large section title, description paragraph, horizontal category filter, and a featured article with a large abstract cover image and a long bold title beside it.
The blog index. A fresh article most mornings.

The admin, in-house

Renting the usual tools, a CMS, an asset manager, a form backend, would have cost a monthly bill forever. Two weeks of work replaced all three with one admin that lives inside the site. It runs every part of the site, projects, writing, media, messages, and it published this page too.

Admin dashboard. Left sidebar with eight section links. Main panel shows a stat strip with four counters at the top and a grid of section entry cards below.
Admin overview.
Admin case study editor. Top bar with the case study title and a Published badge, locale tabs (EN, IT, ES), and a stack of editable blocks below. Each block has a delete affordance and a collapse toggle.
The block editor, one language at a time.

Stack

  • Next.js16 (App Router)
  • React19
  • TypeScript
  • @adamarant/designsystem
  • SupabasePostgres + Auth + RLS
  • Cloudflare R2media storage
  • Upstash Redissessions
  • Verceldeploy

See it live

All of it runs on the admin described above.

Open adamarant.com