DESIGN.md · Analysis

HolidayCheck

holidaycheck.de · 30 Oct 2026 · 47 colors · Montserrat, PT Sans

HolidayCheck

HolidayCheck is a German travel booking and hotel review portal that compares package holidays, hotels and rental cars across 100 tour operators. The interface pairs a deep navy canvas with a purple-to-coral brand gradient and a bright yellow-accented primary blue for conversion actions.

Colors

surface#000820

surface-dim#000820

surface-bright#09337b

surface-container-lowest#000820

surface-container-low#09337b

surface-container#481d6b

surface-container-high#5c2a86

surface-container-highest#9db2d6

on-surface#ffffff

on-surface-variant#111111

inverse-surface#ffffff

inverse-on-surface#000820

outline#556685

outline-variant#e7e9ee

surface-tint#0e55cd

primary#0e55cd

on-primary#ffffff

primary-container#09337b

on-primary-container#9db2d6

inverse-primary#4286f6

secondary#fce70f

on-secondary#000820

secondary-container#feac1b

on-secondary-container#000820

tertiary#fc8281

on-tertiary#000820

tertiary-container#e179d3

on-tertiary-container#481d6b

error#fc8281

on-error#000820

error-container#481d6b

on-error-container#fc8281

primary-fixed#4286f6

primary-fixed-dim#0d4ab3

on-primary-fixed#111111

on-primary-fixed-variant#9db2d6

secondary-fixed#feac1b

secondary-fixed-dim#fce70f

on-secondary-fixed#000820

on-secondary-fixed-variant#481d6b

tertiary-fixed#e179d3

tertiary-fixed-dim#fc8281

on-tertiary-fixed#481d6b

on-tertiary-fixed-variant#5c2a86

background#000820

on-background#ffffff

surface-variant#f8eafb

Typography

display: fontFamily: Montserrat · fontSize: 32px · fontWeight: 700 · lineHeight: 39.04px · letterSpacing: 0em
headline-lg: fontFamily: Montserrat · fontSize: 48px · fontWeight: 800 · lineHeight: 1.15 · letterSpacing: 0em
headline-md: fontFamily: Montserrat · fontSize: 32px · fontWeight: 800 · lineHeight: 40px · letterSpacing: 0em
title-lg: fontFamily: Montserrat · fontSize: 24px · fontWeight: 700 · lineHeight: 29px · letterSpacing: 0em
body-lg: fontFamily: PT Sans · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
body-md: fontFamily: PT Sans · fontSize: 16px · fontWeight: 400 · lineHeight: 18.4px · letterSpacing: 0em
label-md: fontFamily: Montserrat · fontSize: 16px · fontWeight: 400 · lineHeight: 0px · letterSpacing: 0.025rem
label-sm: fontFamily: Montserrat · fontSize: 12px · fontWeight: 700 · lineHeight: 18px · letterSpacing: 0em

Design guidance

Overview

HolidayCheck is a travel marketplace built on user-generated hotel reviews and price comparison. The interface reads as a bold, promotional booking surface: deep navy canvas, a purple-to-coral gradient for campaign moments, and saturated blue CTAs that drive search and sign-up. The emotional response is reassurance plus urgency, as countdown timers and cashback offers sit beside verified review counts.

Tone is direct, friendly German ("Dein Urlaubsportal", "jetzt buchen"), using the informal second person and exclamation-led headlines such as "Sichere Dir bis zu 800 € Club-Cashback". Example sentence: "Sichere Dir bis zu 800 € Club-Cashback — kostenlos anmelden."

Colors

