Overview

Design tokens are a set of variables that store visual design attributes such as colors, typography, spacing, and more in a structured and centralized manner. They serve as the foundational elements for consistent and scalable design systems, allowing designers and developers to maintain design consistency across various platforms and products.

Every theme offers a consistent array of variables, facilitating seamless theming and design system management capabilities.

Tokens are grouped in theme folders and separated into individual file configurations by the nature of attributes they describe:

CSS

CSS design tokens provided as CSS custom properties. There is a file for every theme available. You can either include these files directly from our CDN or download them to use locally in your app.

If your app already uses honeycomb CSS styles the tokens are already included.

Please note if you need multiple themes, you need to include multiple files. To find out more about themes and how to use them please check our themes documentation.

After ensuring you have correctly imported the theme file you need, you can access the custom properties on your styles:

.my-custom-link {
  color: var(--flix-link-color);
  font-family: var(--flix-font-family-primary);
  font-size: var(--flix-font-size-small);
  font-weight: var(--flix-font-weight-semibold);
}

SCSS

Design tokens in the form of SASS variables are perfect for those apps that heavily utilize SASS for styling.

Importing the SCSS file will allow you to access the theme's SASS variables. Here's how you can import the SCSS file:

@import 'node_modules/@flixbus/honeycomb/dist/tokens/themes/flix-dark/scss/honeycomb-theme-flix-dark';

Make sure you pay attention to the theme name when assembling the import path.

An example usage could look like this:

@import 'node_modules/@flixbus/honeycomb/dist/tokens/themes/flix-dark/scss/honeycomb-theme-flix-dark';
// all property values are SASS design tokens from Honeycomb
.my-custom-link {
  color: $link-color;
  font-family: $font-family-primary;
  font-size: $font-size-small;
  font-weight: $font-weight-semibold;
}

Note that SASS variables don't have a --flix prefix in their names as CSS custom properties do.

JSON

JSON design tokens are provided as properties within a JSON object. This makes it easier to manipulate and import tokens in JavaScript applications.

Each theme has its own respective JSON object theme file, making it simpler to work with tokens in a JavaScript application.

To import theme design tokens into your JavaScript app, first make sure you have installed the honeycomb package via npm.

Alternatively it's also possible to access them via Honeycomb CDN.

import themeFlix from '@flixbus/honeycomb/dist/tokens/themes/flix/json/honeycomb-theme-flix.json';
import themeFlixDark from '@flixbus/honeycomb/dist/tokens/themes/flix-dark/json/honeycomb-theme-flix-dark.json';

It's important to note that the import paths for different themes are different.

After importing the JSON file, you can access token values as object properties:

const uiPrimaryColor = flixTheme['ui-primary-color'];
const uiPrimaryDarkThemeColor = flixDark['ui-primary-color'];

Note that token properties have only design token names, without prefixes.

iOS

Design tokens for iOS ecosystem provided in 2 formats:

A Swift implementation file of an enum with all tokens having "camel cased" names and relevant iOS value transforms with UIColor and CGFloat functions. Default enum object type, public access control and UIKit import are included;
A set of JSON files per theme and token category (categories include: colors.json, spacing,json, typography.json, components.json, misc.json).

Use the button bellow to find relevant CDN links for every theme.

CDN URLs

Theme

Content

The full list of variables:

--flix-brand-primary-color: #97d700; 
--flix-ui-primary-color: #31a100; 
--flix-ui-primary-light-color: #5cc500; 
--flix-ui-primary-dark-color: #187d00; 
--flix-grayscale-0-color: #ffffff; 
--flix-grayscale-10-color: #f7f7f7; 
--flix-grayscale-30-color: #e1e1e1; 
--flix-grayscale-50-color: #c8c8c8; 
--flix-grayscale-70-color: #646464; 
--flix-grayscale-90-color: #444444; 
--flix-grayscale-100-color: #353535; 
--flix-neutral-color: #016ae7; 
--flix-success-color: #228f00; 
--flix-success-dark-color: #136b00; 
--flix-warning-color: #ff5704; 
--flix-warning-dark-color: #c42d00; 
--flix-danger-color: #dd2828; 
--flix-danger-dark-color: #b31414; 
--flix-bg-primary-color: #ffffff; 
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88); 
--flix-bg-secondary-color: #f7f7f7; 
--flix-box-bg-color: #ffffff; 
--flix-highlight-color: #e5f9c0; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #353535; 
--flix-content-secondary-color: #646464; 
--flix-heading-font-color: #353535; 
--flix-link-color: #0047de; 
--flix-line-primary-color: #c8c8c8; 
--flix-icon-primary-color: #8b8b8b; 
--flix-icon-secondary-color: #97d700; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #97d700; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #97d700; 
--flix-header-color: #353535; 
--flix-header-nav-bg-color-tablet: #5cc500; 
--flix-input-border-color: #8b8b8b; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-grid-gutter-2: 12px; 
--flix-grid-gutter-4: 24px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-base: 1rem; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: .875rem; 
--flix-font-size-fineprint: .75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: .938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-color-scheme: normal; 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 500; 
--flix-font-weight-bold: 700;

