Cris from Pazly

Aug 16, 2021

2 min read

The Pazly color system

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.

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