Pollen is a highly configurable library of CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles.
Made and maintained with ❤️ by the fine people at [Bokeh](https://bokeh.photo).
### Features
- Robust library of well-considered, style-agnostic CSS variables
- Fully configurable and extensible with CLI build tool
- Zero setup required to get started
- Responsive with configurable `@media` and `@supports` queries
- Lightweight, human-readable output if you ever want to move away from Pollen
### What it looks like
Pollen's design tokens can be used to build any project. They're easy to customise and extend and they don't require preprocessors, class naming conventions, or non-standard syntax. Generate an entirely custom design system with a simple config file.
## How it works
#### 1. Configure your design system
`pollen.config.js`
```js
module.exports = (pollen) => ({
output: "./pollen.css",
modules: {
...pollen,
color: {
...pollen.colors,
bg: "white",
text: "var(--color-black)",
},
},
media: {
"(prefers-color-scheme: dark)": {
color: {
bg: "var(--color-black)",
text: "white",
},
},
},
});
```
#### 2. Build your CSS
```sh
$ pollen
```
#### 3. Use the CSS
`index.html`
```html
```
## What it includes
Pollen's default variables include expertly crafted modules for:
- Font sizes
- Fluid font sizes
- Font sets
- Font weights
- Line heights
- Letter spacings
- Prose widths
- Size scale
- Container widths
- Aspect ratios
- Color pallete
- Border radiuses
- Blurs
- Z-index layers
- Box shadows
- Easing functions
- Page grid
- Content grids
## Documentation
Read the full documentation at **[pollen.style](https://www.pollen.style)**
