pcln-design-system

Priceline Design System

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

npm install pcln-design-system

Contributing

If you'd like to contribute to the design system, we'd love to have your help. If you work at Priceline.com, please join the #design-system Slack channel and let us know what you'd like to work on.

For all contributors, please be sure to read the Contributing doc.

Documentation

• Docs
• Getting Started
• Contributing
• Theme
• ThemeProvider

Components

• <BackgroundImage />
• <Badge />
• <Banner />
• <Box />
• <Button />
• <Card />
• <Heading />
• <Hide />
• <Hug />
• <Icon />
• <IconButton />
• <Image />
• <Flex />
• <Link />
• <Text />
• <Truncate />

Motivation

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.

Goals

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

MIT License