Skip to content
DesignMunkDesignMunk Submit a site

Rigakvest

rigakvest.com
Онлайн квест по старому городу Риги!
Entertainment Travel Homepage Gilroy
Share Visit site
rigakvest.com DESKTOP · 1440
Rigakvest

AI Breakdown

Design export

---
version: alpha
name: Rigakvest
description: Онлайн квест по старому городу Риги!
colors:
  primary: "#000000"
  secondary: "#c7d2e9"
  tertiary: "#d0514a"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-eerie-black: "#1c1c1c"
  brand-pale-berry: "#e49c9c"
  brand-introspective: "#6b6154"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Gilroy
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: Times New Roman
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.21
  headline-sm:
    fontFamily: Times New Roman
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  headline-xs:
    fontFamily: Times New Roman
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Times New Roman
    fontSize: 16px
    fontWeight: 400
rounded:
  sm: 8px
  md: 30px
spacing:
  xs: 2px
  sm: 16px
  md: 24px
  lg: 38px
  xl: 60px
components:
  button-primary:
    backgroundColor: "#151515"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 26px 33px
    height: 73px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 26px 33px
    height: 73px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Rigakvest: Ribbon Path Hero Over Old Riga's Rooftops

## Overview

Rigakvest targets travelers seeking a self-guided, game-like tour. The tone is welcoming and lightly adventurous: calm surfaces and a single expressive route graphic over photography. Density is medium—large pill CTAs and roomy section paddings keep the layout breathable while body copy remains concise. When tokens don't specify, favor clarity, spacious margins, and one accent at a time.

## Colors

