005WEBSITE RENEWAL, OSAKA · 2026

Parfun: a website redesign that hangs on a single thread

Parfun has made women’s innerwear for other brands since 1956, designed in Japan and sewn in Thailand. For the website redesign, Kuroko Labs took the design from the company name: a red thread runs through twelve pages, sews the logo, winds through production and dyes an entire section. Behind it, a platform is taking shape that receives enquiries for the group’s three companies and keeps them apart.

CLIENT

Parfun Co., Ltd.

YEAR

2026

INDUSTRY

OEM and ODM women’s innerwear

LOCATION

Minoh, Osaka Prefecture

Pages

static HTML, Japanese

Production steps

one thread from planning to inspection

Companies

one platform for their enquiries

Tests

37 against PostgreSQL 16

ALL CASE STUDIES

01 · IDEA

How does a company name become a design system?

The name comes from the founder. Kaoru Fujii opened a fabric shop in Osaka in 1956, and his given name 薫 means fragrance, parfum in French. In the code the design is called The Atelier Thread: Japanese craft and French lingerie, joined by a single thread.

The logo became the system. It is two rings, and on the home page they are sewn over and over without end. From there on crimson belongs to the thread alone, which means seams, emphasised words and exactly one filled section. The ground is ivory like undyed cloth. The dark areas are simply called night in the code.

Japanese is set in Shippori Mincho, the wordmark and years in Cormorant Garamond, the small capitals in Hanken Grotesk. Motion runs on two custom curves, ease-out and ease-silk. The second one starts slowly and takes its time to come to rest.

ivory#F7F4EE

ink#353B49

night#272B34

crimson#C40D4E

deep#8F0A39

Shippori MinchoJapanese headings and body text

Cormorant GaramondWordmark, years and numerals

Hanken GroteskSmall capitals and labels

02 · WEBSITE

Six places where the site tells a story

Every section of the home page has a movement that belongs to its content. On touch devices the site switches off smooth scrolling and the planes on the map, and anyone who has turned on reduced motion gets everything without animation.

01HERO1440 × 900

糸から、かたちへ

A logo that sews itself

Two rings, dashed like stitches, and the stitches never stop moving. On a first visit a preloader draws the logo and flies it into the header. Then, on the right, inside an arch cut like a pattern piece, a needle comes in and pulls the thread into the first ring.

02PHILOSOPHY1440 × 791

凡事徹底

A loupe on the seam

The motto reads あたりまえのことを、誰よりも丁寧に: do the ordinary things more carefully than anyone else. Next to it a seam draws itself, then a loupe slides in and zooms 2.8 times onto the stitch.

03CRAFT1440 × 900

一貫生産のものづくり

One thread through five production steps

Planning, engineering, knitting and dyeing, sewing, quality control. The cards alternate left and right, and the thread is calculated at runtime from their real positions.

Scroll down and the needle sews the cards in place. Scroll back and the stitches come undone. On a phone the cards stack, and the thread swings through their edge as a single curve.

05GLOBAL1440 × 900

生産・販売拠点

Japan and Thailand on one map

Parfun, Thai Parfun and Parfun Textile as points on a map. The tooltips stay inside the frame on narrow screens. Two planes take turns flying the route from Japan to Thailand, nineteen seconds a round.

No.03CRAFT1440 × 681

凡事一貫素肌持続年代

Every subpage carries two characters

Moving to a subpage, a seam unzips and two curtains part. Behind them every subpage carries a kanji pair as a watermark and a line drawing of its own. On the craft page a sewing machine assembles itself stroke by stroke, threads from the spool to the needle and starts to sew.

The company page has a building, the contact page an envelope. OEM shares 一貫 with craft, because both pages are about production under one roof.

Parfun, subpage Philosophy — 凡事Philosophy

Parfun, subpage Sustainability — 持続Sustainability

No.01MENU1440 × 900

No.01 to No.09

A menu that falls like cloth

On opening, a length of crimson drops first and the dark panel follows. The words rise out of hidden slits, the numbers glide in, and the dividers sew themselves. Closing has its own timeline and winds down just as calmly.

Desktop and phone, same moment

The switch shows the same moment at both sizes. The two versions differ most at the sewing thread.

On a phone the sewn logo slides below the headline and runs out of the frame.

03 · PLATFORM

What happens behind the contact form

