Allium palette

Introducing UDS brand palettes

Building on the benefits of design tokens, the Universal Design System (or UDS, which Allium is based on) introduces a clear distinction between design options and design decisions. All the allowable design options for a given brand are collected together into a package called a "brand palette".

The name brand palette is loosely inspired by the concept of a colour palette, but beyond colours, it typically covers everything from spacing to animation primitives to font sizes and styles – essentially, anything about a brand that can be codified. While it's possible to have multiple palettes per brand in the future, there currently isn't a use case to maintain more than one.

The following snippet illustrates the structure of a brand palette.

{
  color: {
    purpleTelus: '#4B286D',
    greenTelus: '#66CC00',
    greenAccessible: '#2B8000',
    // ...
  },
  border: {
    border1: 1,
    border2: 2,
    border4: 4,
    // ...
  },
  // ...
}

Brand palettes are the lowest-level design system. Even though they're conceptually quite simple, their power comes from that simplicity. Brand palettes can be packaged up, versioned, and distributed to all teams, independent of the technology used. They enable a low friction opt-in for brand primitives across platforms, making it easy for teams to stay on-brand. Versioning means that consumers of brand palettes can simply “pull” the latest design thinking automatically without needing manual intervention from the brand team. Because brand palettes are built out of design tokens and therefore are machine-readable, we can build both tooling and more complex design systems on top of them.

Using the Allium palette

The Allium palette makes it easy to build custom components which adhere to Allium brand standards. The palette is packaged and distributed as an npm module @telus-uds/palette-allium. If you have already installed @telus-uds/ds-allium you will see the palette as a peer dependency.

Once you have the palette installed, using the design tokens is as simple as accessing properties on the palette object.

import palette from '@telus-uds/palette-allium/build/web'

const PurpleText = () => <p style={{ color: palette.color.purpleTelus }}>Purple text</p>

Note that we are using the web build of the palette here. There is also a React Native build which can be used for React Native projects.

import palette from '@telus-uds/palette-allium/build/rn'
import { Text } from 'react-native'

const PurpleText = () => <Text style={{ color: palette.color.purpleTelus }}>Purple text</Text>

The design tokens available and guidance on their usage are documented in the palette docs