Bellhops

Pattern Library

How might we build a component library utilized across native and web-based digital properties as we transition to React .js?

Overview

About this project

Using atomic design principles, I partnered with our front end engineering team and brand manager to update our visual styles in order to maintain UI consistency and componentize assets for React .js —using a system of atoms, molecules, organisms, templates and pages.

Interaction best practices

  • Websites: The user's primary task is to move around an information space and read its content.
  • Applications: The user's primary task is to change the state of some data set by issuing commands
  • Links generally navigate the browser to or from a particular view, but have no real effect in terms of data creation or loss. That means, generally speaking, links should only change what or how data is displayed to the end user.
  • Buttons typically execute an action (create/update/delete) on a particular item within your web application. Hence, if you are changing the state of any part of your application (modifying a database, for example), it may be best to use a button to do so.
  • Users often read only the link text's first few words, so it's important to start with a word (typically a verb) that indicates the action that results if they click the link.

Components

Responsive grid

Typography

Buttons

Cards

Color palette

Validation + feedback

Forms

Inputs

Sections