Getting Started

Living style guide is a great tool to promote visual consistency, unify UX designers and front-end developers, as well as speed up development times.

Foundation

colors

Primary Light

#5C7AFF

Primary

#4361EE

Primary Dark

#2A45BF

Secondary Light

#FF478B

Secondary

#FF1E71

Secondary Dark

#C70049

Gray Light

#C0CCDA

Gray

#A4AEBA

Gray Dark

#3C4858

Light

#F7FAFC

Dark

#3C4858

White

#FFFFFF

Black

#000000

Back to Top
<div class="grid grid-cols-12 gap-base text-white">
  <div class="p-base col-span-4 bg-primary-light">
    <h3>Primary Light</h3>
    <p>#5C7AFF</p>
  </div>
  <div class="p-base col-span-4 bg-primary">
    <h3>Primary</h3>
    <p>#4361EE</p>
  </div>
  <div class="p-base col-span-4 bg-primary-dark">
    <h3>Primary Dark</h3>
    <p>#2A45BF</p>
  </div>
  <div class="p-base col-span-4 bg-secondary-light">
    <h3>Secondary Light</h3>
    <p>#FF478B</p>
  </div>
  <div class="p-base col-span-4 bg-secondary">
    <h3>Secondary</h3>
    <p>#FF1E71</p>
  </div>
  <div class="p-base col-span-4 bg-secondary-dark">
    <h3>Secondary Dark</h3>
    <p>#C70049</p>
  </div>
  <div class="p-base col-span-4 bg-gray-light text-dark">
    <h3>Gray Light</h3>
    <p>#C0CCDA</p>
  </div>
  <div class="p-base col-span-4 bg-gray text-dark">
    <h3>Gray</h3>
    <p>#A4AEBA</p>
  </div>
  <div class="p-base col-span-4 bg-gray-dark">
    <h3>Gray Dark</h3>
    <p>#3C4858</p>
  </div>
  <div class="p-base col-span-3 bg-light text-dark">
    <h3>Light</h3>
    <p>#F7FAFC</p>
  </div>
  <div class="p-base col-span-3 bg-dark text-light">
    <h3>Dark</h3>
    <p>#3C4858</p>
  </div>
  <div class="p-base col-span-3 bg-white text-dark">
    <h3>White</h3>
    <p>#FFFFFF</p>
  </div>
  <div class="p-base col-span-3 bg-black text-white">
    <h3>Black</h3>
    <p>#000000</p>
  </div>
</div>

grid

col-span-12
col-span-6
col-span-6
col-span-4
col-span-4
col-span-4
col-span-3
col-span-3
col-span-3
col-span-3
col-span-2
col-span-2
col-span-2
col-span-2
col-span-2
col-span-2
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
col-span-1
Back to Top
<div class="grid grid-cols-12 gap-base">
  <div class="col-span-12 p-base bg-gray-light">col-span-12</div>
  <div class="col-span-6 p-base bg-gray-light">col-span-6</div>
  <div class="col-span-6 p-base bg-gray-light">col-span-6</div>
  <div class="col-span-4 p-base bg-gray-light">col-span-4</div>
  <div class="col-span-4 p-base bg-gray-light">col-span-4</div>
  <div class="col-span-4 p-base bg-gray-light">col-span-4</div>
  <div class="col-span-3 p-base bg-gray-light">col-span-3</div>
  <div class="col-span-3 p-base bg-gray-light">col-span-3</div>
  <div class="col-span-3 p-base bg-gray-light">col-span-3</div>
  <div class="col-span-3 p-base bg-gray-light">col-span-3</div>
  <div class="p-base col-span-2 bg-gray-light">col-span-2</div>
  <div class="p-base col-span-2 bg-gray-light">col-span-2</div>
  <div class="p-base col-span-2 bg-gray-light">col-span-2</div>
  <div class="p-base col-span-2 bg-gray-light">col-span-2</div>
  <div class="p-base col-span-2 bg-gray-light">col-span-2</div>
  <div class="p-base col-span-2 bg-gray-light">col-span-2</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
  <div class="p-base col-span-1 bg-gray-light">col-span-1</div>
</div>

screen

small
medium
large
Back to Top
<div class="bg-gray-light w-full max-w-screen-sm">small</div>
<div class="bg-gray-light w-full max-w-screen-md mt-lg">medium</div>
<div class="bg-gray-light w-full max-w-screen-lg mt-lg">large</div>

spacing

