— RENT CAR · Design System · v 1.0

A platform for keys and kilometers.

A complete UI/UX system for car rental and preventive maintenance. Customer-facing public site, fleet admin console, PM workshop suite — designed in one luxury-automotive language, across three languages (FA · TR · EN).

120Pages designed
3Languages · RTL + LTR
240Vehicles modeled
5User roles
— Visual direction

Luxury automotive · ember & ink

Deep ink #08080A, ember orange #F44E10, warm cream #F5F1EA, italic Instrument Serif display + Geist + Vazirmatn for Persian.

— File structure

One file per page

Shared styles/tokens.css + admin.css. Admin chrome injected via JS partial — easy to port to React, Next.js, Flutter or Blade.

— 01 · Design tokens

The system, briefly.

Colors, typography and components — every screen reaches into the same token file.

Color · palette

— EMBER · PRIMARY
50
100
200
300
400
500
700
— INK · NEUTRALS
50
100
200
300
500
800
950
— ACCENT + STATUS
BRASS
GOOD
WARN
BAD
INFO
CREAM
PAPER

Type · hierarchy

DISPLAY · INSTRUMENT SERIF · ITALIC FOR ACCENTS
Drive something worth talking about.
UI · GEIST · 13–18 PX
Premium fleet of performance, executive & lifestyle vehicles.
META · GEIST MONO · UPPERCASE
34 IST 921 · WO-2026-0481 · 28,420 KM
PERSIAN · VAZIRMATN · RTL
ماشینی برانید که تعریفش بماند.

Components · atoms

Performance ● Available Due soon Overdue Executive
Selin Aydın
PREMIUM CUSTOMER · GOLD
— KPI
$48.6k
↑ 14.2%
— 02 · System architecture

Three apps. One product.

The platform addresses three audiences with shared visual DNA but different information density and chrome.
— PUBLIC · LIGHT-DARK

Customer web

The marketing site, fleet browser and customer self-service. Premium, image-driven, fewer controls per screen.

  • home.html
  • cars.html · listing + filters
  • car-detail.html · gallery + booking
  • booking.html · 4-step checkout
  • customer-dashboard.html · trips, invoices
  • customer-profile.html · KYC + payment methods
  • customer-favorites.html · saved cars + alerts
  • customer-tickets.html · support chat
  • customer-damage.html · incident reports
  • login.html · auth + OTP + reset
— FLEET ADMIN

Admin console

For company admins and operators. Sidebar + topbar + dense tables. KPI-first, action-second.

  • admin-dashboard.html
  • fleet.html · 240-vehicle table
  • vehicle-detail.html · profile + timeline
  • contracts.html · list + e-signature
  • payments.html · invoices + deposits
  • reports.html · financial + ops
  • settings.html · system tuning
  • notifications.html · alert inbox
— PM · WORKSHOP

PM suite

For technicians, service managers and PM specialists. Shares admin chrome — focused on time, parts and condition.

  • pm-dashboard.html · workshop Gantt
  • pm-schedule.html · calendar + lists
  • pm-plan-form.html · create recurring plan
  • pm-task-detail.html · active service task
  • repairs.html · work-order list
  • repair-detail.html · single work order
  • mechanic-tasks.html · technician day view
  • inspection.html · pre/post rental
  • inventory.html · parts & POs
  • suppliers.html · vendor scorecards
  • purchase-orders.html · PO list + detail
— 03 · Customer experience

From browse to keys.

Public marketing, fleet browser, 4-step booking and a customer dashboard for active rentals.
01
RENTCAREN · BOOK
Drive worth talking about.

Public Home

HERO · SEARCH · FLEET STRIP · PM PROMO
OPEN →
02
240 cars. Yours for the day.

Car listing

FILTERS · GRID · 240 VEHICLES
OPEN →
03
Porsche 911
$480/day

Car detail

GALLERY · SPECS · PM STATUS · BOOK
OPEN →
04
SECURE CHECKOUT
Driver info

Booking checkout

4 STEPS · DOCS · PAY · SIGN
OPEN →
05
Welcome back, Selin.
● ACTIVE
Porsche 911
PICKUP MAY 18 · 10:00

Customer dashboard

ACTIVE TRIP · STATS · INVOICES
OPEN →
— 04 · Fleet admin console

Every car. Every kilometer.

For company admins. Sidebar nav, dense KPIs, live operations dashboard, fleet table and full vehicle profile.
06
$48.6k

Admin dashboard

