Designing a page that dyes as you scroll: the KON design notes

One disclosure before the notes: KON is a demo. The atelier is fictional and the site exists to show a design system working, not to sell cloth. The dye process it leans on is real, though. Aizome cloth gets its depth from repeated dips in the vat, and each dip is irreversible. That one fact drives every decision below.

The concept: scroll as dye

Most scroll effects decorate a page. The useful ones restate what the brand does. For an indigo atelier the mapping was sitting in the craft itself: reading down the page is repeated immersion, so the page should darken the way cloth does. Once that sentence existed, every other choice became a test: does this support the dye story or not? Anything that failed the test was cut, no matter how good it looked in isolation.

This is the part worth stealing. Before picking animations, write the one sentence that connects your scroll behavior to the thing the business actually does. If you cannot write that sentence, motion will read as decoration, which is the fastest way to look like every other site.

Five colors, fixed before anything else

KON runs on a five-step indigo ladder, and the steps are named after traditional Japanese dye shades, ordered from fewest dips to most:

The ladder was fixed before any layout existed, and no sixth color was allowed in later. That is the discipline most palettes lack. A palette is not the colors you like; it is the colors you agreed not to exceed. When a section looked flat during the build, the fix had to come from spacing or photography, never from inventing a new blue.

One typeface, one weight

All display type on KON is Cormorant Garamond at weight 500. Not 400 and 700 for contrast. One weight, full stop.

With boldness off the table, hierarchy has to come from size and space, which is exactly how classic Japanese editorial layouts create order. The result is a long page that stays calm from top to bottom. If you take one type rule from these notes, take this one: pick a serif with character, lock a single weight, and force yourself to solve hierarchy with scale. It is uncomfortable for about an hour and then the page starts agreeing with itself.

A red with exactly three jobs

There is one non-indigo color on the site: suou, a muted traditional red. It is allowed to do three jobs, prices, the main button, and one badge, and nothing else. No red headings, no red hover states, no red icons.

Most accent colors are applied as a mood, which is why they leak everywhere. A written job list holds the line. Because red appears only where money or action lives, the eye learns the rule in one screen and follows it for the rest of the visit. The list also keeps the rule alive at 1 a.m., when you are tired and a heading starts looking like it wants to be red.

The forbidden list

The design document for KON bans specific moves outright:

• No parallax stacking
• No horizontal scroll sections
• No text over busy photography
• Zero border radius anywhere
• No motion that ignores the dye story

A forbidden list sounds negative and works better than any moodboard. Defaults pull every page toward the same rounded, floating, gradient middle, and wanting to be different has never once been enough. The way out is writing down which averages you refuse before the page exists to tempt you. We made the longer case for constraint documents in this piece; KON is the cleanest proof of it on our shelf.

Seven moves, one story

The finished site uses exactly seven animations, and each one restates immersion:

1. The page background walks down the five-step ladder as you scroll
2. Six cloth swatches fill bottom-up, in sequence, like cloth entering the vat
3. A counter reads Dip 02 / 06 and advances as the swatches take their color
4. The navigation flips its ink from black to white the moment the ladder passes hanada, so it stays legible in dark water
5. Headlines rise out of their baselines like cloth lifted from the vat (the same family of scroll work we broke down here)
6. A giant 紺 character sits behind the hero, drifting upward and deepening slightly as you begin to scroll
7. A waterline of two slow waves, moving at different speeds, marks the bottom edge of the hero like the surface of the vat

Every move has a reduced-motion fallback, because a page that requires animation to make sense is broken for the people who turn animation off. Seven is not a magic number. It is simply where we stopped, because the eighth idea on the list decorated instead of restating, and the forbidden list said no.

What this costs and what it buys

None of these decisions require rare tools or a big team. They require agreeing to constraints before the page exists and holding them while it is built: a color ladder you will not exceed, one weight, a job list for the accent, a short list of banned moves, one sentence that ties motion to meaning. The same system, held less strictly, produces the pages everyone scrolls past.

The principles are the ones in our Japanese web design principles. KON just holds them at full strength, which is what a flagship demo is for.

FAQ