Introducing Pollen
The CSS variables build system

Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles.
- Lightweight, human-readable output if you ever want to move away from Pollen
Pollen's design tokens can be used to build any project. They're easy to completely 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.

CSS
CSS-in-JS
Object styles
Inline Styles
Live example
.button {
font-family: var(--font-sans);
font-size: var(--scale-00);
font-weight: var(--weight-medium);
line-height: var(--line-none);
padding: var(--size-3) var(--size-5);
background: var(--color-blue);
border-radius: var(--radius-xs);
color: white;
}
const Button = styled.button`
font-family: var(--font-sans);
font-size: var(--scale-00);
font-weight: var(--weight-medium);
line-height: var(--line-none);
padding: var(--size-3) var(--size-5);
background: var(--color-blue);
border-radius: var(--radius-xs);
color: white;
`
<button styles={{
fontFamily: 'var(--font-sans)',
fontSize: 'var(--scale-00)',
fontWeight: 'var(--weight-medium)',
lineHeight: 'var(--line-none)',
padding: 'var(--size-3) var(--size-5)',
background: 'var(--color-blue)',
borderRadius: 'var(--radius-xs)'
color: 'white'
}}>
Button
</button>
<button style="font-family: var(--font-sans); font-size: var(--scale-00); font-weight: var(--weight-medium); line-height: var(--line-none); padding: var(--size-3) var(--size-5); background: var(--color-blue); border-radius: var(--radius-xs); color: white;">
Button
</button>
pollen.config.js
module.exports = (pollen) => ({
output: './pollen.css',
modules: {
color: {
...pollen.colors,
bg: 'white',
text: 'var(--color-black)'
}
},
media: {
'(prefers-color-scheme: dark)': {
color: {
bg: 'var(--color-black)',
text: 'white'
}
}
}
});
$ pollen
./pollen.css
:root {
...
--color-bg: white;
--color-text: var(--color-black);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: var(--color-black);
--color-text: white;
}
}
Last modified 11mo ago