Blog

Notes on design, development, and studio life.

Designing with fluid type
Tanner Mardis

Designing with fluid type

We rebuilt mardis.studio on Hugo with flat-file content and Utopia design tokens so type, space, and grid all scale fluidly between phone and desktop.

What changed

  • Webflow export → Hugo static site
  • Breakpoint-heavy sizing → fluid clamp() scales
  • CMS-ready markdown for blog posts and portfolio case studies

Add new posts by creating a file in content/blog/ and setting draft: false when you are ready to publish.

Design

Figma
Cursor

Providers

GitHub
Cloudflare

Typography

A2 Regular Soft
Utopia

Tools

Lottie
Hugo

A website is both like a painting and a book with the benefit however of being ever able to evolve. It's a place to try your ideas, a place folks can visit anytime.

It is a creation that reflects the creator in some way, but also a product of the many internet pioneers that plowed and engineers that crafted before us.

This is our flag on the moon of the world wide web, our one small step in time and someday maybe even history.

- Tanner & Levi Mardis