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.

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.

--

--

--

Building Pazly https://pazly.dev Web enthusiast. Experience driven.

Love podcasts or audiobooks? Learn on the go with our new app.

The Meeting Protocol — Improve Transparency And Safety In Scrum Teams

Self-Signed SSL: NGINX on MAC (Part 3)

Top 10 Python Frameworks in 2020

7 Free and Open-Source Software You Should Try in 2020

Laravel Api Polling System

Authentication when using Google Cloud APIs from FileMaker

Authentication

Dell Precision 5530 Intel Core i7–8850H 32GB RAM 512GB SSD NVIDIA Quadro P1000

Dell Precision 5530 Intel Core i7-8850H 32GB RAM 512GB SSD NVIDIA Quadro P1000

Lining up Audio & Visual to Build Cutscenes in Unity : Part 4

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cris from Pazly

Cris from Pazly

Building Pazly https://pazly.dev Web enthusiast. Experience driven.

More from Medium

Scatter Stars: An Interview with Bo Pan

A blue coffee cup with ‘Bo Cafe’ written on it, held in someone’s hand.

Generative Game Design, Part 3: Mechanics

Crono and Lucca performing a Fire Whirl tech.

Audit In Progress — Certik

Bell Game Posters