Octana for designers
Welcome to the Octana UI Kit
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”.
Examples:
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.
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)
Example:
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.
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
Resources
To learn more about how to use the Figma Tokens Plugin check out these resources.