Priceline One

Priceline Design System v5.6.0

Sketch Kit

Download Sketch Kit

Getting Started

Install the Design System in your application

npm install pcln-design-system


Wrap the root of your application with the ThemeProvider component, which adds the Design System theme to context for use in styled-components and sets typographic defaults. This should only be included once in your application.

The ThemeProvider is a wrapper around styled-components' ThemeProvider.

import React from 'react'
import { ThemeProvider } from 'pcln-design-system'
import SomeView from './SomeView'

class App extends React.Component {
  render() {
    return (

Montserrat font

To use the Montserrat font-family in you project, be sure to include a link in your document <head>.


Primitive UI Components

Import and use the design system UI components in your application.

import React from 'react'
import { Box, Text } from 'pcln-design-system'

const SomeView = (props) => (
  <Box p={3}>
    <Text color='blue'>Hello</Text>