Brand System

Zoomi

Traditional car rental. No complications, no apps, no hourly plans. Pick up, drive, return.

Version
0.15.0
Updated
2026-06-19
Author
Ornix, MB
Status
In development

02 — Colors

Palette

Asphalt and signal. The road and the evening lamp. Five tones that make the whole system.

03 — Typography

Typefaces

Three typefaces. Geist Sans for headings, Inter for body, Geist Mono for numerals.

Zoomi

← Scroll to see full specimen →

Geist Sans · Variable · Display & Headings

400 Drive at ease
500 Drive at ease
600 Drive at ease
700 Drive at ease

Zoomi is more than car rental. It's freedom to plan your trip on your terms — no apps, no hourly windows, no friction. Pick up the car when you need it, return it when you're done.

Inter Variable · Body & UI

400 Your trip awaits
500 Your trip awaits
600 Your trip awaits
€ 45.00 / day

Geist Mono · Numerals & Code · Tabular nums

Vehicle Day Week
Toyota Yaris € 35.00 € 210.00
Volkswagen Golf € 45.00 € 270.00
Skoda Octavia € 52.00 € 312.00

Type scale

Token Sample
--text-caption Drive at ease
--text-small Drive at ease
--text-body Drive at ease
--text-lead Drive at ease
--text-h3 Drive at ease
--text-h2 Drive at ease
--text-h1 Drive at ease
--text-display Drive at ease

04 — Spacing

Spacing & layout

Generous breathing room. Sections own their vertical rhythm; containers cap the width.

Section spacing

Content
--spacing-section · clamp(4rem, 8vw, 7rem)
Content
Content
--spacing-section-sm · clamp(2.5rem, 5vw, 4rem)
Content

Container widths

--container-default 1440px
--container-narrow 1080px
--container-prose 720px

05 — Radii

Corner radius

Angular but not sharp. Six steps from subtle to fully round.

--radius-xs

4px

--radius-sm

6px

--radius-md

12px

--radius-lg

20px

--radius-xl

28px

--radius-full

9999px

06 — Shadows

Elevation

Three shadows. Cards lift gently, elevated elements lift more, focus rings communicate keyboard state.

--shadow-card

Default lift for cards and list items.

--shadow-elevated

Modals, dropdowns, floating panels.

Search...

--shadow-focus

Keyboard focus state on interactive elements.

07 — Motion

Motion

Three durations, one easing. Movement should feel intentional, not decorative.

Easing

--ease-out

cubic-bezier(0.16, 1, 0.3, 1)

Click the track to preview the easing curve

Durations

Hover each block to compare durations.

--duration-fast

Hover to preview · 150ms

--duration-default

Hover to preview · 250ms

--duration-slow

Hover to preview · 450ms

08 — Buttons

Buttons

One primary action per screen. Secondary supports. Ghost recedes.

Variants

btn btn--primary

Primary action. One per screen.

btn btn--secondary

Supporting action on light backgrounds.

btn btn--ghost

Tertiary, low visual weight.

btn btn--ghost-light

Ghost on dark backgrounds.

Sizes

btn--sm
btn--md (default)
btn--lg

States

default
:hover
:active
:focus-visible
disabled

09 — Icons

Icons

Line style, 1.75px stroke, rounded caps. Consistent visual weight across the set.

car
key
calendar
clock
map-pin
phone
mail
user
credit-card
shield
fuel
settings
info
check-circle
x-circle
arrow-right

Source: Lucide (MIT). Self-hosted SVGs in /assets/icons/ — no runtime dependency. Use zoomi_icon('name') to inline anywhere in PHP templates.

10 — Forms

Form components

Inputs, selects, choices. The building blocks of the booking flow.

Text input · States

As shown on your driver's license

Please enter a valid email address

Generated automatically after confirmation

<input class="form-input" type="text" id="name" placeholder="..."> <input class="form-input is-error" aria-invalid="true" aria-describedby="err"> <input class="form-input" disabled>

Textarea

Max 500 characters

<textarea class="form-input form-textarea" id="notes" placeholder="..."></textarea>

Select

Note: The dropdown panel uses the native browser picker — this preserves accessibility, autofill, and mobile native pickers. Build custom dropdowns only when you need multi-select, search, or grouped options.

<select class="form-input form-select" id="location"> <option value="" disabled selected>Choose a location</option> <option value="vil-airport">Vilnius — Airport</option> </select>

Checkbox

Add-ons

<div class="form-checkbox-group"> <input class="form-checkbox" type="checkbox" id="driver" checked> <label for="driver">Additional driver</label> </div>

Radio

Insurance coverage

Coverage details available at pickup

<div class="form-radio-group"> <input class="form-radio" type="radio" id="standard" name="insurance" checked> <label for="standard">Standard — €8/day</label> </div>