Primary (#0e55cd) is the signature CTA blue used on the search button and key links; hover shifts to #0d4ab3 and active to #0a3886 with 0.2s ease-in-out transitions. Secondary (#fce70f) and secondary-container (#feac1b) are the yellow highlights used for rating accents and dots. Tertiary (#fc8281) and tertiary-container (#e179d3) form the campaign gradient linear-gradient(102deg, #fc8281 2.94%, #e179d3 10.01%, #481d6b 32.22%).

The surface stack runs from the navy base #000820 up through #09337b and #481d6b to #5c2a86 for elevated campaign cards. Text on dark surfaces is #ffffff; secondary text uses #9db2d6. Light pill surfaces use #F8EAFB to #E5CBED as a gradient with #451F64 text.

Typography

Montserrat (weights 700 and 800) carries headings and labels; PT Sans (400) carries body copy at 16px/24px. Headlines use tight 1.15 line heights, and the hero headline applies text-shadow 0 0 2px #888899 for legibility over photography. Labels use letter-spacing 0.025rem at 14px and uppercase transforms are reserved for small nav links.

Layout

The layout is a fluid grid capped at a 1200px container, with 20px gutters on mobile and 32px horizontal padding from 1024px upward. Sections separate with 24px to 64px vertical spacing (2xl to 4xl steps), and the hero uses a fixed 540px height that grows to 600px above 600px width.

Elevation & Depth

Depth comes mostly from colour layering rather than shadow. Cards use box-shadow 0px 1px 4px rgba(0, 8, 32, 0.12) plus 0px 4px 8px rgba(0, 8, 32, 0.08). The campaign gradient element carries 0 8px 24px rgba(72, 29, 107, 0.45) to lift it off the navy background. Translucent panels use background rgba(255, 255, 255, 0.1) with a 1px border of rgba(255, 255, 255, 0.3).

Shapes

Shapes mix pill and softened-rectangle geometry. Buttons and inputs use fully rounded 100px (9999px) ends, cards and campaign panels use 12px radius, and the hero badge and small tiles use 4px to 8px. Rounder radii signal friendly conversion, while tighter corners signal data tiles such as countdown boxes.

Components

Action Elements Primary CTAs are solid #0e55cd pills, 48px tall with 24px horizontal padding, Montserrat 700 at 16px. Hover transitions to #0d4ab3 over 0.2s ease-in-out and active drops to #0a3886 over 0.1s. Secondary buttons are light pills (#F8EAFB to #E5CBED) with #451F64 text and a 0.3s all-property transition.

Containers & Surfaces Campaign panels use a 12px radius and a 20px 16px padding on mobile, expanding to 20px 32px on desktop. Countdown tiles sit in 4px-radius boxes with rgba(255, 255, 255, 0.1) backgrounds and rgba(255, 255, 255, 0.3) borders.

Inputs & Interaction Search inputs are fully rounded pills on a translucent #F8EAFB field with 16px horizontal padding. Focus states use a 2px solid #0E55CD outline with 2px offset and a 4px radius on links.

Do's and Don'ts

**Do**

Use #0e55cd as the single dominant CTA colour and reserve yellow for rating or highlight accents only.
Pair Montserrat 800 headlines with PT Sans 400 body copy at 16px/24px for readable German copy.
Keep campaign gradients inside 12px-radius panels with the 0 8px 24px rgba(72, 29, 107, 0.45) lift.
Show countdown and cashback figures in 4px-radius tiles so they read as data, not decoration.

**Don't**

Don't place the #0e55cd primary on the #09337b or deeper navy surfaces without a light label, as contrast drops.
Don't use cookie-consent colours or buttons as brand references.
Don't mix pill and sharp radii within a single button row.
Don't animate the hero gradient faster than the 4s ease-in-out cycle.

---
version: alpha
name: HolidayCheck
description: >-
  HolidayCheck is a German travel booking and hotel review portal that compares package holidays, hotels and rental cars
  across 100 tour operators. The interface pairs a deep navy canvas with a purple-to-coral brand gradient and a bright
  yellow-accented primary blue for conversion actions.
logo:
  src: https://holidaycheck.de/public/assets/img/favicons/Icon-180.png
colors:
  surface: '#000820'
  surface-dim: '#000820'
  surface-bright: '#09337b'
  surface-container-lowest: '#000820'
  surface-container-low: '#09337b'
  surface-container: '#481d6b'
  surface-container-high: '#5c2a86'
  surface-container-highest: '#9db2d6'
  on-surface: '#ffffff'
  on-surface-variant: '#111111'
  inverse-surface: '#ffffff'
  inverse-on-surface: '#000820'
  outline: '#556685'
  outline-variant: '#e7e9ee'
  surface-tint: '#0e55cd'
  primary: '#0e55cd'
  on-primary: '#ffffff'
  primary-container: '#09337b'
  on-primary-container: '#9db2d6'
  inverse-primary: '#4286f6'
  secondary: '#fce70f'
  on-secondary: '#000820'
  secondary-container: '#feac1b'
  on-secondary-container: '#000820'
  tertiary: '#fc8281'
  on-tertiary: '#000820'
  tertiary-container: '#e179d3'
  on-tertiary-container: '#481d6b'
  error: '#fc8281'
  on-error: '#000820'
  error-container: '#481d6b'
  on-error-container: '#fc8281'
  primary-fixed: '#4286f6'
  primary-fixed-dim: '#0d4ab3'
  on-primary-fixed: '#111111'
  on-primary-fixed-variant: '#9db2d6'
  secondary-fixed: '#feac1b'
  secondary-fixed-dim: '#fce70f'
  on-secondary-fixed: '#000820'
  on-secondary-fixed-variant: '#481d6b'
  tertiary-fixed: '#e179d3'
  tertiary-fixed-dim: '#fc8281'
  on-tertiary-fixed: '#481d6b'
  on-tertiary-fixed-variant: '#5c2a86'
  background: '#000820'
  on-background: '#ffffff'
  surface-variant: '#f8eafb'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: 700
    lineHeight: 39.04px
    letterSpacing: 0em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: '800'
    lineHeight: '1.15'
    letterSpacing: 0em
  headline-md:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: 800
    lineHeight: 40px
    letterSpacing: 0em
  title-lg:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 29px
    letterSpacing: 0em
  body-lg:
    fontFamily: PT Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  body-md:
    fontFamily: PT Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18.4px
    letterSpacing: 0em
  label-md:
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: 400
    lineHeight: 0px
    letterSpacing: 0.025rem
  label-sm:
    fontFamily: Montserrat
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 18px
    letterSpacing: 0em
rounded:
  sm: 4px
  DEFAULT: 8px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  gutter: 20px
  container-max: 1200px
elevation:
  sm: 0px 1px 4px rgba(0, 8, 32, 0.12)
  md: 0px 4px 8px rgba(0, 8, 32, 0.08)
  lg: 0 8px 24px rgba(72, 29, 107, 0.45)
layout:
  containerMaxWidth: 1200px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: '{spacing.2xl}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: '{colors.surface-variant}'
    textColor: '#451F64'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: '{spacing.2xl}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-variant}'
    textColor: '{colors.primary}'
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.lg}'
    padding: '{spacing.2xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    rounded: '{rounded.lg}'
  input-field:
    backgroundColor: '{colors.surface-variant}'
    textColor: '#111111'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    padding: '{spacing.lg}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#ffffff'
  badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-secondary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xs}'
  glass-panel:
    backgroundColor: rgba(255, 255, 255, 0.1)
    rounded: '{rounded.lg}'
    padding: '{spacing.lg}'
  hero-badge-gradient:
    backgroundColor: '{colors.tertiary}'
    textColor: '#111111'
    rounded: '{rounded.lg}'
    padding: '{spacing.sm}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary CTAs are solid #0e55cd pills, 48px tall with 24px horizontal padding, Montserrat 700 at 16px. Hover transitions to #0d4ab3 over 0.2s ease-in-out and active drops to #0a3886 over 0.1s. Secondary buttons are light pills (#F8EAFB to #E5CBED) with #451F64 text and a 0.3s all-property transition.

