# Small details only your brand could have.

Most sites on the same theme feel the same. Here are four brands we made up, each on a plain homepage. Turn their details on one at a time and watch each site start to feel like itself. Every detail grows out of something the brand already owns.

## Sixfold Honey: a honey farm's shop on Shopify

What the brand owns: A hexagon logo, honey that changes color with the seasons, and forty hives that keep bee hours. The demo homepage: "Honey from one valley." Forty hives on a hillside farm. We jar each harvest on its own, so every batch tastes like the flowers that were open that month.

1. **Buy buttons that cap like comb** (hover). The hexagon is Sixfold's logo, so the brand shows up at the exact moment someone decides to buy.
2. **Hives that keep your hours** (time of day). Bees keep hours too. The hero light follows your clock, and the bees fly only in daylight.
3. **This month's honey** (season). Honey is seasonal: spring jars are pale, autumn jars are dark. The top bar says what's blooming and marks the jar in season.
4. **A tab that fills with honey** (favicon). The tab icon is the logo's hexagon. Each jar in the bag fills it a little more, so even a forgotten tab says something.
5. **Loading at honey speed** (loading). When a page takes a second, a hexagon fills drop by drop instead of a gray spinner going around.
6. **One drop of sound** (sound). Off until you turn it on. Then adding a jar makes one soft drip, and nothing else makes a sound.
7. **The waggle dance** (easter egg). It's how a bee tells the hive where the flowers are. This one points at the shop button, and it never runs on its own.

## Tidewell Vineyard: a coastal winery on WordPress

What the brand owns: A ridge six miles from the sea, morning fog that shapes every wine, and a tasting room people plan a day around. The demo homepage: "Wine that grows in the fog." Our vines sit on a ridge above the ocean. Most mornings the fog keeps them cool until noon, and that slow, cold ripening is the whole style.

1. **Fog that burns off as you scroll** (scroll). Fog is the whole story of this wine, so the page opens socked in and clears as you read on, the way the ridge does by noon.
2. **Tasting room hours, live** (time of day). People plan a day around the tasting room. The header tells them if it's open right now, and the light on the ridge matches the hour.
3. **Where the vines are this month** (season). Wine people love knowing where the vineyard is in its year. One line under the hero does what a blog post usually tries to.
4. **Links that pour** (link underline). Every link fills with the color of the pinot, left to right, like a glass being poured.
5. **A glass that fills as you sign up** (form). Joining the club is the biggest thing a visitor can do here. The glass fills as the email takes shape, and the thank-you sounds like the winery.
6. **Tasting notes that print like a menu card** (print). People print tasting notes for the tasting room and the dinner table. Now they come out as one clean card, not three pages of menus and buttons.
7. **A 404 that's still in the barrel** (404 page). A broken link is a small letdown. A line in the winery's own voice turns it into a smile and a way back to the wine.

## Wren & Okafor: a two-attorney law firm on WordPress

What the brand owns: Plain answers, careful paperwork, and clients who are usually having a hard week. The demo homepage: "Plain answers for the hard paperwork." We're a two-attorney firm. We write wills and trusts, walk families through probate, and explain every step before you sign anything.

1. **Underlines drawn in ink** (link underline). A law firm lives on paper and signatures. Links underline with a fountain-pen stroke that tapers at the end, in the firm's own ink color.
2. **Footnotes that answer in place** (hover). Clients hit legal words they don't know. Hover or tap the little number and the answer opens right there, instead of jumping to the bottom of the page.
3. **Honest office hours** (time of day). People look up a lawyer at 11 at night after a hard day. The header says when they'll hear back, so they don't lie awake wondering.
4. **A form you sign** (form). As you type your name it appears on a signature line, and Send presses a seal. It feels like an agreement, and it says exactly when they'll call.
5. **A tab that holds your place** (favicon). If you switch away halfway through writing, this tab's title tells you your note is saved, so it's easy to come back to.
6. **Pages that print on letterhead** (print). Clients print things for their files and for family. Pages print on the firm's letterhead, with the links written out as footnotes.
7. **A 404 written like a memo** (404 page). Legal pages go out of date. Instead of a dead end, the 404 says why the page was withdrawn and where the current answer lives.

## Ledgeworks: a skate shop on Shopify

What the brand owns: Stickers on everything, a concrete ledge out back, and regulars who've been coming in for fifteen years. The demo homepage: "Boards, wheels and a ledge out back." We set up every complete by hand, and the ledge behind the shop is open to anyone with a board.

1. **A board for a cursor** (custom cursor). Over the hero and the decks, the pointer becomes a little board. It's the shop's way of saying the site is for skaters.
2. **Decks that ollie** (hover). A deck on a wall just hangs there. Hover one and it pops up and tilts, the way a board does when you ollie.
3. **A grind along the ledge** (scroll). The ledge out back is the shop's whole identity. As you scroll, a board grinds along the ledge line between sections.
4. **A wheel for a spinner** (loading). If something has to spin while a page loads, it might as well be a skate wheel.
5. **The clack of a board** (sound). Off until you turn it on. Then adding a deck makes the short clack of a tail hitting concrete.
6. **Sticker bomb** (easter egg). Every skate shop has stickers on everything. Find the trick and the hero gets slapped with the shop's own.
7. **A 404 that says you bailed** (404 page). Skaters fall all the time and get back up. The 404 says it the way they would.

## Start with what the brand already owns.

- **A shape, a place, a habit.** A logo's hexagon, morning fog, a fountain pen, a ledge out back. Every detail above starts with something only that brand has, so it can't be copied onto a competitor.
- **Never in the way of a sale.** Nothing covers a buy button, nothing waits for an animation, and nothing changes what a click does. The details sit around the path to checkout, never on it.
- **A still version of everything.** With Reduce Motion on, the fog sits still, the bees hold their place and the dance is drawn as a diagram. Sound is off until someone turns it on.
- **Any theme, no rebuild.** Each detail is a small piece of code added to the Shopify or WordPress theme you already have, with its own on and off switch.

Every detail has a still version for Reduce Motion, and sound is off until a visitor turns it on. Each brand's full set of details is a few KB of code, loaded after the page is ready.

## What this looks like for your site.

We start with what your brand already owns: the shape in your logo, your colors, the story you tell about how things are made. Then we pick a handful of details, set a speed budget and add them to your Shopify or WordPress theme as it is.

1. **Find the details.** A short workshop and a look at your site. We bring a list of ideas only your brand could have, and you pick.
2. **Build and measure.** Each detail is small, scoped and tested against your theme and apps, with Reduce Motion and the speed budget checked before launch.
3. **Keep what works.** We can run it as an A/B test against your current theme, so the details stay only if they earn their place.

[Talk to us](https://nr10.com/contact/)

Human version: https://nr10.com/labs/signature-details/