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. A color system of emancipation which makes it easy to recognize the beauty in small things.

Installation

Install Sargam Colors from your terminal via npm. Current version is 2.1.0

        npm i @sargamdesign/colors
      

Import vanilla CSS.

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

To get started quickly, you can also 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 Example

Sargam Colors provides light and dark themes bundled as raw CSS files. Here's an example of how to use them:

        .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); }               
        

Understanding Project 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
          

tokens/ serves as the single source of truth (SSOT), residing within the GitHub repository and synchronized with Figma's color styles or variables. (To maintain a tech-agnostic approach, Sargam Colors employs the JSON format for the SSOT.) For generating various web or app-specific requirements, Style Dictionary will be utilized.

To modify colors values or to add new sequential scales, go to tokens/global/. If you want to modify the current theme or create a new one, head to the tokens/themes/. For modifying generated CSS variables, leverage SASS functions and mixins.

Building Themes

To build themes from tokens:

              npm i
            

              npm run build
            

Decision Variables

Sargam decision tokens represent a specific context or abstraction in which a referenced value is used.

Built Using Sargam Colors

Sargam Icons — A collection of 275+ open-source icons.
Your Vedas — Sacred books of the east.
Andlo — The payroll platform for modern businesses.