NEOFLYPINARELLO OFFICIAL IMPORTER · KOREA

The Line the Wind Drew

We redrew the website of NEOFLY, Pinarello’s official importer. On the first screen the wind outlines a bicycle, and light turns that outline into a real DOGMA F.

Client: NEOFLY
Scope: Website renewal proposal
Year: 2026

01 WIND
an invisible flow
Hundreds of thin flow lines cross the screen. Where the lines bend, a bicycle sits.
02 FORM
The shape the line draws
The outline of the frame and wheels remains wherever the laser passes.
03 LIGHT
DOGMA F touched by light
When the studio light passes, the line drawing becomes a real photograph.

04 LINE

e and o are one stroke

The e and o of neofly are one line drawn without lifting the pen. That line, joining two circles of the same size, falls onto the two wheels of the DOGMA F.

01 / OVERVIEWOverview

Pinarello,
onto Korea’s road

NEOFLY is the official Korean importer of the Italian bicycle brand Pinarello (PINARELLO). We import the road, gravel, MTB, and time trial lineups and MOST parts, and also supply wheels and cockpits from PARTINGTON, ONE-K, CRW, and V-SPRINT. We work with twelve official dealers nationwide around Pinarello House, our company-run store in Songpa, Seoul, and we also hold riding events such as Trans Alps in the Yeongnam Alps.

An importer’s website has to carry two names at once. Visitors come for Pinarello, but the advice, the servicing, and the rides together are NEOFLY’s. So this renewal began by deciding whose voice speaks. Reading the two logos side by side, we bound Pinarello’s wind and NEOFLY’s line into one sentence.

2
Number of drafts sentThe first draft in August 2026 and the main draft in November 2026
3
The directions of the first screens we comparedLine of Time · Line of Road · Line of Wind
240
Frames from the wind-tunnel film we rendered in-houseTwo sets: 1600 × 900 landscape and 720 × 1280 portrait
23
Files whose file name is a paint nameAmong the 95 photos selected from twelve years of uploads

2026.08NOWRead the current website
Reading the menu and product list, we began with a structure that splits road · gravel · MTB · TT.
2026.08ROUND 1First design proposal
We sent the first main screen — a dark grid with the lineup filter and A/S information — together with the proposal.
2026.11ROUND 2Three lines
We drew the first screen three ways — time, road, wind — compared them, and chose the wind.
2026.11ROUND 3Wind-tunnel film
We rendered the 240 frames of the wind outlining a bicycle directly in Canvas.
2026.11ROUND 4Main draft
Eight scenes, from the film’s opening screen to the shop finder and support.

02 / TWO MARKSTwo marks

Wind and line,
what the two logos share

Two logos sit on an importer’s website: the brand PINARELLO and the company neofly. Rather than choosing one, we enlarged both, laid them over each other in the same place, and read what each was drawing.

PINARELLO
The tapering P and its three streaks
The P in Pinarello is a single stroke that arcs down from the top and tapers to a needle at its end. Three short streaks sit to the left of the stem. We read those streaks as wind, because they are the trace left behind by something that passed quickly.
NEOFLY
A stroke connecting e and o
The e and o of neofly are not two separately written letters. A line that starts at the end of e’s horizontal stroke loops once around the e, crosses into an S, and finishes by circling the o. Measured on the logo drawing used in the draft (1,101px wide), that line is about 1,224px long — longer than the full width of the logo.
ONE SENTENCE
Two logos in one sentence
Join the wind and the line and it becomes the first sentence of the main draft: “The fastest line is drawn by the wind.” Pinarello’s streaks become the wind, and NEOFLY’s single stroke becomes the line that wind drew.

03 / TWO WHEELSTwo wheels

Pull e and o apart
and it becomes a bicycle.

One stroke alone was not enough. We fitted circles to the round parts of e and o and measured size and distance, then measured the two wheels of the DOGMA F the same way in the final scene of the wind-tunnel film.

DOGMA F side photo on white studio background

Center distance 2.23× radius

SAME SIZE
two circles of the same size
The circles fitted to the round parts of e and o have radii of 97.2px and 96.7px — a difference of 0.5%. Two circles of the same size joined by a single line look like the two wheels of a road bike.
DISTANCE
Only the spacing is different
In the logo the centers of the two circles sit 2.23 radii apart. In the DOGMA F of the film in the draft it is 2.90. Pull the o that far right and the e lands on the rear wheel, the o on the front wheel.
THE BIKE
DOGMA F under the logo
Lay the studio photograph beneath the opened stroke and the circle of e falls on the rear wheel, the circle of o on the front wheel, and the S-shaped stroke runs between the two wheels. The last scene of the first screen ends on this overlap.

