Design tokens (beta)

Our VUD tokens are customised for theming, data visualisation, and UI components.

 

Namespacing

vud

Token levels

base, ref, comp

Variant

default, primary, secondary, tertiary, tint,
transparent, inverse, muted, emphasis

Ordinary scale

hue strength: weak, moderate, strong, extreme

Categories

situation: info, success, warning, error

Intended element

text, icon, fill, stroke, shadow

Intended part of UI

surface, border, data-viz (formatting on data series)

Canvas

screen

T-shirt sizes

xs, s, md, lg, xl, xxl

Ordered scale

05, 10, 20, 30, 40, 50, 60, 70, 80, 90

Level

1,2,3,4,5,6,7,8,9,10,11,12,13,14

States

enabled, hover, pressed, focused, visited, selected, selected:hover, disabled, error

Names

font-families
primary(ubuntu), secondary(open sans), tertiary(inter)

 

font-weight-numeric

100, 200, 300, 400, 500, 600, 700, 800, 900

font-weight-keyword

normal, bold

 

contextual in regular
heading-lg

heading-md

heading-sm

body-sm-link

body-sm

body-xs

contextual in medium
heading-xl

heading-md

heading-sm

body-sm

contextual in bold

body-sm

body-xs

 

tabular in regular, medium & bold

td-xs

td-sm

td-md

td-lg

td-xl

td-xxl

td-xxl