Kiwi.com Orbit Design System

# Orbit — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-tokens-package
confidence: high
verified_at: 2026-09-25
source_page: https://www.designsystems.one/design-systems/kiwi-orbit
sources:
  - https://kiwicom.github.io/orbit/
  - https://github.com/kiwicom/orbit/blob/126c4060f5897f88dec3c7c96f54675f6bf1af4d/packages/orbit-design-tokens/src/js/defaultFoundation.ts
  - https://github.com/kiwicom/orbit/blob/126c4060f5897f88dec3c7c96f54675f6bf1af4d/packages/orbit-design-tokens/src/js/createTokens.ts
  - https://github.com/kiwicom/orbit/blob/126c4060f5897f88dec3c7c96f54675f6bf1af4d/docs/src/documentation/02-foundation/10-typography/02-circular-pro.mdx
  - https://github.com/kiwicom/orbit
  - https://www.figma.com/@OrbitByKiwi
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Kiwi.com. "Orbit" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Orbit
**Owner:** Kiwi.com
**Official documentation:** https://kiwicom.github.io/orbit/
**Visual character:** Travel-booking optimism: Kiwi teal-green, cloud-and-ink neutrals named like weather, and density tuned for fare tables.

---

## Summary

Kiwi.com's open-source React component library and pattern guidelines tailored for building travel booking interfaces.

_Editorial confidence: high. Values are drawn from well-documented public token references. Values read from the kiwicom/orbit design tokens at the pinned commit (2026-09-28). The docs site orbit.kiwi no longer resolves; the maintainers' Storybook is kiwicom.github.io/orbit. The shipped font token is Roboto; Kiwi.com overrides it with its licensed Circular Pro, as the typography doc describes. Field-level evidence: 0/94 claims source-linked, 0/94 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=kiwi-orbit)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Product Normal | `#008f7b` | `--product-normal` | Kiwi.com brand and primary actions |
| Ink Dark | `#252a31` | `--ink-dark` | Primary text and headings |
| Ink Normal | `#4f5e71` | `--ink-normal` | Secondary text |
| Ink Light | `#657890` | `--ink-light` | Tertiary text |
| White | `#ffffff` | `--white` | Surfaces |
| Cloud Light | `#f5f7f9` | `--cloud-light` | Suppressed background |
| Cloud Normal | `#e8edf1` | `--cloud-normal` | Borders on flat surfaces |
| Red Normal | `#d21c1c` | `--red-normal` | Critical |
| Green Normal | `#048724` | `--green-normal` | Success |
| Orange Normal | `#b36200` | `--orange-normal` | Warning |
| Blue Normal | `#0070c8` | `--blue-normal` | Information |

## Typography

- **Body:** Roboto (default token); Circular Pro on Kiwi.com — weights 400, 500, 700 — `'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `40px` | `44px` |
| title-0 | `28px` | `36px` |
| title-1 | `24px` | `32px` |
| title-2 | `20px` | `28px` |
| title-3 | `18px` | `24px` |
| title-4 | `16px` | `22px` |
| body-normal | `15px` | `20px` |
| body-small | `13px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `2px` · `4px` · `8px` · `12px` · `16px` · `20px` · `24px` · `32px` · `40px` · `48px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| 100 | `4px` |
| 150 | `6px` |
| 200 | `8px` |
| 300 | `12px` |
| full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| level-1 | `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)` |
| level-2 | `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)` |

## Motion

| Name | Value |
| --- | --- |
| fast | `150ms` |
| normal | `300ms` |
| slow | `400ms` |

## Quick start (CSS)

```css
/* Orbit — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://kiwicom.github.io/orbit/
   Reference scope: Values read from the kiwicom/orbit design tokens at the pinned commit (2026-09-28). The docs site orbit.kiwi no longer resolves; the maintainers' Storybook is kiwicom.github.io/orbit. The shipped font token is Roboto; Kiwi.com overrides it with its licensed Circular Pro, as the typography doc describes.
   Field evidence: https://www.designsystems.one/api/style-spec?system=kiwi-orbit */

:root {
  /* Color */
  --product-normal: #008f7b; /* Kiwi.com brand and primary actions */
  --ink-dark: #252a31; /* Primary text and headings */
  --ink-normal: #4f5e71; /* Secondary text */
  --ink-light: #657890; /* Tertiary text */
  --white: #ffffff; /* Surfaces */
  --cloud-light: #f5f7f9; /* Suppressed background */
  --cloud-normal: #e8edf1; /* Borders on flat surfaces */
  --red-normal: #d21c1c; /* Critical */
  --green-normal: #048724; /* Success */
  --orange-normal: #b36200; /* Warning */
  --blue-normal: #0070c8; /* Information */

  /* Typography */
  --font-body: 'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;

  /* Type scale */
  --text-display: 40px; /* line-height 44px */
  --text-title-0: 28px; /* line-height 36px */
  --text-title-1: 24px; /* line-height 32px */
  --text-title-2: 20px; /* line-height 28px */
  --text-title-3: 18px; /* line-height 24px */
  --text-title-4: 16px; /* line-height 22px */
  --text-body-normal: 15px; /* line-height 20px */
  --text-body-small: 13px; /* line-height 16px */

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;

  /* Radius */
  --radius-100: 4px;
  --radius-150: 6px;
  --radius-200: 8px;
  --radius-300: 12px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-level-1: 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);
  --shadow-level-2: 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);

  /* Motion */
  --motion-fast: 150ms;
  --motion-normal: 300ms;
  --motion-slow: 400ms;
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Orbit by Kiwi.com — Kiwi.com's open-source React component library and pattern guidelines tailored for building travel booking interfaces. Character: Travel-booking optimism: Kiwi teal-green, cloud-and-ink neutrals named like weather, and density tuned for fare tables. Use a primary colour near #008f7b, the typeface "Roboto (default token); Circular Pro on Kiwi.com" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Orbit documentation](https://kiwicom.github.io/orbit/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/kiwi-orbit) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._