We strive to embrace the component driven nature of React and approach the development of our site as a composition of small components to build bigger and bigger components. This approach is also known as Atomic Design.

Our components are roughly organized to align with the goals of Atomic Design, both in the organization on the filesystem and in the interactive demos available in our Storybook Instance.

There are lots options out there for styling React components. For this project, we have chosen to leverage emotion to apply style rules in a way that encapulates them to the intended components. We leverage its object-styles approach to define rules with the css prop. Also, we've configured our build to use the emotion css-prop babel preset, so there is no need to import any emotion dependencies into the component modules.