Radius of e: 97.2px
Radius of o: 96.7px
Center distance in the logo: 2.23r
DOGMA F wheel spacing: 2.90r

04 / ARCHIVETwelve years of uploads

What changed most often
was not the model but the color

To find material for the draft we opened the upload folder posted on the website from 2014 to 2026. We picked 95 photos and 5 videos — 100 files in all — and 79 of them had been uploaded in 2025 and 2026.

Of the 95 photos, 23 carried a paint name in the file name itself. Every time a new color arrived on the same frame — Luxter Venice, Obsidian Emerald, Jade Spectra — one more photo joined them.

42014
12015
42016
02017
12018
12019
12020
02021
12022
42023
42024
222025
572026

Upload year of the 100 selected files. None of the selected files came from 2017 or 2021.

2025.06
2025.06
2025.06
2025.06
2025.06
2025.06
2026.01
2026.01
2026.06
2026.06
2026.06
2026.06
2026.07
2026.07
2026.07
2026.07
2026.07
2026.07
2026.07
2026.10
2026.10
2026.11
2026.11

We measured the paint color at the center of the frame in 23 photos that carried paint names, and laid them out in hue order. Neutral colors sit at the right end, starting with the lightest.

So we gave color two scenes in the main draft: at the end of the first screen, the four paints of the same DOGMA F are flipped through; then the four art paints are flipped through like posters.

05 / FIRST DRAFTFirst draft

It was tidy, but
whose story it was remained unclear

In August 2026 we sent the first main screen with the proposal: product photos laid in a grid on a dark ground, with the lineup filter, A/S information, shops, and support on one page.

Three months later we spread it out again and picked up a red pen. What to keep and what to change split clearly in two.

Full view of the main page of the August first draft: PINARELLO OFFICIAL KOREA heading, three product photos, three information cards, the lineup filter and product grid, events, shops, and support

1
Changed
Whose first sentence is it?
“PINARELLO OFFICIAL KOREA.” is true, but it is a sentence any other importer could use. In the main draft we changed the first sentence to the reason Pinarello shapes its frames.
2
Changed
Collage of three photos
The DOGMA X, F, and gravel photos sat side by side at the same size, leaving no decision about what to look at first. The main draft starts with a single DOGMA F.
3
What's left behind
Official import · A/S · Gran Fondo card
The card that cut what the importer does down to three lines worked well. We kept it in the introduction scene of the main draft as import and supply, official dealers, and riding events.
4
What's left behind
Lineup filter
A filter that splits ALL · ROAD · GRAVEL · MTB · TT was not on the current site. In the main draft it became tabs above the horizontally scrolling lineup.
5
Changed
Shops and directions
A single map shows only the head office. The main draft splits the twelve shops with region tabs, so the nearest one is found at once.

Contact details, address, representative, and business registration number on the first draft screen were replaced with other characters or covered.

06 / THREE LINESThree lines

Time, road, wind,
drawn with three lines

Before drawing the second draft we drew the first screen three times on the theme of “line”: a line of time beginning in 1952, a line of road from Seoul to the Yeongnam Alps, and a line of wind that traces the bicycle’s outline. All three screens describe the same company, but the subject of the first sentence differs.

ALINE OF WIND

The fastest line is drawn by the wind

The flow lines of the wind tunnel draw the outline of the bicycle, and light turns that outline into the real DOGMA F. The aerodynamics that explain why Pinarello shaves its frames became the staging of the first screen.

wind tunnel
outline
Studio light

Ink#050809
Teal#1FC2B0
Orange#FF5A1F
Paper#F3F1EC

Archivo 125% · 900 · Italic

Strengths: The product takes center stage and begins with a story unique to Pinarello.
Weaknesses: It takes the most work of all, because the film has to be rendered in-house.

PC first screen in the Line of Wind direction

Mobile first screen in the Line of Wind direction

BLINE OF TIME

The oldest line is drawn by time

We draw Pinarello’s time, begun in Treviso in 1952, on a single line of a time scale. Tall numerals and one red line on cream paper open it like the cover of an Italian cycling magazine.

1952
Treviso
magazine cover

Paper#F2ECE0
Ink#15130F
Treviso Red#C42B1C
Stone#B9AE9C

Archivo 62% · 900