Composed example: booking summary form

11 — Dates

Date range picker

The core booking component. Pick up and return — one interaction, two dates, instant range preview.

Default · Lithuanian locale

Click either field to open the calendar. Pick a start date, then an end date. Hover shows the range preview. Lithuanian locale with Monday as week start. Pickup and return times default to 10:00 in 30-minute increments, 24/7 availability.

<div data-drp data-drp-options='{"locale":"lt","minDate":"today","maxDate":"+90d"}'> <!-- Auto-rendered by date-range-picker.js --> </div>

English locale

Set locale: "en" for English month and weekday names. Useful for international visitors.

<div data-drp data-drp-options='{"locale":"en","minDate":"today"}'></div>

With default values

Initialize with default dates and times via defaultStart, defaultEnd, defaultStartTime, and defaultEndTime.

<div data-drp data-drp-options='{ "locale": "lt", "defaultStart": "2026-06-23", "defaultEnd": "2026-06-26", "defaultStartTime": "14:00", "defaultEndTime": "18:00" }'></div>

Constrained · Min 6 hours, Max 14 days

minDurationHours and maxDurationHours enforce hour-level constraints validated on confirm. Same-day rentals are allowed — pick up 09:00, return 16:00 = 7 hours (valid). Trying to confirm less than 6 hours shows an error.

<div data-drp data-drp-options='{ "locale": "lt", "minDurationHours": 6, "maxDurationHours": 336 }'></div>

Day cell states

01
default
18
today
20
start
21
in-range
23
end
28
disabled
30
outside

Time selection

Hybrid time selects in the footer

Pickup and return times use native HTML <select> elements with 30-minute intervals across 24 hours (48 slots total, 00:00–23:30). Hybrid styling — branded trigger, native dropdown panel — for accessibility and mobile native picker support. Changing a time updates the trigger input display immediately without closing the popover.

// Time options are auto-generated from timeStep/timeMin/timeMax // Defaults: timeStep:30, timeMin:"00:00", timeMax:"23:30" // 48 options: 00:00, 00:30, 01:00 … 23:30 // Access values: picker.getValue() // → { start:"2026-06-17", startTime:"10:00", end:"2026-06-22", endTime:"10:00" } // Set times programmatically: picker.setTimes("14:00", "18:00") // Hidden form inputs (separate date + time): // <input type="hidden" name="pickup_date" value="2026-06-17"> // <input type="hidden" name="pickup_time" value="10:00"> // <input type="hidden" name="return_date" value="2026-06-22"> // <input type="hidden" name="return_time" value="10:00">

Mobile

Bottom sheet on mobile

Below 768px viewport width, the picker transforms into a bottom sheet covering 70% of the screen height, with a single month and swipe or arrow navigation. Tap targets increase to 44×44px per cell. Time selectors and actions stack vertically for comfortable thumb reach. A “Done” button at the bottom confirms the selection and closes the sheet.

12 — Badges

Badges & tags

Small status markers. Live on cars, filters, bookings — anywhere state matters at a glance.

Status · With indicator dot

Available Booked Reserved Returning soon In service 
<span class="badge badge--success">
  <span class="badge__dot" aria-hidden="true"></span>Available
</span>

Vehicle category

Economy Standard Premium SUV Commercial 
<span class="badge badge--neutral">Standard</span>
<span class="badge badge--accent">Premium</span>

Vehicle features · With icons

Automatic Manual Electric Hybrid Petrol Diesel 
<span class="badge badge--accent">
  <span class="badge__icon" aria-hidden="true"><!-- zap svg --></span>Electric
</span>

Promotions · Solid fill

New in fleet -20% weekly Popular Weekly deal 
<span class="badge badge--solid-signal badge--lg">-20% weekly</span>

Sizes · SM · MD · LG

SM
Available Premium New
MD
Available Premium New
LG
Available Premium New

Outline

Economy Premium Electric

Outline variants for low-emphasis contexts — secondary filters, inline tags within paragraphs. 

<span class="badge badge--outline badge--accent">Premium</span>

13 — Placeholders

Placeholders

Where content waits. One system for missing images, loading states, and empty results — used across the product.

Image placeholder · Default

<?php echo zoomi_placeholder(['variant' => 'image', 'label' => 'Sedan']); ?>

Skeleton · Loading state

Used when content is loading. Animates left-to-right shimmer. Respects prefers-reduced-motion. 

<?php echo zoomi_placeholder(['variant' => 'skeleton', 'aspect' => '16/10']); ?>

Empty state

No vehicles match your filters

No bookings yet

Your future trips will show up here

<?php echo zoomi_placeholder([
  'variant' => 'empty',
  'icon' => 'search-x',
  'label' => 'No vehicles match your filters',
]); ?>

