description
The CSS variables build system

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 Broken link)
• Fully configurable and extensible with CLI build tool (see configuration)
• Zero setup required to get started (see getting-started.md)
• Easy responsive design with support for configuring CSS queries (see queries.md)
• 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.

{% tabs %} {% tab title="CSS" %}

.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;
}

{% endtab %}

{% tab title="CSS-in-JS" %}

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;
`

{% endtab %}

{% tab title="Object styles" %}

<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>
  

{% endtab %}

{% tab title="Inline Styles" %}

<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>

{% endtab %}

{% tab title="Live example" %} {% embed url="https://codepen.io/madeleineostoja/pen/LYjGjGa" %}

{% endtab %} {% endtabs %}

How it works

1. Configure your design system

{% code title="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'
      }
    }
  }
});

{% endcode %}

2. Build your CSS

$ pollen

3. Use the CSS

{% code title="./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;
  }
}

{% endcode %}