Design Tokens

Default colour for text and icons that are part of interactive elements.

Text and icons that are part of interactive elements in a hover state.

Text and icons that are part of interactive elements that should attract less attention.

Text and icons that are part of links.

No description available

Text and icons that are part of interactive elements in a disabled state.

Text and icons that are part of interactive elements with reversed background and foreground colours.

Text and icons that are part of interactive elements with reversed background and foreground colours in a hover state.

Text and icons that are part of interactive elements with reversed background and foreground colours and that should attract less attention.

Text and icons that are part of interactive elements in a selected state.

Text and icons that are part of interactive elements in a selected and hover state.

Text and icons used as placeholders in form input elements.

Default colour for text and icons that are part of non-interactive elements.

Text and icons that are part of non-interactive elements that should attract less attention.

Text and icons that are part of non-interactive elements with reversed background and foreground colours.

Text and icons that signal something neutral.

Text and icons that signal something negative.

Text and icons that are part of a destructive interative element in a hover state.

Text and icons that signal something negative. Only use on colorBackgroundNegativeQuiet.

Text and icons that signal something has gone well.

Text and icons that signal something has gone well. Only use on colorBackgroundPositiveQuiet.

Text and icons that signal something requires urgent attention.

Text and icons that signal something requires urgent attention. Only use on colorBackgroundWarningQuiet.

Text and icons that signal important information.

Text and icons that signal important information. Only use on colorBackgroundInfoQuiet.

Text and icons that signal something new in the product.

Text and icons that signal something new in the product. Only use on colorBackgroundDiscoverQuiet.

Icons used to signal an expense belonging to the 'entertainment' category

Icons used to signal an expense belonging to the 'equipment' category

Icons used to signal an expense belonging to the 'marketing' category

Icons used to signal an expense belonging to the 'meals and drinks' category

Icons used to signal an expense belonging to the 'office' category

Icons used to signal an expense belonging to the 'phone and internet' category

Icons used to signal an expense belonging to the 'software' category

Icons used to signal an expense belonging to the 'travel' category

Icons used to signal an expense belonging to the 'service' category

Icons used to signal an expense belonging to the 'supplies' category

Icons used to signal an expense belonging to the 'other' category

Icons used to signal an expense belonging to no category

Icons used to signal an expense whose category isn't known

Default colour for backgrounds of interactive elements.

Backgrounds of relatively large interactive elements.

Backgrounds of relatively small interactive elements placed on top of loud or coloured backgrounds.

Backgrounds of relatively small interactive elements in a hover state.

Backgrounds of relatively large interactive elements in a hover state.

Backgrounds of interactive elements in a disabled state.

Backgrounds of interactive elements with reversed background and foreground colours.

Backgrounds of interactive elements with reversed background and foreground colours in a hover state.

Backgrounds of interactive elements in a selected state.

Backgrounds of interactive elements in a selected and hover state.

Background of interactive elements placed on top of images or documents (e.g. invoices and receipts).

Semi-transparent backgrounds of interactive elements in a hover state.

Default colour for backgrounds of non-interactive containers.

Backgrounds of non-interactive containers that should attract some attention.

Backgrounds of non-interactive containers that should attract significant attention.

Backgrounds of non-interactive containers that should attract the most attention.

The background upon which everything else is placed.

Semi-transparent backgrounds that sit between an overlay, such as a modal, and the rest of the underlying UI.

Backgrounds of non-interactive containers with reversed background and foreground colours.

Backgrounds of elements that signal something neutral.

Backgrounds of relatively small elements that signal something negative.

Backgrounds of relatively large elements that signal something negative.

Backgrounds of relatively large elements that signal something negative and are in a hover state.

Backgrounds of relatively small elements that signal something negative and are in a hover state.

Backgrounds of relatively small elements that signal something has gone well.

Backgrounds of relatively large elements that signal something has gone well.

Backgrounds of relatively small elements that signal something requires urgent attention.

Backgrounds of relatively large elements that signal something requires urgent attention.

Backgrounds of relatively small elements that signal important information.

Backgrounds of relatively large elements that signal important information.

Backgrounds of relatively small elements that signal something new in the product.

Backgrounds of relatively large elements that signal something new in the product.

Final brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.

Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.

