Pollen

The CSS variables build system

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.

$3

- 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

$3

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