REVENUE · BOOKINGS · UTILIZATION
OPEN →
07
240 cars · one view

Fleet list

240 VEHICLES · STATUS · HEALTH
OPEN →
08
Porsche 911
34 IST 921

Vehicle profile

SPECS · PM HEALTH · TIMELINE
OPEN →
— 05 · PM workshop suite

For technicians, not designers.

A specialist's toolkit. Workshop Gantt, recurring schedules, work orders, structured inspections and parts inventory with live POs.
09

PM dashboard

WORKSHOP GANTT · QUEUE · KPIS
OPEN →
10

PM schedule

CALENDAR · LIST · RULES
OPEN →
11
WO-2026-0481
Brake pads

Repair work order

SYMPTOMS · PARTS · LABOR · TIMELINE
OPEN →
12
Walk-around

Vehicle inspection

CHECKLIST · PHOTOS · SIGNATURE
OPEN →
13

Parts inventory

820 SKUS · LOW STOCK · POS
OPEN →
+
DELIVERED

See operations

CONTRACTS · PAYMENTS · REPORTS · SETTINGS ↓
— 06 · Operations & finance

The paperwork. Without the paper.

Auth, contracts with e-signature, invoices and refunds, full reporting suite, settings and a notifications inbox — the back-office layer.
14
RENTCAR
Keys to somewhere better.
Sign in.

Auth · login

SIGN IN · REGISTER · OTP · RESET
OPEN →
15
Contracts · signed

Contracts list

487 ACTIVE · 14 AWAITING SIGN
OPEN →
16
RENTCAR
Vehicle rental agreement.

Contract + e-sign

PDF PREVIEW · DEPOSIT · TIMELINE
OPEN →
17
NET · MAY
$48.6k

Payments · invoices

218 TX · DEPOSITS · REFUNDS
OPEN →
18
RENTCAR
INVOICE
INV-12480
TOTAL $3,384.00

Invoice document

LINE ITEMS · VAT · LEDGER
OPEN →
19

Reports · KPIs

FINANCIAL · RENTAL · PM · HEATMAP
OPEN →
20
General workspace

Settings · system

GENERAL · I18N · ROLES · BILLING
OPEN →
21
12 unread · 3 critical

Notifications inbox

14 TRIGGERS · 4 CHANNELS
OPEN →
— 07 · Detail & specialist views

The last 10%.

Customer detail flows, technician day view, PM plan editor, work-order list and procurement — the depth behind every dashboard.
22
Selin Aydın
GOLD · 18 TRIPS

Customer profile

KYC · DOCS · PAYMENT · PREFS
OPEN →
23
↓ PRICE DROP · $480 → $440

Favourites + alerts

12 SAVED · 3 PRICE WATCHES
OPEN →
24

Support chat

TICKETS · LIVE AGENT · AI
OPEN →
25
JUST HAD AN ACCIDENT?

Damage reports

DIAGRAM · PHOTOS · INSURANCE
OPEN →
26
A rule repeated.
PREVIEW
$2.4k

PM plan editor

RULES · CHECKLIST · LIVE IMPACT
OPEN →
27
PM-2026-3128 · STARTED 13:42
Oil + filter

PM task live

CHECKLIST · PARTS · PHOTOS
OPEN →
28

Repairs list

62 WORK ORDERS · STATUS · COST
OPEN →
29
SHIFT
Hi Barış

Mechanic day

8 TASKS · TIMELINE · PERF
OPEN →
30

Suppliers · partners

28 VENDORS · SCORECARDS
OPEN →
31
PENDING APPROVAL · $840

Purchase orders

38 POs · APPROVAL · DELIVERY
OPEN →
— 07 · Full module map

Every screen in the spec.

120 HTML files · one file per page. Regenerate: node scripts/build-all-pages.mjs

Auth

Booking

Admin

Settings

— 08 · Internationalization

Three languages. One feeling.

Language switcher in every header. Vazirmatn for Persian, automatic RTL. Translations live in /i18n/{fa,tr,en}.json.
EN · LTR

English

Drive something worth talking about.
USD · KM · GREGORIAN
TR · LTR

Türkçe

Konuşulmaya değer bir şey sürün.
TRY · KM · GREGORIAN
FA · RTL

فارسی

ماشینی برانید که تعریفش بماند.
USD / IRR · KM · شمسی / میلادی

Try the language switcher

Open any page and click the EN/FA/TR control in the header. Direction and the home page hero update instantly; the choice persists across page navigations via localStorage.