Colors

Whirlwind uses semantic color names. While this seems counterintuitive considering that Whirlwind uses utility classes instead of semantic class names, this has shown advantageous for several reasons: When developing commercial products in which the application designs are created by a design team, we are typically using a limited set of colors based on an external branding guideline. The use of primary and secondary as color names allows tweaking the branding without having to go back and change the shade of the colors throughout the codebase again. And the use of a limited set of semantic color names also more easily enforces a consistent set of colors throughout the application.

The default palette is inspired by Material UI.

Flavors

Most colors come in four flavors: the default or main variant, a light variant, a dark variant, and a contrast variant. The light and dark variants can be useful for using as background and border colors respectively. The contrast variants can be useful as text colors and should always have a high contrast compared to the base color for better readability.

Ultimately it’s up to you to decide which colors to use, but I recommend creating a branding guideline defining which color is used for which part of a component, that you can use as a reference for your product. If you are using a UI component library such as React Native Elements, I recommend to spend some time defining the base theme, to avoid styling every individual instance of a component. See Integration for examples.

Example

Source Code

<View style={[t.backgroundWarningLight, t.borderWarningDark, t.border, t.rounded, t.p2]}>
  <Text style={[t.textWarningContrast]}>Warning Message</Text>
</View>

Result