Strengths: The weight of the brand comes through at once, and it sits well next to print.
Weaknesses: The story of being an old brand can also be said of other imported brands.

PC first screen in the Line of Time direction

Mobile first screen in the Line of Time direction

CLINE OF ROAD

The longest line is drawn by the road

One road, from our company-run store in Seoul to the ridges of the Yeongnam Alps, drawn on a contour map. The twelve dealers become stops on the route diagram.

contour line
stop
altitude

Slate#101418
Contour#26313A
Road#EEF0EA
Amber#FFB21A

Archivo 125% · 800 · Italic

Strengths: It shows best what NEOFLY does — shops and events.
Weaknesses: There are no bicycles on the first screen, and the road is a story of all bicycle brands.

PC first screen in the Line of Road direction

Mobile first screen in the Line of Road direction

The criteria for comparing the three first screens
standard	A Wind	B Time	C Road
Does it open with a story only Pinarello can tell?	Strong	Fair	Weak
Is the product visible on the first screen?	Strong	Strong	Weak
Does it show what NEOFLY does?	Fair	Fair	Strong
Is it easy to update when a new paint arrives?	Strong	Fair	Fair
Does the mobile first screen stand on its own?	Strong	Fair	Fair

StrongFairWeak

We chose the wind;
the road went to the ride scene

We left the first screen to the wind, because it opens with a story only Pinarello can tell and shows the product at its largest. The Line of Road, too good to throw away, moved into the ride scene of the main draft — the Trans Alps elevation profile and the shop tabs by region are what remains of it.

07 / COLORColor

The ground is ink and paper,
the accent comes from the frame

The ground of the main draft is three steps of near-black Ink plus Paper. These four colors cover most of the screen, with the two accent colors used very sparingly on top.

Orange #FF5A1F is the fourth colored button at the end of the first screen, the same color as INEOS Replica. Teal #1FC2B0 is the flow line color of the wind tunnel film and is close to the light side of the Aqua Alloy paint (#20BBC2). If you look at the 15 PC screen captures in the design, the two accent colors together do not take up even 1% of the screen.

Ink

#050809RGB 5 8 9
default background
This is the background color of the first screen and dark scenes.
Ink 2

#0B1214RGB 11 18 20
overlapping sides
Used on cards and menu panels inside dark scenes.
Ink 3

#131C1FRGB 19 28 31
Divider surface
The card’s border and the face one step lighter.
Paper

#F3F1ECRGB 243 241 236
bright background
The background of scenes you read — Overview, Parts, Shops.
White

#FFFFFFRGB 255 255 255
Text · Studio
Text on a dark ground; the white background of the studio photos.
Teal

#1FC2B0RGB 31 194 176
Line · Progress
Used only for the film’s flow lines, progress bars, and position markers.
Teal Deep

#0C7F75RGB 12 127 117
Teal on a light background
Used when teal is needed as text on a light ground.
Orange

#FF5A1FRGB 255 90 31
One point
We use it one dot at a time, only where it must be seen — as in the counterfeit notice.

Same frame, four expressions

JADE SPECTRA

Color buttons in the draft #0F8F84

#19423B46.2%
#226B6329.5%
#9B462E12.7%
#5FB5B211.6%

The share of painted pixels left after removing the white background and the neutrals of tires and parts, split into four groups.

RIDE THE SENSES, four art paints

OBSIDIAN EMERALDObsidian Emerald
1. #054248 48.1%
2. #449484 29.5%
3. #1F2223 13.6%
4. #256762 7.6%
5. #DAE4E3 1.2%
#054248#449484#1F2223
MOLTEN SANDMolten Sand
1. #F0D9BC 41.5%
2. #A38866 23.1%
3. #C9B08F 20.3%
4. #201F1E 10.6%
5. #4E4944 4.6%
#F0D9BC#A38866#C9B08F
COBALT PHANTOMCobalt Phantom
1. #6A5E90 38%
2. #9EC32D 36.9%
3. #262627 14.4%
4. #6B6B69 5.5%
5. #8E9E59 5.2%
#6A5E90#9EC32D#262627
PHANTOM ICEPhantom Ice
1. #D6D7D6 40.2%
2. #9D8D9C 36.3%
3. #222222 12.6%
4. #B9B0B9 8%
5. #595457 2.9%
#D6D7D6#9D8D9C#222222

A pair that can carry text

