Kiwi.com DESIGN.md

Design System Inspiration of Kiwi.com

Overview

Visual Theme & Atmosphere

Kiwi.com is a flight-focused online travel agent built around finding useful combinations of flights and reducing the work of a trip. Its own 2019 announcement dates the business to 2012 and names Oliver Dlouhý and Jozef Képesi as founders. The current About page pairs affordable flights with disruption protection, automatic check-in and live trip information. Company, 2019 partnership announcement.

The brand has a technological and a reassuring side. Its October 2022 identity announcement put Kiwi-Code at the centre of its positioning, with an internal creative team using travel-hack videos, analogy and humour. Today the product leads with “Fly for less, Guaranteed!” The captured homepage expresses that combination through green actions on pale grounds, dark ink, rounded controls, destination photography and friendly three-dimensional travel characters. A prominent white search panel gives the booking task visual priority. Identity announcement, About, live homepage capture of 2026-10-29.

The product is also expanding how search begins. Beside the conventional Search tab, the live page shows an AI Mode marked BETA. Kiwi.com's 15 October 2026 announcement describes conversational flight search in its app and access through external AI assistants, with booking links returning travellers to its booking funnel. This is a documented product evolution; the AI mode's interaction was not measured. Current search direction.

Brand Narrative

The current story joins low fares with support when plans change. The homepage gives the search task a prominent panel, then makes room for loyalty and Guarantee messages; the About page explains the practical reassurance behind those messages. About, live full-page capture.

Principles

As implementation guidance derived from this capture: give the main search action the green fill; distinguish text actions through ink; use white panels and restrained neutrals for booking information; reveal more route information inside the destination card on hover. Orbit's official repository states a broader aim of consistency across products and processes. Orbit repository.

Personas

The 2022 identity announcement names three campaign archetypes for influencer cooperation: Digital Innovator, explaining the technology; Disruptor, finding ways to travel for less; and Explorer, seeking adventure. This is dated campaign evidence; current user segmentation was not researched. Identity announcement.

Colors

Use the product vocabulary measured on the English homepage. The palette below comes from the census's computed custom properties; the Explore button independently confirms the primary action ramp. Generic utility colours are excluded.

The semantic and field-border roles are verified CSS values. Error, success, warning and invalid-form workflows were not exercised. Transparency remains transparency: text actions, the destination input and the destination-card anchor report rgba(0,0,0,0) on their own boxes.

Typography

Official product use. No opened narrative source explicitly names the current homepage's typeface. The official Orbit repository gives a Roboto import example for its component library. That is library guidance and does not establish the face rendered by this homepage. Orbit repository.

Live-loaded. The census records circular in normal weights 400, 500 and 700. Body, H1 and buttons declare it first; all six measured control roots compute to circular. The machine family is therefore the exact CSS name circular, without an inferred commercial family suffix. The census also lists a generated circular Fallback face; it is excluded from the brand family and specimens.

Serving evidence and distributed assets. The live @font-face rules serve WOFF2 files named book-s.p.3b7d6vqz6atuh.woff2, medium-s.p.40f_4n8xx_089.woff2 and bold-s.p.38uj6r7294a5j.woff2, each with deployment query dpl=v2026-10-29_1 and relative ../media/ sources. The homepage links its CSS from static.kiwi.com. No separate official font kit or licence was opened; font files were not downloaded.

Declared-only. A 400 italic circular rule points to book_italic-s.p.0qm1nu2qxi4t3.woff2, but that face is absent from the loaded list. It gets no live specimen. Platform names in fallback stacks do not establish additional product faces.

Unresolved. The opened evidence does not establish the foundry, full commercial font name, redistribution terms or coverage by writing system. Substitute: none chosen.

The declared heading size / line-height pairs are 28/36, 24/32, 20/28, 18/24, 16/22, 15/20 and 13/18px for title0 through title6. Each corresponding heading-weight token is 700. These are available CSS roles rather than a claim that every tier appears on this page.

Layout

At 1440 × 1000px, the header is 64px tall and keeps travel navigation on the left and regional/help/account actions on the right. The hero places its search form above a Club promotion, followed by a Guarantee banner, destination cards beside a newsletter panel, an app promotion, popular routes and footer directories. These relationships are visible in the saved full-page capture; they are not a measured mobile layout.

The stylesheet defines content-width roles of 1120px (--spacing-content-small) and 1320px (--spacing-content-large). The spacing series --spacing-50, -100, -150, -200, -300, -400, -500, -600, -700, -800, -1000, -1200, -1300, -1600 resolves to 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 52, 64px. Use the named role that corresponds to the component rather than treating every gap as interchangeable.

The radius series is 0, 2, 4, 6, 8, 12 and 16px, from --radius-none and --radius-50 through --radius-400. The search-mode tabs separately measure a 9999px pill radius. The input's square inner box should not be used to infer the enclosing field's radius.

Responsive Behavior