padding sm, margin bottom sm
padding base, margin bottom base
padding lg, margin bottom lg
padding xl, margin bottom xl
padding xxl, margin bottom xxl
padding-x base, margin-x base
padding-y base, margin-y base
Back to Top
<div class="p-sm mb-sm bg-gray-light">padding sm, margin bottom sm</div>
<div class="p-base mb-base bg-gray-light">padding base, margin bottom base</div>
<div class="p-lg mb-lg bg-gray-light">padding lg, margin bottom lg</div>
<div class="p-xl mb-xl bg-gray-light">padding xl, margin bottom xl </div>
<div class="p-2xl mb-2xl bg-gray-light">padding xxl, margin bottom xxl</div>
<div class="px-base mx-base bg-gray-light">padding-x base, margin-x base</div>
<div class="py-base my-base bg-gray-light">padding-y base, margin-y base</div>

Typography

font face

Header (Inter)

Default (Inter)

Back to Top
<h2 class="font-bold font-header inline">Header (Inter)</h2>
<p class="font-default inline ml-sm">Default (Inter)</p>

font sizes

The Fleet Management and Industrial IoT Sensors Expert

The Fleet Management and Industrial IoT Sensors Expert

The Fleet Management and Industrial IoT Sensors Expert

The Fleet Management and Industrial IoT Sensors Expert

The Fleet Management and Industrial IoT Sensors Expert

Back to Top
<p class="text-sm">The Fleet Management and Industrial IoT Sensors Expert</p>
<p class="text-base">The Fleet Management and Industrial IoT Sensors Expert</p>
<p class="text-lg">The Fleet Management and Industrial IoT Sensors Expert</p>
<p class="text-xl">The Fleet Management and Industrial IoT Sensors Expert</p>
<p class="text-2xl">The Fleet Management and Industrial IoT Sensors Expert</p>

font weight

KATSANA® makes enterprise operations more efficient

KATSANA® makes enterprise operations more efficient

KATSANA® makes enterprise operations more efficient

KATSANA® makes enterprise operations more efficient

Back to Top
<p class="font-light">KATSANA® makes enterprise operations more efficient</p>
<p class="font-normal">KATSANA® makes enterprise operations more efficient</p>
<p class="font-medium">KATSANA® makes enterprise operations more efficient</p>
<p class="font-bold">KATSANA® makes enterprise operations more efficient</p>

letter spacing

KATSANA® Fleet Management System is engineered to make managing fleets simpler

KATSANA® Fleet Management System is engineered to make managing fleets simpler

KATSANA® Fleet Management System is engineered to make managing fleets simpler

Back to Top
<p class="tracking-tight">KATSANA® Fleet Management System is engineered to make managing fleets simpler</p>
<p class="tracking-normal">KATSANA® Fleet Management System is engineered to make managing fleets simpler</p>
<p class="tracking-wide">KATSANA® Fleet Management System is engineered to make managing fleets simpler</p>

line height

​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.

​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.

​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.

​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.

​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.

​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.

Back to Top
<div class="leading-tight">
  <p>​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.</p>
  <p>​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.</p>
</div>
<div class="leading-normal mt-base">
  <p>​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.</p>
  <p>​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.</p>
</div>
<div class="leading-wide mt-base">
  <p>​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.</p>
  <p>​KATSANA® provides industrial operations achieve real-time visibility and automate day-to-day reporting for the digital age.</p>
</div>

Utilities

border radius

none
small
normal
large
x-large
full
Back to Top
<div class="grid grid-cols-12 gap-base text-white">
  <div class="p-base rounded-none bg-dark col-span-4">none</div>
  <div class="p-base rounded-sm bg-dark col-span-4">small</div>
  <div class="p-base rounded bg-dark col-span-4">normal</div>
  <div class="p-base rounded-lg bg-dark col-span-4">large</div>
  <div class="p-base rounded-xl bg-dark col-span-4">x-large</div>
  <div class="p-base rounded-full bg-dark col-span-4">full</div>
</div>

border width

none
normal
thick
thickest
Back to Top
<div class="grid grid-cols-12 gap-base">
  <div class="p-base bg-gray-light border-none col-span-3">none</div>
  <div class="p-base bg-gray-light border col-span-3">normal</div>
  <div class="p-base bg-gray-light border-thick col-span-3">thick</div>
  <div class="p-base bg-gray-light border-thickest col-span-3">thickest</div>
</div>

opacity

Opacity 0
Opacity 20%
Opacity 40%
Opacity 60%
Opacity 80%
Opacity 100%
Back to Top
<div class="grid grid-cols-12 gap-base text-white">
  <div class="p-base bg-dark opacity-0 col-span-4">Opacity 0</div>
  <div class="p-base bg-dark opacity-20 col-span-4">Opacity 20%</div>
  <div class="p-base bg-dark opacity-40 col-span-4">Opacity 40%</div>
  <div class="p-base bg-dark opacity-60 col-span-4">Opacity 60%</div>
  <div class="p-base bg-dark opacity-80 col-span-4">Opacity 80%</div>
  <div class="p-base bg-dark opacity-100 col-span-4">Opacity 100%</div>
