Introducing Pollen

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. 
Made and maintained with ❤️ by the fine people at Bokeh.
Features
Robust library of well-considered, style-agnostic CSS variables (see Modules)
Fully configurable and extensible with CLI build tool (see Configuration)
Zero setup required to get started (see Getting started)
Easy responsive design with support for configuring CSS queries (see Media & Supports)
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 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>
​
How it works
1. Configure your design system
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'
      }
    }
  }
});
2. Build your CSS
$ pollen
3. Use the CSS
./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;
  }
}

Next - Basics

Getting started

Last modified 9d ago

Copy link

Edit on GitHub

Outline

Features

What it looks like

How it works