PatternLabpharma4u component library

PatternLab is a collection of reusable UI elements built for visual and functional consistency and faster development across some pharma4u projects.

Getting Started

View on BitBucket

NPM Package

Figma LabXpert Design System

Basics

This section is about the foundation of the design system, like typography, spacings, color palette, accessibility guidelines and utility helper classes.

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound.

Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Templates

Templates consist mostly of groups of organisms stitched together to form pages.

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.