KOLEO

Overview

KOLEO is Poland's unified railway ticketing platform, serving millions of commuters and travelers seeking clarity and efficiency in multi-carrier train booking. The design system embodies "Authoritative Clarity"—a visual language that combines deep-purple institutional trust with teal accents that signal modern, accessible technology. The brand personality is direct, helpful, and reassuring: users come to KOLEO to solve a problem (finding and buying train tickets) and the interface removes friction through clean hierarchy, predictable interactions, and confident color choices. The UI voice is conversational yet precise—never jargon-heavy, always action-oriented. Example: "Dokąd jedziemy?" (Where are we going?) frames the search as a shared journey, not a transaction.

Colors

The color system is built on a foundation of deep purple (#211563) as the primary brand anchor—used for headers, primary CTAs, and the hero section backdrop. This color conveys institutional authority and railway heritage while remaining modern. The secondary accent, a vibrant magenta (#e1266b), is reserved for secondary CTAs and alerts, creating visual urgency without competing with primary actions. The tertiary accent, a refreshing teal (#5bd4c5), appears as a highlight color for labels, icons, and interactive states, signaling clarity and digital modernity. The surface palette ranges from off-white (#f5f5fa) for the main background through a carefully calibrated stack of purples (#e5e3f2, #dad8e9, #bab6d3) for containers and interactive states. All text on light surfaces uses #150c4b (n

Typography

The type system pairs Lato (body, labels, UI text) with Montserrat (accent headings, CTAs) to balance approachability with authority. Display sizes (56px, 700 weight, -0.02em letter-spacing) are used sparingly for hero headlines; headline-lg (36px, 700 weight) anchors section introductions. Body text is set at 16px (400 weight, 24px line-height) for comfortable reading; labels use 14px (700 weight, 0.01em letter-spacing) for form fields and buttons. The label-sm variant (12px, 700 weight) is applied to badges and metadata. All typography uses a unitless line-height ratio (1.4–1.6) to scale proportionally. On small labels over busy backgrounds (e.g., station icons in the search panel), apply text-shadow: 0 0 16px rgba(33, 21, 99, 0.5) to ensure legibility. Montserrat is reserved for button

Layout

The layout uses a fluid 12-column grid with a max-width container of 1380px, centered with auto margins. Horizontal padding is responsive: 16px on mobile (< 768px), 40px on tablet (768–1440px), and 80px on desktop (> 1440px). The hero section spans full-width with a dark background and overlaid search panel; the search panel itself uses a 3-column grid on desktop (from, to, date + button) and stacks vertically on mobile. Section spacing follows the lg token (40px) for major breaks, md (24px) for component groups. The search panel container has 8px internal padding with a subtle box-shadow (0 6px 12px rgba(21, 12, 75, 0.08)) to lift it from the background. Cards and promotional sections use md (24px) padding and are separated by 64px (xl spacing) on desktop, 40px on mobile. The container ma

Elevation & Depth

Depth is conveyed through a three-tier shadow system and strategic use of background color shifts. Level 1 (Base): flat surfaces on the main background (#f5f5fa) with no shadow. Level 2 (Raised Cards): 0 6px 12px rgba(21, 12, 75, 0.08) applied to cards, input fields, and search panels—this soft shadow creates subtle separation without visual heaviness. Level 3 (Modals/Dropdowns): 0 16px 40px rgba(21, 12, 75, 0.12) for overlays and floating menus. Interactive states use background color shifts rather than shadow changes: on hover, cards transition from #ffffff to #efeffa (surface-container-low)

Shapes

The shape language is "Technical Warmth"—rounded corners that feel modern and approachable without sacrificing clarity. The default radius is 0.5rem (8px), applied to buttons, input fields, and small components. Larger containers (cards, panels) use 0.8rem (12px) to create visual hierarchy. The search panel and hero section use 0.8rem for consistency with button styling. Badges and avatars use full (9999px) for perfect circles. The rationale: 8px is the sweet spot between the austere 4px (too sharp for a consumer platform) and 16px+ (too soft for a transactional interface). All radius values u

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #211563 background, white text, 16px Montserrat 700 weight, 16px vertical / 36px horizontal padding, and 0.8rem border-radius. On hover, the background shifts to #150c4b (darker purple) over 250ms. On focus-visible, the same darker background is applied with outline: none (focus is managed via background color, not outline, to maintain visual consistency). The button-secondary uses #e1266b background with white text, 16px Lato 400 weight, and 16px / 46px padding; on hover, it darkens to #c91a5f. Button-ghost has a transparent background with a 1px solid #45388f border and primary text color; on hover, the background becomes #dad8e9. All buttons have a 1px border and transition: background 0.2

Do's and Don'ts

**Do**

• Do use #211563 (primary) for all primary CTAs, headers, and hero sections—it is the brand's signature color and must dominate interactive moments.
• Do apply the md shadow (0 6px 12px rgba(21, 12, 75, 0.08)) to all floating elements (cards, panels, dropdowns) to create consistent depth without visual clutter.
• Do pair Lato body text (16px, 400 weight, 24px line-height) with Montserrat button labels (14px, 700 weight) to create clear visual hierarchy between content and actions.
• Do use the teal accent (#5bd4c5) sparingly for icons, labels, and focus states—it signals clarity and modernity without overwhelming the purple-dominant palette.
• Do maintain 8px (0.5rem) as the base unit for all spacing, padding, and border-radius calculations to ensure a cohesive, predictable rhythm across all breakpoints.

**Don't**

• Don't use #e1266b (secondary magenta) for primary CTAs or hero elements—reserve it for secondary actions, alerts, and promotional accents only.
• Don't apply shadows larger than lg (0 16px 40px) to any component; the system uses only sm, md, and lg to maintain visual restraint.
• Don't mix Lato and Montserrat in the same text block; use Lato for all body/label content and Montserrat only for button text and promotional headlines.
• Don't set border-radius smaller than 0.5rem (8px) on interactive elements—the minimum ensures buttons and inputs feel modern and approachable, not austere.
• Don't use the surface-variant color (#bab6d3) for text; it is reserved for borders and dividers only. Use on-surface (#150c4b) or on-surface-variant (#5b528e) for all readable content.