# Zostel Brand System > The brand system for Zostel, India's backpacker hostel family (111 Zostels · 80+ destinations · 5M+ travellers · since 2013), and for Zo and Zo World. The tagline is LIVE IT. NOW; the promise: travel like a local — a friend in every corner. Everything on this site is public and free to read. Every drawing is generated from code; every file has a link; every poster is a spec an agent can fill in. ## The core - Tagline: LIVE IT. NOW (always in capitals, a full stop after IT and none after NOW) - Voice: Short verbs, present tense: RUN · CLIMB · CHASE · LAUGH. Say it, don't explain it. - Colour: Warm Orange #F1563F, Steel Grey #43474B, Beige #F0EDDE, White #FFFFFF; five landscapes of India, three colours each (Sunny Days, Waters, Fields, Flowers, Valleys) - Type: Futura, Gotham Narrow and Mrs Eaves (italic) - Public facts: 111 Zostels · 80+ destinations · 5M+ travellers · since 2013 ## Brand The mark, the colours, the type and the rules they keep. - [Logo](https://brand.zostel.com/logo): Six Zs, one centre — the symbol, the wordmark and the \z/. - [Colour](https://brand.zostel.com/colors): Warm Orange, Steel Grey, Beige and five landscapes of India. - [Type](https://brand.zostel.com/typography): Futura, Gotham Narrow and Mrs Eaves — set the way the book sets them. - [Guidelines](https://brand.zostel.com/guidelines): The rules in one place, and where every chapter of the Brand Manual lives now. - [Zo Selections](https://brand.zostel.com/zo-selections): Its own brand, in its own maroon and cream: the ZO, its patterns and its kit. ## Language How Zostel draws, moves and speaks — in every place it lives. - [Icons](https://brand.zostel.com/icons): One drawing, four dialects — amenities, travel, sky and trail. - [Places](https://brand.zostel.com/destinations): Every place Zostel is live: its icon, colour, words and kit. - [Illustration & motion](https://brand.zostel.com/illustrations): Landscapes, rooms, living drawings, points and lines, and every move. - [Characters](https://brand.zostel.com/characters): Captain Zo, Zobu and a Zobu for every traveller. - [Zo keyboard](https://brand.zostel.com/zo-keyboard): Zo ❤️ Zo 🔥 Zo 🌍 — the \z/ reactions and the cultures. ## Make Tools that put the system to work — for people and for agents. - [Posters](https://brand.zostel.com/posters): Say what’s on. The brand lays it out. - [Components](https://brand.zostel.com/docs/components): The Zostel product kit — ready to copy. ## Library Every file, found and downloaded. - [Downloads](https://brand.zostel.com/downloads): Search anything, download everything we make. - [Assets](https://brand.zostel.com/assets): The Zo Studio library — stickers, 3D, films and photos. ## Data for agents - [The brand as JSON](https://brand.zostel.com/brand.json): tagline, rules, every colour, type, logos, every place, reaction and culture, with file links - [The whole brand in plain text](https://brand.zostel.com/llms-full.txt): the same, written out - [Design tokens](https://brand.zostel.com/brand/tokens/zo-tokens.json): DTCG tokens for colour, type, shape and motion - [The library as one catalogue](https://brand.zostel.com/brand/library/index.json): every published asset as a record (what it shows, its places, its colours as tokens, how it sits on its canvas, its files), one file a set - [Every place](https://brand.zostel.com/brand/places/index.json): 84 places Zostel is live, with icon, colour, words and files; each has its own page, https://brand.zostel.com/destinations/ - [Youth-hostel towns](https://brand.zostel.com/brand/youth-hostels/index.json): Towns with a Government of India youth hostel; Zostel isn't here yet. 62 towns with icon, colour, words and files, kept apart from the 84 places above and never in the facts; on https://brand.zostel.com/destinations#youth-hostel-towns - [Destination covers](https://brand.zostel.com/brand/covers/index.json): an animated scene for 84 of the places so far, wide (1600 × 900) and tall (900 × 1600), with its story, why, motion and sources - [Second scenes](https://brand.zostel.com/brand/covers2/index.json): another moment at 84 of the places, the same two formats, with the animals of India, city symbols and Zobus each one draws; on each place's page at #moment - [City maps](https://brand.zostel.com/brand/maps/web/index.json): maps we made for travellers at 43 of the places (Agra, Alleppey, Banikhet, Bir, Billing, Bundi, Chennai, Coorg, Delhi, Dharamkot, Gangtok, Goa, Gokarna, Guwahati, Hampi, Hyderabad, Jaipur, Jaisalmer, Jodhpur, Kasol, Khajjiar, Kochi, Kolkata, Lonavala, Manali, McLeodganj, Mumbai, Munnar, Mysore, Ooty, Pulga, Pune, Pushkar, Rinchenpong, Rishikesh, Shangarh, Shillong, Sissu, Tirthan, Udaipur, Varanasi, Varkala, Wayanad): city sheets (the map and the guide) and 4:5 phone maps ([index](https://brand.zostel.com/brand/maps/index.json)); on each place's page at #city-map - [Detailed icons](https://brand.zostel.com/brand/kit/index.json): 977 flat-colour pictures in the brand's hand, in 13 categories (trees, plants, animals, birds, water life, people, dress, boats, rides, buildings, things, sky, land) — each a still SVG and a PNG, 160 also animated; browse them at https://brand.zostel.com/icons#detailed - [The characters' origins, 2013](https://brand.zostel.com/brand/origins/index.json): 24 photos of the first Zostelers in the life-size Captain Zo standee (Jodhpur, from 13 September 2013) and 7 first sketches of Captain Zo and Zobu; on https://brand.zostel.com/characters#origins - [The Zobu wardrobe](https://brand.zostel.com/brand/zobu/rig/parts/index.json): 533 named parts in 16 slots for her and him (an outfit's top and bottoms worn together or apart), dressed in the creator on https://brand.zostel.com/characters#zobu; and [the Zobu from the side](https://brand.zostel.com/brand/zobu/rig/side/index.json): 199 stills, the standard pair in 9 poses and every place's Zobu standing, on https://brand.zostel.com/characters#from-the-side - [Icons](https://brand.zostel.com/brand/icons/index.json), [\z/ reactions](https://brand.zostel.com/brand/emoji/index.json), [culture symbols](https://brand.zostel.com/brand/culture/index.json), [living drawings](https://brand.zostel.com/brand/living/index.json), [landscapes](https://brand.zostel.com/brand/scenes/index.json), [patterns](https://brand.zostel.com/brand/patterns/index.json), [motion](https://brand.zostel.com/brand/motion/index.json) - [Site search index](https://brand.zostel.com/search-index.json): every page, section, place, icon and file - [The product kit, for agents](https://brand.zostel.com/docs/kit.json): every component and hook with its props, status and the screens built from it, and the words people use for each ("modal" → Dialog) - [Make a poster by link](https://brand.zostel.com/posters?kind=event&title=Open%20mic&where=jaipur&culture=open-mic): fields kind, template, format, title, where, when, whenText, detail, host, culture, verbs, colour, family, scene, symbols, animal, kit, zobu, pattern ## Optional - [Introduction](https://brand.zostel.com/docs/components/introduction): The kit in one page: what is in it and how it is built. - [Installation](https://brand.zostel.com/docs/components/installation): Add the components, the tokens and the fonts to a React app. - [Theming](https://brand.zostel.com/docs/components/theming): The brand tokens as CSS variables — and night mode. - [Button](https://brand.zostel.com/docs/components/button): Book, join, go — the action on every screen. - [Input](https://brand.zostel.com/docs/components/input): One line of text: a name, a place, an email. - [Textarea](https://brand.zostel.com/docs/components/textarea): Room to say more. - [Label](https://brand.zostel.com/docs/components/label): Names a field, and focuses it on click. - [Select](https://brand.zostel.com/docs/components/select): Pick one from a list. - [Checkbox](https://brand.zostel.com/docs/components/checkbox): Yes or no, one at a time or many. - [Radio Group](https://brand.zostel.com/docs/components/radio-group): Pick exactly one. - [Switch](https://brand.zostel.com/docs/components/switch): On or off, right now. - [Slider](https://brand.zostel.com/docs/components/slider): Slide to a number. - [Quantity Stepper](https://brand.zostel.com/docs/components/quantity-stepper): One fewer, one more: beds, guests, nights. - [Combobox](https://brand.zostel.com/docs/components/combobox): Type to find, then pick. - [Calendar](https://brand.zostel.com/docs/components/calendar): Pick a day to arrive. - [Date Picker](https://brand.zostel.com/docs/components/date-picker): A day, or the nights you stay, from one button. - [Form](https://brand.zostel.com/docs/components/form): Fields, checks and errors that say what to fix. - [Card](https://brand.zostel.com/docs/components/card): A white card with a beige edge. - [Badge](https://brand.zostel.com/docs/components/badge): A small label: new, full, open. - [Separator](https://brand.zostel.com/docs/components/separator): A quiet line between things. - [Table](https://brand.zostel.com/docs/components/table): Rows and columns. - [Avatar](https://brand.zostel.com/docs/components/avatar): A face — a Zobu, a photo or initials. - [Progress](https://brand.zostel.com/docs/components/progress): How far along. - [Skeleton](https://brand.zostel.com/docs/components/skeleton): The shape of what is loading. - [Scroll Area](https://brand.zostel.com/docs/components/scroll-area): A box that scrolls on its own. - [Aspect Ratio](https://brand.zostel.com/docs/components/aspect-ratio): Keeps a picture in shape. - [Carousel](https://brand.zostel.com/docs/components/carousel): Swipe through, one at a time. - [Dialog](https://brand.zostel.com/docs/components/dialog): Stop and decide. - [Sheet](https://brand.zostel.com/docs/components/sheet): A panel from the side. - [Drawer](https://brand.zostel.com/docs/components/drawer): A panel from the bottom, made for thumbs. - [Alert Dialog](https://brand.zostel.com/docs/components/alert-dialog): Sure? For things you can’t undo. - [Dropdown Menu](https://brand.zostel.com/docs/components/dropdown-menu): More actions, one click away. - [Context Menu](https://brand.zostel.com/docs/components/context-menu): Right-click for more. - [Popover](https://brand.zostel.com/docs/components/popover): A small panel by its button. - [Hover Card](https://brand.zostel.com/docs/components/hover-card): A preview on hover. - [Tooltip](https://brand.zostel.com/docs/components/tooltip): A word of help. - [Command](https://brand.zostel.com/docs/components/command): Type to jump anywhere. - [Alert](https://brand.zostel.com/docs/components/alert): A message in the page. - [Toast](https://brand.zostel.com/docs/components/toast): A message that comes and goes. - [Pills](https://brand.zostel.com/docs/components/pills): Filter tabs: the site’s pill. - [Pill Menu](https://brand.zostel.com/docs/components/pill-menu): Region ▾, Sort ▾: a filter or a sort in a pill. - [Tabs](https://brand.zostel.com/docs/components/tabs): One view at a time. - [Accordion](https://brand.zostel.com/docs/components/accordion): Open one answer at a time. - [Collapsible](https://brand.zostel.com/docs/components/collapsible): Show more, show less. - [Read More](https://brand.zostel.com/docs/components/read-more): A long text, cut to a few lines, opened in place. - [Section Nav](https://brand.zostel.com/docs/components/section-nav): Stays · Trips · About: jump down the page. - [Navigation Menu](https://brand.zostel.com/docs/components/navigation-menu): The top menu with panels. - [Menubar](https://brand.zostel.com/docs/components/menubar): An app menu bar. - [Breadcrumb](https://brand.zostel.com/docs/components/breadcrumb): Where you are, and the way back. - [Pagination](https://brand.zostel.com/docs/components/pagination): Page by page. - [Toggle](https://brand.zostel.com/docs/components/toggle): Press on, press off. - [Toggle Group](https://brand.zostel.com/docs/components/toggle-group): A row of toggles. - [Zostel Logo](https://brand.zostel.com/docs/components/zostel-logo): The six-Z symbol and the lockups. - [Icons](https://brand.zostel.com/docs/components/icons): Every brand icon and every place, as components. - [Tagline Band](https://brand.zostel.com/docs/components/tagline-band): LIVE IT. NOW on Steel Grey. - [Theme Lines](https://brand.zostel.com/docs/components/theme-lines): Four verbs, stacked: RUN · CLIMB · CHASE · LAUGH. - [Brand Header](https://brand.zostel.com/docs/components/brand-header): The logo over the tagline band. - [Pattern Background](https://brand.zostel.com/docs/components/pattern-background): Indian patterns, tone on tone, behind anything. - [Empty State](https://brand.zostel.com/docs/components/empty-state): Nothing here yet — a drawing, a line and the way on. - [Not Found](https://brand.zostel.com/docs/components/not-found): The 404: off the map, and the way back. - [Zobu Loader](https://brand.zostel.com/docs/components/zobu-loader): Zobu waves while it loads. - [Animation Wrapper](https://brand.zostel.com/docs/components/animation-wrapper): One CSS move on anything. - [Lottie Player](https://brand.zostel.com/docs/components/lottie-player): Plays the brand’s Lottie files. - [Sound Card](https://brand.zostel.com/docs/components/sound-card): A place sound on its picture: tap to hear it. - [Motion Wrappers](https://brand.zostel.com/docs/components/motion-wrappers): Reveal, stagger, float, count up. - [Stay Search](https://brand.zostel.com/docs/components/stay-search): Where to, check-in to check-out, Search. - [Hostel Card](https://brand.zostel.com/docs/components/hostel-card): A Zostel, its tags and a Book button. - [Room Type Card](https://brand.zostel.com/docs/components/room-type-card): A dorm or a room, who it sleeps. - [Room Option](https://brand.zostel.com/docs/components/room-option): A room to add: Select turns into a stepper. - [Availability Strip](https://brand.zostel.com/docs/components/availability-strip): Night by night, what’s free. - [Stay Facts](https://brand.zostel.com/docs/components/stay-facts): Know before you go: check-in, group size, the walk up. - [Guest Picker](https://brand.zostel.com/docs/components/guest-picker): Adults and children, a stepper each. - [Activity Card](https://brand.zostel.com/docs/components/activity-card): What’s on at the house this week. - [Property Listing Card](https://brand.zostel.com/docs/components/property-listing-card): A stay in a list of stays. - [Amenity Card](https://brand.zostel.com/docs/components/amenity-card): Wi-Fi, café, lockers — as roundels. - [Price Tag](https://brand.zostel.com/docs/components/price-tag): A price, per night, grouped the Indian way. - [Booking Summary](https://brand.zostel.com/docs/components/booking-summary): Dates, guests, lines and the total. - [Booking Bar](https://brand.zostel.com/docs/components/booking-bar): The amount and the one way on, always in reach. - [Cancellation Timeline](https://brand.zostel.com/docs/components/cancellation-timeline): Free, a fee, no refund: from when. - [Currency Picker](https://brand.zostel.com/docs/components/currency-picker): ₹ INR: the currency rates are shown in. - [Review Card](https://brand.zostel.com/docs/components/review-card): What one traveller said. - [Star Rating](https://brand.zostel.com/docs/components/star-rating): Five stars, to show or to give. - [Gallery](https://brand.zostel.com/docs/components/gallery): Swipe through a place. - [Photo Gallery](https://brand.zostel.com/docs/components/photo-gallery): Three on the page, every photo a tap away. - [Destination Card](https://brand.zostel.com/docs/components/destination-card): A place, its colour and its icon. - [Trip Card](https://brand.zostel.com/docs/components/trip-card): Days, dates and what you’ll do. - [Departure Picker](https://brand.zostel.com/docs/components/departure-picker): Pick a departure: dates and seats left. - [Highlight List](https://brand.zostel.com/docs/components/highlight-list): A trip’s best bits, one line each. - [Itinerary Timeline](https://brand.zostel.com/docs/components/itinerary-timeline): Day by day, stop by stop. - [Map Embed](https://brand.zostel.com/docs/components/map-embed): The place on a map. - [Search Bar](https://brand.zostel.com/docs/components/search-bar): Where next? Type a place. - [Filter Bar](https://brand.zostel.com/docs/components/filter-bar): Filter pills: all, dorms, rooms. - [Hero Section](https://brand.zostel.com/docs/components/hero-section): The first screen: a landscape and a line. - [Navigation Header](https://brand.zostel.com/docs/components/navigation-header): The logo, the links, one action. - [Mobile Nav](https://brand.zostel.com/docs/components/mobile-nav): The menu on a phone. - [Footer](https://brand.zostel.com/docs/components/footer): The band, the lockup, the links. - [Brand Switcher](https://brand.zostel.com/docs/components/brand-switcher): Zostel, Zostel Plus, Zostel Homes, Zo. - [Social Links](https://brand.zostel.com/docs/components/social-links): Where to follow along. - [Stat Counter](https://brand.zostel.com/docs/components/stat-counter): 111 Zostels · 80+ destinations · 5M+ travellers. - [USP Grid](https://brand.zostel.com/docs/components/usp-grid): Three reasons, three icons. - [Blog Card](https://brand.zostel.com/docs/components/blog-card): A story from the road. - [Offer Banner](https://brand.zostel.com/docs/components/offer-banner): Stays on offer, one at a time. - [CTA Card](https://brand.zostel.com/docs/components/cta-card): Another way in: a group trip, a franchise. - [Newsletter Signup](https://brand.zostel.com/docs/components/newsletter-signup): Stories from the road, in your inbox. - [Testimonial Carousel](https://brand.zostel.com/docs/components/testimonial-carousel): Travellers, in their words. - [App Download Banner](https://brand.zostel.com/docs/components/app-download-banner): Take Zostel in your pocket. - [Dark Mode Toggle](https://brand.zostel.com/docs/components/dark-mode-toggle): Day or night. - [useIsMobile](https://brand.zostel.com/docs/components/use-mobile): Phone or not, as a boolean. - [useToast](https://brand.zostel.com/docs/components/use-toast): Show a toast from anywhere. - [useTheme](https://brand.zostel.com/docs/components/use-theme): Light, dark or the system’s.