Only the 1440 × 1000px desktop surface was measured; mobile layout and breakpoint behaviour are absent.

Elevation & Depth

Pressing Explore or the Club CTA adds inset 0 0 6px 3px rgba(37,42,49,0.15). This matches --shadow-button-active, whose raw value is inset 0 0 6px 3px #252a3126. Rest and hover show no button shadow.

The Bangkok card's non-transparent shadow layers at rest are:

0 2px 6px 0 rgba(79,94,113,0.08),
0 0 2px 0 rgba(79,94,113,0.12),
0 0 1px 0 rgba(41,47,55,0.3)

Hover and pressed use:

0 8px 24px -5px rgba(79,94,113,0.1),
0 5px 16px -3px rgba(79,94,113,0.12),
0 1px 4px 0 rgba(79,94,113,0.12),
0 0 1px 0 rgba(41,47,55,0.3)

These transcriptions omit four transparent zero-size utility shadow layers that draw nothing. The card's rest image overlay is linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.6)). White labels sit over that image treatment; on hover a separate white content layer becomes opaque.

Motion & Easing

Explore, both measured header actions and the Club CTA declare all 0.15s cubic-bezier(0.4, 0, 0.2, 1). The Bangkok anchor declares box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1). The destination input records a 0.5s colour/background/border/outline transition bundle with cubic-bezier(0, 0, 0.2, 1). These are computed component timings; the easing curves also occur among generic utility defaults and are not claimed as exclusive brand tokens. Reduced-motion behaviour and individual image-translation values were not measured.

---

Live evidence: English homepage, en-US, 1440 × 1000px, 2026-10-29. Full census and six-control measurements are preserved in the evidence folders listed in verification.md; narrative links above were opened directly.

Components

Measurements are from one desktop state pass after the tool recorded Reject all. The four text/CTA controls each have one text child; the card has fifteen descendants. All six matched a single candidate.

Explore darkens on hover and adds an inset shadow when pressed. The Club CTA uses the darker product ramp. The header actions change text colour without filling their boxes. The destination card reveals a white information layer on hover; reproduce the child treatment as well as the anchor geometry. The States table below gives the complete measured state differences.

States

Each hover snapshot reports :hover = true; each pressed snapshot also reports :active = true. Samples waited 900ms, longer than the recorded transitions. Focus came from a real Tab walk.

On the card, the content grid grows from 211 × 99px to 211 × 127px. The destination row grows from 187 × 28px to 187 × 56px, and the previously hidden country suffix becomes visible. The anchor stays 211.2 × 234px. The origin icon changes to secondary ink and the destination arrow to primary ink along with their labels.

The input comparison covers its own box and pseudos plus three ancestor levels, with no descendants. The pointer pass occurs after the Tab walk, when its wider layout and blue inset line are already retained. Its no-change results therefore apply to that parked state, not to a fresh unopened field. The focus inset's raw colour is oklab(0.541412 -0.0504551 -0.152259); its pristine 1px inset is oklab(0.82401 -0.00823078 -0.0228384). No inferred hex is substituted for either.

For the four simple actions the comparison covers the control, one text child, their pseudos and three ancestor levels. For the card it covers fifteen descendants, including two empty layers, two SVGs, two paths and one image, plus pseudos and three ancestor levels. “No additional delta” is limited to those computed styles and DOM attributes; sibling elements, canvas/video pixels, closed shadows and cross-origin frames are outside the probe. Disabled states were not measured. Browser auto rings produce no brand focus token.

Do's and Don'ts

• Use the measured green ramps for primary and Club actions, with dark ink for ordinary text.
• Keep normal actions 44px high and the measured large Club action 52px high.
• Preserve the card's visible child colours and white-layer reveal when recreating its interaction.
• Keep the loaded circular face separate from library font examples and generated fallbacks.
• Do not turn generic utility colour ramps, provider colours or browser auto outlines into Kiwi.com brand tokens.
• Do not infer mobile layouts, disabled states or validation behaviour from this desktop capture.

Voice & Tone

The current About page addresses the traveller directly and connects price with reassurance. Its language focuses on making a trip easier, handling disruption and keeping travellers informed. The 2022 identity announcement additionally describes analogy and humour in travel-hack videos; that evidence concerns the campaign's expression. About, identity announcement.

Agent Prompt Guide

“Build a flight-search panel with white surfaces and #252a31 foreground. Use the live-loaded circular family. Give the Explore action a 44px height, 8px radius, 0 16px padding and 15px/500 text; fill it #008f7b, darken to #007565 on hover and #006153 on press with the measured inset shadow. Keep header text actions transparent. Put destination photography in 6px-radius cards and reveal a white information layer on hover.”

Use the measured controls as component examples. Unverified workflows and absent font assets require separate evidence before extending the reference.

Governance

Known Gaps

• Contrast, explore. Text #ffffff on #008f7b measures 4.03:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.