Room for the journey.
Clarity for the details.
The foundations and working components of Mora, a car rental marketplace in Montenegro. Travel pages use an editorial rhythm; booking and company tools use precise, compact layouts.
A local travel service with a practical side.
Mora uses a compact wordmark, an orange waypoint and a quiet green action colour. Photography supplies the sense of place. Every line of interface copy should help someone choose a car, understand a cost or complete a task.
Wordmark
moraKeep clear space equal to the waypoint diameter. Use the compact version in the workspace.
Writing
“Choose your pick-up city.”
“Refundable deposit: €100.”
“No cars match these filters.”
Specific labels. Visible conditions. One clear action at a time.
A small palette, with defined jobs.
Green identifies actions and selected states. Orange is a brand accent. Status messages combine text with colour, and keyboard focus uses a distinct blue outline.
--color-canvas
--color-surface
--color-ink
--color-sea
--color-accent
--color-muted
--color-line
--color-focus
Two voices. One hierarchy.
Baskerville brings character to travel headings. Helvetica Neue keeps forms, prices, vehicle names and workspace screens easy to scan. System fallbacks keep the pages independent of a font service.
Baskerville · Regular
Baskerville · Regular
Helvetica Neue · Medium
Helvetica Neue · Regular
Medium · 0.14em tracking
Every state belongs to the system.
Actions
Primary 48–52 px · Compact 42 px desktop / 44 px mobile · Radius 6 px
Default and disabled
Validation
Choices and status
Give related things a shared rhythm.
Use 4, 8, 12, 16, 24, 32, 48, 64 and 96 px. Keep labels near their fields and leave more space between independent decisions. Content caps at 1280 px, with 48 px desktop and 20 px mobile gutters.
Shape
6 px controls · 10 px cards · 12 px dialogs
Circles are reserved for compact arrow actions and the brand waypoint.
Motion
160–200 ms colour and border transitions. Images may scale by 4% on hover. Reduced-motion preferences disable transitions.
Different work deserves a different layout.
| Page | Structure | Mobile priority |
|---|---|---|
| Home ↗ | Editorial introduction beside a dedicated trip planner; destination atlas below. | Heading → trip planner → landscape → cars. |
| Search ↗ | Three-column catalogue with an on-demand filter drawer and removable filter chips. | Search summary → filter/sort toolbar → one-column cards. |
| Vehicle ↗ | Photo and facts first. Rental configuration and price summary form a second stage. | Sticky jump to rental configuration; full-width fields. |
| Account ↗ | Compact form card beside an introduction and destination photograph. | Short introduction followed immediately by the form. |
| Workspace ↗ | Persistent company navigation, compact metrics, task rows and neutral data panels. | Section drawer, two-column metrics, single-column forms. |
Keyboard focus is visible. Dialogs support Escape and focus return. Forms have persistent labels. Status and validation messages use text as well as colour.