A simple scalable color system for designing warm welcoming, caring websites and apps.

Overview

Sargam Colors

A simple scalable color system for designing warm welcoming, caring websites and apps.

Sargam colors are the language of the beauty, the warmth, and the caress, that comes from the heart of the world. The most direct expression of beauty, with a form and spirit which is one and simple, and least encumbered with anything extraneous. A color system of emancipation which makes it easy to recognize the beauty in small things. True makers, they who are seers, seek to express the universe with sargam colors.

Installation

Install Sargam Colors from your terminal via npm.

npm i @sargamdesign/colors

Import vanilla CSS

import "@sargamdesign/colors/dist/themes/light.css";
import "@sargamdesign/colors/dist/themes/dark.css";

Use the CDN files

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/[email protected]/dist/themes/light.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/[email protected]/dist/themes/dark.min.css" />

Usage

.button {
  background-color: var(--button-primary);
  color: var(--text-on-color);
}
.button:hover {
  background-color: var(--button-primary-hover);
}
.button:active {
  background-color: var(--button-primary-active);
}

Decision Variables

Text tokens

Variable Value(Light) Value(Dark) Role
--text-primary --silver8 --silver1 Body copy
--text-primary-alt --silver7 --silver4 Body copy alt
--text-secondary --silver6 --silver6 Secondary text color
--text-placeholder --silver5 --silver5 Placeholder text
--text-on-color --silver1 --silver1 Text on interactive colors
--text-error --red6 --red4 Error message text
--text-success --green6 --green4 Success message text

Support tokens

Variable Value(Light) Value(Dark) Role
--support-error --red5 --red4 Error
--support-warning --yellow5 --yellow4 Warning
--support-success --green5 --green4 Success
--support-info --teal5 --teal4 Information

Link tokens

Variable Value(Light) Value(Dark) Role
--link --teal6 --teal4 Primary links
--link-hover --teal7 --teal6 Hover state for primary links
--link-subtle --teal5 --teal5 Secondary links
--link-visited --lavender6 --lavender4 Link visited
--link-muted --silver8 --silver1 Link muted

Icon tokens

Variable Value(Light) Value(Dark) Role
--icon-primary --silver7 --silver3 Primary icons
--icon-secondary --silver6 --silver5 Secondary icons
--icon-disabled --silver5 --silver6 Disabled state for icons
--icon-on-color --silver1 --silver8 Icons on interactive colors

Button tokens

Variable Value(Light) Value(Dark) Role
--button-primary --teal5 --teal4 Primary button background
--button-primary-hover --teal6 --teal3 Primary button hover
--button-primary-active --teal7 --teal2 Primary button active
--button-secondary --silver8 --silver6 Secondary button background
--button-secondary-hover --silver7 --silver7 Secondary button hover
--button-secondary-active --silver6 --silver7 Secondary button active
--button-danger --red5 --red3 Danger button background
--button-danger-hover --red6 --red2 Danger button hover
--button-danger-active --red7 -- Danger button active
--button-disabled --silver5 --silver6 Disabled button
--button-disabled-alt --silver4 --silver7 Disabled button alt

Border tokens

Variable Value(Light) Value(Dark) Role
--border-muted --silver3 --silver7 Muted borders and separators
--border-default --silver5 --silver6 Default borders and separators
--border-strong --silver6 --silver5 Strong borders and separators

Background tokens

Variable Value(Light) Value(Dark) Role
--background --silver1 --silver8 Default app background
--background-subtle --silver2 --silver7 Subtle background
--background-selected --silver3 --silver6 Hovered UI element background
--background-red --red1 --red8 Subtle red background
--background-yellow --yellow1 --yellow8 Subtle yellow background
--background-green --green1 --green8 Subtle green background
--background-teal --teal1 --teal8 Subtle teal background
--background-lavender --lavender1 --lavender8 Subtle lavender background
--background-pink --pink1 --pink8 Subtle pink background

Choice Tokens

Red

Variable Value Color
$red1 hsl(0, 100%, 98%) #FFF7F7
$red2 hsl(1, 90%, 88%) #FCC6C5
$red3 hsl(1, 89%, 71%) #F77472
$red4 hsl(1, 89%, 64%) #F55451
$red5 hsl(1, 89%, 57%) #F33330
$red6 hsl(1, 67%, 48%) #CC2B28
$red7 hsl(1, 67%, 34%) #921F1D
$red8 hsl(1, 67%, 20%) #571211

Yellow

Variable Value Color
$yellow1 hsl(48, 100%, 98%) #FFFDF5
$yellow2 hsl(51, 91%, 86%) #FCF2BC
$yellow3 hsl(50, 92%, 67%) #F8DE5D
$yellow4 hsl(50, 92%, 59%) #F7D737
$yellow5 hsl(50, 92%, 51%) #F5CF11
$yellow6 hsl(50, 87%, 43%) #CEAE0E
$yellow7 hsl(50, 87%, 31%) #937C0A
$yellow8 hsl(50, 87%, 18%) #584B06

