CommCare HQ Style Guide

This is a communication and reference tool. It can be used to help make decisions that have already been thoughtfully made. By taking similar, simiplifed base patterns, often called "atoms", we can build cohesive "molecules" and then more complex "organisms." This keeps code cleaner and lighter while also keeping things simpler for our users to understand.

Why all the biology-related terminology? It comes from the notion of atomic design. Atomic design relates design to the hierarchies and building processes of the natural world. It uses five stages: atoms, molecules, organisms, templates, and pages. HQ doesn't follow this methodology, but the rough ideas can still make for a useful framework.

Some general principles to keep in mind:

• Consider multiple designs. Just the practice of making yourself consider alternatives can lead to better designs and stronger design rationale.
• Group related information together and visually emphasize content according to its importance. If you were to step back and squint at your feature, or if you couldn't read the text, how well could you guess what to read first and what to click?
• How much effort does a user have to expend on your design? Consider both the effort to understand it in the first place, and then the effort to use it on an ongoing basis.

Atoms

• Accessibility: what is it and why does it matter?
• Typography: what fonts do we use and why?
• Colors: why use one color or another?
• Icons: how do you find an icon that enhances your content?
• Code Guidelines: how does one write good CSS/LESS?

Read about atoms in HQ

Molecules

• Buttons
• Selections
• Checkboxes
• Modals
• Pagination
• Searching and Filtering
• Inline Editing
• Help
• Feedback

Read about molecules in HQ

Organisms

• Forms
• Tables

Read about organisms in HQ

Templates and Pages

• Navigation
• Class-Based Views
• Functional Views

Read about templates and pages in HQ