Octana for designers

Welcome to the Octana UI Kit

for designers hero image

Get started with the Octana UI Kit

What is the Octana UI Kit?

Octana is a UI Kit that uses design tokens to store design and style values (e.g. typography and colour choices).

Our mission is to start forming a source of truth for design choices and decisions which in turn allows for consistent application of design across tools and platforms.



What is Octana best used for?

  • Manage different variations or states of components within a Ui kit.

  • Manage a light and dark theme, or an alternative accessibility-focused theme.

  • Quickly A/B test different brands or brand treatments.

  • Manage different style treatments for localisation/localised versions of a product.

  • If you’re an agency or an organisation with multiple products or subsidiaries, tokens are one of the most elegant ways to manage a multi-brand UI Kit.


Do you have to use design tokens with this Ui kit?

Absolutely not. The design token system has been applied using a third party plugin called “Figma Design Tokens” and it can be seen as a separate layer over top of the components in this file.

Should you wish to manage your themes and styles with your own methods, you are free to do so. Octana Figma components themselves have been created in the same way as any other Figma component and will work with a default Figma styling system.

Octana has three levels (or hierarchies) that make up its token system.


Level one

Foundation Tokens

Foundation tokens have the least amount of context.

These tokens are assigned values directly (hardcoded) or are derived from a simple math function for consistency and harmony (scales).

eg. #7670e7, Bold, [4px, 8px, 16px, 32px].

If possible avoid applying these directly to your design/Ui elements. Instead the purpose of these tokens is to provide their values to our Context tokens. Some foundation tokens (like font-size) can be generated as a scale using a simple math function.

Together with Context tokens, foundation tokens make up what we consider a “theme file”.


foundation token examples
foundation tokens


context tokens


Level two

Context Tokens

Context tokens are where we start to introduce more meaning into the naming schema of our tokens.

Context tokens are generally assigned a foundation token as their value and their names provide more direction around where these values will be used across your designs.

eg. theme.headings or theme.background.secondary.hover

If possible avoid applying these directly to your design/Ui elements. Instead, the purpose of these tokens is to provide their values to our Component tokens.

Together with Foundation tokens, Context tokens make up what we consider a “theme file”.

Context tokens are quite easy to identify in the Octana token system as they contain the ”theme.” identifier within their name.


context tokens examples


Level three

Component Tokens

Component tokens have the most specific scope.

Each component token will ideally be applied in a single place (the element of the component that the token corresponds to). This can be identified via the naming schema

eg. colors.button.label.hover or typography.text-input.label.active

For this reason, component tokens are very rarely changed and are not included as a part of the “theme file”. It may be helpful to think of component tokens as a kind of reference point or anchor to certain areas of your design and components.

These tokens are usually assigned a Context token as their value, however sometimes it may be necessary to assign a Foundation token (eg. if the component token value should remain static when themes are changed)


component tokens exampes


component tokens

What's available in the theme file

Currently, Octana is offering Colour, Border Radius, Font Family, Line Height and Font Size tokens. With the intention to expand as our product grows.

By swapping out foundation and context tokens for each of these categories, you can quickly and easily change the theme of the entire Octana UI Kit file.



Start by swapping out your static, primary, secondary, accent, greyscale & system colours.


You can easily change the Radius values for sharp, small, default, large and full.

Font Family

Easy add or remove different font families and assign them to different context tokens like Default & Heading.

Line Height

Quickly change the Line Height values for none, tight, default, relaxed and loose.

Font Size

Change up your font size either by using math or hard coding scale values. Then assign those values to the context you want.

Interested to learn more?

All it takes is 30 minutes to see how the Octana Design System will help you with consistency, theming & multibrand UI Kits.

Book a demo


To learn more about how to use the Figma Tokens Plugin check out these resources.