Skip to content
Origami Design System

Brands

Origami supports multiple brands. This page provides a high level overview of the steps required to add support for a new brand. It assumes a substantial amount of knowledge including:

  • Design tokens
  • Token Studio
  • Style Dictionary
  • Figma
  • Origami tooling and commands

Reference

  • Brand support is powered by design tokens.
  • Design tokens are managed with Token Studio, a Figma plugin. We have a limited number of Pro licenses for core contributors.
  • Design tokens are transformed to code using Style Dictionary.

Create your Figma Library

  1. Duplicate the Whitelabel Origami Figma library and apply your brand’s name.
  2. Update the library cover with your brand’s name and status.

Define your design tokens

  1. Create a new Figma branch define-[brand-name]-tokens.
  2. Open the Token Studio Figma plugin and pull tokens from main.
  3. Duplicate the whitelabel token set and rename with your brand’s name. You may find this easier to do using the JSON view within Token Studio.
  4. Set token values to suit your brand and update token descriptions where necessary.
    • Tokens must retain their meaning across brands, but examples may vary.
    • All whitelabel tokens must be implemented by your brand.
    • You must not add new tokens to the system without considering its impact on other brands, except for the addition of base colour tokens to represent your colour palette.
  5. Create a new branch in Token Studio from main. Match the define-[brand-name]-tokens Figma branch name. Token Studio will then create a matching branch name in Github.
  6. Push your tokens in Token Studio (to Github).
  7. When the tokens have built successfully and been approved in Github, these will be merged to the main branch, and will become available on the main branch in Token Studio. In the meantime, you may use this branch to implement the tokens in your Figma library.

Implement tokens in your Figma Library

  1. Apply tokens in your Figma library using Token Studio.
  2. If any Figma component in the library do not update for your brand as you expect, use the Token Studio Inspect tool to discover why.
    • If your brand is missing a component token, define that token and push changes through Token Studio.
    • If the component was not created using tokens correctly, update the component in the Whitelabel Origami Figma library to avoid this issue in the future. Do this by creating a branch and submitting for review. When complete, copy the updated component to your library and reapply your brand tokens.
  3. When your tokens are merged to main in Github, you may switch your branch in Token Studio to main.
  4. Submit your Figma branch for review.
  5. Publish your library.

Implement tokens in code

  1. Checkout the branch in git define-[brand-name]-tokens, from the origami repo.
  2. Generate code for the new brand using Style Dictionary.
  3. Update components to support your new brand.
    1. Add Storybook boilerplate to all supported components of the brand.
    2. Create a src/css/brands/[brand-name].css file in each supported component.
    3. Use a feat commit to trigger a minor feature release.

Add to the Origami website

  1. Add your new brand to the website.
  2. Add any unique guidelines for your brand.
  3. Open a PR for review.