Start using Mist Design

Getting Mist Design up and running can be done quickly. The design system is flexible and easy to use. The websites provides an easy way to start using the components by copy-pasting the code. Everyone is welcome to make their own implementation and interpretation of the system. All of the styles and sizes are available in the component descriptions. Variables are provided for Tailwind later on this page.

Tailwind configuration

More and more websites use Tailwind as their styling tool. You can easily configure and extend its styles. Mist uses this as its base. Before using any component or creating your own implementation its important to setup Mist's configuration in your project.

You can just copy the configuration below and paste it into your Tailwind configuration file. You can also extend your existing configuration. For the correct styling of components variable names can't be changed.

@theme {
  --font-mist: Inter;

  --color-background-dark: hsl(0, 0%, 6%);
  --color-background-light: hsl(0, 0%, 95%);

  --color-text-dark: hsl(0, 0%, 98%);
  --color-text-dark-dim: hsl(0, 0%, 88%);

  --color-text-light: hsl(0, 0%, 2%);
  --color-text-light-dim: hsl(0, 0%, 12%);

  --color-level1-dark: hsl(0, 0%, 9%);
  --color-level1-light: hsl(0, 0%, 91%);

  --color-level2-dark: hsl(0, 0%, 12%);
  --color-level2-light: hsl(0, 0%, 87%);

  --color-outline: hsl(0, 0%, 32%);

  --color-primary: hsl(108, 26%, 48%);
  --color-primary-dark: hsl(108, 26%, 42%);
  --color-primary-light: hsl(108, 26%, 54%);
  --color-primary-darkx: hsl(108, 26%, 28%);
  --color-primary-lightx: hsl(108, 26%, 68%);

  --color-warning: hsl(47, 95%, 60%);
  --color-warning-dark: hsl(47, 95%, 54%);
  --color-warning-light: hsl(47, 95%, 66%);
  --color-warning-darkx: hsl(47, 95%, 40%);
  --color-warning-lightx: hsl(47, 95%, 80%);

  --color-error: hsl(0, 78%, 58%);
  --color-error-dark: hsl(0, 78%, 52%);
  --color-error-light: hsl(0, 78%, 64%);
  --color-error-darkx: hsl(0, 78%, 38%);
  --color-error-lightx: hsl(0, 78%, 78%);

  --text-display: 4rem;
  --text-title: 3rem;
  --text-heading: 2.25rem;
  --text-heading2: 1.5rem;
  --text-body: 1rem;
  --text-label: 0.75rem;

  --leading-display: 4.813rem;
  --leading-title: 3.625rem;
  --leading-heading: 2.938rem;
  --leading-heading2: 1.95rem;
  --leading-body: 1.5rem;
  --leading-label: 0.975rem;

  --font-weight-display: 800;
  --font-weight-title: 700;
  --font-weight-heading: 600;
  --font-weight-heading2: 600;
  --font-weight-body: 400;
  --font-weight-label: 300;
}

Setting up base styles

After pasting the base configuration styles, we need to set some default styling for the best experience.

Mist Design supports both light and dark mode by default. It relies on Tailwind's dark: classes. It's the developers responsibility to give the user the ability to choose it's preferred theme. By default Tailwind uses the browser's preference.

body {
  @apply font-mist;
  @apply bg-background-light dark:bg-background-dark;
  @apply text-text-light dark:text-text-dark;
  @apply text-body/body font-body;
}

Using components

Mist Design provides many prewritten components for your projects. If you want to create your own implementation feel free to do so. The specifications are also available written on the component's page.

To start using the components first create a folder for your Mist Components. For better origanisation its advised to create under components/mist, but you can also put it straight to components/ or equivalent to your project.

It's important that you paste all of the Mist components in the same folder or some internal imports between the components may not work.