01Core Idea
The right time to book, without checking every day.
Travellers who already know which hotel they want do not need to track the price themselves. tripmonitor monitors it automatically, shows the price history and sends an email when their target price is reached.
02Positioning
A price alert for your chosen hotel.
02.1Category
tripmonitor starts where the hotel search ends. Instead of presenting new options, it tracks the selected hotel's price over time.
02.2Differentiation
- One selected hotel instead of a list of alternatives.
- A target price set by the traveller.
- Current prices and a visible price history.
- When to book, not where to book.
03Audience
For travellers with a specific hotel in mind.
03.1Who it is for
Travellers in the DACH market who have already chosen their hotel and travel dates and want to follow price changes before booking.
03.2Usage context
- The hotel and travel dates are fixed.
- The traveller has set a target price.
- The booking has not yet been made.
03.3Market
- Primary: Germany
- Secondary: Austria, Switzerland
- Language: German
04Brand Identity
Visual design and product language.
The logo and wordmark define the visual identity. The language style defines how tripmonitor communicates in the product.
tripmonitor
Monogram · formed from t and m
Logo & use
- ViewBox 64 × 64, stroke width 16, rounded caps
- Coral #fe6038 or currentColor on dark backgrounds
- Wordmark tripmonitor, always lowercase
04.1Language style
Calm
Direct and restrained. Information comes first.
Transparent
Prices and histories make changes easy to follow.
Precise
Short sentences and clear labels.
04.2UI copy rules
- Interactive icons have an accessible name.
- Error messages state what happened and what to do next.
- Requirements and limits appear where they matter.
- Use active verbs and short sentences.
- Buttons name the next action.
- Keep headings short and specific.
- Address users directly.
Search question
Which hotel do you want to monitor?
Price alert CTA
Set price alert
Confirmation
Your price alert is active. We will email you when your target price is reached.
Email subject
Your target price has been reached.
05Design System
Tokens, components and states.
–
Colour tokens
–
Type scale steps
–
Component states
–
System sections
05.1Structural colours · 11 tokens
05.2Brand · Coral
05.3Status colours · text, background and soft variants
| Status | Text | Background | Soft |
|---|---|---|---|
| success | #067647 | #ecfdf3 | #bbf7d0 |
| warn | #b54708 | #fffaeb | #fde68a |
| error | #b42318 | #fef3f2 | #fecaca |
| info | #175cd3 | #eff8ff | #bfdbfe |
| rating | #facc15 |
05.4Type scale
displayDisplay60 / 600
h1Page heading40 / 600
h2Section heading28 / 600
h3Subheading, card heading20 / 400
leadReading text on content surfaces16 / 400
bodyInterface base size14 / 400
smallTable cells, metadata13 / 400
labelEYEBROW · LABEL11 / 400
05.4aContent typography
| Role | Narrow | From md | Weight |
|---|---|---|---|
| Body text, paragraphs and list items | lead | lead | 400 |
| h2 subheading | h3 | h2 | 600 |
| h3 subheading | lead | h3 | 600 |
05.5Spacing · 4px grid
space-14 px
space-28 px
space-312 px
space-416 px
space-624 px
space-832 px
space-1040 px
05.6Radius
radius-sm
4 px
radius
12 px
radius-lg
8 px
radius-pill
999 px
05.7Elevation
elev-0
border only
elev-1
Cards and floating elements
elev-2
Popovers and modals
05.8Seasonal palette
| Season | base | bg | soft | strong |
|---|---|---|---|---|
| holiday-winter | #38bdf8 | #f0f9ff | #bae6fd | #0284c7 |
| holiday-oster | #fbbf24 | #fffbeb | #fde68a | #d97706 |
| holiday-pfingsten | #c084fc | #faf5ff | #e9d5ff | #9333ea |
| holiday-sommer | #60a5fa | #eff6ff | #93c5fd | #2563eb |
| holiday-herbst | #fb923c | #fff7ed | #fdba74 | #ea580c |
| holiday-weihnachten | #f87171 | #fef2f2 | #fecaca | #dc2626 |
| holiday-none | steel-light | offwhite | hairline | steel |
05.9Chart palette
| Token | Role |
|---|---|
| ink | Main curve, primary values |
| inkSoft | Second curve, legend, secondary values |
| steel | Axis captions, labels |
| steelLight | Axis lines |
| warnAccent | Warning accent in charts |
05.10Container & breakpoints
| Container | Value | Role |
|---|---|---|
| container-lg | 1152 px | Default section |
| container-search | 960 px | Hero search, hotel card |
| container-prose | 640 px | Long text, FAQ |
| container-cta | 896 px | Call to action band |
| container-col | 560 px | Single column, forms |
| Gradient | Role |
|---|---|
| grad-page | Page entry, ivory to white |
| grad-image-veil | Veil over images for text legibility |
| grad-coral-halo | Soft coral glow behind the primary action |
| Breakpoint | Value | Device |
|---|---|---|
| sm | 640 px | Phone |
| md | 768 px | Tablet |
| lg | 1024 px | Laptop |
| xl | 1280 px | Desktop |
05.11Components · states
Primary action button
Default
Hover
Pressed
Focus
Disabled
Hero search field
Default
Hover
Pressed
Focus
Disabled
Segmented search bar
| Property | Value | Reason |
|---|---|---|
| Focus carrier | segment wrapper, :focus-within | The input keeps its own styles untouched |
| Focus frame | inset 0 0 0 2px ink | Drawn inside the segment, cannot be clipped or cross a divider |
| Focus surface | offwhite | Lifts the active segment out of the white bar |
| Focus radius | radius-lg 8 px | Level with the container, because rounded-lg is 8 px in this project |
| Divider | hairline as a 1 px gap | Sits correctly on every row, including a wrapped one |
| Segment floor | 168 px, then the bar wraps | Longest label plus padding; values are never truncated |
| Hit area | whole segment, minimum 44 px | Label and padding become part of the target |
Price alert statuses
Monitoringinfo · #175cd3
Target price reachedsuccess · #067647
Pausedsteel · #6b7280
Price alert cards
Strandhotel · AdriaMonitoring
€1,148Target price €1,120
Alpenlodge · TirolTarget price reached
€1,090Target price €1,100
City Suites · WienPaused
€890Target price €850
05.12Motion
| Token | Value | Role |
|---|---|---|
| dur-fast | 120 ms | Colour, hover feedback |
| dur | 200 ms | State change, badge swap |
| dur-slow | 320 ms | Sheet and popover entrance |
| dur-chart | 640 ms | Chart reveal |
| ease-standard | 0.2, 0, 0, 1 | Most transitions |
| ease-out | 0.16, 1, 0.3, 1 | Entrance animations |
Hover lift
200 ms · ease-standard
Sheet entrance
320 ms · ease-out
Chart reveal
640 ms · ease-out
06aMockups · Product
From hotel search to price alert.
Every surface below is a real rendering built from the tokens in this document. Where a surface already exists in the product, the rendering follows it. Where it is new, the problem it solves is named underneath.
06a.1Hero screen · interactive
Voyage Torba
12.06.26 – 19.06.26
Exact dates
2 people, 1 room
Price history · 30 days
€1,040–€1,380
Target price €1,120
28 Apr8 May18 May28 May
Current price
€1,148per stay
Your target price
€1,120
Monitoring
Set price alert
€28 above your target price.
Cool grey palette
h3-weight 400
radius-sm 4px
grad-page #f3efe5
06a.2Price alerts
tripmonitor
New searchSettings
My price alerts
2 active · 1 expired
Voyage Torba
12 Jun – 19 Jun
Target price reached30 days agotoday
4,690 €
110 € below target
Target 4,800 €
Ikos Aria
3 Aug – 10 Aug
Monitoring30 days agotoday
6,540 €
340 € above target
Target 6,200 €
Tivoli Carvoeiro
14 May – 21 May
ExpiredMonitoring ended
06a.3Monitoring record
tripmonitor
New searchSettings
My price alerts
Regnum Crown
MonitoringTarget price 3,570 € · Travel dates 5 Jul – 12 Jul
Since 12 August, four times a day
120price checks
Next check
today, 22:00
25 AugustPrice fell by 50 € to 3,955 €
9 SeptemberLowest 3,625 €, 55 € above the target price
Lowest since start
3,625 €
Current
3,660 €
90 € above the target price
Range in this period
3,625–4,140 €
06a.4Target price reached
Target price reachedtoday, 18:40
Voyage Torba · 12 Jun – 19 Jun · 2 adults
4,690 €total · 670 € per night
110 € below your target price of 4,800 €
Where this price sits in the last 90 days
4,645 €Median 4,970 €5,390 €
45 € above the lowest price of the last 90 days. It was not noticeably cheaper in this period.
274 days until arrival. We keep monitoring if you do not want to book yet.
View offer
You book directly with the provider. The price can change at any time.
06a.5Price alert email
06a.6Core flow · price alert
01
Search for a hotel
The traveller selects the hotel they want to monitor.
User action02
Retrieve live prices
The current price and 30 day price history are displayed.
3–10 s03
Set target price
The target price is entered in a bottom sheet.
User action04
Monitor price
tripmonitor checks the price automatically.
Automatic05
Receive email
An email is sent when the target price is reached.
When reached06
View offer
The traveller reviews the offer and decides whether to book.
User action06bMockups · Web
Structure and content of the website
Key sections of the tripmonitor.de landing page.
06b.1Hero
tripmonitor
ProductPricesFAQSign inRegister
Find out when your hotel is particularly cheap
Set a price alert. We watch the prices and let you know when they change.
Example: Maxx Royal Belek showed a price movement of −30%.
06b.2Prices change over time
The problem
Hotel prices change over time.
90 days agotoday
06b.3In three steps
The product
Three steps. Nothing more.
No comparing. No guessing. tripmonitor does the watching for you.
Enter your hotel
You know where you want to go. Enter the hotel and we take care of the rest.
Understand the price
How has the price developed? We show it at a glance.
Set an alert
Tell us your target price. We watch and notify you when it is reached.
06b.4How tripmonitor works
How it works
How tripmonitor works.
Price monitoring
We check the price of your hotel several times a day, for weeks if needed. Prices come from Google Hotels, aggregated across booking portals.
Price history
Every check is kept, so you see where the current price sits in its own range instead of guessing.
Email alerts
One email when your target price is reached. No push, no daily digest, no reminders.
06b.5Plans
Prices
Start free
No credit card. No commitment. Upgrade when you need more.
Free
0 €
For trying out
- Monitor 3 hotels at once
- Automatic price checks
- Email when the target price is reached
Popular
Plus
7.99 €/month
For your holiday
- Monitor 5 hotels at once
- Automatic price checks
- Email when the target price is reached
- Weekly price report by email
Premium
9.99 €/month
For frequent travellers
- Monitor more hotels at once
- Automatic price checks
- Email when the target price is reached
- Daily and weekly report
14-day money-back guarantee · Cancel any time · All prices include VAT.
07Tech Stack
System overview
| Technologies and services | |
|---|---|
| Styling | Tailwind CSS + CSS Custom Properties |
| UI library | shadcn/ui (based on Radix UI) |
| Analytics | PostHog EU Cloud (Frankfurt) |
| Platform | Responsive web application |
| Backend | Supabase (Postgres, Auth) |
| Framework | Next.js 14 (App Router) |
| Charts | Recharts |
| Transactional email | Resend |
| Hosting | Vercel |
| Payments | Stripe |