--flix-brand-primary-color: #97d700; 
--flix-ui-primary-color: #31a100; 
--flix-ui-primary-light-color: #5cc500; 
--flix-ui-primary-dark-color: #187d00; 
--flix-grayscale-0-color: #ffffff; 
--flix-grayscale-10-color: #f7f7f7; 
--flix-grayscale-30-color: #e1e1e1; 
--flix-grayscale-50-color: #c8c8c8; 
--flix-grayscale-70-color: #646464; 
--flix-grayscale-90-color: #444444; 
--flix-grayscale-100-color: #353535; 
--flix-neutral-color: #016ae7; 
--flix-success-color: #228f00; 
--flix-success-dark-color: #136b00; 
--flix-warning-color: #ff5704; 
--flix-warning-dark-color: #c42d00; 
--flix-danger-color: #dd2828; 
--flix-danger-dark-color: #b31414; 
--flix-bg-primary-color: #ffffff; 
--flix-bg-primary-transparent-color: rgba(255, 255, 255, 0.88); 
--flix-bg-secondary-color: #f7f7f7; 
--flix-box-bg-color: #ffffff; 
--flix-highlight-color: #e5f9c0; 
--flix-overlay-bg-color: rgba(0, 0, 0, 0.5); 
--flix-focus-outline-color: #016ae7; 
--flix-content-primary-color: #353535; 
--flix-content-secondary-color: #646464; 
--flix-heading-font-color: #353535; 
--flix-link-color: #0047de; 
--flix-line-primary-color: #c8c8c8; 
--flix-icon-primary-color: #8b8b8b; 
--flix-icon-secondary-color: #97d700; 
--flix-box-shadow-color: rgba(0, 0, 0, 0.18); 
--flix-box-shadow-subtle-color: rgba(0, 0, 0, 0.06); 
--flix-button-primary-color: #97d700; 
--flix-button-label-color: #353535; 
--flix-header-bg-color: #97d700; 
--flix-header-color: #353535; 
--flix-header-nav-bg-color-tablet: #5cc500; 
--flix-input-border-color: #8b8b8b; 
--flix-input-height-mobile: 44px; 
--flix-input-height-desktop: 36px; 
--flix-spacing-1: 6px; 
--flix-spacing-2: 12px; 
--flix-spacing-3: 18px; 
--flix-spacing-4: 24px; 
--flix-spacing-5: 30px; 
--flix-spacing-6: 36px; 
--flix-spacing-7: 42px; 
--flix-spacing-8: 48px; 
--flix-spacing-9: 54px; 
--flix-spacing-10: 60px; 
--flix-spacing-11: 66px; 
--flix-spacing-12: 72px; 
--flix-spacing-half: 3px; 
--flix-grid-gutter-2: 12px; 
--flix-grid-gutter-4: 24px; 
--flix-page-min-width: 320px; 
--flix-page-max-width: 1200px; 
--flix-font-size-base: 1rem; 
--flix-font-size-primary: 1rem; 
--flix-font-size-small: .875rem; 
--flix-font-size-fineprint: .75rem; 
--flix-font-size-h1: 1.7rem; 
--flix-font-size-h2: 1.3rem; 
--flix-font-size-h3: 1.1rem; 
--flix-font-size-h4: 1rem; 
--flix-line-height-primary: 1.5rem; 
--flix-line-height-small: 1.125rem; 
--flix-line-height-fineprint: .938rem; 
--flix-line-height-h1: 2rem; 
--flix-line-height-h2: 1.7rem; 
--flix-line-height-h3: 1.5rem; 
--flix-line-height-h4: 1.5rem; 
--flix-hover-layer-color: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)); 
--flix-pressed-layer-color: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); 
--flix-disabled-element-opacity: 0.5; 
--flix-primary-border-radius: 6px; 
--flix-primary-box-shadow: 0px 6px 12px rgba(0, 0, 0, .06), 0px 3px 18px rgba(0, 0, 0, .06), 0px 3px 6px rgba(0, 0, 0, .18); 
--flix-color-scheme: normal; 
--flix-font-family-primary: Roboto, Arial, sans-serif; 
--flix-font-weight-normal: 400; 
--flix-font-weight-semibold: 500; 
--flix-font-weight-bold: 700;

Overview

CSS

SCSS

JSON

Android

iOS

CDN URLs

Content