Designing with fluid type

Tanner Mardis 1 min read

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

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

design utopia css

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