How to implement a design system in your project.

Introduction

I have been creating websites and subtly implementing something I didn’t know was powerful, a design system. According to uxpin

Design system documentation is a valuable resource that works to help design teams combine and present usage guidelines. It also helps share, consume, and execute these rules. This ultimately helps designers and developers to model their efforts around delivering a more predictable UI.

It helped me freely implement designs and avoid ambiguous UI. This is a simple thing to do yet powerful. In this article I will guide you in the steps I take and how I structure my project (CSS) to make use of design systems.

Importance of Implementing design systems

Design Systems, when properly implemented, can provide many benefits to a design team. Design (and development) work can be created and replicated quickly and at scale.

• It brings a much predictable UI outcome.
• It also helps faster website production.
• fast design replication and update
• It creates a unified language within and across teams

Tech stack

For this project I will use

• Next.js (React library)
• Tailwindcss (for css styling)

Feel free to use any JavaScript and CSS library or framework of your choice.

Design files

First of all, you need to get the design mockup for the project. I use figma for my UI designs and I recommend it to anyone. Creating a design system from scratch can be stressful and you might miss out on some important elements that may not come to you initially. So, I found a free Design System Template – Figma that has a great start for a design system implementation.

Getting Started

Let's begin by creating our project and installing the necessary packages.

• Create next app and give it any name of your choice

npx create-next-app design-system

• Move to the project directory and install necessary dependencies

cd design-system
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install framer-motion

• Set up tailwind for styling you'll find all these setup config in Tailwind framework setup
• add these to your global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• add these to your tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• initialize project

npm run dev

Colors

Common colors in a Design System include 1 to 3 primary colors that represent your brand. You can include a range of tints (a color mixed with white) and shades (a color mixed with black) to give designers some additional options. I configure my tailwind with the colors pertaining to the project.

• Accent Colors: An accent color is a contrasting color used to draw attention to key pieces of a web page. I use this for CTAs (Call to actions)
• Primary, secondary, neutral Colors: I use this for component hierarchy such as buttons, text headings, etc.
• Status Colors: I use this mostly in notifications to indicate the status of the notification.

Configure tailwind.config.js file with your custom colors.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // Color
      colors: {
        // Primary colors with interaction
        primary: "",
        "primary-focus": "",
        "primary-content": "",
        // Secondary colors with interaction
        secondary: "",
        "secondary-focus": "",
        "secondary-content": "",
        // Accent colors with interaction
        accent: "",
        "accent-focus": "",
        "accent-content": "",
        // Neutral colors with interaction
        neutral: "",
        "neutral-focus": "",
        "neutral-content": "",
        // base colors with interaction
        "base-100": "",
        "base-200": "",
        "base-300": "",
        "base-content": '',
        // Status colors
        info: '',
        "info-content": '',
        success: '',
        "success-content": '',
        warning: '',
        "warning-content": '',
        error: '',
        "error-content": '',
      },
    },
  },
};

Spacing

The system you use for spacing is best when it is rhythmic and balanced. It is possible to set a scale, for example multiple of 4. Icons tend to be based on 4 (16, 24, 32, etc.) so that they can be scaled more easily. I typically don’t change anything from tailwindCss spacings since it helpful and useful in most cases. You can do that change if you have a special need for your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
            // Color
      colors: {},
      // Spacing
     spacing: {
        0: "0px",
        1: "1px",
        // Add your spacing system
      },
  },
};

Base

Typography

Most Design Systems include only two fonts: one font for headlines and body text. You can get free fonts from google fonts or download a pleasing one from any source but keep it simple. Make the design from the base html elements.

• Headings These are the font designs (sizing and styling) for the different heading heir ache.
• Form
• Other html elements

@layer base {
  html, body {
    @apply p-0 m-0 font-sans scroll-smooth bg-white dark:bg-black dark:text-white 
  }

  a{
    @apply text-inherit cursor-pointer
  }

  main,
  section {
    @apply w-full h-fit p-5 
  }

  /* Typography */
  h1 {
    @apply text-5xl md:text-7xl font-semibold normal-case
  }

  h2 {
    @apply text-4xl md:text-5xl font-semibold normal-case
  }

  h3 {
    @apply text-3xl md:text-4xl font-semibold normal-case
  }

  h4 {
    @apply text-2xl md:text-3xl font-semibold normal-case
  }

  h5 {
    @apply text-xl md:text-2xl font-semibold normal-case
  }

  h6 {
    @apply text-base md:text-xl font-semibold lowercase
  }

  p {
    @apply text-base md:text-sm font-medium
  }

  /* form base elements  */

  input {
    @apply
  }

  textarea {
    @apply
  }

  button {
    @apply
  }

  label {
    @apply
  }

  fieldset {
    @apply
  }

}

Components

These are css class components made for easy access to

• Font sizing
• Button stylings
• Transitions and animation
• Card sizing

@layer components {
  /* Font sizing  */
  .text-link{
    @apply 
  }

  .text-extra-small{
    @apply 
  }

  .text-small{
    @apply 
  }

  .text-medium{
    @apply 
  }

  .text-large{
    @apply 
  }

  .text-extra-large{
    @apply 
  }

  /* Button styling */

  .primary-btn{
    @apply 
  }

  .secondary-btn{
    @apply 
  }

  .cta-btn{
    @apply 
  }

  .tollbar-btn{
    @apply 
  }

  .default-btn{
    @apply 
  }

  .color-btn, .accent-btn{
    @apply 
  }

  .icon-btn{
    @apply 
  }

  /* Card sizing */

  .extra-small-card {
    @apply
  }

  .small-card {
    @apply
  }

  .medium-card {
    @apply
  }

  .large-card {
    @apply
  }

  .extra-large-card {
    @apply
  }

  /* Transitions and animation */
  .spin{
    @apply
  }

}

Conclusion

To conclude, Design Systems are essential elements for the design of websites. They make it possible to create an important base for all the elements of a site and to speed up the design phase. Implement this in your next project and improve your website developments.
! Thank you for Reading.
I post a blog weekly every Thursday. Please don't forget to buy me a coffee, Mathias Martey. Follow me on twitter @blaq_xcobar