Aspect ratios

16/10

5/3

4/3

1/1

3/1

14 — Cards

Cards

Containers for everything from a vehicle in the fleet to a booking confirmation. One base component, several intent variants.

Base card

Card title

Optional supporting line

A short description giving context to the card content. Keep it to two or three lines maximum.

<article class="card card--interactive">
  <div class="card__media"><!-- image or placeholder --></div>
  <div class="card__body">
    <div>
      <h3 class="card__title">Title</h3>
      <p class="card__subtitle">Subtitle</p>
    </div>
    <div class="card__footer">
      <span class="card__price">€ 45.00<span class="card__price-unit"> / day</span></span>
      <button class="btn btn--ghost btn--sm">Action</button>
    </div>
  </div>
</article>

Vehicle card · Primary use case

Available

Volkswagen Golf

Hatchback · 2024

Standard Automatic Petrol 5 seats
€ 45.00 / day
Available

Toyota Yaris

Hatchback · 2023

Economy Manual Petrol 5 seats
€ 32.00 / day
Booked

Skoda Octavia

Sedan · 2024

Standard Automatic Diesel 5 seats
€ 52.00 / day
Available

Tesla Model 3

Sedan · 2024

Premium Automatic Electric 5 seats
€ 89.00 / day
Available

Volkswagen Caddy

Minivan · 2023

Standard Manual Diesel 7 seats
€ 58.00 / day
Returning soon

Mercedes Sprinter

Commercial · 2023

Commercial Manual Diesel 9 seats
€ 95.00 / day

Badge placement convention: Top-left = status (Available, Booked, Reserved…). Top-right = promo only (New in fleet, -20%…) — optional, never category. Specs row = category, transmission, fuel type, seat count — always. 

<article class="card card--interactive" aria-label="View Volkswagen Golf details">
  <div class="card__media">
    <?php echo zoomi_placeholder(['variant' => 'image', 'aspect' => '16/10']); ?>
    <div class="card__media-badge card__media-badge--top-left">
      <span class="badge badge--success">
        <span class="badge__dot" aria-hidden="true"></span>Available
      </span>
    </div>
  </div>
  <div class="card__body">
    <div>
      <h3 class="card__title">Volkswagen Golf</h3>
      <p class="card__subtitle">Hatchback · 2024</p>
    </div>
    <div class="card__specs">
      <span class="badge badge--neutral badge--sm">Standard</span>
      <span class="badge badge--neutral badge--sm">Automatic</span>
    </div>
    <div class="card__footer">
      <div>
        <span class="card__price">€ 45.00</span>
        <span class="card__price-unit"> / day</span>
      </div>
      <button class="btn btn--ghost btn--sm">View details</button>
    </div>
  </div>
</article>

Featured · Signal accent strip

Available
Premium

BMW 3 Series

Sedan · 2025

Premium Automatic Diesel 5 seats
€ 78.00 / day
Available
Premium

Audi A6

Sedan · 2024

Premium Automatic Diesel 5 seats
€ 92.00 / day

Featured cards highlight vehicles surfaced as top picks — recommendations, partner promotions, top of search results.

Inverted · Dark surface

Customer support 24/7

Reach us anytime during your rental. Phone, email, or chat — your choice.

Use sparingly for emphasis sections — testimonials, support callouts, key messaging.

Elevated · Shadow instead of border

Monthly rentals

30+ days

Save up to 30% on monthly rentals. Flexible plans with no long-term commitment.

Airport delivery

All major airports

We deliver to Vilnius, Kaunas, and Klaipėda airports. Skip the queue.

Use when cards sit on a surface with visual texture — feature sections, sponsored placements.

Anatomy

Available

Volkswagen Golf

Hatchback · 2024

Standard Automatic
€ 45.00 / day
.card__mediaImage area, holds the placeholder or photo. Always 16/10 aspect ratio.
.card__media-badgeBadge overlay — top-left for status, top-right for promo. Never category.
.card__bodyAll text content. Flex column, grows to fill available height.
.card__titleVehicle or content name. Truncates with ellipsis if too long.
.card__subtitleSecondary descriptor — category, year, or supporting text.
.card__specsRow of small neutral badges: category, transmission, fuel, seats.
.card__footerPrice and primary action. Pinned to bottom via margin-top: auto.
.card__priceTabular mono numerals. Paired with .card__price-unit for "/ day".

15 — Voice & Tone

Voice & tone

Direct, warm, action-oriented. We sound like a friend who rents cars — not a corporation that does.

Principles

Direct

Skip the corporate fluff. Say what we mean in the fewest words that still feel human.

Action-oriented

Lead with verbs. “Pick up.” “Drive.” “Return.” Movement is the product.