### Containers & Surfaces
Campaign panels use a 12px radius and a 20px 16px padding on mobile, expanding to 20px 32px on desktop. Countdown tiles sit in 4px-radius boxes with rgba(255, 255, 255, 0.1) backgrounds and rgba(255, 255, 255, 0.3) borders.

### Inputs & Interaction
Search inputs are fully rounded pills on a translucent #F8EAFB field with 16px horizontal padding. Focus states use a 2px solid #0E55CD outline with 2px offset and a 4px radius on links.

## Do's and Don'ts

**Do**
- Use #0e55cd as the single dominant CTA colour and reserve yellow for rating or highlight accents only.
- Pair Montserrat 800 headlines with PT Sans 400 body copy at 16px/24px for readable German copy.
- Keep campaign gradients inside 12px-radius panels with the 0 8px 24px rgba(72, 29, 107, 0.45) lift.
- Show countdown and cashback figures in 4px-radius tiles so they read as data, not decoration.

**Don't**
- Don't place the #0e55cd primary on the #09337b or deeper navy surfaces without a light label, as contrast drops.
- Don't use cookie-consent colours or buttons as brand references.
- Don't mix pill and sharp radii within a single button row.
- Don't animate the hero gradient faster than the 4s ease-in-out cycle.

Edit, then copy or download.