The Pazly color system

Cris
2 min readAug 16, 2021

--

Getting Started

Pazly https://pazly.dev is a landing page building tool for both non technically skilled users and information technology specialists. It aims to allow users to quickly build high quality, high converting web pages which are completely owned by the users.

Pazly relies on TailwindCSS and has its own coloring system. If you are a fan of Tailwind CSS and want to help nocoders, freelancers and small businesses make great looking landing pages, this guide is for you.

Color System

Pazly uses its own implementation of the coloring system proposed by the Tailwind CSS team. Since Tailwind uses a plugin system and Pazly targets non technical users, I opted to implement a standalone coloring system which is served through CDN. Check the guide below for the class names and color codes. You will notice they match the coloring in the TailwindCSS documentation. Setting the colors is exactly like in TailwindCSS: set the corresponding CSS class on your element. Same codes apply to text and border, so for example

  • Setting a bluegray 200 background means adding the bg-p-bluegray-200 class
  • Setting a bluegray 200 text means adding the text-p-bluegray-200 class
  • Setting a bluegray 200 border means adding the border-p-bluegray-200 class

Grays

Colors

Github Starter Kit

The easiest way to start is to fork or download the starter kit from Github here https://github.com/pazlydev/template-kit

It contains a simple file index.html with dummy elements and the structure that allows Pazly to read and understand the template.

The benefits of making templates for Pazly:

✅ You set your price for your work

✅ You keep 100% revenue from your template sales. Pazly does not apply any sales commissions

✅ You get great discounts on Pazly Pro memberships

✅ You help a fast growing number of users who will benefit from your awesome work.

--

--