Dutton Brown — Design Directions, 2026 14 colors · 8 directions · 1 site
Internal Working Document · A Thought Partnership

we make
it cuter.

duttonbrown.com is competent. It loads, sells, and serves. It also feels like every other Shopify theme — because it is one. This document is a tour of eight directions to take the site from competent to unmistakably us — built around the period-as-architecture work we already started, with working demos for every concept. Tap, hover, and play. Then tell me which ones we ship first.

00 The audit · what feels milquetoast right now

An honest tour through
the homepage, in plain English.

Walking the site like a stranger would. Three tags: keep, fix, burn it down. Most of it is the middle one — small things adding up to "fine."

Keep The Pinkaboo hero
We just iterated this. The constellation, the color strip, the soft pink type — this is the new bar. Everything else on the page should rise to meet it.
→ It's the reference point now.
Burn The 3-column callout
"14 colors. 3 finishes. 200+ products." / "Lead time within [LT_COLOR]" / "Design professional?" — three near-identical h5s with tiny arrow links. This is the line in the document where the car-rental smell starts. One of them literally still has a template placeholder visible.
→ Direction 07 rebuilds this from scratch.
Fix Featured collections
A perfectly fine 4-up grid of products with a "View all" link. The problem is rhythm — every section repeats the same shape, so the page flatlines. Vary the cadence — full-bleed, asymmetric, oversized single-product moments — and the same merchandise reads as editorial.
→ Mix grid sizes. Add one full-bleed product moment.
Burn Reviews (currently invisible)
Yotpo stars are tucked under thumbnails, with a small number beside. That's not a brand asset, that's a footnote. The customer's voice is one of our strongest proofs and we're whispering it.
→ Direction 02 makes reviews editorial.
Fix 14 powder coats — barely seen
Color is our entire identity, and it shows up… on the PDP swatch row. That's it. Color should be everywhere — scroll bar, section dividers, cursor hover, page wash, navigation indicator.
→ Directions 01 and 08 make color architectural.
Keep "Color-coordination kink?"
The shop-the-look hotspot section has the right voice. It actually sounds like us. The execution could be more sophisticated, but the copy proves the rest of the page should be writing at this level.
→ Use this voice everywhere else.
Burn Trust-badge text-with-icons row
"Handcrafted in Minneapolis." / "Choose your fave finishes." / "We make it cute." with three clip-art icons. Currently disabled in the theme — and rightly so. The copy is on-brand but the rendering looks like every Etsy seller's footer.
→ Replace with Direction 05's MTO theatre.
Fix Transitions between sections
Every section ends, a small gap appears, the next one starts. No choreography. Not even a powder-coat divider. The page is a stack of slides instead of one continuous story.
→ Add color-strip dividers + scroll-driven reveals.
Fix The footer
Standard Shopify column-of-links footer. Nothing wrong with it functionally — but our brand makes utilitarian space feel neglectful, not pragmatic. A footer that says one beautiful sentence and then gives you the links does more work.
→ Manifesto-first footer + organized links beneath.
01 A direction

Color is the
story.

We sell color. The site barely shows it. Make all 14 powder coats visible at all times — as a scroll progress bar, as section dividers, as the cursor's mood, as a color-of-the-moment that washes the page when you tap it. Every visit becomes a different page.

  • 14-stripe scroll bar — top of every page; fills as you read.
  • Section dividers — replace boring borders with a single color band.
  • Color-of-the-moment — tap a swatch, the whole page recolors.
  • Cursor picks up the color it's currently over.
  • Footer color strip — already in db-brand spec; expand.
Live demo · click below

14-stripe scroll progress

Tap a color · "wash" the page

You picked

Pinkaboo
No. 12 · Powder Coat
02 A direction

Reviews,
but editorial.

