# Introducing Pollen

![](https://3929197854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDsnCJdjpRIz0NyKN8D%2Fuploads%2FfN6FarkWF9V08p1SGXyh%2Fcover%20wide.jpg?alt=media\&token=44c84f51-5702-4f21-8c62-495d0005a5a2)

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](https://bokeh.photo).

### Features

* Robust library of well-considered, style-agnostic CSS variables (see [modules](https://www.pollen.style/modules "mention"))
* Fully configurable and extensible with CLI build tool (see [configuration](https://www.pollen.style/basics/configuration "mention"))
* Zero setup required to get started (see [getting-started](https://www.pollen.style/basics/getting-started "mention"))
* Easy responsive design with support for configuring CSS queries (see [queries](https://www.pollen.style/basics/configuration/queries "mention"))
* 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](https://www.pollen.style/basics/configuration).

![](https://3929197854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDsnCJdjpRIz0NyKN8D%2Fuploads%2FyTFaLTJO3MwoBmOyBCGb%2FMockup.jpg?alt=media\&token=7db619f7-ecf5-4e97-93c4-41b0338569b1)

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

```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" %}

```jsx
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" %}

```jsx
<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" %}

```markup
<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" %}

```javascript
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" %}

```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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.pollen.style/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.