Go Main page
cover

Tokens & Themes

Themes

A theme is a collection of tokens that define the visual appearance of a product or brand. All ODS products and brands share the same thematic base definition, although there is the possibility of extended token definitions for a country's needs, within its own libraries (i.e. country-specific tokens).

What is a theming system?

A theme system is a set of color swatches and interchangeable styles that affect the way things are displayed (think background color, text color or border color, spacing, corner radius), but not content, hierarchy, etc. Simply put, theming allows us to code a component once but design it in multiple ways.

If it affects color or shape it is relevant to the theme. Otherwise, it is not.

Uses of theming

  • Dark and light mode

    Essential for accessibility in modern product development to accommodate visually impaired users.

     Essential for accessibility in modern product development to accommodate visually impaired users.
  • Multi-brand

    When there are several products that visually change according to the brand using the same components

     When there are several products that visually change according to the brand using the same components
  • Marketing campaigns

    Theming allows style changes to be made for marketing campaigns at specific times

     Theming allows style changes to be made for marketing campaigns at specific times

Theme levels

What is a Context theme?

The context theme is applied to a container to which the Regular or Alternative theme has been applied, and depending on that context the components that are positioned within it change to enhance contrast.

    Regular theme
  • Alternative theme

What can we control with theming?

  • Color palettes
  • Typography and font styles
  • Spacing and size
  • Responsive breakpoints
  • Transitions and animations
  • Radios
  • Icons
  • Logos
  • Illustrations
    Theme Product 1
  • Theme Product 2
Do’s
  • Color
  • Radios
Do’s
  • Logos
    Theme Product 1
  • Theme Product 2
Do’s
  • Change context theme in the same screen in different Products or Brands

    Theme Product 1
  • Theme Product 2
Don’t
  • It is not possible to change the architecture of elements within a component.

Don’t
  • It is not possible to change the components in a Product screen (L1).
    Theme Product 1
  • Theme Product 2
Don’t
  • It is not possible to change component variants in a Product screen (L1).