Text / Background	Contrast	Result	Use
White / Ink	`20.09:1`	Even small text	Headings and body text in dark scenes
Teal / Ink	`8.99:1`	Even small text	Progress bar, current location, short label
Orange / Ink	`6.44:1`	Body text OK	A single dot of warning, as in the counterfeit notice
Ink / Paper	`17.80:1`	Even small text	Body text on bright scenes
Teal / Paper	`1.97:1`	Not for text	Not for text on a light background
Teal Deep / Paper	`4.31:1`	Large text only	Small accent letters in bright scenes
Orange / Paper	`2.76:1`	Not for text	Only big numbers or dots
Ink / Teal	`8.99:1`	Even small text	Text on the teal button

Contrast ratios were calculated against WCAG 2.1. 4.5:1 and above is used for body text, 3:1 and above for large text.

08 / TYPEType

English wide and slanted,
Hangul set upright

The English title was written in Archivo, a variable font that allows you to change the width, thickness, and slant within a single font. If you set it to the widest width (125%), boldest (900), and italic, the letters will be slanted forward like the Pinarello logo.

Hangul keeps Pretendard upright; tilting Hangul or opening up its tracking only makes it harder to read. Wide tracking is for English labels alone.

RIDE WITH NEOFLY

DISPLAY · LATIN

DOGMA F
RIDE THE SENSES

Archivo · 125% · 900 · Italic

Used only for short English — model names, scene numbers, large closing lines.

HEADLINE · KOREAN

Pretendard · 800 · Tracking −3.5%

Korean titles stand bold with only slightly tighter tracking — never slanted.

LABEL

PINARELLO OFFICIAL IMPORTER · KOREA

Archivo · 112% · 600 · tracking 16%

English labels such as scene names and menus are set slightly wider, with 16% tracking.

09 / THE FILMThe film

Wind,
drawn in 240 frames

We drew the film on the first screen in the browser’s Canvas instead of buying video footage. The screen was split into a 4px grid, the distance from each grid point to the bicycle outline was calculated, and 210 flow lines followed that distance, bending around the bike. Because the same random seed is used, the scene comes out identical however many times it is redrawn.

WINDWind

FRAME 061 / 240

Choosing a film frame

001 – 060 · WIND
389 flow lines
We layered 210 flow lines in the foreground, 170 distant lines in the background, and 9 blurred lines passing across the front. About 12% of the flow lines are orange; the rest are teal and pale mint.
061 – 150 · FORM
Two radii wrapping the outline
The line follows both a narrow radius that hugs the outline and a wide radius that sweeps in from far away. A laser sheet passes over it, leaving the lines of the frame and wheels.
151 – 240 · LIGHT
The line lifts and only the photo remains
The studio light passes at an angle and the flow lines slowly fade, until the last shot is only the DOGMA F photograph on white. A separate 720 × 1280 set was rendered for portrait screens.

10 / STRUCTUREStructure

People who buy, people who own,
people who ride

Three kinds of people come to an importer’s website: those choosing which model to buy, those who want to keep riding the bike they already own, and those looking for a place to ride with others. Five menus and one shopping button were laid out along those three paths.

BUY

People who buy

A person choosing which model to buy

PINARELLOSeven lineup branches and paints
PARTS & WHEELSMOST parts and wheels
SHOPSShops for test rides and fittings
SHOPPING ↗Smart Store

OWN

People who own

People who want to ride a bicycle they have already purchased for a long time

SUPPORTCounterfeit notice · Manual · Warranty
SUPPORTA/S inquiry
SHOPSMaintenance near you

RIDE

people who ride

People looking for a stage to ride together

RIDETrans Alps · Gran Fondo
SUPPORTCafe · Blog · News

Eight scenes, 32,571px

Wind-tunnel film · Four colors7,380
Introduction1,424
Lineup8,254
Art paint3,780
Parts · Wheels4,233
Ride · Trans Alps3,610
Official dealers1,711
Support · Closing1,880

The scroll length of the main draft, top to bottom, on a 1440 × 900 screen. The dark bar marks the pinned sections where scenes change on a fixed screen — 84% of the whole.

11 / MAIN DRAFTMain draft

Main draft · Line of Wind

LINE OF WINDEight scenes that open with the wind-tunnel film and close with shops and support

It opens with a film in which the wind draws a bicycle, then moves down through four paints, a seven-branch lineup, art paint, parts and wheels, riding events, shops, and support.

240 frames of wind-tunnel film turned by scroll, and four paints
Seven lineup branches, with vertical scroll turned horizontal
Twelve official dealers, narrowed by region tab
Mobile renders 240 frames of vertical film separately

