Customisation

core (VUD)

Defines the various design aspects such as:
- sizing
- spacing
- colour
- border-radius
- border width
- opacity
- font-weight
- font-size

brand

Defines the colour tokens and border-radius to uphold branding consistency across global settings.

font

Defines the font-family, type scale, font size & viewport.

data-viz

Defines the colours for charts.

themes

Defines the light and dark modes on the component level.

density

Defines the height for table rows and lists.

dimensions

Defines the size of an element.

radius

Defines the corner on an element.

Global/brand/[team]*

For example:
Global/brand/spcs

1. Set up a token set of base tokens.

2. Assign hex values to your base colours.

This is where you store your colour palette.

Global/core are advised not to modify.

N/A

Global/brand/brand

Assign a branding token by choosing the base token from Global/brand/[company]

Make sure to select the accurate base tokens when assigning to branding tokens.

For instance the reference token for
brand.tertiary-05:{spcs.vanilla-05}

N/A

Themes/light/ref

Themes/dark/ref

"If you need to change the branding colours, visit these individual tokens:

1. ref

2. nav-hor-brand

3. nav-vert-brand

4. nav-stepper

5. toggle

Notes
Overriding values in ref customise tokens quickly for multiple components within the same category.

situation are advised not to modify.

✅ Text

✅ Icon

✅ Pictogram

✅ Border

✅ Fill

✅ Shade

✅ Tint

✅ Scheme

radii.none

radii.xs

radii.s

radii.md

radii.lg

radii.xl

radii.xxl

radii.xxxl

You can customise the border-radius.

scale.const.min (scale)
scale.const.max (scale)

scale.const.min.f0 (base)
scale.const.max.f0 (base)

You can adjust the ratio to scale the font sizes.

The default minimum base font size is 16px and the maximum is 14px.

radius.round

radius.sharp

radii.button

radii.card

radii.inputs

radii.list

radii.modal

radii.panel

You can customise the border-radius.

✅ Single layer

✅ Button
✅ Card

✅ Inputs

✅ Modal

✅ Panel

density.condensed

density.default

density.regular

density.relaxed

You can customise the density.

✅ List

✅ Table row

dimension.size

You can customise the dimensions.

✅ Avatars