Primary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.

Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.

Secondary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.

Backgrounds upon which icons are placed from the 'entertainment' expense category

Backgrounds upon which icons are placed from the 'equipment' expense category

Backgrounds upon which icons are placed from the 'marketing' expense category

Backgrounds upon which icons are placed from the 'meals and drinks' expense category

Backgrounds upon which icons are placed from the 'office' expense category

Backgrounds upon which icons are placed from the 'phone and internet' expense category

Backgrounds upon which icons are placed from the 'software' expense category

Backgrounds upon which icons are placed from the 'travel' expense category

Backgrounds upon which icons are placed from the 'service' expense category

Backgrounds upon which icons are placed from the 'supplies' expense category

Backgrounds upon which icons are placed from the 'other' expense category

Backgrounds upon which icons are placed when they do not have an expense category

Backgrounds upon which icons are placed when the category isn't known

Background of relatively small UI elements that signal something new and actionable, such as a dot for new features or a count of items the user needs to take action on

Default border colour of interactive elements.

Borders of interactive elements that should attract less attention.

Borders of interactive containers that should attract attention.

Borders of interactive elements in a hover state.

Borders of interactive elements in a disabled state.

Borders of interactive elements in a selected state.

Borders of interactive elements in a selected and hover state.

Borders of non-interactive containers.

Borders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds.

Borders of elements that signal something neutral.

Borders of elements that signal something negative.

Borders of interactive elements that signal something negative and are in a hover state.

Borders of elements that signal something has gone well.

Borders of elements that signal something requires urgent attention.

Borders of elements that signal important information.

Borders of elements that signal something new in the product.

Default focus ring colour.

Focus ring colour for interactive elements in an invalid state.

Default shadow colour for elevations.

Shadow colour for subtle elevations.

Shadow colour for strong elevations.

Shadow that elevates elements from their bottom edge.

Shadow that strongly elevates elements from their bottom edge.

Shadow that subtly elevates elements subtly from their bottom edge.

Shadow that raises elements off the page from all edges.

Shadow that subtly raises elements off the page from all edges.

Default focus ring for interactive elements. However, use Telescope's `focusRing` utility for focus states, instead.

Default focus ring for invalid interactive elements. However, use Telescope's `focusRing` utility for focus states, instead.

Offset focus ring for interactive elements with a border resembling the focus ring. However, use Telescope's `focusRing` utility for focus states, instead.

Offset focus ring for invalid interactive elements with a border resembling the focus ring. However, use Telescope's `focusRing` utility for focus states, instead.

Inset focus ring for interactive elements with no space around them. However, use Telescope's `focusRing` utility for focus states, instead.

Inset focus ring for invalid interactive elements with no space around them. However, use Telescope's `focusRing` utility for focus states, instead.

Default border of interactive elements.

Borders of interactive elements that should attract less attention.

Borders of interactive containers that should attract attention.

Borders of interactive elements in a hover state.

Borders of interactive elements in a disabled state.

Borders of interactive elements in a selected state.

Borders of interactive elements in a selected and hover state.

Borders of non-interactive containers.

Borders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds.

Borders of elements that signal something neutral.

Borders of elements that signal something negative.

Borders of interactive elements that signal something negative and are in a hover state.

Borders of elements that signal something has gone well.

Borders of elements that signal something requires urgent attention.

Borders of elements that signal important information.

Borders of elements that signal something new in the product.

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

The easing and duration for motion happening to a small element over a short distance within the screen.

The easing and duration for motion happening to a small element over a long distance within the screen.

The easing and duration for motion happening to a large element over a short distance within the screen.

The easing and duration for motion happening to a large element over a long distance within the screen.

The easing and duration for motion happening to a small element over a short distance when entering the screen.

The easing and duration for motion happening to a small element over a long distance when entering the screen.

The easing and duration for motion happening to a large element over a short distance when entering the screen.

The easing and duration for motion happening to a large element over a long distance when entering the screen.

The easing and duration for motion happening to a small element over a short distance when exiting the screen.

The easing and duration for motion happening to a small element over a long distance when exiting the screen.

The easing and duration for motion happening to a large element over a short distance when exiting the screen.

The easing and duration for motion happening to a large element over a long distance when exiting the screen.

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available

No description available