@transferwise/neptune-tokens

Neptune Tokens

Design tokens for the Neptune Design System. Includes spacing and colours, and distributes bundles for common formats.

Tokens always start with a base layer that directly accesses the values, and can be extended with a semantic layer that describes the token's intended purpose, rather than how it looks.

Getting started

For npm environments, install the package and consume the bundled files described below.

npm i @transferwise/neptune-tokens

Spacing

We use a 4-point scale that gives finer control to align elements inside components and optimise space on smaller screens, and from 16 onwards it becomes an 8-point scale where the difference in steps is more visible. There's currently no semantic layer for spacing.

Name	Size
space-4	4
space-8	8
space-12	12
space-16	16
space-24	24
space-32	32
space-40	40
space-48	48

Web

// CSS custom properties
@import "@transferwise/neptune-tokens/spacing.css";

.tw-checkable-card {
  padding: var(--space-16);
}

// Less variables
@import "@transferwise/neptune-tokens/spacing.less";

.tw-checkable-card {
  padding: @space-16;
}

Colours

Our current colour palette is built on a main set of 7 base colours with different levels of brightness. From lightest to darkest:

• Fade
• Light
• Mid
• Dark

The base set also includes 3 brand colours, currently used exclusively in marketing pages outside product, that don't have brightness variations.

We have 2 themes, light and dark, that refer to the colours semantically. This is the recommended way of using our colour tokens, as the base colours have a higher risk of deprecation. There are no dependencies between the imports, the values are flattened on the themes, so base colours don't usually need to be imported.

Source values

• Base
• Light theme
• Dark theme

Web

We currently only have one theme on web, so colors.css directly references the values from the light theme.

// CSS custom properties
@import "@transferwise/neptune-tokens/colors.css";

.button {
  background-color: var(--color-control-accent);
}

The base colours are currently only bundled in Less.

// Less variables
@import "@transferwise/neptune-tokens/colors-base.less";

.special-brand-element {
  background-color: @color-base-brand-purple;
}

iOS

We generate 2 asset catalogs for iOS:

• BaseColors.xcassets contains the base colours
• Colors.xcassets contains the semantic colours with the light and dark themes associated with iOS appearances

To use them, copy both catalogs on the dist folder to your iOS project.

Figma

To import or update colours on the Figma libraries for Neptune:

1. Copy the values from the colors.json file in the dist folder
2. Paste them into the plugin Import from Style Dictionary