Zostel
Language

Illustration & motion

Drawn in the book. Alive today. Five landscapes, drawings that breathe, points and lines from India, Nepal and Thailand — and every move: depart quick, travel steady, arrive soft.

Five landscapes

One scene for each colour family, built only from the master drawings and layered for motion, each with its four verbs. Use them as posters, headers and backdrops. In the film they travel; here they breathe.

Sunny Days — the desert: an illustrated landscape
Sunny Daysthe desert · Jaisalmer, Jodhpur, Pushkar
EXPLORE · SEE · TRAVEL · GROW
Waters — the backwaters: an illustrated landscape
Watersthe backwaters · Alleppey, Kochi, Varkala, Goa
PLAY · STRETCH · LIFT · BREATHE
Fields — the green hills: an illustrated landscape
Fieldsthe green hills · Munnar, Coorg, Wayanad, Ooty
RUN · CLIMB · CHASE · LAUGH
Flowers — the festival city: an illustrated landscape
Flowersthe festival city · Delhi, Jaipur, Varanasi, Mumbai
MEET · DANCE · EAT · BELONG
Valleys — the mountains at night: an illustrated landscape
Valleysthe mountains at night · Manali, Spiti, Leh, Bir
CLIMB · GAZE · REST · RISE

33 rooms

The Zo World rooms, from the bonfire to the front desk, ported item by item from the illustrators' originals into the landscapes' grammar: the master drawings and the kit's props, flat colours, the same named layers and a 16 s loop. Each comes wide and tall, for backdrops and stories.

