Customisation

Customise the default theme for your brand.

Default theme

The default theme consists of JSON files listed below.

  • Global / core
  • Global / brand
  • Global / font
  • Global / data-viz
  • themes
  • density
  • dimensions
  • radius

 

JSON files

Description

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 the corner on an element.

 

 

 

 

Overrides

All VUD components inherit the default theme but can be customised to match your design requirements. Let's take a look at which tokens in the default theme can be overridden.

Branding colours

Token ID

What to do?

Where is this token applied within the UI?

Figma

Token Studio plugin

Global/brand/[company]*

 

For example:
Global/brand/spcs

1. Set up a token set of base tokens.

2. Assign the hex values to the base tokens.

 

Notes
This is where you store your colour palette.

 

Global/core are advised not to modify.

N/A

 

Base tokens on Figma variables

Base tokens on Figma variables

 

 

Base tokens on Token Studio.

Base tokens on Token Studio.

 

Global/brand/brand

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

Notes
Make sure to choose the accurate base tokens when assigning to branding tokens.

For example
brand.tertiary-05 {spcs.vanilla-05}

N/A

Semantic tokens on Figma variables

Semantic tokens on Figma variables


Semantic tokens on Token Studio

Semantic tokens on Token Studio

 

Themes/light/ref

Themes/dark/ref

If necessary, make changes to the following tokens:


1. ref

2. comp-nav-brand

3. comp-nav-vert-brand

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

comp-situation are advised not to modify.

✅ Text

✅ Icon

✅ Pictogram

✅ Border

✅ Fill

✅ Shade

✅ Tint

✅ Scheme

Comp. tokens on Figma variables

Comp. tokens on Figma variables

Comp. tokens on Token Studio

Comp. tokens on Token Studio

 

 

Global level

Token ID

Comment

radii.none

radii.xxs

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 set to 16px and maximum is 14px.

 

 

 

 

Component level

Token ID

Comment

Where is the token applied within the UI?

radius.round

radius.shape

You can customise the border-radius.

✅ Button
✅ Card

✅ Modal

✅ Table states

density.condensed

density.default

density.regular

density.relaxed

You can customise the density.

✅ List

✅ Table row

dimension.size

You can customise the dimensions.

✅ Avatars

 

 

 

 

 

Updates

To get the latest updates from VUD's main library, you need to:

null
  • If you have a branch, click on the icon with the blue dot
  • If you work locally, copy/paste your JSON in a text edit file. You'll find the JSON {} upper right corner.
null
null

 

 

 

 

 

Recap

 

 

 

 

 

 

 

 

Have a question, comment or idea?

Join our internal Slack channels to share your thoughts!