Warm but not cute

We’re friendly, not playful. No exclamation marks, no emoji in UI, no “hey there friend!” We respect the user’s intelligence.

Honest about constraints

When something costs extra, say so plainly. When a car is unavailable, don’t bury it under marketing language.

Taglines

Pasiimk. Važiuok.

Primary brand line · Two-step rhythm matches the booking flow

Lithuanian

Pasiimk. Važiuok. Grąžink. → Long form — three beats
Tavo ratai laukia. → Heritage / emotional
Be aplikacijų. Be vargo. → Differentiation
Nuomokis paroms. → Service clarification

English

Pick up. Drive. → Primary
Pick up. Drive. Return. → Long form
Your wheels await. → Heritage / emotional
No apps. No friction. → Differentiation
Daily rentals, done right. → Service clarification

Button copy

✅ Use ❌ Avoid
Pasirinkti automobilį Spauskite čia
Rezervuoti Pateikti formą
Tęsti į apmokėjimą Toliau
Patvirtinti rezervaciją OK
Atšaukti rezervaciją Atšaukti
Skambinti pagalbai Pagalba

Buttons describe the action. Avoid generic words like “OK”, “Submit”, “Click here” — they ignore context.

Error messages

✅ Use ❌ Avoid
Šis automobilis užimtas pasirinktomis dienomis Klaida 400
Reikalingas ne mažesnis kaip 2 metų vairavimo stažas Nepavyko
Įveskite teisingą el. pašto adresą Neteisinga įvestis
Apmokėjimas nepavyko. Patikrinkite kortelės duomenis arba pasirinkite kitą būdą Bandykite vėliau

Errors explain what happened AND suggest a next step. Never blame the user. Never hide behind “something went wrong”.

Empty states

Nieko neradome

Pabandyk pakeisti datas arba kategoriją. Mūsų parke daugiau nei 30 automobilių.

Kol kas tuščia

Tavo būsimos kelionės atsiras čia po pirmos rezervacijos.

Tuščia

Pažymėk automobilius širdute, kad rastum greičiau kitą kartą.

Empty states explain the state AND invite the next action. Always have a path forward.

Vocabulary

Concept Lithuanian English
Vehicle Automobilis Car
Rental period Nuomos laikas Rental period
Pick up location Paėmimo vieta Pickup location
Pick up date Paėmimo data Pickup date
Return date Grąžinimo data Return date
Daily rate Kaina parai Daily rate
Total Iš viso Total
Add-ons Priedai Add-ons
Insurance Draudimas Insurance
Booking Rezervacija Booking
Booking reference Rezervacijos kodas Booking reference
Customer Klientas Customer

Use these terms consistently across UI, emails, and documents. Mixing “automobilis” and “mašina” in the same product creates friction.

Numbers · Currency · Dates

Currency format
€ 45.00 / para — space after €, always 2 decimal places, dot separator. Write Nemokamai / Free, never € 0.00.
Dates (LT)
Full: 2026 m. birželio 17 d.
Short: 2026-06-17
With time: 2026 m. birž. 17 d., 10:00
Dates (EN)
Full: June 17, 2026
Short: 2026-06-17
With time: Jun 17, 2026, 10:00
Time
24-hour format always: 14:30, never 2:30 PM.
Duration (LT)
Singular (last digit 1, except 11):
1 para, 21 para, 101 para

Plural nom. (last digit 2–9, except 12–19):
2 paros, 5 paros, 25 paros, 99 paros

Plural gen. (10–19, multiples of 10, 100…):
10 parų, 15 parų, 20 parų, 100 parų

Same pattern for hours:
1 valanda — 3 valandos — 21 valanda — 10 valandų — 20 valandų

Lithuanian noun declension follows the last digit, with 10–19 always taking the genitive plural.
Use para (not diena) for the rental day unit (24h).

In context · Micro copy examples

Rezervacija patvirtinta ZM-2026-0142

Tavo Volkswagen Golf laukia Vilniaus oro uoste 2026 m. birž. 18 d., 10:00.

Paimk savo Toyota Yaris po 2 valandų

Adresas: Kalvarijų g. 125, Vilnius. Turėk su savimi vairuotojo pažymėjimą.

Grąžinimas šiandien iki 18:00

Pripildyk baką iki to paties lygio, koks buvo paėmus automobilį. Už vėlavimą — papildomas 25 € mokestis.

16 — Social & Content

Social & content

Where the brand lives outside the website. Platform strategy, visual identity, photography, copy patterns, paid creative, and partner collaborations — the full picture of how Zoomi communicates beyond zoomi.lt.

Brand system v1.0

Foundation complete

Future additions: photography library, vehicle photo session results, partner co-branding rules.

Copied