Bonfire — a night camp round the fire, the moon over the trees: an illustrated room
Bonfirea night camp round the fire, the moon over the trees
Common room — the hostel's common room, the hills in the window: an illustrated room
Common roomthe hostel's common room, the hills in the window
Camper van — a van, a tent and a barbecue in a meadow: an illustrated room
Camper vana van, a tent and a barbecue in a meadow
Alien abduction — saucers over blue peaks on a moonless night: an illustrated room
Alien abductionsaucers over blue peaks on a moonless night
Beach — umbrellas, surfboards and a van by the sea: an illustrated room
Beachumbrellas, surfboards and a van by the sea
Christmas — a winter terrace under a full moon: an illustrated room
Christmasa winter terrace under a full moon
Christmas 2 (the snow camp) — a snow camp of igloos at dusk: an illustrated room
Christmas 2 (the snow camp)a snow camp of igloos at dusk
City (the neon alley) — a neon alley at night: an illustrated room
City (the neon alley)a neon alley at night
Content studio — a content studio, its cameras and screens: an illustrated room
Content studioa content studio, its cameras and screens
Cottage house room — a cottage room in the mountains, late afternoon: an illustrated room
Cottage house rooma cottage room in the mountains, late afternoon
Cricket club — a cricket clubroom, the match on the screen: an illustrated room
Cricket cluba cricket clubroom, the match on the screen
Desert — dunes and a camel caravan at sunset: an illustrated room
Desertdunes and a camel caravan at sunset
Design studio — a design studio, its blackboard and swatches: an illustrated room
Design studioa design studio, its blackboard and swatches
Diwali — a terrace of diyas and lanterns on Diwali night: an illustrated room
Diwalia terrace of diyas and lanterns on Diwali night
Football club — a football clubroom, the match on the screen: an illustrated room
Football cluba football clubroom, the match on the screen
Front desk — the front desk, a lake and pines through the glass: an illustrated room
Front deskthe front desk, a lake and pines through the glass
Halloween (the graveyard night) — a haunted house and its pumpkins on a teal night: an illustrated room
Halloween (the graveyard night)a haunted house and its pumpkins on a teal night
Haunted (the dark graveyard) — a dark graveyard under a yellow moon: an illustrated room
Haunted (the dark graveyard)a dark graveyard under a yellow moon
Jungle — deep jungle: a hornbill, a giraffe, the ferns: an illustrated room
Jungledeep jungle: a hornbill, a giraffe, the ferns
Mafia (the village night) — a village at night: huts, a well and fireflies: an illustrated room
Mafia (the village night)a village at night: huts, a well and fireflies
Marketing studio — a marketing studio, the chart on the screen: an illustrated room
Marketing studioa marketing studio, the chart on the screen
Milky Way — a camp under the Milky Way: an illustrated room
Milky Waya camp under the Milky Way
Nature — a painted day of hills, trees and a lake: an illustrated room
Naturea painted day of hills, trees and a lake
Outdoor concert — an open-air stage on a clear afternoon: an illustrated room
Outdoor concertan open-air stage on a clear afternoon
Photographers' studio — a photo studio: the softbox, the tripods: an illustrated room
Photographers' studioa photo studio: the softbox, the tripods
Pirate (the ship's deck) — a sailing ship's deck in bright sun: an illustrated room
Pirate (the ship's deck)a sailing ship's deck in bright sun
Psychologist's room — a quiet room: a couch, a lamp, an inkblot: an illustrated room
Psychologist's rooma quiet room: a couch, a lamp, an inkblot
Republic Day — a fly-past over Delhi's monuments: an illustrated room
Republic Daya fly-past over Delhi's monuments
Sankranti — a rooftop of kites on a clear morning: an illustrated room
Sankrantia rooftop of kites on a clear morning
Sports (the games room) — a games room: pool, darts and the match: an illustrated room
Sports (the games room)a games room: pool, darts and the match
Startup — a startup office by day: an illustrated room
Startupa startup office by day
Tech (the server room) — the server room at night: an illustrated room
Tech (the server room)the server room at night
Valentine street — a cafe street of hearts and balloons: an illustrated room
Valentine streeta cafe street of hearts and balloons

Living drawings

47 spot drawings in the brand's hand, each with one quiet loop: the sun turns, the lantern swings, the train runs through the hills, and a small Zobu walks the trail and rides the road. Each comes as a still SVG, an animated SVG and a Lottie.

Sun
Sun6 s

The rays turn slowly.

Moon
Moon4.8 s

A glow passes out through the rings of points.

Stars
Stars4.8 s

The seven points twinkle in turn.

Clouds
Clouds6 s

Two clouds drift past each other.

Rain
Rain2.4 s

Rain falls in short strokes.

Snow
Snow6 s

Points of snow drift down.

Sunrise
Sunrise6 s

The sun rises, rests and sinks back.

Shooting star
Shooting star4.8 s

A point crosses the night; its line fades after it.

Night sky
Night sky4.8 s

Points of the lattice twinkle.

Fir
Fir4.8 s

Sways from the root.

Arches tree
Arches tree4.8 s

Sways from the root.

Fan tree
Fan tree4.2 s

The fan sways from the root.

Dots tree
Dots tree4.8 s

Sways; its points glow in turn.

Field
Field3.6 s

The stalks sway as the wind crosses them.

Waves
Waves4.8 s

The wave lines slide past each other.

River
River4.8 s

The water flows downstream.

Mountain and cloud
Mountain and cloud6 s

A cloud passes the peak.

Birds
Birds3.6 s

Three birds beat their wings, out of step.

Fish
Fish3.6 s

The tail beats and bubbles rise.

Butterfly
Butterfly2.4 s

The wings open and close.

Flower
Flower6 s

Rests in bloom, closes, and opens again petal by petal.

Falling leaf
Falling leaf6 s

Two leaves swing down and fade.

Tent
Tent3.6 s

The flag flutters.

Campfire
Campfire3.6 s

The flames flicker and sparks rise.

Backpack
Backpack3 s

The tag on the pocket swings.

Compass
Compass6 s

The card swings as you turn, then settles on north.

Map and route
Map and route4.8 s

The route draws itself to the pin.

Boots
Boots2.4 s

One boot steps, then the other.

Toy train
Toy train6 s

The train passes through the hills.

Camera
Camera3.6 s

The focus ring turns and the shutter blinks.

Lantern
Lantern3.6 s

Swings from its hook; the flame flickers.

Bunting
Bunting3.6 s

The flags ripple along the cord.

Hot-air balloon
Hot-air balloon6 s

Floats up and down.

Walker
Walker2 s

Zobu walks on, heel to toe, his arms swinging; the trail passes under his feet at his pace.

Cyclist
Cyclist2 s

Zobu pedals on, a turn of the crank a second; the road runs under the wheels.

Inbox, all answered
Inbox, all answered4.8 s

The answered letter lifts out of the envelope and settles back.

Bookings, none for this filter
Bookings, none for this filter6 s

A ring looks from day to day and finds the dates free.

Tasks, all done
Tasks, all done4.8 s

The ticks land one after another, and the list rests done.

Payouts, none yet
Payouts, none yet4.8 s

The coin hovers over the slot, ready.

Quests, none nearby
Quests, none nearby4.8 s

The boards turn a little, as if the wind asked which way.

Zo friends, none here yet
Zo friends, none here yet4.8 s

The steam rises from the poured chai; the other cup waits.

Notifications, all caught up
Notifications, all caught up6 s

The bell rests; three points of quiet glow in turn.

Reports, no data for this range
Reports, no data for this range4.8 s

The empty bars' points flow round their outlines, waiting for data.

Staff, no one rostered
Staff, no one rostered4.8 s

The badge swings gently on its hook.

Media, no photos yet
Media, no photos yet6 s

The sun rises in the empty frame and sets again.

No signal
No signal4.8 s

The near arc glows; the far arcs reach out and fade before they arrive.

A closed gate
A closed gate4.8 s

The padlock sways a little on the closed gate.

Points and lines

Points and lines from India, Nepal and Thailand, as quiet backgrounds: the structure of a living craft, never its pictures, always with its source. One weight: a 1 px line, a 2 px point.

Khovar

Hazaribagh, Jharkhand

Women in Hazaribagh, Jharkhand, comb khovar through wet white clay to the dark earth beneath, on the walls of the wedding room. We took the Brand Manual's rings of points on a triangular lattice; we left the animals, the plants and the wedding.

Three rings of points on a triangular lattice.

SVG
White at 6.3% on #43474Btile 48 × 83 pxone-colour tileen.wikipedia.org

Gond scales

Madhya Pradesh

Gond painters of Madhya Pradesh fill every figure with their own pattern of dots, dashes, lines or scales. We took the Brand Manual's scales — three nested arcs, row on row; we left the figures and the stories they tell.

Three nested arcs, each row half a step over.

SVG
White at 6.3% on #43474Btile 48 × 48 pxone-colour tilememeraki.com

Gond lines

Madhya Pradesh

Gond painters of Madhya Pradesh fill every figure with their own pattern of dots, dashes, lines or scales. We took the Brand Manual's banded lines and strokes; we left the figures and the stories they tell.

A double line, then two rows of strokes, half a step apart.

SVG
White at 6.3% on #43474Btile 40 × 48 pxone-colour tilememeraki.com

Kolam

Tamil Nadu and the south

A pulli kolam is drawn in rice flour at the doorstep, mostly by women, across South India: the points first, then lines that loop around them — at their best, one unbroken line. We took the point lattice and the one line; we left the ritual.

Ours: one unbroken line loops every point; grow it by adding points.

SVG
White at 6.3% on #43474Btile 90 × 90 pxone-colour tiledirect.mit.edu

Jaali

India · ours

Pierced stone screens — jaali, a net — let air and light into Indian buildings and keep out the sun. Ours is the Zostel symbol's own 60° lattice, copied from no building.

The symbol's 60° lattice: triangles of light, a point where six bars meet.

SVG
White at 6.3% on #43474Btile 52 × 90 pxone-colour tileen.wikipedia.org

Leheriya

Rajasthan

Dyers in Jaipur and Jodhpur roll the cloth from one corner to the opposite edge, tie it and dye it, and it opens in waves — lehar. We took the diagonal and the wave, drawn as lines; we left the dye.

Waves on the diagonal, in pairs, as the ties leave them.

SVG
White at 6.3% on #43474Btile 48 × 48 pxone-colour tileen.wikipedia.org

Bandhani

Gujarat and Rajasthan

The cloth is pinched and tied at hundreds of tiny points before it is dyed — bandh, to tie; in Kutch the tying is done by Khatri women. We took the points and their groups — four together (chaubundi), one alone (ekdali); we left the figures they make.

Points in fours on a half-drop lattice, one alone between.

SVG
White at 6.3% on #43474Btile 24 × 24 pxone-colour tileen.wikipedia.org

Kantha

Bengal

Women in Bengal layer old saris and quilt them with a running stitch, and the cloth ripples under the thread. We took the running stitch, row on row; we left the pictures sewn inside.

A stitch, a gap, row on row — every other row half a stitch over.

SVG
White at 6.3% on #43474Btile 48 × 32 pxone-colour tileen.wikipedia.org

Dhaka

Nepal

Woven on small handlooms in Nepal's hills — Terhathum in the east, Palpa in the west — mostly by women, a second weft laid in to build diamonds and zigzags. We took the diamond, drawn as the loom draws it: in steps.

Diamonds in steps, a point at the heart, each row half a step over.

SVG
White at 6.3% on #43474Btile 36 × 36 pxone-colour tileasiainch.org

Pha khao ma

Thailand

Woven at home across Thailand, the checked pha khao ma is worn, bathed in, sat on and carried in. We took the check — warp and weft crossing — as lines.

Warp and weft bands, each drawn as its two edges; a point where they cross.

SVG
White at 6.3% on #43474Btile 32 × 32 pxone-colour tilethaipbsworld.com

Kullu shawl

Himachal Pradesh

Women and men in the Kullu valley weave a plain shawl and finish both ends with bands of geometric patterns, set from memory, never from graph paper; the patterns came with weavers from Rampur Bushahr and Kinnaur. We took the band and drew it as lozenges touching at their points, a lozenge inside each, points along its edges; we left the colours (up to eight in a design) and the flowers.

A band of lozenges, a lozenge inside each, points at its edges; then the plain shawl.

SVG
White at 6.3% on #43474Btile 32 × 36 pxone-colour tilehimcoste.hp.gov.in

Paithani

Maharashtra

Paithani saris are woven in Paithan and in Yeola. Where the border meets the body, their threads interlock (kadi, a chain, so the weave is called kadiyal), and the back of the sari looks nearly the same as its face. We took the interlock: wefts meeting at a seam and turning back round each other, pass by pass; we left the peacocks, the parrots and the lotuses.

Wefts turn back round each other at a seam: a chain, a point in every turn.

SVG
White at 6.3% on #43474Btile 32 × 12 pxone-colour tilesearch.ipindia.gov.in

Kasuti

Karnataka

Kasuti is embroidered by women around Dharwad and Hubli, counting the threads of warp and weft with no outline traced, so both sides of the cloth look alike. Its stitches are gavanthi, murgi, negi and menthi, a cross like a fenugreek seed, used to fill the ground. We took the menthi: crosses counted on the cloth's grid, a point in each empty hole; we left the temple towers, chariots, lamps and lotuses.

Crosses counted on the cloth's grid, never touching; a point in each empty hole.

SVG
White at 6.3% on #43474Btile 16 × 16 pxone-colour tilesearch.ipindia.gov.in

Alleppey coir

Kerala

Since 1859, families in the Ambalapuzha and Cherthala taluks of Alappuzha, most of the workers women, have woven coir mats and mattings on heavy handlooms; woven on three or four shafts, the matting takes a herringbone. We took the herringbone, on its side: short ribs in rows, one row slanting up, the next down, a gap at the spine.

Short ribs in rows, one row up, the next down: a herringbone on its side.

SVG
White at 6.3% on #43474Btile 20 × 24 pxone-colour tilesearch.ipindia.gov.in

Khatamband

Kashmir

In Srinagar, khatamband ceilings are fitted by hand, without glue or nails: thin wooden polygons set into grooved battens running in every direction, one motif repeating over the whole surface; many designs are built on hexagons. We took the hexagons and the battens between them, a point where three battens meet; we left the stars.

Hexagons fitted between battens, a point where three battens meet.

SVG
White at 6.3% on #43474Btile 28 × 48 pxone-colour tilesearch.ipindia.gov.in

Banaras brocade

Uttar Pradesh

Weavers in Varanasi and the districts around it weave Banaras brocades, the pattern thread thrust between the warp, once on draw looms and now on jacquards. A sari's body can be laid out as a flowing diamond, a net with a figure inside every opening. We took the net and a point for each figure; we left the mangoes, the flowers and the arches.

A flowing diamond net, a point in every opening.

SVG
White at 6.3% on #43474Btile 32 × 48 pxone-colour tilesearch.ipindia.gov.in

Ringal

Uttarakhand

Across Uttarakhand's hills, artisans split ringal, the dwarf bamboo, into strips of different widths for warp and weft, and weave mats, baskets and winnows; the mats are woven in a basket weave. We took the basket weave, drawn as strips in threes, level in one block and upright in the next; we left the light and dark splits.

Strips in threes, level in one block, upright in the next.

SVG
White at 6.3% on #43474Btile 32 × 32 pxone-colour tilesearch.ipindia.gov.in

Lepcha weave

Sikkim, Kalimpong and Darjeeling

The Lepcha (Rong) weave of Sikkim and the Kalimpong and Darjeeling hills is woven on the backstrap loom; its cloth was traditionally stripes of different thickness, set in the warp. We took the stripes, a group of eight (aa-shyer) close and wide by turns, and the arrow tips laid sideways (tsulot-tyet); we left the motifs and the colours.

Stripes in a group of eight, close and wide by turns; arrow tips laid sideways.

SVG
White at 6.3% on #43474Btile 72 × 20 pxone-colour tilesahapedia.org

Nambu

Ladakh

Nambu is Ladakh's handspun, handwoven wool: men weave it on foot looms where people farm, women on backstrap looms in Changthang. It is a twill, a diagonal rib, woven in narrow panels that are then joined. We took the rib inside each panel and the stitches of the join; we left the motifs.

A twill's diagonal ribs in narrow panels, stitched edge to edge.

SVG
White at 6.3% on #43474Btile 56 × 32 pxone-colour tilesearch.ipindia.gov.in

Phulkari

Punjab, Haryana and Delhi

Phulkari is embroidered in darning stitch from the back of the cloth, counting its threads, never tracing a design; level, upright and slanting stitches make the pattern. Its registration names Punjab, Haryana and Rajasthan, and the chhamas phulkari came from Rohtak, Gurgaon, Hissar and Delhi. We took the darning: lozenges made only of stitches, level in one and upright in the next; we left the figures, the mirrors and the bridal pieces.

Lozenges made only of darning, level in one, upright in the next.

SVG
White at 6.3% on #43474Btile 24 × 24 pxone-colour tilesearch.ipindia.gov.in

Hexagonal weave

Assam and Meghalaya

In Assam the jaapi, the bamboo hat, is woven in an open hexagonal design; in the Khasi hills the knup, a rain shield, and baskets are woven the same way: strips in three directions, open hexagons and small triangles between them. We took the weave, each strip a band over one and under the next; we left the flowers, creepers and rhinos of the decorated (phulam) jaapi.

Strips in three directions, over one and under the next: open hexagons, small triangles.

SVG
White at 6.3% on #43474Btile 76 × 44 pxone-colour tilesearch.ipindia.gov.in

Ikat chowka

Telangana and Andhra Pradesh

In double ikat, warp and weft are tied and dyed before weaving so that they meet exactly in the motif, its edge feathered where the yarn shifts. Telia rumals were woven in Chirala, in Andhra Pradesh, until the 1930s, and fishermen on the Andhra coast still wear them; Puttapaka in Telangana weaves them now. The telia rumal is one kind of Pochampally ikat, which is known by its chowka, a diamond within a square. We took the chowka, a point at its heart, its edges feathered; we left the parrots, elephants and flowers.

A diamond within a square, a point at its heart, its edges feathered.

SVG
White at 6.3% on #43474Btile 28 × 28 pxone-colour tilesearch.ipindia.gov.in

Maheshwari

Madhya Pradesh

Maheshwari saris are woven in Maheshwar and Kasrawad, on the Narmada, 92 km south of Indore. Their border looks alike from both sides, its geometric designs taken from the carvings on the walls of Maheshwar's fort; the eent, brick, is one of them. We took the eent: bricks in courses, each course half a brick over; we left the flowers and the waves.

Bricks in courses, each course half a brick over, a point in every brick.

SVG
White at 6.3% on #43474Btile 24 × 20 pxone-colour tilesearch.ipindia.gov.in

In use

Language
Meet. Eat. Belong.

A friend in every corner.

A page header. Kolam on Steel Grey, drifting one tile a minute.
Fri · 9 pm
Jam night
Zostel Jaipur
Join
A card. Bandhani on Beige behind a label, never behind the words.
JaipurLeheriya
PushkarBandhani
IndoreMaheshwari
ChennaiKolam
KolkataKantha
PokharaDhaka
PhuketPha khao ma
UdaipurLeheriya
A place tile. Each place in its own colour, wearing its own region's pattern first.

Principles

  1. Points and lines. Every pattern is a lattice of points and the lines that loop, join or cross them: one weight, a 1 px line and a 2 px point.
  2. Structure, not motif. We take how a pattern is built — its lattice, its step, its rhythm — never its pictures.
  3. Name the source. Every pattern says where it comes from and who makes it.
  4. Nothing sacred. No deities, no temple or ritual motifs, no symbols of faith.
  5. Tone on tone. A shade lighter or darker than its ground: 5–10% contrast, never more behind small text.
  6. One pattern per surface. One pattern, one ground. Never two patterns side by side.
  7. A place wears its own region's pattern first. Jaipur wears leheriya, Chennai kolam, Pokhara dhaka, Phuket pha khao ma. A place with no pattern of its own wears the brand's: khovar, gond, jaali.

Credits

  • Anika Sarin — “The Kolam Drawing: A Point Lattice System”, Design Issues 38(3), Summer 2022 (MIT Press)

    A lattice of points instead of a grid; one line that loops or joins the points; a 45° module; symmetry and repetition — grow a drawing by adding points. And the credit Sarin gives: to the women who draw kolams, and taught each other how.

  • Zostel Complete Brand Manual — Vol 2, June 2015, p34–37

    “These are contemporary, minimal and derive forms from Indian art forms” (p34) — and the khovar and gond textures (p36–37), where this set begins.

  • The makers

    The women painters of Hazaribagh · The Gond painters of Madhya Pradesh · The kolam artists of South India · The stone carvers of India's screens · The leheriya dyers of Rajasthan · The bandhani makers of Kutch and Rajasthan · The kantha makers of Bengal · The dhaka weavers of Nepal · The weavers of Thailand · The weavers of the Kullu valley · The Paithani weavers of Paithan and Yeola · The women who embroider kasuti, around Dharwad · The coir weavers of Alappuzha · The khatamband craftsmen of Srinagar · The weavers of Banaras · The ringal weavers of Uttarakhand · The Lepcha (Rong) weavers · The nambu weavers of Ladakh · The phulkari embroiderers of Punjab and Haryana · The bamboo weavers of Assam and the Khasi hills · The ikat weavers of Pochampally, Puttapaka and Chirala · The weavers of Maheshwar.

Animals of India

87 animals and birds of India in the Brand Manual's animal style — the elephant, the camel, the lovebirds and the owl of page 33 — each in colour and in the city grey. One soft body colour, one accent, the closed-eye arc; never Warm Orange. 58 places' research names one of them, and their pages show them. 15 of them move: rigged from the colour drawing, they walk, pace or fly in a seamless loop, and each says how fast to move it so its feet don't slide.

87 animals

Big cats and wild mammals 10

Hoofed animals 12

Primates 7

Small mammals 8

Sea and river 9

Reptiles 6

Farm and working animals 11

Birds 24

Travellers

The brand's travellers, from the covers' own rigged characters: the pictogram traveller (the masters' charcoal pictogram with the Tangerine pack, side on) and the explorer (frontal, with the staff), standing, walking, waving and more. Two styles: never mix them in one drawing.

13 poses

The pictogram traveller 5

The explorer 8

City symbols

211 symbols for 84 places, beside each place's icon, in the Brand Manual's city language: a monument in the city grey with its openings cut, the things of the place — food, craft, transport, a festival's object — in flat landscape colours. Each comes in colour and in the city grey, grouped by the place's landscape.

211 symbols

Flowers 50

Sunny Days 20

Waters 40

Fields 33

Valleys 68

The master drawings

50 vectors taken exactly from the brand books, the Zostel Brand Manual and the ZO Rooms guide — nature, animals, people, cities, backpacking and the khovar texture. Compose with these before drawing anything new; anything new is drawn the same way.

Captain Zo, the first mascot, lives with the characters.

Motion

Every move is a journey: depart quick, travel steady, arrive soft. Zostel moves in six parts and 60° steps, Zo as one continuous line, Zo World arms-up. Lottie files for apps, the web and video, timed with the motion tokens.

More in motion: the Zo keyboard — 55 keys, each with its own loop — and a loop for each of the 84 places.

Every ground
Symbol assembleZostel

Splash and intro: the six Zs arrive from their six directions and lock with one 60° click. Plays once; hold the last frame.

Speed
Ground
Symbol loaderZostel

Loading: the symbol clicks round in 60° steps.

Speed
Ground
1.8 s loopLottie JSON
Symbol idleZostel

Idle and waiting: a slow breathe.

Speed
Ground
3.6 s loopLottie JSON
Pull to refreshZostel

Pull: the Zs grow out one by one as you pull (scrub it with the finger). Refresh: 60° clicks, looped while loading. Done: the Zs leave.

Speed
Segment
Ground
3.1 s loopLottie JSON
Journey pathZostel

Trips and bookings: the standee's route draws as the traveller rides it; each stop lights up.

Speed
Ground
4.8 s loopLottie JSON
Journey path, nightZostel

The journey path for dark grounds.

Speed
Ground
4.8 s loopLottie JSON
A place arrivesZostel

Arrivals and check-ins: the traveller reaches a place, the stop lights up and the place's tile pops.

Speed
Ground
3.9 s loopLottie JSON
Zo loaderZo

Zo Trips, Zo Selections loading: the ZO infinity draws itself in one line.

Speed
Ground
2.4 s loopLottie JSON
\z/ cheer keyZo World

Celebration: the \z/ Esc key presses and the arms go up.

Speed
Ground
1.4 s loopLottie JSON
SuccessZo World

Done, booked, sent: _z_ throws its arms up. Play the cheer marker once and hold.

Speed
Segment
Ground
2.4 s loopLottie JSON
Empty stateZo World

Nothing here yet: the \z/ lies back and breathes.

Speed
Ground
3.6 s loopLottie JSON
ErrorZo World

Something went wrong — let's go anyway: ¯\_z_/¯ shrugs.

Speed
Ground
2.4 s loopLottie JSON
\z/ becomesZo World

Culture moments: the \z/ becomes wings and a heart, bats and a ball, horns and a turntable, palms and a backpack — and back.

Speed
Ground
7 s loopLottie JSON
Sending what waitedZostel

Offline queue sending: what waited while the signal was gone rides a dotted arc to the ring, one at a time. Loop while it sends.

Speed
Ground
3.6 s loopLottie JSON
Calm alertZostel

Break-glass and safety moments: a Marigold roundel breathes, two rings ease out and fade. No red, no siren, no flashing.

Speed
Ground
4.8 s loopLottie JSON
Symbol becomes the placeZostel

Destination moments: the symbol fills in, flows into the place turning 60°, and the place carves itself out — one for every place.

Speed
Ground
3.8 s loopLottie JSON
A place, aliveZostel

Every place loops quietly by its landscape — waves flow, rays turn, bunting flutters.

Speed
Ground
7.2 s loopLottie JSON

Durations

Every move is a journey: depart quickly, travel steadily, arrive softly.

instant90ms
quick180ms
base300ms
journey600ms
hero1200ms
loop3600ms

Easing

CSS variables ship in /brand/tokens/zo-tokens.css.

arrivecubic-bezier(0.16, 1, 0.3, 1)
departcubic-bezier(0.7, 0, 0.84, 0)
travelcubic-bezier(0.65, 0, 0.35, 1)
bouncecubic-bezier(0.34, 1.56, 0.64, 1)
step60steps(6, jump-none)Symbol rotates in 60 degree clicks (loader/compass)