Overview

The change.org design system is a library of React components that provides a consistent, discoverable, mobile-first developer experience. It is the look-and-feel touchpoint with our users that defines our brand.

API

Built with Styled Components and styled-system.

Components define both their own custom props, and include groups of system props defined in constants.js.

System props are responsive and are grouped so that a component can include only those needed, exposing the minimum API surface area possible.

Values for system props are defined in our theme.

Best practices

Avoid mixing design system components with old styleguide classnames

Good:

<Text fontSize="s">

Bad:

<Text className="type-s">

Prefer using values from our theme file

Good:

<Box m="s" color="gray.dark">

Bad:

<Box m="15px" color="#737273">