Ink · Teal · Orange · Paper

Same frame, four expressions
When the film ends, four paints of the same DOGMA F scroll past. The background follows the paint.
Horizontally scrolling lineup
The vertical scroll becomes horizontal movement, carrying you along the seven branches of the model in one row. The tabs above tell you which branch you are in.
Art paint poster
RIDE THE SENSES — the four paint schemes pass one by one, each wiped away like a poster.
Stacking parts cards
MOST · PARTINGTON · ONE-K · CRW cards stack up one by one.
Elevation profile of the Trans Alps
The climbs and descents of the Yeongnam Alps ridge become a single line, with the length of three courses written as numbers.
Shop finder by region
Region tabs — All · Seoul · Gyeonggi Incheon · Yeongnam — narrow the twelve down.

In the screen recording, the ride footage was replaced with a clip of the same length using only cuts without faces, and NEOFLY’s address and phone number and the shop’s address, phone, and email were replaced with other characters or blurred.

12 / DETAILDetails

A device for choosing, finding, and
verifying

Visitors touch three places in the main draft: tabs that split the lineup, tabs that narrow the shops by region, and a notice that tells counterfeits apart. You can press them below.

01 · LINEUP

The roads differ; the standard is one.

01
ROAD · RACE
DOGMA F
Race bike with Grand Tour speed
02
ROAD · ENDURANCE
DOGMA X
Farther, more comfortable. A DOGMA for the long day.
03
ROAD · RACE
F SERIES
Race geometry, built up as a complete bike
04
GRAVEL · RACE
DOGMA GR
DOGMA for gravel racing
05
GRAVEL · ADVENTURE
GREVIL MX
Gravel bikes start where the tarmac ends.
06
MTB · CROSS COUNTRY
DOGMA XC
Full suspension for cross-country racing
07
TIME TRIAL · TRIATHLON
BOLIDE F
Aero machine for riders who race against the clock

In the main draft the list travels sideways with the vertical scroll, and the tabs above show which branch you are viewing.

02 · OFFICIAL SHOPS

See one in person, near you

12places

Songpa, SeoulCompany-run store · Pinarello House
Songpa, Seoul
Songpa, Seoul
Seocho, Seoul
Seongnam, Gyeonggi
Guri, Gyeonggi
Gimpo, Gyeonggi
Seo-gu, IncheonStockist
Suseong, Daegu
Gumi, GyeongbukStockist
Jung-gu, Ulsan
Hadong, Gyeongnam

The main draft carries each shop’s name, address, and phone number. In these records we kept only the region names.

03 · NOTICE

Beware of DOGMA counterfeits

Counterfeits that are not official imports are circulating, so the first card of the support scene carries a note with an orange dot. Press “How to tell a genuine product” and a notice opens, comparing the genuine and counterfeit head tube, logo, and finish side by side.

Upper part of the DOGMA counterfeit notice: genuine and counterfeit frames compared

13 / RETROSPECTLooking back

Why we chose the wind
is still the same

We proposed several directions — the first draft in August, the main draft in November, and the three lines drawn in between — but they did not lead to a final selection.

Still, if we had to decide again, we would leave the first screen to the wind. The reason Pinarello shaves its frames the way it does and the reason NEOFLY brings those bicycles to Korea belong in the same scene.

ROUND 1The first draft in August
The first main screen: lineup filter and A/S information on a dark grid
ROUND 2Three lines
Three first screens drawn with time, road, and wind, and the evaluation table
ROUND 3Wind-tunnel film
240 frames rendered directly in Canvas, in two sets — landscape and portrait
ROUND 4November’s main draft
Eight scenes: film, four colors, lineup, art paint, parts, ride, shops, and support

01A company with two names decides the order first.
The first draft set the title large in PINARELLO, and the earlier version of the main draft also carried PINARELLO in the header logo. In the final revision we changed the header logo to neofly and placed the PINARELLO logo in the footer alongside it. Pinarello tells the story; NEOFLY gives the guidance.
02Each color is given a separate scene.
New paints arrive every season. Build the slot in advance so that changing one photo is enough, and a new color never means rebuilding the whole site.
03Contact details sit with the twelve dealers.
The importer runs only one store itself; consultation and servicing happen at twelve. Region tabs shorten the list so the nearest one is found at once.

14 / CREDITSCredits

PROJECT CARD2026

NEOFLY · WEBSITE RENEWAL