Jol

Design system

Mountain blue, apricot and felt

Jol borrows its palette from Kyrgyz landscapes: the deep blue of snow peaks at dusk, the warm terracotta of Jeti-Oguz rocks, turquoise alpine lakes and the cream of shyrdak felt. Everything below is a token in one stylesheet, read by every screen.

  • A friend, not a robotWarm words, real names and photos. The chat answers with things you can act on.
  • Made for bright sunEvery text pair meets WCAG AA. Body text is 16px, touch targets 44px or more.
  • One accent, one alarmTerracotta marks the key action. Signal red means SOS and nothing else.
  • Calm on weak dataSkeletons, offline banners and queued messages instead of dead ends.
Foundations

Color tokens

Semantic tokens with a light and a dark value. Components ask for a role, like action or muted-foreground, never a hex code. Values below are read live from the stylesheet.

Light theme[data-theme='light']

Surfaces

  • --background…Warm off-white by day, night blue by night
  • --card…Cards, sheets and bars
  • --muted…Quiet fills and skeletons
  • --border…Hairlines, card edges

Text

  • --foreground…Ink, for all main text
  • --muted-foreground…Secondary text, never below 4.5:1

Brand

  • --primary…Deep mountain blue: navigation, primary buttons
  • --primary-soft…Selected states and tags

Accent

  • --action…Terracotta: the single color for key actions
  • --action-soft…Suggestions, tips, highlights

Status

  • --success…Verified, confirmed, best season
  • --warning…Problems and errors. No red
  • --info…Water, documents, your location

SOS only

  • --sos…Signal red, used for nothing else
  • --sos-soft…Active SOS status

Map

  • --map-land…Steppe and valleys
  • --map-relief…Mountain ranges
  • --map-water…Turquoise lakes
  • --map-park…Parks and pastures

Dark theme[data-theme='dark']

Surfaces

  • --background…Warm off-white by day, night blue by night
  • --card…Cards, sheets and bars
  • --muted…Quiet fills and skeletons
  • --border…Hairlines, card edges

Text

  • --foreground…Ink, for all main text
  • --muted-foreground…Secondary text, never below 4.5:1

Brand

  • --primary…Deep mountain blue: navigation, primary buttons
  • --primary-soft…Selected states and tags

Accent

  • --action…Terracotta: the single color for key actions
  • --action-soft…Suggestions, tips, highlights

Status

  • --success…Verified, confirmed, best season
  • --warning…Problems and errors. No red
  • --info…Water, documents, your location

SOS only

  • --sos…Signal red, used for nothing else
  • --sos-soft…Active SOS status

Map

  • --map-land…Steppe and valleys
  • --map-relief…Mountain ranges
  • --map-water…Turquoise lakes
  • --map-park…Parks and pastures
Accessibility

Contrast, measured

Travelers read the app outdoors. Each pair is computed from the live token values with the WCAG formula: AA needs 4.5:1 for normal text.

Light · measured live from the tokens

  • Body textforeground on background…
  • Secondary textmuted-foreground on background…
  • Secondary text on cardsmuted-foreground on card…
  • Primary buttonprimary-foreground on primary…
  • Key action buttonaction-foreground on action…
  • Suggestion chipaction-soft-foreground on action-soft…
  • Verified badgesuccess-soft-foreground on success-soft…
  • Problem messagewarning-soft-foreground on warning-soft…
  • SOS buttonsos-foreground on sos…

Dark · measured live from the tokens

  • Body textforeground on background…
  • Secondary textmuted-foreground on background…
  • Secondary text on cardsmuted-foreground on card…
  • Primary buttonprimary-foreground on primary…
  • Key action buttonaction-foreground on action…
  • Suggestion chipaction-soft-foreground on action-soft…
  • Verified badgesuccess-soft-foreground on success-soft…
  • Problem messagewarning-soft-foreground on warning-soft…
  • SOS buttonsos-foreground on sos…
Foundations

Type scale

One family, Onest, for headings and body. Large titles, a 16px body and a short scale that holds up in English, German and Russian.

Typeface

Onest

A geometric sans drawn for Latin and Cyrillic together, so English, German and Russian sit on one rhythm.

Aa Жж

