https://pricelinelabs.github.io/design-system/

npm i pcln-design-system

In order to create a consistently great experience for our users, the design system is meant to be the single source of truth for user interface standards for both designers and developers.

Built off of the work of previous efforts, this project intends to consolidate those ideas into a living, well-documented, and growing system.

The core goals of this project are to:

• Speed up design and development velocity
• Help create consistent, beautiful, and usable UI in our applications
• Promote best practices for accessibility, internationalization, and responsive web design

We hope to accomplish these goals by:

• Reducing the number of decisions needed when iterating on UI
• Reducing the amount of code duplication in our apps
• Serving as the standard for Priceline.com's visual language
• Providing easy-to-use and extensible components for anyone to consume

To use the design system in a React app, wrap the root component with the ThemeProvider. This will set typographic defaults and pass the theme as context, which allows styled-components to consume the theme.

import { ThemeProvider } from 'pcln-design-system'

const App = props => (
  <ThemeProvider>
    <h1>Hello</h1>
  </ThemeProvider>
)

// Usage with styled-components
import styled from 'styled-components'

const Section = styled.section`
  background-color: ${props => props.theme.blue};
`

The preferred way of using the design system in a React application is with UI primitives. With effective use of the UI primitives, you can reduce the need to write custom CSS in your application.

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

const App = props => (
  <ThemeProvider>
    <Box p={3}>
      <Text>Hello</Text>
    </Box>
  </ThemeProvider>
)

Use the <Text /> component to control font size, weight, alignment, and color.

// Font size 4 on the typographic scale
<Text fontSize={4} />

// Center aligned
<Text align='center' />

// Bold weight
<Text bold />

// All-caps
<Text caps />

// Blue text from the color palette
<Text color='blue' />

By default, the <Text /> component renders a <div> element. To use a <span> or <p> element, use the following:

<Text.span>This is a span element</Text.span>
<Text.p>This is a p element</Text.p>

Use the <Box /> component to control width, margin, padding, and color.

// 50% width
<Box width={1/2} />

// Padding of `theme.space[3]` (16px)
<Box p={3} />

// Margin of `theme.space[2]` (8px)
<Box m={2} />

// Color blue from the theme's color palette
<Box color='blue' />

// Background color green from the theme's color palette
<Box bg='green' />

The width prop accepts an array value to set different widths at different breakpoints with a mobile-first approach.

<Box
  width={[
    1,    // Sets width 100% at the smallest breakpoint
    1/2,  // Sets width 50% at the next breakpoint
    1/4,  // Sets width 25% at the next breakpoint
  ]}
/>

The <Flex /> component is an extension of the <Box /> component with display: flex and props for using flexbox.

<Flex>
  <Box width={1/2}>Flex</Box>
  <Box width={1/2}>Box</Box>
</Flex>

Use the <Image /> component to render a primitive image that saves the aspect ratio.

<Image src='https://priceline.com/myimage.png' />

// Adding fixed width
<Image src='https://priceline.com/myimage.png' width='300' height='200' alt='My Image'/>

Use the <Icon /> component for SVG icons.

<Icon
  name='circlePlus'
  size={48}
  color='blue'
/>

The theme style constants should be used whenever low-level access to font sizes, margin, padding, media queries, and colors are needed.

import {
  theme,
} from 'pcln-design-system'

// or
import {
  colors,
  mediaQueries,
  fontSizes,
  space
} from 'pcln-design-system'

import { colors } from 'pcln-design-system'

colors.blue // '#0a84c1'

import { fontSizes } from 'pcln-design-system'

fontSizes[2] // 16

The theme includes a typographic scale as the fontSizes array. Use these values whenever declaring a font-size in CSS.

The space array should be used whenever declaring margin or padding values.

import { space } from 'pcln-design-system'

space[0] // 0
space[1] // 4
space[2] // 8
space[3] // 16
space[4] // 32
space[5] // 64
space[6] // 128

MIT License