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.


Install Sargam Colors from your terminal via npm. Current version is 2.0.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="[email protected]/dist/themes/light.min.css" />
        <link rel="stylesheet" href="[email protected]/dist/themes/dark.min.css" />

Usage Example

Sargam colors provide the light and dark themes bundled as raw CSS files. Below you can find usage example:

        .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

Folder tokens/ is a single source of truth (SSOT), stored in the GitHub repo, and synced with Figma colors styles. Sargam colors use the tech-agnostic JSON format for the SSOT. To generate various web or app-specific requirements Style Dictionary(Dev dependency) will be used.

To modify colors values or to add new sequential scales go to tokens/global/. To modify current theme or to add a new theme go to tokens/themes/. To modify generated CSS variables use SASS functions and mixins.

Building Themes

To build themes from tokens:

              npm run build:tokens -- --theme=light
              npm run build:tokens -- --theme=dark

Get a Figma copy for Sargam colors light and dark themes.

Decision Variables

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

Text Tokens
--text-primaryBody copy
--text-primary-altBody copy alt
--text-secondarySecondary text color
--text-placeholderPlaceholder text
--text-on-colorText on interactive colors
--text-errorError message text
--text-successSuccess message text
Support Tokens
Link Tokens
--linkPrimary links
--link-hoverHover state for primary links
--link-subtleSecondary links
--link-visitedLink visited
--link-mutedLink muted
Icon Tokens
--icon-primaryPrimary icons
--icon-secondarySecondary icons
--icon-disabledDisabled state for icons
--icon-on-colorIcons on interactive colors
Button Tokens
--button-primaryPrimary button background
--button-primary-hoverPrimary button hover
--button-primary-activePrimary button active
--button-secondarySecondary button background
--button-secondary-hoverSecondary button hover
--button-secondary-activeSecondary button active
--button-dangerDanger button background
--button-danger-hoverDanger button hover
--button-danger-activeDanger button active
--button-disabledDisabled button
--button-disabled-altDisabled button alt
Border Tokens
--border-mutedMuted borders and separators
--border-defaultDefault borders and separators
--border-strongStrong borders and separators
Background Tokens
--backgroundDefault app background
--background-subtleSubtle background
--background-selectedHovered UI element background
--background-redSubtle red background
--background-yellowSubtle yellow background
--background-greenSubtle green background
--background-tealSubtle teal background
--background-lavenderSubtle lavender background
--background-pinkSubtle pink background

Built Using Sargam Colors

Sargam Icons — A Collection of 262+ Open-source Icons
Your Vedas — Sacred Books of the East