- primary (#000000): Core text, icons, and high-contrast elements.
- secondary (#c7d2e9): Pale blue for subtle section tints, route UI, and chips.
- tertiary (#d0514a): Brick-red accent for markers, highlights, and strong emphasis.
- neutral (#ffffff): Page background, cards, and inputs.
- border (#e5e7eb): 1px dividers and hairline outlines.
- brand-eerie-black (#1c1c1c): Deep brand wordmark or dark overlays where a richer black is needed.
- brand-pale-berry (#e49c9c): Soft supporting tint for badges or gentle highlights.
- brand-introspective (#6b6154): Muted supporting tone for icons or metadata.
- surface (#ffffff): Default component surface; same as neutral.
- on-surface (#000000): Text and icon color on surface elements.

## Typography

- Headline LG: Gilroy, 48px, 500, line-height 1. Used for the hero and key section intros. Gilroy is self-hosted (type: custom). If unavailable, substitute with Poppins, Manrope, or Plus Jakarta Sans for a clean geometric sans feel.
- Headlines MD/SM/XS: Times New Roman at 24px/20px/18px, 500, tight leading. Use for section headings, subheads, and labels where a classic tone is desired. If Times New Roman isn't available, use Lora, PT Serif, or Noto Serif as close, free substitutes.
- Body MD: Times New Roman, 16px, 400. Prefer short paragraphs and concise lead-ins beneath headings to keep the page light over photography.
- Pairing guidance: Keep Gilroy for primary display moments and Times for everything explanatory; avoid mixing both within the same line.

## Layout

Spacing scale drives rhythm:
- xs 2px for hairline gaps and icon nudges.
- sm 16px for card padding and mobile gutters.
- md 24px for inter-block spacing in content groups.
- lg 38px for section padding or hero text offsets.
- xl 60px for top/bottom breathing room in major sections.
Use a fluid grid with generous outer margins; on wide screens, stage content left-aligned over photography with sm/md spacing inside cards and lg/xl between sections.

## Elevation & Depth

Depth is minimal. A single soft shadow (sm: rgba(94,94,94,0.1) 0 25px 35px 0) is available for floating elements over photography. Most hierarchy comes from white surfaces, the border color (#e5e7eb), and tonal steps between neutral and secondary tints. Reserve shadows for sticky navs, modals, and price/CTA groupings.

## Shapes

Two radii define the language:
- sm 8px for cards and input containers—structured and readable.
- md 30px for CTAs, chips, and counters—friendly, touch-ready, and consistent with the quest's "route" motif. Avoid mixing other corner sizes.

## Components

### Button — Primary
- Background: #151515; Text: #000000; Height: 73px; Padding: 26px 33px; Radius: 30px.
- Use for the main CTA (e.g., "Let's go!"). Place on light surfaces for maximum contrast and keep one per screen when possible.

### Button — Secondary
- Text: #ffffff; Height: 73px; Padding: 26px 33px; Radius: 30px.
- Use for supportive actions near the primary CTA or in nav. Pair with a contrasting background strip or image area so the white text remains legible.

### Button — Link
- Text: #000000; Radius: 0px.
- Inline actions in paragraphs and lighter prompts.

### Card
- Background: #ffffff; Text: #000000; Radius: 8px; Padding: 16px; Optional shadow: sm.
- Use for feature tiles, FAQs, and contact blocks.

### Top Navigation Bar
- Left logo wordmark; right cluster with email, language switcher, and a pill "Pay" action using 30px radius. Use border #e5e7eb on scroll.

### Hero with Route Line
- Full-bleed city photography with the h1 set in Gilroy 48/500 and a single primary CTA. The route graphic can be drawn with secondary (#c7d2e9) to avoid competing with copy.

### Feature Triptych
- Three 8px-radius cards with 16px padding describing: Online via Telegram, Easy payment, Come in anytime. Headings at 20–24px Times, body at 16px Times; icons or markers tinted tertiary (#d0514a).

### Price Badge
- Prominent "20€" displayed near CTAs. Compose as a pill or compact card: 30px radius, white surface, border #e5e7eb; headline at 24px Times.

### Language Switcher
- RU/EN pills using 30px radius, small internal padding (sm/16px), and border #e5e7eb. Active state may invert on a secondary tint.

### Contact & Footer Panel
- Card-like blocks with phone, email, and social links. Use 8px radius, 16px padding, and body at 16px Times; apply the sm shadow when placed over photography.

### Payment Modal / Order Section
- White 8px-radius container with 16px padding and the primary action button. Use border #e5e7eb to separate form groups and keep spacing at md between fields.

## Do's and Don'ts

- Do keep CTAs in 30px-radius pills and use one primary action per view.
- Do space sections with lg (38px) to xl (60px) to prevent crowding over photography.
- Do use #e5e7eb for all dividers; avoid darker rules that fight the imagery.
- Don't mix Gilroy and Times within a single line or button.
- Don't place the primary button on dark imagery; keep it on neutral surfaces for contrast.
- Don't introduce new corner radii; stick to 8px and 30px for consistency.

## Agent Prompt Guide

Quick palette reference:
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #d0514a

1) Build a photo hero with CTA
- Container: full-bleed background image, inner padding top/bottom 60px.
- H1: font-family "Gilroy", 48px, 500, line-height 1, color #000000, max-width 12–14 words.
- CTA: 73px height, padding 26px 33px, border-radius 30px, background #151515, text #000000, placed below h1 with 24px gap.

2) Create the top navigation
- Left: wordmark; Right: email link, RU/EN language chips (radius 30px, border 1px #e5e7eb, text #000000), and a primary "Pay" button (same specs as CTA). Nav background #ffffff; bottom border 1px #e5e7eb.

3) Feature card grid (3 items)
- Each card: background #ffffff, text #000000, border 1px #e5e7eb (optional), border-radius 8px, padding 16px, shadow rgba(94,94,94,0.1) 0 25px 35px 0 when over a photo.
- Headline: Times New Roman 20–24px, 500; Body: Times New Roman 16px, 400. Accent icons in #d0514a.

4) Price callout
- Surface: white 8px-radius card, padding 16px, subtle border #e5e7eb.
- Price text: Times New Roman 24px, 500, color #000000; supporting copy at 16px.
- Place primary button below with 24px gap.

5) Payment modal
- Overlay card: background #ffffff, radius 8px, padding 16px, optional shadow (rgba(94,94,94,0.1) 0 25px 35px 0).
- Headline: Gilroy 24–48px depending on context; Inputs spaced by 16–24px; Primary action uses the 73px pill spec.

## Similar Brands

- Airbnb Experiences: photography-first marketing with restrained UI; Airbnb is warmer and rounder, while Rigakvest is cooler with a serif body.
- Lonely Planet: clear travel storytelling and serif body copy; Lonely Planet uses stronger blues and denser typography.
- Geocaching: gamified exploration with map-centric cues; Rigakvest is more editorial and photography-led.
- Google Maps Local Guides: emphasizes discovery and badges; Rigakvest focuses on a linear route narrative with a single purchase point.

More like this

Browse Entertainment →
hackney.church
Hackney Church Entertainment
Hackney Church
Hope for East London—Hackney Church welcomes you with music and events.
Homepage · 1 week ago
outsite.co
Outsite Lifestyle
Outsite
Work anywhere. Live differently. Beautiful places to stay.
Homepage · 2 weeks ago
relocatenow.io
Relocate Now Software
Relocate Now
Making your move & life abroad simpler
Homepage · 2 weeks ago
guesty.com
Guesty Features AI
Guesty Features
The hero centers a large, high-contrast headline with a mixed serif/italic accent on Guesty’s “Unified Inbox,” supported by concise subcopy and a…
Features · 3 weeks ago