How to build a Japanese-style website in Framer

What you're building

Two live examples, built from the same six steps below: MOTO, a Japanese skincare brand, and ASAGIRI, a Japanese tea brand. Open both on your phone. The layout logic is identical. The only things that changed between them are the palette, the photography, and the words.

That's the actual claim of this guide: the "system" (one accent color, two type voices, a section rhythm that survives editing) is reusable across a completely different brand, product, and mood. You don't need either paid file to prove it to yourself. There's a free one.

Grab the starter, not a blank canvas

MOTO Mini is a free one-page cut from the MOTO template: an editorial hero, a three-product grid wired to a CMS collection, and a footer. It's free specifically so you can use it as scaffolding, not as a finished product. Building on top of an existing system beats starting from an empty canvas for the same reason a contractor prefers a foundation that's already been surveyed: the hard decisions (how many colors, how many type voices, what order sections go in) are already made correctly. Your job is replacement, not invention.

01Get the file

Download MOTO Mini from Gumroad, open the file, and click Remix. The project lands in your own Framer workspace with the hero, the product grid, and the footer already built and already wired to a CMS collection. You're now editing, not building from zero.

02Replace the palette as a system

Three real values to start from, not placeholders:

• Paper: #F3EEE4, the warm off-white the file actually ships with. Swap for your own warm neutral if you want, but keep it warm, not stark white.
• Ink: #262320, a soft near-black for text and structure.
• Accent (pick exactly one): a single color that does one job — links, small labels, a price tag, a button. Never a section background. The moment an accent fills a whole section, it stops being an accent and starts being wallpaper.

Do this as a system replacement, not a scavenger hunt: find every place the original matcha green appears in MOTO Mini (the vertical kanji, the numbered product labels, the prices, the small "view" marks, the footer link) and swap all of them in one pass. Swapping one instance, publishing, then noticing three more later is how templates end up looking half-finished.

03Set the type pairing

Two voices, not five. One serif with actual character for headlines: Noto Serif JP or Shippori Mincho if your project uses Japanese type, or an equivalent characterful serif if it doesn't. One plain grotesque sans for body copy, something like Inter or Archivo, chosen specifically to stay quiet so the headline serif keeps the personality. If you're adding Japanese type as a decorative element (a vertical word in a margin, the way MOTO runs 発酵美容 beside its hero or ASAGIRI uses 朝霧) treat it as exactly that: a controlled moment or two, not a repeating motif on every section.

04Build the first-screen anchor

This is the step people skip, and it's the one that actually matters most. However minimal the design gets, three things have to survive on the first screen:

• An eyebrow line that names the category in plain words. Not poetry — a plain label like "Japanese skincare" or "Japanese tea." This is what tells a stranger what they landed on before they've read anything else.
• One clear call to action. Not two competing buttons, one.
• A hint of the actual product or work, not just mood. A photo of the tea, the cream, the thing being sold, somewhere above the fold or in the first scroll.

It's tempting to let one beautiful photo and a single line of poetry carry the whole first screen. It photographs well. It doesn't test well. A stranger lands, has about three seconds, and if they can't tell what the site is for in that window, restraint reads as confusion, not elegance. We learned this the direct way: an early version of ASAGIRI shipped without the eyebrow line and the product grid buried three scrolls down. It looked beautiful and told a visitor nothing. Adding one small label and moving the products up fixed it without touching the mood at all.

05Add your own content through the CMS

MOTO Mini's product grid is a CMS collection, not three hand-placed sections. Add, remove, or reorder items through the collection panel. Duplicating a section by hand to squeeze in a fourth item is the fastest way to break the spacing the template was built around — and it defeats the entire reason the collection exists.

06Check it on an actual phone

Before you publish: open it on a real phone, not a resized browser window. Click every link, including the footer. Confirm the og:image is your content, not a placeholder. Confirm your custom fonts actually loaded and didn't silently fall back to a system default.

The costume mistake

Swapping in a serif font and a photo of tea leaves isn't Japanese design if the section rhythm, the spacing logic, and the restraint underneath aren't there too. That's the difference between a costume and craft: a costume goes on top of the body, craft changes the shape of the body itself. If you followed the six steps above in order, palette as a system, then type, then the first-screen anchor, then content through the CMS, you built craft. If you only changed the photos and the headline font, you built a costume, and it'll show the moment someone scrolls past the hero.

FAQ