Перевод · Übersetzung · Translation · 0123456789

  1. display33 / 40 · BoldYour local friend in Kyrgyzstan.
  2. title-128 / 34 · BoldJeti-Oguz Gorge
  3. title-223 / 28 · BoldNot sure — is it one of these?
  4. title-319 / 24 · SemiboldHow to get there
  5. body16 / 24 · RegularAsk anything in your own language. Jol answers like a friend who lives here.
  6. label14 / 20 · SemiboldSouvenirs & Markets
  7. caption13 / 18 · MediumUpdated 2 Sep 2026 · 25 km from Karakol
  8. micro11 / 16 · SemiboldTab labels and overlines
Foundations

8pt spacing

Layout moves in steps of 8, with 4 for tight icon and text pairs. Screens use a 20px gutter, cards 16px padding.

  1. 4pxspace-1 · Icon to text in tight UI
  2. 8pxspace-2 · Base unit, chip gaps
  3. 12pxspace-3 · Inside cards, list rows
  4. 16pxspace-4 · Card padding, screen gutter
  5. 20pxspace-5 · Section gutter on screens
  6. 24pxspace-6 · Between groups
  7. 32pxspace-8 · Between sections
  8. 48pxspace-12 · Large vertical rhythm
Foundations

Radii

Soft, friendly corners. Photos use 16 to 20px, sheets 28px, chips and avatars are fully round.

  • sm · 8pxSmall fills
  • md · 12pxButtons, inputs
  • lg · 16pxThumbnails, photos
  • xl · 20pxCards, large photos
  • 2xl · 28pxSheets, dialogs
  • full · fullChips, avatars, SOS
Foundations

Elevation

Four soft shadows mapped to purpose. In dark mode shadows deepen and borders lift, so cards still separate from the background.

  • shadow-cardResting cards
  • shadow-floatPins, floating buttons
  • shadow-overlayToasts, notifications
  • shadow-sheetBottom sheets
Foundations

Icons

A single outline set with a consistent 2px stroke, in three sizes.

  • Assistant
  • Explore
  • My Plans
  • Profile
  • Photo
  • Voice
  • Translate
  • Place
  • Navigate
  • Call
  • Verified
  • Safety
  • Taxi
  • Marshrutka
  • Tour
  • Nature
  • Souvenirs
  • Market
  • Reminder
  • Rating
  • Price
  • Offline
  • Problem
  • Retry
16px
20px
24px

One outline set (Lucide), 2px stroke. 24px in navigation, 20px in buttons and lists, 16px inline with text. Never emoji as icons.

Foundations

Motion

Motion confirms what happened and shows where things come from. It never blocks a tap, and it switches off with the reduced motion setting.

  • Micro150–200 ms · ease-outPress, hover, toggles, chips
  • Enter300 ms · soft ease-outCards rise 6px and fade in
  • Sheets and screens300 ms · soft ease-outSlide in from the edge they belong to
  • Map camera700 ms · soft ease-outFly from the region into Bishkek
  • Scan loop2.4 s · ease-in-outPhoto recognition sweep
  • SOS hold3 s · linearProgress ring, release to cancel

Only transform and opacity move

With reduced motion turned on, sweeps, pulses and parallax stop. Screens still reach the same final state, and nothing waits for an animation.

Library

Core components

The building blocks of every screen, rendered from the same code as the prototype. They are live: press, toggle and hold them.

Every component reads the same semantic tokens. Switch the theme to check them at night.

Buttons

Terracotta only for the one key action on a screen. Every button is at least 44px tall in the app.

Hover
Focus
Pressed
Disabled
Loading
Sizes
Compact SOS for full-screen modes

Chips

Filter chips switch on one at a time. Suggestion chips carry the next likely message.

Ich nehme Azamat, 14:30 an Ausgang 2Is 300 KGS a fair taxi price?

Badges, ratings and prices

Verified means ID and license checked by Jol. Confidence shows how sure photo recognition is.

VerifiedVerifiedAibek
92% match58% match27% match
GuideIn 30 minFree tomorrowFew spots leftDocument tip2 daysSOS active
Rated 4.9(212 reviews)from$45/ person250–350 KGSfrom$139
01KG482 AZM01KG482 AZM01KG715 AIB

Inputs and language switcher

Errors use amber with an icon and a sentence that says how to fix it.

+49

Add the last digit: German mobile numbers have 11 digits.

App language
Share live location
Adults
1

Avatars and languages

A flag alone names a country, not a language, so it always comes with a code or a name.

