Color system for designing warm welcoming, caring sites & apps.
[Get Figma variables & styles]
[Install VS Code theme]
Install Sargam Colors from your terminal via npm. Current version is 2.1.2
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 use the CDN files.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/colors@2.1.1/dist/themes/light.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sargamdesign/colors@2.1.1/dist/themes/dark.css" />
.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); }
Here's the file structure of a Sargam colors:
.
├── 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.
git clone https://github.com/SargamDesign/sargam-colors.git
cd sargam-colors
npm i
npm run build
Variable | Value(Light) | Value(Dark) | Role |
---|---|---|---|
--text-primary |
--silver8 | --silver1 | Body copy |
--text-primary-alt |
--silver7 | --silver3 | Body copy alt |
--text-secondary |
--silver6 | --silver5 | Secondary text color |
--text-placeholder |
--silver5 | --silver6 | 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 |
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 |
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 |
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 |
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 | --silver8 | Secondary button active |
--button-danger |
--red5 | --red4 | Danger button background |
--button-danger-hover |
--red6 | --red3 | Danger button hover |
--button-danger-active |
--red7 | --red2 | Danger button active |
--button-disabled |
--silver5 | --silver6 | Disabled button |
--button-disabled-alt |
--silver4 | --silver7 | Disabled button alt |
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 |
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 |
MIT License, Copyright (c) 2024 Method Black. Brought to you by @planetabhi 🙌