Aha Design System - CSS
Style tools for component-based UI development.
Explore Aha docs »
Report bug
·
Request feature
## Status
[](https://www.jsdelivr.com/package/npm/@ahaui/css)
[](https://www.npmjs.com/package/@ahaui/css)
## Quick start
### Option 1: Via HTML tag
```html
```
### Option 2: Via node module
```sh
# With npm
npm install @ahaui/css
# Or with yarn
yarn add @ahaui/css
```
```js
/* In JS file */
import "@ahaui/css/index.min.css";
```
```css
/* Or in CSS file */
@import "@ahaui/css/index.min.css";
```
## Customization
After importing the Aha CSS file, you can override following CSS variables to make your custom theme:
```css
@import "@ahaui/css/index.min.css";
:root {
--colorPrimary: #ff43ab;
}
```
Full customizable variables:
```css
:root {
--colorPrimaryLighter: #e7ecfc;
--colorPrimaryLight: #d7defa;
--colorPrimary: #375de7;
--colorFocusPrimary: #375de733;
--colorPrimaryDark: #2c4ab8;
--colorPrimaryDarker: #21388b;
--colorAccentLighter: #fff1e8;
--colorAccentLight: #fbdfcc;
--colorAccent: #ed6200;
--colorFocusAccent: #ed620033;
--colorAccentDark: #d55800;
--colorAccentDarker: #a64500;
--colorNegativeLighter: #ffd2d8;
--colorNegativeLight: #f6bcc3;
--colorNegative: #d0021b;
--colorFocusNegative: #d0021b33;
--colorNegativeDark: #b50016;
--colorNegativeDarker: #960012;
--colorWarningLighter: #fdf4d0;
--colorWarningLight: #fff0b3;
--colorWarning100: #ffe380;
--colorWarning: #ffc400;
--colorFocusWarning: #ffc40033;
--colorWarning300: #ffab00;
--colorWarningDark: #ff991f;
--colorPositiveLighter: #d7f9e7;
--colorPositiveLight: #aceccb;
--colorPositive: #22a861;
--colorFocusPositive: #22a86133;
--colorPositiveDark: #019044;
--colorPositiveDarker: #017a3a;
--colorInformationLighter: #e7ecfc;
--colorInformationLight: #d7defa;
--colorInformation: #375de7;
--colorFocusInformation: #375de733;
--colorInformationDark: #2c4ab8;
--colorInformationDarker: #21388b;
--fontFamily: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
--fontRegular: 400;
--fontMedium: 500;
--fontBold: 700;
--radiusSmall: 2px;
--radiusMedium: 4px;
--radiusLarge: 8px;
--radiusExtraLarge: 16px;
}
```
**NOTE:** Overriding utility CSS classes is possible, but not recommended.
## What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```text
@ahaui/css/
└── dist/
├── index.css
├── index.css.map
├── index.min.css
├── utilities.css
├── utilities.css.map
└── utilities.min.css
```
## Browser support
- Google Chrome (latest)
- Microsoft Edge (latest)
- Opera (latest)
- Firefox 4+
- Safari 7+
## Copyright and license
AhaUI-CSS is licensed under the [Apache-2.0 License](https://github.com/gotitinc/ahaui/blob/main/LICENSE), sponsored and supported by [Got It, Inc.](https://www.got-it.co).