COLOPHON
How I built this site.
I started this site in March 2026, sketching directions in Figma and setting up a Framer Pro account. It grew from a Framer template called Jonas and went live in November 2026. I’m a product designer who came up as an art director, so the hard part wasn’t the screens. It was telling both halves of that story on one site.
Where it started
I started from Jonas, a premium, minimal Framer template by Bryn Taylor. It was clean and unfussy, I liked the vibe, and it felt like a good base to make my own. I kept its bones (a short intro, a two-column work grid, about, experience, contact) and swapped out almost everything inside.
Before: the Jonas template
After: dougmuise.com
Type: Inter everywhere became New Spirit for headlines and Söhne for everything else.
Color: a white page with gray text became warm paper, warm ink and one cobalt accent.
Work grid: placeholder 3D renders became real case studies, each with its own page.
Intro: “I’m Jonas, a senior product designer…” became “A product designer who thinks like a brand builder.”
Added: a case study template, a résumé, an archive, writing, Rules I design by, testimonials, Off the clock and the seal.
Honestly, the biggest headache was Framer itself. Getting layouts to behave, building components, making it all work on every screen size: it ate a lot of time. Working with Claude took most of that off my plate, so I got to spend my time on strategy and art direction instead of wrestling the build.
Telling the story
Everything here is trying to make one point: I’m a product designer who thinks like a brand builder. Each section backs up the product half, the brand half, or shows where the two meet.
Work comes first. You hit the case studies right after the intro. The about-me stuff comes after.
The intro leads with proof. Three results, and you can open each one: doubled apply starts, a module-based system for 23 sites in 10 languages, and an 18-year rankings page launched in under four weeks with AI. Claude drafted three versions; I picked one and made it mine.
One template for every case study. Same beats every time: a one-line summary, the details, up to three results with sources, the problem in a sentence, the decisions, the outcome and what I learned. Easy to skim, easy to compare.
Pivots and mistakes stay in. If a project changed course or didn’t land, I say so. Only verified numbers make it onto the site, and other people’s work gets credited to them.
The archive is the origin story. My Apple, Adobe and WIRED work lives on its own page. It’s the brand work the product thinking grew out of.
Type
Two typefaces do all the work: New Spirit for display, Söhne for everything else. It didn’t start that way. My early Figma explorations used Outfit and Fraunces, and the first version of the site ran on free Google fonts.
Why pay for type. Free fonts are great, but the popular ones show up on thousands of sites. Licensing from independent foundries gave this site a voice of its own, and the years of care that go into spacing and kerning show up even when people can’t say why. It also pays the people who make the tools I use, the same way I hope clients value design work. Type appears in every line of the site, so it felt like money well spent.
New Spirit, for warmth. It’s Miles Newlyn’s revival of Windsor, a serif from 1905, and it has the charm of a hand-painted sign. Pretty fitting for an art director. I picked it before Claude was involved; Claude later lined up backups in case the license fell through.
Söhne, for credibility. Claude suggested four sans serifs and built a test page so I could compare them with real copy. I went with Klim’s Söhne. I missed a bit of Outfit’s personality, but body copy got crisper and more trustworthy, and it pairs really well with New Spirit.
Tracking by eye. Every New Spirit style has its own letterspacing, from −0.04em on the biggest headlines to −0.01em on long pull quotes. Claude suggested numbers; I judged them on screen. Rule of thumb: short headlines can go tighter than long reading lines.
No one-off sizes. Every bit of text uses a named style, so changing one style updates the whole site.
Color
Cream paper, warm ink, one blue. The cobalt-on-cream idea goes back to an early Figma exploration I’d honestly forgotten about until we went digging.
Warm paper. The cream was Claude’s idea. I loved the warmth, but I’ll admit I worried it looked a little “AI-generated,” since a lot of AI-made sites have that look right now. We kept it and tuned the neutrals around it until it felt like paper, not a theme.
Ink, not black. Text is a warm near-black, never pure black, and the grays are warm too, so nothing feels cold on the cream.
Pure white where it counts. Cards and the portrait circle are pure white. We tried a warm white; I liked the crisp one better.
One accent. Cobalt only shows up in a few spots: the period, link hovers, the seal and selected text. Links in body copy get an underline instead of blue, so the cobalt stays special. Claude set those rules.
Dark mode. Every color has a light and a dark value, so the whole site flips with one toggle.
Delight, in moderation
A portfolio should feel like a person made it, but the work has to stay the star. So: a few small surprises, no fireworks.
The period. The dot after my name is the site’s signature. I noticed New Spirit’s period is actually an oval and asked for a perfect circle; Claude drew it, made it cobalt and worked out where it should appear. On the homepage it drops in and bounces, which was Claude’s idea. I asked for a shorter delay, and for the same bounce on the footer wordmark.
The seal. The “Quality Doug Muise Mark” is my own artwork. Claude rebuilt it in code, evened out the ring spacing and gave it a slow spin.
Small finds. A hello in the browser console if you go looking, live weather in the footer (hi, Karl the Fog), a little label that follows your cursor on cards, and cobalt when you select text. Claude pitched six ideas; I kept five.
Craft
Most of the work here you’ll never notice, and that’s kind of the point. A few rules kept it tidy.
A 4px spacing scale. Every gap and margin comes from one scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. My call. Claude went through the whole site and caught every stray value, including a 6 and, somehow, a 114.
Contrast you can actually read. All text passes WCAG AA, and body copy passes AAA. The original muted gray only hit about 3:1, so Claude swapped in a warm gray that passes. When the category pills went see-through over photos, we checked those too: 72% white with a light blur, about 4.7:1 at worst.
Hovers you can feel. The fades started at 0.1 and 0.3 seconds and felt twitchy to me. Half a second felt right, so that’s what everything uses now.
One radius, one container. Every image and card has 12px corners, and every section sits in the same 1280px container, so the edges line up all the way down the page.
Checked at every size. Every change got screenshotted on desktop, tablet and phone before it went live.
Working with Claude
I built this site with Claude, Anthropic’s AI assistant, as a design partner. I set the direction and made the final calls. Claude was the teammate who’d happily mock up three options, dig into the research and write the code I didn’t want to. When you work this way it isn’t always obvious who had which idea, so I kept score:
Mine
Cobalt on cream, from my early Figma work
New Spirit, and the 4px spacing scale
The seal artwork and the period as a signature
The footer bounce and the slower hovers
Stating pivots and mistakes plainly
Claude’s
The warm paper palette
The one-accent rule for cobalt
The hero period drop and bounce
The problem statement pull quotes and the seal wording
Most of the code components
Together
The circle period: I noticed the oval, Claude drew the circle
Söhne, chosen from Claude’s side-by-side test
The hero paragraph: Claude drafted, I chose and edited
Underlined links, the “D.” favicon, this page
From the Archive: my idea, Claude’s layout
The system
Everything above lives in a small design system: color tokens, text styles, one spacing scale and a few components. Here it is, drawn with the site’s own tokens and styles, so it switches with dark mode too.
Color
Paper
#F6F3ED
White
#FFFFFF
Ink
#211E1A
Charcoal
#4A4640
Prose
#55504A
Muted
#6E675D
Cobalt
#2445C8
Type
Heading/Section · New Spirit 48
Feeling, meet function
Heading/Statement · New Spirit 30
Good for users, good for business.
Heading/Item · New Spirit 28
Rules I design by
Body/Lead · Söhne 20
A product designer who thinks like a brand builder.
Body/Long-form · Söhne 17
Case study prose sits at 17px with generous line height, in a warm gray that passes AAA.
Label/Eyebrow Small · Söhne 14
LEAD PRODUCT DESIGNER
Label/Credit · Söhne 10
PHOTO: GETTY
Spacing
4
8
12
16
20
24
32
40
48
64
80
Bars drawn at three times their value.
Shape and links
Inline links are underlined at rest and turn cobalt on hover. Icons come from Phosphor, used sparingly.
The portrait
The line drawing on the homepage started as a photo of me, made in Midjourney on March 24, 2026. The prompt was simple. The references did the work.
I used my headshot, first below, twice: as the image and as a reference for my face. Then I added a style reference, a line illustration of someone else, for the look of the line. One run gave four variations, from harsh to soft. The last is the one on the site.
Prompt: “Create an editorial style black and white illustration”
Colophon
Type
New Spirit by Newlyn and Söhne by Klim, both licensed
Template
Jonas by Bryn Taylor, a premium Framer template, heavily rebuilt
Icons
Phosphor, MIT license
Tools
Figma for design, Framer for the build, Midjourney for the portrait, Claude as a design and code partner
Photos
Unless credited otherwise, the photos and design work here are my own. A few photos were touched up with AI tools like Google Gemini, and the portrait illustration was made with Midjourney. Stock and client images are credited where they appear.