> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codejet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Jet UI Design System

> Access a comprehensive collection of design elements and templates

## Video introduction

Here is a short introduction to Jet UI Design System:

<Frame type="glass">
  <iframe width="560" height="415" src="https://www.youtube.com/embed/x6ylj-K9LDs?si=rbAFr93jEvmAKomp" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{ width: '100%' }} />
</Frame>

## Step-by-step guide

Learn how to effectively utilize the Codejet Design System in Figma to customize and deploy your website:

<Steps>
  <Step title="Duplicate Jet UI Design System">
    Begin by duplicating the Jet UI Design System in your Figma workspace. This will give you a base template with all necessary design elements. You can duplicate the system from this link: [Jet UI Design System](https://www.figma.com/community/file/1364964277652829877/jet-ui-design-system-by-codejet-ai).
  </Step>

  <Step title="Configure Design Variables in Figma">
    Start by setting up your design environment in Figma. Define your brand's colors, fonts, and other style variables using Figma Variables. This initial step ensures consistency across your design and allows you to maintain a cohesive brand identity throughout your project. For guidance on setting up Figma Variables, visit [Figma's Variable Settings](https://www.figma.com/variables).

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/design-system-1.gif" />
    </Frame>
  </Step>

  <Step title="Design your website">
    Navigate to the "My Projects" page on Jet UI Design System and begin creating your design. You can start by laying out the basic structure using the design elements you set up in Figma.

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/design-system-2.gif" />
    </Frame>
  </Step>

  <Step title="Check your designs using Codejet Assistant">
    Use the Codejet Assistant to review and refine your designs before finalizing. The assistant helps you ensure that all elements are perfectly aligned with your brand and design requirements.

    <Frame type="glass">
      <img src="https://codejetphotos.s3.eu-north-1.amazonaws.com/images/design-system-3.png" />
    </Frame>
  </Step>
</Steps>