Stars and review counts are footnote design. Customers said beautiful things — show them at the size they deserve. One quote at editorial scale, with the customer's color, city, and the install photo behind it. Rotate slowly, like a magazine spread.

  • One quote at a time, displayed at hero scale.
  • Customer's powder coat shows as a swatch in the credit line.
  • Tap to expand — see the install photo behind the quote.
  • Auto-rotate every 8s, pause on hover, fade transitions.
  • "30,000+ homes since 2013" — kinetic counter, not a stat block.
Live demo · click ‹ ›
"
We didn't pick a sconce. We picked a color first and then asked Dutton Brown if they'd build a sconce around it.
Anna T. Brooklyn · Pinkaboo Snug Wall Hook
01 / 04
03 A direction

Hide rewards
in the dots.

The constellation doesn't have to be passive decoration. Each dot is a small inheritance — tap it and a fact, a discount, or a hidden message appears. Three flavors so it doesn't feel like a single mechanic: facts, coupons, greetings. Some dots stay quiet. The mystery is part of it.

  • Facts — "30,000 customers since 2013" / "We answered 12,847 emails."
  • Coupons — "Apply $10 off your next order" → one-click apply.
  • Greetings — "Hi. Yes, we noticed you noticed."
  • Konami code reveals one secret 15th color.
  • Click logo period 3× → unlocks free swatch ship.
Click the dots
Click any dot
Tap to open · Click again to close · Some have actions, some don't
04 A direction

The cursor is
a period.

You're already using it on this page. A custom cursor that breathes like the logo period, expands to a soft pink disk on link hover, and shrinks when you press. The whole site feels alive, instead of waiting for input. Off on touch devices. On for everyone else.

  • 14px charcoal dot with a 5s breath animation.
  • Hover any link → grows to 36px, recolors to Pinkaboo.
  • Press → contracts to 8px (haptic feedback, visual).
  • Multiply blend mode — picks up colors it crosses.
  • Auto-disabled on touch devices and reduced-motion.
Move your mouse
you are
a period.
Click anywhere on the page to feel the contraction.
05 A direction

Show the
making.

Most brands hide their factory. Ours is the brand. Replace the generic "trust badge" row with a four-step horizontal timeline that shows the customer's order moving from designpowder mixbakeship. Each step has live data. Each step has a photo on hover. People who care about made-to-order will read every word.

  • Four steps, animated progress bar across them on a 8s loop.
  • Live ETA chip — "Currently 12 days" — pulled from production.
  • Click a step → photo + 30-second video of that station.
  • Footer stat row — orders this week, colors this month, etc.
Watch the loop
Step 01
You design
Pick the product. Pick the color. Pick the finish. The configurator commits the spec.
Step 02
We mix powder
One of 14 powder coats, prepared specifically for your order. Nothing pre-painted sitting in a warehouse.
Step 03
Bake & finish
Powder coated and oven-baked at 400°F in our Minneapolis facility. Hand-checked for finish quality.
Step 04
Ship
Packed with parts list and a hand-written thank-you. Average door-to-door: 14 days.
Orders this week137
Colors used11 / 14
Avg lead time14 days
Made inMinneapolis
06 A direction

Type
moves.

One kinetic moment per page where typography stops behaving and starts performing. A horizontal marquee of the brand pillars and customer-trigger phrases. Dotted breath punctuation. Dim-to-bright contrast for emphasis. Used once, used loud — the way editorial design uses a pull quote.

  • Two parallel rails moving in opposite directions.
  • Pillar phrases — "fourteen colors / three finishes / infinite combinations."
  • Tagline rotation — "stares not glares" / "future classics" / "objects of adoration."
  • Punctuation dots match the page's accent.
  • Pause on hover so people can read individual words.
Auto-scrolling
fourteen colors three finishes infinite combinations made to order in minneapolis fourteen colors three finishes infinite combinations made to order in minneapolis
stares not glares future classics objects of adoration the opposite of made for everyone stares not glares future classics objects of adoration the opposite of made for everyone
07 A direction

The callout,
rebuilt.

