Color system for designing warm welcoming, caring sites & apps

Sargam colors are the language of the beauty, the warmth, and the caress, that comes from the heart of the world. A color system of emancipation which makes it easy to recognize the beauty in small things.

Get Figma variables & styles  ·  Install VS Code theme

Installation

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

      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, residing within the repository and synchronized with Figma's variables. For generating various web or app-specific requirements, Style Dictionary is 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:

      git clone https://github.com/SargamDesign/sargam-colors.git
      cd sargam-colors
      npm i
      npm run build
            

Color Tokens

Tokens represent a specific context or abstraction in which a referenced value is used.

Built Using Sargam Colors

Sargam Design — A free-form design improv framework.
Sargam Icons — A collection of 280+ open-source icons.
Your Vedas — Sacred books of the east.
Andlo — Payroll platform for modern businesses.