Skip to main content

Configuring the design system

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Dyte's UI Kit uses Atomic design as a principle to bring logic and structure to individual screens. Read this blog post to get a complete overview of how we're using design tokens and atomic design principles to create a multi-brand, multi-device Design System.

With Dyte's UI Kit you can configure the design system to easily align with your application's identity. Let's take a quick look at how you can achieve these customizations!

Usage​

Dyte provides the provideDyteDesignSystem() utility to programmatically configure the design system of UI Kit components with a few lines of code.

<div id="app"></div>

<script>
  provideDyteDesignSystem(document.getElementById('app'), {
    googleFont: 'Lobster',
    // sets light background colors
    theme: 'light',
    colors: {
      danger: '#ffac00',
      brand: {
        300: '#00FFE1',
        400: '#00FFFF',
        500: '#00E1D4',
        600: '#007B74',
        700: '#00655F',
      },
      text: '#071428',
      'text-on-brand': '#ffffff',
      'video-bg': '#E5E7EB',
    },
    borderRadius: 'extra-rounded',
  });
</script>

Read on to learn more about each token in detail.

Design Tokens​

UI Kit uses design tokens for it's design system.

Design tokens are the design related values which are used to maintain a design system, which provides flexibility in customizing the overall design of a system. Our design tokens are broadly categorized into four categories:

These design tokens are stored and shared among components with the help of CSS variables.

Colors​

Since colors form the backbone of brand identity, Dyte's UI Kit is built to allow for maximum flexibility around customization. Here is a quick look of all the color tokens, along with their default values.

Brand
300
#497CFD
400
#356EFD
500
#2160FD
600
#0D51FD
700
#0246FD
Background
1000
#080808
900
#1A1A1A
800
#1E1E1E
700
#2C2C2C
600
#3C3C3C
Text
1000
rgb(255 255 255)
900
rgb(255 255 255 / 0.88)
800
rgb(255 255 255 / 0.76)
700
rgb(255 255 255 / 0.64)
600
rgb(255 255 255 / 0.52)
Text On Brand
1000
rgb(255 255 255)
900
rgb(255 255 255 / 0.88)
800
rgb(255 255 255 / 0.76)
700
rgb(255 255 255 / 0.64)
600
rgb(255 255 255 / 0.52)
Singular Colors
video-bg
#181818
success
#83D017
warning
#FFCD07
danger
#FF2D2D

Usage​

info

Note the exception of text and text-on-brand colors, you only specify a single color even though there are the following shades: 1000 - 600.

This is because the provideDyteDesignSystem() utility sets the color you pass to text-1000 and calculates lighter shades and sets them as well.

Only pass objects for brand and background colors.

A set of commonly used background shades are available by default with the theme property.

Theme values are: light, dark, darkest.

--dyte-colors-brand-500: 33 96 253;
--dyte-colors-background-1000: 8 8 8;
/* ... rest of the shades */

CSS Variables are set in the format: R G B.

Edit color tokens like this. Only the colors you specify will be set.

const designTokens = {
  theme: 'darkest',
  colors: {
    brand: { 500: '#0D51FD' },
    background: { 1000: '#080808' },
    text: '#ffffff',
    'text-on-primary': '#ffffff',
    'video-bg': '#181818',
  },
};

Typography​

Easily change the font-family of the UI Kit's components by tweaking just one design token.

Usage​

--dyte-font-family: Inter;

You can edit this value in two ways with the provideDyteDesignSystem utility.

const designTokens = {
  fontFamily: 'Custom Font';
  // or
  googleFont: 'A Google Font';
}

Set either of these values in your design tokens.

  1. With fontFamily 🪡 - Use a custom font family, you'll have to load the font manually.
  2. With googleFont ✨ - Use a google font, the font is loaded automatically.

Border​

Key design related to borders such as Border Width and Border Radius can also be customized with design tokens! See the available values and how to use them with your application.

Usgae​

Token NameValues
borderWidthnone, thin, fat
borderRadiussharp, rounded, extra-rounded, circular
const designTokens = {
  borderWidth: 'thin',
  borderRadius: 'rounded',
};

Spacing​

The spacing scale is used for setting width, height, margins, paddings, positions etc. throughout the components.

  • The default value for the spacing scale base is 4px.
  • Rest of the values are calculated with this base, set to --dyte-space-1.
  • Current spacing scale ranges from 0 to 96.
--dyte-space-1: 4px;
/* ... rest of the spacing scale */

Usage​

Set the base of the spacing scale with spacingBase property.

const designTokens = {
  spacingBase: 4, // value in px
};