The forms of the group’s three websites arrive in one platform, enquiries and job applications alike. Replies are written in a shared inbox, and the history stays with the case. Around it sit tasks, quotes, companies, open positions and an editorial tool for copy in three languages. Customers see their own cases in a portal. They can’t write anything there.

01SEPARATION

The database keeps the companies apart

PostgreSQL enforces row-level security on the tables. Without a company set, the application sees nothing at all, and no connection role may bypass the rules or owns a table. Anyone looking across companies ends up in an audit log that can only be appended to.

promises checked as tests

02FORM

The form may do exactly one thing

The public role has no table rights on the inbox. It calls a single function that does its own checking. The reply deadline comes from the category, and the sender can’t set it. Notifications contain neither the message nor the IP address, and anything held by the spam filter sends no email.

function open to the public

03ATTACHMENTS

Applications stay locked away

Attachments are stored encrypted and checked by file type. A virus scanner reads every file, and until it has answered, the platform won’t serve it. The customer portal and the public site can’t reach applications at all.

attachments served unscanned

承認欄 · crimson for approvals only

The admin has exactly one design device that says something about the content: the 承認欄, the row of small stamp boxes Japanese companies use to record an approval. Empty, dashed, ringed and hatched mean the same thing everywhere. Crimson appears there only for an approval and the active tab. The company sits permanently in the left rail, because mixing up companies would be the most expensive mistake this system could make.

As of September 2026 the platform is built and tested: 61 tests, 37 of them against a real PostgreSQL 16, each run starting from an empty database. Every backup run includes a trial restore, and an alarm goes off when the health report finds something. It goes into service with the move to its own server. Email delivery through Microsoft Graph is still waiting for credentials.

04 · SCOPE

What thirteen weeks produced

weeks, 12 June to 10 September 2026

commits

subpages with their own drawing

Excel lists in the last review round

On 12 June the home page and the first subpages were in place. A day later the home page was split into detailed pages of their own. July was quieter, and September brought the review rounds with Parfun and the platform.

Corrections arrived as numbered lists in Excel, and every item went in, down to a caption under a drawing that was removed on request. A whole materials page went in the same sweep. Its menu entry, footer link and sitemap entry went with it, and the menu has counted to No.09 ever since.

As of September 2026 the new site runs on a preview and is waiting for the domain switch.

TECH STACK

HTML, CSS, JavaScript

no framework, served static

GSAP 3.12

timelines and SVG drawing

ScrollTrigger

motion tied to scroll

Lenis

smooth scrolling, mouse only

Node.js

platform and form intake

PostgreSQL 16

row-level security

ClamAV

virus scan for attachments

nginx

delivery

OUTLOOK

Thai Parfun has its own website in the same design, built with Next.js in English, Japanese and Thai. How the same seam works in three scripts is the story of the next case study.

Website redesignWeb designGSAP ScrollTriggerSVG animationDesign systemMulti-tenancy

NEXT STEP

A Similar Project?

GET IN TOUCH ALL CASE STUDIES

Frequently asked questions, Parfun case study

How long did the Parfun website redesign take?+

From the first commit on 12 June to the state of 10 September 2026 it took 13 weeks and 93 commits. June went into building the pages, September into review rounds and the platform.

What technology runs the scroll animations?+

GSAP 3.12 with the ScrollTrigger plugin, and smooth scrolling comes from Lenis. Seams and drawings are SVG paths whose stroke is revealed as you scroll. On touch devices smooth scrolling and heavy ambient loops stay off, and with reduced motion turned on everything appears without animation.

Why is the Parfun website static HTML?+

Static pages load fast, need nothing on the server except nginx and stay online even when the platform is down. The platform’s editorial tool can generate pages. Getting it to reproduce the existing pages exactly is a separate step that is still ahead.

How does the platform keep the three companies’ data apart?+

In the database itself. PostgreSQL enforces row-level security, without a company set the application sees no rows, and no connection role may bypass the rules. Twelve such promises are written as tests against a real database.

What does a notification about a new enquiry contain?+

That an enquiry has arrived and where it belongs. The message text and the IP address stay inside the platform. The country an enquiry comes from is looked up offline from the public lists of the Regional Internet Registries, with no outside service involved.

Technology used

The scroll animation runs on GSAP ScrollTrigger, the separation of companies on row-level security in PostgreSQL. Both are well documented, so others can carry the work on.

The links lead to the documentation of each component.

Desired Service

PROJECT DETAILS

BUDGET

TIMEFRAME

CONTACT DETAILS

THANK YOU

ERROR

THANK YOU!