Portrait of guide Aibek SadykovPortrait of driver Azamat ToktobaevPortrait of guide Aigerim UsenovaMBPortrait of guide Aibek Sadykov
DEENRUKY
  • German
  • English
  • Russian
  • Kyrgyz

Chat bubbles

Your messages in mountain blue, Jol in white cards. Rich cards sit inside Jol’s turn.

Wie komme ich zum Ala-Too Boutique Hotel?

Willkommen in Kirgistan, Mia! Dein Hotel liegt 30 km entfernt. Zwei gute Wege:

Jol is typing
Typing indicator

Tour card

Photo, duration, guide, price and Book

Red sandstone cliffs of Jeti-Oguz above a green valley
2 days
Rated 4.9(128 reviews)Small group, up to 6

2-day loop from Bishkek with a night in a yurt camp

Portrait of guide Aibek Sadykovwith AibekDEENRUKY
from$139/ person

Guide card

Languages, rating, Verified, Call and Book

Portrait of guide Aibek Sadykov

Rated 4.9(212 reviews)

Mountain guide · Issyk-Kul and Karakol

DEENRUKY
$70/ dayFree tomorrow

Driver card

Car, plate to check, price hint

Portrait of driver Azamat Toktobaev

Azamat T.

Verified

Rated 4.91,280 trips

Toyota Camry, white

RUKYEN
Check the plate01KG482 AZM

At Arrivals now· Airport to city 700–900 KGS

Place card

Mini-map with Open on map

Turquoise water of Issyk-Kul with snowy mountains behind

Issyk-Kul Region

Issyk-Kul Lake

The world's second-largest alpine lake: clear, warm water ringed by snowy peaks.

250 km · about 4 h to Cholpon-Ata

Meeting saved

Who, when, where, purpose. Edit and Remind me

Meeting savedAdded to My Plans
Who
Azamat ToktobaevTaxi driver
When
Tomorrow, 09:00
Where
Hotel entrance
Purpose
Taxi ride from your hotel

Small cards

Document tip, fair price, recognition, routes

Document tip

Border zone permits

Only needed near the Chinese and Tajik borders, for example Enilchek or Khan Tengri.

Updated 28 Aug 2026

Fair price check

City center to Osh Bazaar

4 km · 12 min

Fair price
250 KGSYou pay 300350 KGS

Taxi apps show 220–320 KGS for this ride. Add about 20% at night.

Route options

Taxi and marshrutka side by side

Manas AirportAla-Too Boutique Hotel30 km
  • Taxi700–900 KGS

    35–40 min · Door to door. Verified drivers wait at Arrivals.

    Easiest
  • Marshrutka 38060 KGS

    60–70 min · Minibus to Chui Ave, then 10 minutes on foot.

    Cheapest

Plan card

Timeline item in My Plans

Portrait of guide Aibek Sadykov
Guide

2-day tour: Jeti-Oguz & Issyk-Kul

07:30· reminder 07:00Hotel lobby

Best season

Twelve months at a glance

  1. January: off season
  2. February: off season
  3. March: off season
  4. April: off season
  5. May: good
  6. June: best
  7. July: best
  8. August: best
  9. September: best
  10. October: good
  11. November: off season
  12. December: off season

Toast and banners

Offline is a fact, not an error, so it uses ink rather than amber.

Saved. Available offline too.
Offline — showing saved plans.
Upload paused: weak signal. Nothing was lost.
Lena was told you’re safe. Location sharing stopped.

Loading skeleton

Matches the shape of what is coming

Notification

Lock screen and in-app use the same words

JolnowIn 30 min: guide Aibek, hotel lobbyAla-Too Boutique Hotel · silver Toyota Hiace, 01 KG 715 AIB. Tap for your safety card.

Empty states

A line illustration, a reason and a way forward

No plans yet

Agree on a meeting in the chat and it appears here with a safety card.

Bottom sheet

Handle, title, close, scrollable content, optional footer

Tab bar with SOS

Four tabs and SOS in the middle. Hold for 3 seconds, a ring fills up.

Press and hold the red button to try the hold-to-send interaction.

Mini-maps

Drawn from real coordinates: the region and central Bishkek

Map pins

Selected pins grow and show a label. Your position pulses.

Logo and ornament

The mark is a road winding up to a mountain saddle. The ram’s horn of shyrdak felt is used sparingly.

Jol

Illustrations

Line art in theme tokens, for empty, offline and success moments

No plans
Offline
No results
Not sure
Booked
Check every component in context on the All screens page.