Priceline One Design System

# Priceline One — 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-docs
confidence: medium
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/priceline-one
sources:
  - https://priceline.github.io/design-system/
  - https://github.com/priceline/design-system
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Priceline. "Priceline One" 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:** Priceline One
**Owner:** Priceline
**Official documentation:** https://priceline.github.io/design-system/
**Visual character:** Deal-hunting energy: negotiator navy and blue, Montserrat headlines, and savings-green flashes engineered for conversion.

---

## Summary

Priceline's actively maintained React component library built with styled-system, styled-components, and TypeScript.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/71 claims source-linked, 0/71 dated. Confidence is not verification; validate canonical values before implementation._

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

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary Blue | `#0068ef` | `--pcln-primary` | Primary actions and links |
| Text | `#001833` | `--pcln-text` | Primary text (deep navy) |
| Secondary Text | `#4f6f8f` | `--pcln-text-light` | Secondary text |
| White | `#ffffff` | `--pcln-white` | Surfaces |
| Light Blue Background | `#f0f9ff` | `--pcln-background-lightest` | Promo backgrounds |
| Border | `#c0cad5` | `--pcln-border` | Borders |
| Success Green | `#00aa00` | `--pcln-success` | Deals and savings |
| Alert Red | `#cc0000` | `--pcln-error` | Errors and urgency |
| Highlight Orange | `#fa771e` | `--pcln-highlight` | Promotional highlights |

## Typography

- **Body:** Montserrat — weights 400, 500, 700 — `Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `40px` | `48px` |
| h2 | `28px` | `36px` |
| h3 | `22px` | `28px` |
| body | `16px` | `24px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| large | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 1px 4px rgba(0,24,51,0.16)` |

## Quick start (CSS)

```css
/* Priceline One — 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://priceline.github.io/design-system/
   Field evidence: https://www.designsystems.one/api/style-spec?system=priceline-one */

:root {
  /* Color */
  --pcln-primary: #0068ef; /* Primary actions and links */
  --pcln-text: #001833; /* Primary text (deep navy) */
  --pcln-text-light: #4f6f8f; /* Secondary text */
  --pcln-white: #ffffff; /* Surfaces */
  --pcln-background-lightest: #f0f9ff; /* Promo backgrounds */
  --pcln-border: #c0cad5; /* Borders */
  --pcln-success: #00aa00; /* Deals and savings */
  --pcln-error: #cc0000; /* Errors and urgency */
  --pcln-highlight: #fa771e; /* Promotional highlights */

  /* Typography */
  --font-body: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-h1: 40px; /* line-height 48px */
  --text-h2: 28px; /* line-height 36px */
  --text-h3: 22px; /* line-height 28px */
  --text-body: 16px; /* line-height 24px */
  --text-small: 14px; /* line-height 20px */

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

  /* Radius */
  --radius-default: 4px;
  --radius-large: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 1px 4px rgba(0,24,51,0.16);
}
```

## Engineering profile

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

## Apply this style with an AI tool

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

> Design in the spirit of Priceline One by Priceline — Priceline's actively maintained React component library built with styled-system, styled-components, and TypeScript. Character: Deal-hunting energy: negotiator navy and blue, Montserrat headlines, and savings-green flashes engineered for conversion. Use a primary colour near #0068ef, the typeface "Montserrat" (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

- [Priceline One documentation](https://priceline.github.io/design-system/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/priceline-one) — 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._