The current "14 colors / Lead time / Trade?" row reads like every Shopify theme on Earth. Make each cell pull live data, write the copy at hero scale, and let the white space do the rest. Three cells, three feelings: scope, now, belonging.

  • Cell 1 — Scope. "14. 3. ∞." giant numerals.
  • Cell 2 — Now. Live lead-time chip with a pulsing orange dot.
  • Cell 3 — Belonging. Trade application invitation.
  • Hovers warm the cell toward surface color — feels alive.
  • Lowercase, period as punctuation, not a sales pitch.
Hover each cell
Cell 01 · scope
14. 3. .
Fourteen colors. Three finishes. Infinite ways to make a Dutton Brown piece yours. No two orders are quite the same.
Browse the palette
Cell 02 · now
14.
days.
Currently making and shipping in fourteen days. We update this number every Monday based on real production load.
How we time orders
Cell 03 · belonging
hi,
designer.
Specifying for a project? Our trade program is the rare one you'll actually use. Pricing, samples, and a person who returns emails.
Apply for trade
08 A direction

The playground.

A homepage module, two columns. Left: a hero product, painted live. Right: all 14 swatches. Tap one — the product repaints, the background washes, the page accent changes. Make playing with color the demo of what the brand actually does. People stay on this for 30 seconds. Industry average for hero engagement is 3.

  • Live recolor — product, background, accent all swap together.
  • Color name + number — "Pinkaboo · No. 12" on every change.
  • Free swatch ship CTA appears once you've tapped 3+ colors.
  • Last-color-viewed sticks across pages (localStorage).
  • Mobile — same module, swatch row scrolls horizontally.
Tap any swatch
snug
wall hook. in pinkaboo · no. 12

The 14

Pinkaboo Powder coat No. 12. Brand new for 2026. Soft. Confident. Slightly defiant. Free swatch shipping on your first order.
Roadmap

How we ship it,
without breaking anything.

Three phases. Each one stands alone — if we stop after Phase 1 the site is already meaningfully different. If we go all the way, duttonbrown.com becomes a reference site for made-to-order brands. Estimates are working time, not calendar time.

Phase 01 ~3–5 days
Quick wins · ship by next Friday
  • Direction 04 · Cursor as period — shippable in a single liquid snippet + small JS file.
  • Direction 07 · Callout rebuilt — replaces the existing 3-column section in multi-column.liquid. Same data, better copy, better composition.
  • Direction 01a · 14-stripe scroll bar — global header addition, fixed top, fills with scroll.
  • Color-strip dividers — replace the current section borders with a single 8px color band per section.
  • Microcopy sweep — kill remaining "must-have"/"premium" language. Adopt "stares not glares" / "future classics" voice from the tagline bank.
Phase 02 ~2–3 weeks
The personality phase
  • Direction 02 · Editorial reviews — new section type, pulls from Yotpo API, custom card.
  • Direction 03 · Easter-egg dots — extend the constellation system already in interactive-svg-banner.liquid; add tap-to-reveal payload schema. Stretch: konami code.
  • Direction 06 · Type marquee — one new section, used on home + about + collection pages.
  • Direction 05 · Made-to-order theatre — replaces disabled text-with-icons row. Pull live ETA from production data (operations side already has this).
Phase 03 ~4–6 weeks
The flagship moves
  • Direction 08 · Powder coat playground — flagship homepage module. Live product recolor across hero. Requires per-product color masters (already used elsewhere in the theme).
  • Direction 01b · Page wash mode — color-of-the-moment that recolors the whole page. Sticky across pages via cookie.
  • Footer rewrite — manifesto-first, links beneath. One sentence at hero scale.
  • Section transitions — scroll-driven reveals (CSS only, no JS), cross-section morphs, view-transitions API where supported.
  • Soft launch on draft theme — let three trade customers click through first. Iterate on what they laugh at.

The audit said most of the homepage is "fine." Phase 01 alone moves it to "ours." Phase 02 and 03 move it to unmistakably ours. Pick your phase. I'll plan the implementation.