Orbit

# Orbit — Design Style Reference

> **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://orbit.kiwi/
**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.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Product Green | `#00a58e` | `--orbit-palette-product-normal` | Kiwi.com brand and primary actions |
| Ink Dark Text | `#252a31` | `--orbit-palette-ink-dark` | Primary text |
| Ink Light | `#697d95` | `--orbit-palette-ink-light` | Secondary text |
| White | `#ffffff` | `--orbit-palette-white` | Surfaces |
| Cloud Light | `#f5f7f9` | `--orbit-palette-cloud-light` | Subtle background |
| Cloud Dark Border | `#e8edf1` | `--orbit-palette-cloud-dark` | Borders |
| Red Normal | `#d21c1c` | `--orbit-palette-red-normal` | Errors |
| Green Normal | `#28a138` | `--orbit-palette-green-normal` | Success |
| Orange Normal | `#df7b00` | `--orbit-palette-orange-normal` | Warnings |
| Blue Normal | `#0172cb` | `--orbit-palette-blue-normal` | Information |

## Typography

- **Body:** Circular Pro / system — weights 400, 500, 700 — `'Circular Pro', -apple-system, 'Segoe UI', Roboto, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| title-1 | `28px` | `36px` |
| title-2 | `22px` | `28px` |
| title-3 | `16px` | `22px` |
| body-normal | `14px` | `20px` |
| body-small | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| normal | `4px` |
| large | `6px` |
| circle | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| action | `0 1px 3px 0 rgba(37,42,49,0.16), 0 1px 2px 0 rgba(37,42,49,0.12)` |
| raised | `0 4px 8px 0 rgba(37,42,49,0.16), 0 1px 4px 0 rgba(37,42,49,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| fast | `150ms ease-in-out` |

## Quick start (CSS)

```css
/* Orbit — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://orbit.kiwi/ */

:root {
  /* Color */
  --orbit-palette-product-normal: #00a58e; /* Kiwi.com brand and primary actions */
  --orbit-palette-ink-dark: #252a31; /* Primary text */
  --orbit-palette-ink-light: #697d95; /* Secondary text */
  --orbit-palette-white: #ffffff; /* Surfaces */
  --orbit-palette-cloud-light: #f5f7f9; /* Subtle background */
  --orbit-palette-cloud-dark: #e8edf1; /* Borders */
  --orbit-palette-red-normal: #d21c1c; /* Errors */
  --orbit-palette-green-normal: #28a138; /* Success */
  --orbit-palette-orange-normal: #df7b00; /* Warnings */
  --orbit-palette-blue-normal: #0172cb; /* Information */

  /* Typography */
  --font-body: 'Circular Pro', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-title-1: 28px /* line-height 36px */;
  --text-title-2: 22px /* line-height 28px */;
  --text-title-3: 16px /* line-height 22px */;
  --text-body-normal: 14px /* line-height 20px */;
  --text-body-small: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  /* Radius */
  --radius-normal: 4px;
  --radius-large: 6px;
  --radius-circle: 9999px;

  /* Elevation */
  --shadow-action: 0 1px 3px 0 rgba(37,42,49,0.16), 0 1px 2px 0 rgba(37,42,49,0.12);
  --shadow-raised: 0 4px 8px 0 rgba(37,42,49,0.16), 0 1px 4px 0 rgba(37,42,49,0.12);

  /* Motion */
  --motion-fast: 150ms ease-in-out;
}
```

## 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 #00a58e, the typeface "Circular Pro / system" (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://orbit.kiwi/)

---

_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._