</div>

shadow

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none
Back to Top
<div class="grid grid-cols-12 gap-lg">
  <div class="shadow-sm p-lg bg-light col-span-3">shadow-sm</div>
  <div class="shadow p-lg bg-light col-span-3">shadow</div>
  <div class="shadow-md p-lg bg-light col-span-3">shadow-md</div>
  <div class="shadow-lg p-lg bg-light col-span-3">shadow-lg</div>
  <div class="shadow-xl p-lg bg-light col-span-3">shadow-xl</div>
  <div class="shadow-2xl p-lg bg-light col-span-3">shadow-2xl</div>
  <div class="shadow-inner p-lg bg-light col-span-3">shadow-inner</div>
  <div class="shadow-none p-lg bg-light col-span-3">shadow-none</div>
</div>

Component

button

Back to Top
<button class="btn bg-primary text-white">Primary</button>
<button class="btn bg-secondary text-white">Secondary</button>
<button class="btn bg-dark text-white">Dark</button>
<button class="btn bg-light">Light</button>
<button class="btn bg-white">White</button>

User Interface

navigation bar

Back to Top
<nav class="flex justify-between items-center p-lg border border-gray-light rounded shadow-lg">
  <img src="images/logo.svg" alt="">
  <div class="space-x-lg">
    <a href="#Navigation Bar" class=" text-dark">Menu 1</a>
    <a href="#Navigation Bar" class=" text-dark">Menu 2</a>
    <a href="#Navigation Bar" class=" text-dark">Menu 3</a>
    <a href="#Navigation Bar" class=" text-dark">Menu 4</a>
    <a href="#Navigation Bar" class=" text-dark">Menu 5</a>
  </div>
</nav>

Page Section

hero

The Industrial IoT Sensors Expert

KATSANA® makes enterprise operations more efficient by connecting legacy sensors to the cloud, making data available in real-time to enable enterprise operations make impactful and data-driven decisions.

Get Free Consultation

The IoT Sensors Expert

KATSANA® makes enterprise operations more efficient by connecting legacy sensors to the cloud, making data available in real-time to enable enterprise operations make impactful and data-driven decisions.

Get Free Consultation

The Industrial IoT Sensors Expert

KATSANA® makes enterprise operations more efficient by connecting legacy sensors to the cloud, making data available in real-time to enable enterprise operations make impactful and data-driven decisions.

Get Free Consultation
Back to Top
<!-- Hero #1 -->
<div class="bg-light p-xl">
  <h1 class="max-w-4xl font-bold leading-tight">
    The Industrial IoT Sensors Expert
  </h1>
  <p class="my-lg max-w-3xl text-lg">
    KATSANA® makes enterprise operations more efficient by connecting legacy
    sensors to the cloud, making data available in real-time to enable
    enterprise operations make impactful and data-driven decisions.
  </p>
  <a
    href="#Hero"
    class="btn bg-secondary mt-base text-white inline-block text-lg font-bold"
    >Get Free Consultation</a
  >
</div>

<!-- Hero #2 -->
<div class="bg-primary text-white p-xl flex justify-end">
  <div class="text-right">
    <h1 class="max-w-4xl font-bold leading-tight">The IoT Sensors Expert</h1>
    <p class="my-lg max-w-3xl text-lg">
      KATSANA® makes enterprise operations more efficient by connecting legacy
      sensors to the cloud, making data available in real-time to enable
      enterprise operations make impactful and data-driven decisions.
    </p>
    <a
      href="#Hero"
      class="btn bg-secondary inline-block mt-lg text-white text-lg font-bold"
      >Get Free Consultation</a
    >
  </div>
</div>

<!-- Hero #3 -->
<div class="bg-dark text-white p-xl flex justify-center">
  <div class="absolute inset-0">
    <img src="https://picsum.photos/800/600" alt="" class="object-cover">
  </div>
  <div class="text-center z-10">
    <h1 class="max-w-4xl font-bold leading-tight">
      The Industrial IoT Sensors Expert
    </h1>
    <p class="my-lg max-w-3xl text-lg">
      KATSANA® makes enterprise operations more efficient by connecting legacy
      sensors to the cloud, making data available in real-time to enable
      enterprise operations make impactful and data-driven decisions.
    </p>
    <a
      href="#Hero"
      class="btn bg-secondary mt-base text-white inline-block text-lg font-bold"
      >Get Free Consultation</a
    >
  </div>
</div>