Green

Variable Value Color
$green1 hsl(132, 38%, 97%) #F6FBF7
$green2 hsl(139, 45%, 82%) #BDE6CA
$green3 hsl(139, 45%, 57%) #5FC37E
$green4 hsl(138, 51%, 47%) #3AB55F
$green5 hsl(138, 79%, 37%) #14A741
$green6 hsl(139, 78%, 31%) #118C37
$green7 hsl(138, 79%, 22%) #0C6427
$green8 hsl(138, 79%, 13%) #073C17

Teal

Variable Value Color
$teal1 hsl(132, 38%, 97%) #F6FBF7
$teal2 hsl(177, 43%, 81%) #BBE4E2
$teal3 hsl(178, 42%, 54%) #59BCB8
$teal4 hsl(177, 55%, 44%) #32ADA7
$teal5 hsl(177, 87%, 33%) #0B9D96
$teal6 hsl(177, 87%, 28%) #09847E
$teal7 hsl(177, 86%, 20%) #075E5A
$teal8 hsl(177, 87%, 12%) #043936

Lavender

Variable Value Color
$lavender1 hsl(270, 40%, 98%) #FAF8FC
$lavender2 hsl(280, 33%, 86%) #DFCFE7
$lavender3 hsl(281, 34%, 65%) #B289C5
$lavender4 hsl(281, 34%, 57%) #A06EB7
$lavender5 hsl(281, 35%, 49%) #8E52A9
$lavender6 hsl(281, 35%, 41%) #77458E
$lavender7 hsl(282, 35%, 29%) #553165
$lavender8 hsl(281, 34%, 18%) #331E3D

Pink

Variable Value Color
$pink1 hsl(334, 100%, 99%) #FFF8FB
$pink2 hsl(331, 96%, 90%) #FECBE4
$pink3 hsl(331, 95%, 75%) #FC82BC
$pink4 hsl(331, 96%, 69%) #FC64AD
$pink5 hsl(331, 96%, 63%) #FB479D
$pink6 hsl(331, 63%, 53%) #D33C84
$pink7 hsl(332, 56%, 38%) #972B5E
$pink8 hsl(331, 55%, 23%) #5A1A39

Silver

Variable Value Color
$silver1 hsl(0, 0%, 100%) #FFFFFF
$silver2 hsl(30, 12%, 97%) #F8F7F6
$silver3 hsl(43, 13%, 89%) #E7E5E0
$silver4 hsl(47, 11%, 84%) #DBD9D2
$silver5 hsl(45, 6%, 74%) #C1BFB9
$silver6 hsl(48, 2%, 44%) #72716D
$silver7 hsl(30, 2%, 17%) #2C2B2A
$silver8 hsl(0, 3%, 6%) #100F0F

Structure

Below is the file structure of a Sargam colors project:

.
├── tokens/
│   ├── global/
│   │   └── global.json
│   └── themes/
│       ├── dark/
│       │   └── dark.json
│       └── light/
│           └── light.json
└── dist/
    └── themes/
        ├── light.css
        └── dark.css

Building Themes

Light

Dark

Future, To do's

  • hsl & hex conversion options
  • iOS, Android, SCSS, JS exports
  • customizing tokens, variable functions
  • JavaScript objects
  • usage and themeing guidelines for various styling solutions
  • global silver/grey sequential scales

License

MIT License, Copyright (c) 2022 Abhimanyu Rana. Brought to you by @planetabhi 🙌

Other Links

You might also like...

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Nov 15, 2022

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

Jun 27, 2022

A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex 🎨 A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Oct 1, 2022

A Foundation for Scalable Cross-Platform Apps

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh. Install Clone the repo and install dependencies: git cl

Jan 4, 2023

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates a

Feb 8, 2022

Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Nov 7, 2022

Sample apps showing how to build music and video apps for Xbox using a WebView.

Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Dec 14, 2022

why make apps to increase focus -- when you can make apps to reduce focus

impossifocus 🕺 What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Nov 30, 2022

Set up and build a Node.js REST API using Typescript, Express, Mongoose with a maintainable and scalable structure.

Introduction Create a maintainable and scalable Node.js REST API with TypeScript, Express and Mongoose. The project structure is based on MVC and foll

Nov 18, 2022
Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community.

SE701-Updog Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community. This proje

SE 701 Team 2 UoA 14 Apr 18, 2022
Simple CLI to warm the cache of social images in all pages from a sitemap.

warm-social-images Simple CLI to warm the cache of social images in all pages from a sitemap. Why Using serverless functions to generate images for so

Travis Fischer 9 Jul 7, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
A web component that allows you to run high level programming languages on your websites (static websites included!)

Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your

Marketing Pipeline 28 Dec 16, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Christopher Chedeau 21 Oct 25, 2022