User experience principles

Consistency

Consistency is about maintaining uniformity in design and interaction patterns across a website. In web development, adhering to consistent design elements, color schemes, typography, and navigation styles helps users build mental models of how the website functions. This consistency reduces cognitive load and allows users to navigate different sections seamlessly.

Using The DHIS2 UI library components is a way good way to have consistent stye on features. It also incorporates several constants that can be found here. This includes set values for colors, spacers, the DHIS2 font and more to style your UI components which is helpful to maintain overall consistency.

Loading example...

import { colors, theme, spacers, spacersNum } from '@dhis2/ui'

const mediumBlue = colors.blue500 // '#2196f3'

const errorColor = theme.error // = '#d32f2f' = colors.red500
const primaryButtonColor = theme.primary600 // = '#147cd7' = colors.blue600

const smallSpace = spacers.dp8 // '8px'
const mediumSpaceWithoutPx = spacersNum.dp24 // 24