Cosmowork Inc. | Beyond the template look

Raising a template into raw material. Rebuilding brand value through the beauty of Japanese type

We overturned the idea that a template means a mass-produced site. In this project we rebuilt an English-language design in the context of Japanese typography, and delivered a site with a short schedule and low cost that still carries the brand’s own breath.

The result goes beyond template customization: it is a redesign.

Background

Use an overseas template as-is and, however beautiful it looks, the Japanese text floats on top of it. Cramped character spacing, misaligned line breaks and a broken rhythm of white space were quietly undermining trust.

The client also wanted to establish a tone fitting for a period of rebranding, so we proposed Webharu’s template plan.

How Webharu’s template plan runs

To guarantee quality even within a limited schedule and budget, Webharu
works through clearly defined steps in every template project.

1. Kick-off interview (once the project is confirmed)

We start by carefully hearing out the client’s business background, objectives and the impression they want to make.
Rather than design preference, Webharu clarifies who is being addressed, what is being said and how — and settles the direction of the brand tone.

2. Template selection and structural design

Taking the template the client wanted as the base, we redesign its structural elements.
Instead of using the existing template as-is, we work on the principle of borrowing the structure and rebuilding on it. Webharu also handled purchasing the template on the client’s behalf.

3. Design customization and Japanese optimization

Starting from the white space and grid proportions of the English-language design, we redesign character spacing, leading and line breaking to suit Japanese fonts.

New design areas are confirmed in Figma while implementation and design revision run in parallel. Brand colors and heading hierarchy are also adjusted to the Japanese context.

4. Webflow build and responsive tuning

We implement in Webflow alongside the design adjustments, optimizing the display for desktop, tablet and smartphone alike.

Running the build and the design together lets us finish without dropping quality, even on a shorter than usual schedule.

5. Launch and operational support

After launch we support analytics (GA4 / GTM) and SEO meta optimization, and we are set up to take on continuous maintenance and update work as required.

Webharu’s approach

Rather than a simple refresh, we treated the template as a foundation for redesign. Layout structure, white space theory and font hierarchy were reviewed from zero, on the premise of the context in which Japanese reads most beautifully.

The first view was redesigned as fully original work. We took apart the grid structure of the English template and rebuilt the visual flow for Japanese.

Key customizations

Typography reengineering

We redefined leading, character spacing and line breaking with the proportions specific to Japanese fonts in mind, so the eye is led naturally down the information hierarchy.

First-view redesign

We built a copy structure that delivers the brand’s core message in a single line, and rebuilt the hero section proportions and CTA placement entirely.

Color grammar

With the brand color at the center, we organized the tonal gradations — separating by brightness, drawing the eye with saturation.

Responsive direction

Line breaking is optimized for the ratio of kanji, kana and Latin characters, keeping the text natural and unbroken at any device width.

Micro interaction design

Refined movement within a sense of calm: a 0.3-second transition design that balances speed and texture.

Scope of work

Webflow build / template redesign / Figma design / brand tone direction

What we cared about

A template is not a mould — it is material. Read the intent of the design and breathe the rhythm of Japanese into it, and you get a rebuilt design that goes beyond the template.

Webharu holds to a design philosophy in which cost optimization and the redefinition of beauty are achieved together.

In closing

Understand the structure, rebuild it with a point of view.
That is Webharu’s template redesign.