# Introducing Pollen

The CSS variables build system

![](/files/SrBNCf2Xb0LWpLbyM32C)

Pollen is a highly configurable library for managing CSS variables in your design system. It lets you write faster, more consistent, and more maintainable styles.

Made and maintained with ❤️ by the fine people at [Hyperfocal](https://hyperfocal.photo).

### Features

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

![](/files/pTCyv6GtdYKXl0t69XQI)

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


# Getting started

Since Pollen is just CSS variables, it works everywhere without any preprocessor or environment requirements.

### Quick Start

Install Pollen from NPM and include its CSS in your project, or link direct to it on the Unpkg CDN

{% tabs %}
{% tab title="Module import" %}

```bash
npm i pollen-css
```

```javascript
import 'pollen-css/pollen.css';
```

> Requires CSS support in your bundler (eg: Webpack, Rollup, etc)
> {% endtab %}

{% tab title="CSS import (CDN)" %}

```css
@import "https://unpkg.com/pollen-css/dist/pollen.css";
```

{% endtab %}

{% tab title="HTML Link (CDN)" %}

```markup
<link rel="stylesheet" href="https://unpkg.com/pollen-css/dist/pollen.css" />
```

{% endtab %}
{% endtabs %}

Once Pollen is included in your project, you can use its variables anywhere

### Configuration

The real power of Pollen comes when you begin to extend and customise the default set of CSS variables. Every part of the library can be customised, extended, or stripped out with the `pollen` command line build tool. Instead of importing the default `pollen.css` file, create a `pollen.config.js` config file in the root of your project and run `pollen` to generate your own custom design system. Then import the generated CSS file as you normally would.

Read more in [Configuration](/basics/configuration).

### IE Support

Pollen requires a small shim to work in Internet Explorer 11 and below, as it doesn't support the CSS variables that the library is built on. Enable IE support with the included `shimmie` utility from `pollen-css/utils`

```javascript
import { shimmie } from 'pollen-css/utils';

shimmie();
```

Shimmie will check for support and, if required, dynamically load and apply the excellent [`css-vars-ponyfill`](https://jhildenbiddle.github.io/css-vars-ponyfill/#/) shim with sane configuration.

## Editor Integration

### VS Code

Enable intellisense autocompletion for Pollen in VS Code by installing the [CSS Var Complete](https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar) extension and adding Pollen's CSS in a `.vscode/settings.json` file in the root of your project, along with some optional additional configuration.

If you have [configured a custom Pollen bundle](/basics/configuration) make sure you add the output CSS file to the `cssvar.files` array instead of the default `pollen.css` bundle.

{% code title=".vscode/settings.json" %}

```json
{
  "cssvar.files": [
    // Or your custom Pollen bundle
    "./node_modules/pollen-css/dist/pollen.css",
  ],
  // Do not ignore css files in node_modules, which is ignored by default
  "cssvar.ignore": [],
  // Use Pollen's inbuilt variable ordering
  "cssvar.disableSort": true,
  // Add support for autocomplete in other file types
  "cssvar.extensions": ["css", "html", "jsx", "tsx"]
}
```

{% endcode %}


# Configuration

While Pollen provides a default bundle of robust, useful low-level variables to build your project with (under `pollen-css/pollen.css`). It also comes with a build tool to generate your own custom design system instead.

Start by creating a config file in the root of your project that exports either a function or an object. See the full list of configuration options below.

The config file can be in CommonJS or ESM format, and will automatically be loaded with any of the following filenames:

* `pollen.config.{js|cjs|mjs}`
* `pollenrc.{js|cjs|mjs}`

{% code title="pollen.config.js" %}

```javascript
module.exports = {
  // Config options
}
```

{% endcode %}

Once you have a configuration file, run the included `pollen` CLI tool. Either install `pollen-css` globally, or run the tool in an NPM script or with `npx`.

{% tabs %}
{% tab title="Global install" %}

```
$ npm i -g pollen-css
$ pollen
```

{% endtab %}

{% tab title="Local install" %}

```
npm i pollen-css
npx pollen
```

{% endtab %}
{% endtabs %}

Then import/link to the output stylesheet in your project instead of the default Pollen export

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

```javascript
import './pollen.css'
```

{% endtab %}

{% tab title="HTML" %}

```html
<link rel="stylesheet" href="/pollen.css" />
```

{% endtab %}
{% endtabs %}

#### Managing Pollen builds in production

Since the output CSS is a generated file, we recommend excluding this output from version control like git and running the `pollen` build tool along with the rest of your build pipeline, in a CI step or similar. You can do this with a `prebuild` script in `package.json`

{% code title="package.json" %}

```json
{
  "scripts": {
    "prebuild": "pollen"
  }
}
```

{% endcode %}

### Config options

<table><thead><tr><th width="161">Option</th><th width="155.7450980392157">Default</th><th>Description</th></tr></thead><tbody><tr><td><code>output</code></td><td><code>./pollen.css</code></td><td>File path of the generated Pollen stylesheet and optional JSON schema</td></tr><tr><td><code>selector</code></td><td><code>:root</code></td><td>CSS selector to scope Pollen's variables to</td></tr><tr><td><code>modules</code></td><td>Pollen default values</td><td>Pollen module configuration, see <a data-mention href="/pages/9c6xQA8uXQQDq6FYfDuE">/pages/9c6xQA8uXQQDq6FYfDuE</a></td></tr><tr><td><code>media</code></td><td><code>undefined</code></td><td>Media queries, see <a data-mention href="/pages/x9GE0zFZe38mruq0pPaH">/pages/x9GE0zFZe38mruq0pPaH</a></td></tr><tr><td><code>supports</code></td><td><code>undefined</code></td><td>Supports queries, see <a data-mention href="/pages/x9GE0zFZe38mruq0pPaH">/pages/x9GE0zFZe38mruq0pPaH</a></td></tr></tbody></table>

```javascript
module.exports = {
  output: './styles/pollen.css',
  modules: {
    // Module config
  }
}
```

### CLI options

| Option           | Default                          | Description                              |
| ---------------- | -------------------------------- | ---------------------------------------- |
| `-c`, `--config` | `./pollen.config.js`             | Path to your Pollen config file          |
| `-o`, `--output` | Value of `output` in config file | File path to generated Pollen stylesheet |

```
pollen -c ./pollen-dev.config.js -o ./styles/pollen-dev.css
```

### Exporting a JSON schema

The `output` option in Pollen's config also accepts an object with a `json` field, which will generate a JSON schema of your design system. This is useful for internal documentation if your [module configuration](/basics/configuration/configuring-modules) differs significantly from Pollen's defaults, which are documented here.

```javascript
module.exports = {
  output: {
    css: './styles/pollen.css',
    json: './docs/pollen.json'
  }
}
```

### Changing the CSS selector

By default Pollen scopes all its variables to `:root`. This is generally what you want, it will make your style variables available globally through your site, polyfill-able for IE11, and easy to reactively modify with media queries and javascript.&#x20;

However you can change this with the `selector` option in Pollen's config, a potential use-case is to make it `:host` for a shadow DOM, or a HTML element if you want to scope Pollen to part of your project

```javascript
module.exports = {
  selector: '.scoped'
}
```

### Typescript support

Pollen exports its config as a `Config` type, which you can use to annotate your config file with JSDoc typings

```javascript
/** @type {import('pollen-css').Config} */
module.exports = {}
```

Alternatively use the included `defineConfig()` helper to get typescript support without JSDoc annotation

```javascript
const { defineConfig } = require('pollen-css/utils');

module.exports = defineConfig({ ... });
```


# Configuring Modules

Every module in Pollen can be customised, overwritten, and extended. A *module* is a collection of CSS variables with the same prefix, eg: `scale` (see [Typography](/modules/typography)), `size` (see [Layout](/modules/layout)), etc.

### Enabling and disabling&#x20;

Enable and disable whole module by passing `true` or `false` to the module in your config. All modules are enabled by default, set any you don't plan on using to `false` to further save on bundle size.

{% code title="pollen.config.js" %}

```javascript
module.exports = {
  modules: {
    scale: false,
    width: false,
    color: true
  }
}
```

{% endcode %}

### Overwriting

To overwrite a module, provide an object with all the values you want to use to the module in your config.

{% code title="pollen.config.js" %}

```javascript
module.exports = {
  modules: {
    scale: { /* custom type scale */ },
    letter: { /* custom letter spacing scale * }
  }
}
```

{% endcode %}

### Extending

Often you'll want to just add or tweak a few values from Pollen's defaults instead of disabling or overwriting outright.&#x20;

To do this Pollen provides all of its defaults as an argument to a configuration *function* rather than a plain object. Spread the appropriate key into a new object on the module to extend or overwrite Pollen's defaults.

{% code title="pollen.config.js" %}

```javascript
module.exports = (pollen) => ({
  modules: {
    scale: { ...pollen.scale, '000': '0.6875rem' },
    letter: {...pollen.letter, '2xl': '0.1em' }
   } 
});
```

{% endcode %}

These defaults are also provided in the `defineConfig` typescript helper

```javascript
const { defineConfig } = require('pollen-css/utils');

module.exports = defineConfig(pollen => ({
  modules: {
    scale: { ...pollen.scale, '000': '0.6875rem' },
    letter: {...pollen.letter, '2xl': '0.1em' }
   } 
  })
);
```


# Extending Pollen

Just as you can customise, extend, and overwrite the included modules in Pollen, you can also use Pollen to generate your own completely custom design system.&#x20;

### Custom modules

Every key in Pollen's `modules` configuration is turned into a family of CSS variables. The module name becomes the variable prefix, and a property is generated for each key in the module object.

For example this configuration would generate a new group of variables as `--typeset-*`

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

```javascript
module.exports = {
  modules: {
    typeset: {
      '0': 'var(--scale-0)/1.3 var(--font-sans)',
      '1': 'var(--scale-1)/1.5 var(--font-sans)',
      '2': 'var(--scale-2)/1.4 var(--font-sans)',
      '3': 'var(--scale-3)/1.2 var(--font-sans)',
      '4': 'var(--scale-4)/1.1 var(--font-sans)',
    }
  }
}
```

{% endtab %}

{% tab title="Generated CSS" %}

```css
:root {
  // The rest of Pollen's CSS
  --typeset-0: var(--scale-0)/1.3 var(--font-sans);
  --typeset-1: var(--scale-1)/1.5 var(--font-sans);
  --typeset-2: var(--scale-2)/1.4 var(--font-sans);
  --typeset-3: var(--scale-4)/1.1 var(--font-sans);
}
```

{% endtab %}
{% endtabs %}

### Configuration logic

Since Pollen's configuration is just JavaScript, you can run any logic you need to generate your design system configuration as long as it's synchronous.&#x20;

The above example could be simplified with a `makeTypeset()` function like so

```javascript
function makeTypeset(scale, lh) {
  return `var(--scale-${scale})/${lh} var(--font-sans)`;
}

module.exports = {
  modules: {
    typeset: {
      '0': makeTypeset(0, 1.3),
      '1': makeTypeset(1, 1.5),
      '2': makeTypeset(2, 1.4),
      '3': makeTypeset(3, 1.2),
      '4': makeTypeset(4, 1.1)
    }
  }
}
```

This can be especially powerful for things like generating opacities from HEX colours, value scales based on ratios, and more.


# Media & Supports

CSS variables can be globally responsive. By updating variables in `@media` or `@supports` queries, you can adapt your entire interface instantly.

Pollen supports both of these queries through the `media` and `supports` options in `pollen.config.js`. By updating [modules](/modules/typography) here they will be changed if the query given is matched.

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

```javascript
module.exports = {
  media: {
    '(min-width: 640px)': {
      scale: {
        0: '1.125rem'
      }      
    }
  },
  supports: {
    '(display: grid)': {
      grid: {
        content: 'var(--grid-12)'
      }
    } 
  }
}
```

{% endtab %}

{% tab title="Generated CSS" %}

```css
:root {
  ...Pollen modules
}

@media (min-width: 640px) {
  :root {
    --scale-0: 1.125rem;
  }
}

@supports (display: grid) {
  :root {
    --grid-content: var(--grid-12)
  } 
}
```

{% endtab %}
{% endtabs %}


# Javascript

CSS variables can be accessed and updated in JavaScript, which allows you to accomplish things that were previously very complicated, like dynamically applying style themes. By updating a few key variables based on user input, you can reskin an entire interface.

Update CSS variables in JS by using the `setProperty` method on the document root’s style property.

```javascript
document.documentElement.style.setProperty(`--color-primary`, `#4299e1`);
```

You can also alias variables to other variables, this is useful for using a consistent property throughout your codebase that can be dynamically updated without losing meaning.

```javascript
function enableDarkMode() {
  document.documentElement.style.setProperty(`--color-background`, `var(--color-black)`);
  document.documentElement.style.setProperty(`--color-text`, `white`)
}
```


# Typography

Foundations in type

## Modular Scale

Pollen provides a robust modular typography scale to encourage consistent typography sizing across an interface. Sizes are set in `rem` units to support proper font scaling, and assume a `16px` root `font-size`.

| Property group | Applies to  |
| -------------- | ----------- |
| `--scale-*`    | `font-size` |

![](/files/emKnjwljY9RiCqXonJJv)

```css
.heading {
  font-size: var(--scale-4);
}
```

| Property      | Value      | Equivalent to |
| ------------- | ---------- | ------------- |
| `--scale-000` | `0.75rem`  | `12px`        |
| `--scale-00`  | `0.875rem` | `14px`        |
| `--scale-0`   | `1rem`     | `16px`        |
| `--scale-1`   | `1.125rem` | `18px`        |
| `--scale-2`   | `1.25rem`  | `20px`        |
| `--scale-3`   | `1.5rem`   | `24px`        |
| `--scale-4`   | `1.875rem` | `30px`        |
| `--scale-5`   | `2.25rem`  | `36px`        |
| `--scale-6`   | `3rem`     | `48px`        |
| `--scale-7`   | `3.75rem`  | `60px`        |
| `--scale-8`   | `4.5rem`   | `72px`        |
| `--scale-9`   | `6rem`     | `96px`        |
| `--scale-10`  | `8rem`     | `128px`       |

## Fluid Modular Scale

In addition to the standard modular typographic scale above, Pollen also comes with a fluid scale that tweens between steps on the scale as screen width changes. Its built with Pollen's own [fluid](/utils/fluid) utility, which generates complex CSS `clamp()` functions based on screen width bounds.

Each fluid font size resizes between a min and max size, starting at mobile screen sizes (`480px`) and ending at normal desktop screen sizes (`1280px`).

| Property group    | Applies to  |
| ----------------- | ----------- |
| `--scale-fluid-*` | `font-size` |

```css
.heading {
  font-size: var(--scale-fluid-5);
}
```

<table><thead><tr><th>Property</th><th width="278.3333333333333">Value</th><th>Range</th></tr></thead><tbody><tr><td><code>--scale-fluid-000</code></td><td><code>clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem)</code></td><td><code>0.625rem</code> -> <code>0.75rem</code></td></tr><tr><td><code>--scale-fluid-00</code></td><td><code>clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem)</code></td><td><code>0.75rem</code> -> <code>0.875rem</code></td></tr><tr><td><code>--scale-fluid-0</code></td><td><code>clamp(0.875rem, 0.8rem + 0.25vw, 1rem)</code></td><td><code>0.875rem</code> -> <code>1rem</code></td></tr><tr><td><code>--scale-fluid-1</code></td><td><code>clamp(1rem, 0.925rem + 0.25vw, 1.125rem)</code></td><td><code>1rem</code> -> <code>1.125rem</code></td></tr><tr><td><code>--scale-fluid-2</code></td><td><code>clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem)</code></td><td><code>1.125rem</code> -> <code>1.25rem</code></td></tr><tr><td><code>--scale-fluid-3</code></td><td><code>clamp(1.8125rem, 2rem + -0.625vw, 1.5rem)</code></td><td><code>1.8125rem</code> -> <code>1.5rem</code></td></tr><tr><td><code>--scale-fluid-4</code></td><td><code>clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem)</code></td><td><code>1.5rem</code> -> <code>1.875rem</code></td></tr><tr><td><code>--scale-fluid-5</code></td><td><code>clamp(1.875rem, 1.65rem + 0.75vw, 2.25rem)</code></td><td><code>1.875rem</code> -> <code>2.25rem</code></td></tr><tr><td><code>--scale-fluid-6</code></td><td><code>clamp(2.25rem, 1.8rem + 1.5vw, 3rem)</code></td><td><code>2.25rem</code> -> <code>3rem</code></td></tr><tr><td><code>--scale-fluid-7</code></td><td><code>clamp(3rem, 2.55rem + 1.5vw, 3.75rem)</code></td><td><code>3rem</code> -> <code>3.75rem</code></td></tr><tr><td><code>--scale-fluid-8</code></td><td><code>clamp(3.75rem, 3.3rem + 1.5vw, 4.5rem)</code></td><td><code>3.75rem</code> -> <code>4.5rem</code></td></tr><tr><td><code>--scale-fluid-9</code></td><td><code>clamp(4.5rem, 3.6rem + 3vw, 6rem)</code></td><td><code>4.5rem</code> -> <code>6rem</code></td></tr><tr><td><code>--scale-fluid-10</code></td><td><code>clamp(6rem, 4.8rem + 4vw, 8rem)</code></td><td><code>6rem</code> -> <code>8rem</code></td></tr></tbody></table>

## Font Families

Base font stacks as better alternatives to browser defaults, designed for rapid prototyping and to be overridden as your project grows.

| Property group | Applies to    |
| -------------- | ------------- |
| `--font-*`     | `font-family` |

```css
body {
  font-family: var(--font-sans);
}
```

| Property       | Value                                                                                                                |
| -------------- | -------------------------------------------------------------------------------------------------------------------- |
| `--font-sans`  | `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"` |
| `--font-serif` | `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`                                                        |
| `--font-mono`  | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`                 |

## Font Weights

Consistent font weights across an interface

```css
.heading {
  font-weight: var(--weight-bold)
}
```

| Property group | Applies to    |
| -------------- | ------------- |
| `--weight-*`   | `font-weight` |

| Property             | Value |
| -------------------- | ----- |
| `--weight-light`     | `300` |
| `--weight-regular`   | `400` |
| `--weight-medium`    | `500` |
| `--weight-semibold`  | `600` |
| `--weight-bold`      | `700` |
| `--weight-extrabold` | `800` |
| `--weight-black`     | `900` |

## Line Height

Encourage consistent line heights across an interface, applied as unitless values to scale with font size.

| Property group | Applies to    |
| -------------- | ------------- |
| `--line-*`     | `line-height` |

```css
body {
  line-height: var(--line-md);
}
```

| Property      | Value   |
| ------------- | ------- |
| `--line-none` | `1`     |
| `--line-xs`   | `1.25`  |
| `--line-sm`   | `1.275` |
| `--line-md`   | `1.5`   |
| `--line-lg`   | `1.625` |
| `--line-xl`   | `2`     |

## Letter Spacing

Encourage consistent letter spacing across an interface, applied as `em` units relative to the text's size

| Property group | Applies to       |
| -------------- | ---------------- |
| `--letter-*`   | `letter-spacing` |

```css
.uppercase {
  letter-spacing: var(--letter-xs);
}
```

| Property        | Value      |
| --------------- | ---------- |
| `--letter-xs`   | `-0.05em`  |
| `--letter-sm`   | `-0.025em` |
| `--letter-none` | `0`        |
| `--letter-lg`   | `0.025em`  |
| `--letter-xl`   | `0.05em`   |

## Prose Width

Max-widths optimised for legibility of large blocks of text, based on the font and font-size of content.

| Property group | Applies to  |
| -------------- | ----------- |
| `--prose-*`    | `max-width` |

```css
article {
  max-width: var(--prose-normal);
  margin: 0 auto;
}
```

| Property     | Value  | Measure    |
| ------------ | ------ | ---------- |
| `--prose-xs` | `45ch` | 45 letters |
| `--prose-sm` | `55ch` | 55 letters |
| `--prose-md` | `65ch` | 65 letters |
| `--prose-lg` | `75ch` | 75 letters |
| `--prose-xl` | `85ch` | 85 letters |


# Layout

Structural consistency

## Size Scale

Encourage consistent spacing throughout an interface. Pollen's size scale is proportional, so `--size-16` is twice as much as `--size-8` for example. One size unit is equal to `4px`.

| Property group | Applies to                                                             |
| -------------- | ---------------------------------------------------------------------- |
| `--size-*`     | Any size-related property (`margin`, `padding`, `width`,`height`, etc) |

![](/files/FZFj6rFCpSztur5QDVPE)

```css
section {
  margin-top: var(--size-5);
}
```

| Property        | Value         |
| --------------- | ------------- |
| `--size-px`     | `1px`         |
| `--size-1`      | `4px`         |
| `--size-2`      | `8px`         |
| `--size-3`      | `12px`        |
| `--size-4`      | `16px`        |
| `--size-5`      | `20px`        |
| `--size-6`      | `24px`        |
| `--size-7`      | `28px`        |
| `--size-8`      | `32px`        |
| `--size-9`      | `36px`        |
| `--size-10`     | `40px`        |
| `--size-11`     | `44px`        |
| `--size-12`     | `48px`        |
| `--size-14`     | `56px`        |
| `--size-16`     | `64px`        |
| `--size-20`     | `80px`        |
| `--size-24`     | `96px`        |
| `--size-28`     | `112px`       |
| `--size-32`     | `128px`       |
| `--size-36`     | `144px`       |
| `--size-40`     | `160px`       |
| `--size-44`     | `176px`       |
| `--size-48`     | `192px`       |
| `--size-52`     | `208px`       |
| `--size-56`     | `224px`       |
| `--size-60`     | `240px`       |
| `--size-64`     | `256px`       |
| `--size-72`     | `288px`       |
| `--size-80`     | `320px`       |
| `--size-96`     | `384px`       |
| `--size-full`   | `100%`        |
| `--size-screen` | `100vw`       |
| `--size-min`    | `min-content` |
| `--size-max`    | `max-content` |

## Container Widths

Encourage consistent max-widths for containers throughout an interface, based roughly on common device breakpoints

| Property group | Applies to  |
| -------------- | ----------- |
| `--width-*`    | `max-width` |

![](/files/U246OcYc7SkEsJsviVAb)

```css
.page-container {
  max-width: var(--width-md);
  margin: 0 auto;
}
```

| Property     | Value    |
| ------------ | -------- |
| `--width-xs` | `480px`  |
| `--width-sm` | `640px`  |
| `--width-md` | `768px`  |
| `--width-lg` | `1024px` |
| `--width-xl` | `1280px` |

## Aspect Ratios

Simple aspect ratios for common formats

| Property group | Applies to     |
| -------------- | -------------- |
| `--ratio-*`    | `aspect-ratio` |

```css
.image {
  aspect-ratio: var(--ratio-portrait);
}
```

| Property             | Value     |
| -------------------- | --------- |
| `--ratio-square`     | `1/1`     |
| `--ratio-portrait`   | `3/4`     |
| `--ratio-landscape`  | `4/3`     |
| `--ratio-tall`       | `2/3`     |
| `--ratio-wide`       | `3/2`     |
| `--ratio-widescreen` | `16/9`    |
| `--ratio-golden`     | `1.618/1` |


# UI

Consistency across UI and motion

## Radius

Consistent edge radiuses throughout an interface.

| Property group | Applies to      |
| -------------- | --------------- |
| `--radius-*`   | `border-radius` |

![](/files/PVPnv2AfaHZ7sy5qWoYA)

```css
.button {
  border-radius: var(--radius-md);
}
```

| Property        | Value    |
| --------------- | -------- |
| `--radius-xs`   | `3px`    |
| `--radius-sm`   | `6px`    |
| `--radius-md`   | `8px`    |
| `--radius-lg`   | `12px`   |
| `--radius-xl`   | `16px`   |
| `--radius-100`  | `100%`   |
| `--radius-full` | `9999px` |

## Shadow

Box shadows for creating realistic elevation in 3d space.

| Property group | Applies to   |
| -------------- | ------------ |
| `--shadow-*`   | `box-shadow` |

![](/files/8alIuYepLEjMQac9XolC)

```css
.card {
  box-shadow: var(--shadow-sm);
}
```

| Property      | Value                                                                       |
| ------------- | --------------------------------------------------------------------------- |
| `--shadow-xs` | `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)`           |
| `--shadow-sm` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`     |
| `--shadow-md` | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`   |
| `--shadow-lg` | `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)` |
| `--shadow-xl` | `0 25px 50px -12px rgba(0, 0, 0, 0.25)`                                     |

## Blur

Backdrop blur effects for giving a sense of depth to an interface

| Property Group | Applies to        |
| -------------- | ----------------- |
| `--blur-*`     | `backdrop-filter` |

![](/files/jUFQHnhCzYPjPVAwJPVq)

```css
.overlay {
  backdrop-filter: var(--blur-md);
}
```

| Property    | Value        |
| ----------- | ------------ |
| `--blur-xs` | `blur(4px)`  |
| `--blur-sm` | `blur(8px)`  |
| `--blur-md` | `blur(16px`) |
| `--blur-lg` | `blur(24px)` |
| `--blur-xl` | `blur(40px)` |

## Easing

Easing functions for realistic movement in transitions and animations

| Property Group | Applies to                |
| -------------- | ------------------------- |
| `--ease-*`     | `transition`, `animation` |

```css
.animated {
  transition: all 300ms var(--ease-in-cubic);
}
```

<figure><img src="/files/k278KLnT6CS9qrSu06JV" alt=""><figcaption></figcaption></figure>

| Property              | Value                                     |
| --------------------- | ----------------------------------------- |
| `--ease-in-sine`      | `cubic-bezier(0.47, 0, 0.745, 0.715)`     |
| `--ease-out-sine`     | `cubic-bezier(0.39, 0.575, 0.565, 1)`     |
| `--ease-in-out-sine`  | `cubic-bezier(0.445, 0.05, 0.55, 0.95)`   |
| `--ease-in-quad`      | `cubic-bezier(0.55, 0.085, 0.68, 0.53)`   |
| `--ease-out-quad`     | `cubic-bezier(0.25, 0.46, 0.45, 0.94)`    |
| `--ease-in-out-quad`  | `cubic-bezier(0.455, 0.03, 0.515, 0.955)` |
| `--ease-in-cubic`     | `cubic-bezier(0.55, 0.055, 0.675, 0.19)`  |
| `--ease-out-cubic`    | `cubic-bezier(0.215, 0.61, 0.355, 1)`     |
| `--ease-in-out-cubic` | `cubic-bezier(0.645, 0.045, 0.355, 1)`    |
| `--ease-in-quart`     | `cubic-bezier(0.895, 0.03, 0.685, 0.22)`  |
| `--ease-out-quart`    | `cubic-bezier(0.165, 0.84, 0.44, 1)`      |
| `--ease-in-out-quart` | `cubic-bezier(0.77, 0, 0.175, 1)`         |
| `--ease-in-quint`     | `cubic-bezier(0.755, 0.05, 0.855, 0.06)`  |
| `--ease-out-quint`    | `cubic-bezier(0.23, 1, 0.32, 1)`          |
| `--ease-in-out-quint` | `cubic-bezier(0.86, 0, 0.07, 1)`          |
| `--ease-in-expo`      | `cubic-bezier(0.95, 0.05, 0.795, 0.035)`  |
| `--ease-out-expo`     | `cubic-bezier(0.19, 1, 0.22, 1)`\`        |
| `--ease-in-out-expo`  | `cubic-bezier(1, 0, 0, 1)`                |
| `--ease-in-circ`      | `cubic-bezier(0.6, 0.04, 0.98, 0.335)`    |
| `--ease-out-circ`     | `cubic-bezier(0.075, 0.82, 0.165, 1)`     |
| `--ease-in-out-circ`  | `cubic-bezier(0.785, 0.135, 0.15, 0.86)`  |
| `--ease-in-back`      | `cubic-bezier(0.6, -0.28, 0.735, 0.045)`  |
| `--ease-out-back`     | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` |
| `--ease-in-out-back`  | `cubic-bezier(0.68, -0.55, 0.265, 1.55)`  |

## Layers

Consistent layering throughout an interface

| Property group | Applies to |
| -------------- | ---------- |
| `--layer-*`    | `z-index`  |

```css
.elevated {
  position: relative;
  z-index: var(--layer-1);
}
```

| Property        | Value        |
| --------------- | ------------ |
| `--layer-below` | `-1`         |
| `--layer-1`     | `10`         |
| `--layer-2`     | `20`         |
| `--layer-3`     | `30`         |
| `--layer-4`     | `40`         |
| `--layer-5`     | `50`         |
| `--layer-top`   | `2147483647` |


# Grid

The Grid System

## Page Grid

A configurable grid designed to be used for page containers, with a main center column for content and gutters on each side. The main center column will expand until it reaches a max-width, at which point it will remain constrained and centered at that width.

Give all children of the grid a `--grid-page-main` column value (equal to `2/3`) to place them in the main content area. Easily "break out" of the page grid for full-width panels by giving a child a `1 / -1` column placement

| Property           | Applies to              |
| ------------------ | ----------------------- |
| `--grid-page`      | `grid-template-columns` |
| `--grid-page-main` | `grid-column`           |

![](/files/OmabPl2whJk6EBO1KEXW)

```css
.page {
  display: grid;
  grid-template-columns: var(--grid-page);
}

.page > * {
  grid-column: var(--grid-page-main);
}

.page > .fullwidth {
  grid-column: 1 / -1;
}
```

### Configuration

Each aspect of the page grid is configurable with CSS variables. Set them either on the `:root` pseudo-element to apply globally, or on an individual page grid to apply just for that element.

| Property             | Default           | Description                                                          |
| -------------------- | ----------------- | -------------------------------------------------------------------- |
| `--grid-page-width`  | `var(--width-xl)` | Max width of the main content area                                   |
| `--grid-page-gutter` | `5vw`             | Width of the page gutters until the content area max with is reached |

```css
:root {
 --grid-page-gutter: var(--size-10);
 --grid-page-width: var(--width-lg);
 }
```

## Grid Template

Helpers for quickly setting common grid templates

| Property Group | Applies to                                       |
| -------------- | ------------------------------------------------ |
| `--grid-`      | `grid-template-columns` and `grid-template-rows` |

![](/files/EibVWQfMcOCrqNIHt5mj)

```css
.grid {
  display: grid;
  grid-template-columns: var(--grid-12);
}
```

| Property    | Value                        |
| ----------- | ---------------------------- |
| `--grid-2`  | `repeat(2, minmax(0, 1fr))`  |
| `--grid-3`  | `repeat(3, minmax(0, 1fr))`  |
| `--grid-4`  | `repeat(4, minmax(0, 1fr))`  |
| `--grid-5`  | `repeat(5, minmax(0, 1fr))`  |
| `--grid-6`  | `repeat(6, minmax(0, 1fr))`  |
| `--grid-7`  | `repeat(7, minmax(0, 1fr))`  |
| `--grid-8`  | `repeat(8, minmax(0, 1fr))`  |
| `--grid-9`  | `repeat(9, minmax(0, 1fr))`  |
| `--grid-10` | `repeat(10, minmax(0, 1fr))` |
| `--grid-11` | `repeat(11, minmax(0, 1fr))` |
| `--grid-12` | `repeat(12, minmax(0, 1fr))` |


# Colors

Rapid visual prototyping

Pollen includes a default color palette for rapid prototyping as a better alternative to browser defaults. It's designed to be a robust base that you can either replace or adapt from as your project evolves.

## The Palette

| Property group | Applies to                   |
| -------------- | ---------------------------- |
| `--color-*`    | `color` , `background-color` |

Pollen borrows from and lightly adapts Tailwind's excellent [color palette](https://tailwindcss.com/docs/customizing-colors).

Each color has a family of shades ranging from `50` (very light) to `950` (very dark). The unsuffixed color (eg: `--color-red`) in each family is an alias for median in that family (eg: `--color-red-500`).

```css
.alert {
  color: var(--color-red);
}
```

### Grey

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--grey-50`  | `#f9fafb`               |
| `--grey-100` | `#f3f4f6`               |
| `--grey-200` | `#e5e7eb`               |
| `--grey-300` | `#d1d5db`               |
| `--grey-400` | `#9ca3af`               |
| `--grey-500` | `#6b7280`               |
| `--grey-600` | `#4b5563`               |
| `--grey-700` | `#374151`               |
| `--grey-800` | `#1f2937`               |
| `--grey-900` | `#111827`               |
| `--grey-950` | `#030712`               |
| `--grey`     | `var(--color-grey-500)` |

### Slate

| Variable      | Value                    |
| ------------- | ------------------------ |
| `--slate-50`  | `#f8fafc`                |
| `--slate-100` | `#f1f5f9`                |
| `--slate-200` | `#e2e8f0`                |
| `--slate-300` | `#cbd5e1`                |
| `--slate-400` | `#94a3b8`                |
| `--slate-500` | `#64748b`                |
| `--slate-600` | `#475569`                |
| `--slate-700` | `#334155`                |
| `--slate-800` | `#1e293b`                |
| `--slate-900` | `#0f172a`                |
| `--slate-950` | `#020617`                |
| `--slate`     | `var(--color-slate-500)` |

### Zinc

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--zinc-50`  | `#fafafa`               |
| `--zinc-100` | `#f4f4f5`               |
| `--zinc-200` | `#e4e4e7`               |
| `--zinc-300` | `#d4d4d8`               |
| `--zinc-400` | `#a1a1aa`               |
| `--zinc-500` | `#71717a`               |
| `--zinc-600` | `#52525b`               |
| `--zinc-700` | `#3f3f46`               |
| `--zinc-800` | `#27272a`               |
| `--zinc-900` | `#18181b`               |
| `--zinc-950` | `#09090b`               |
| `--zinc`     | `var(--color-zinc-500)` |

### Stone

| Variable      | Value                    |
| ------------- | ------------------------ |
| `--stone-50`  | `#fafaf9`                |
| `--stone-100` | `#f5f5f4`                |
| `--stone-200` | `#e7e5e4`                |
| `--stone-300` | `#d6d3d1`                |
| `--stone-400` | `#a8a29e`                |
| `--stone-500` | `#78716c`                |
| `--stone-600` | `#57534e`                |
| `--stone-700` | `#44403c`                |
| `--stone-800` | `#292524`                |
| `--stone-900` | `#1c1917`                |
| `--stone-950` | `#0c0a09`                |
| `--stone`     | `var(--color-stone-500)` |

### Red

| Variable    | Value                  |
| ----------- | ---------------------- |
| `--red-50`  | `#fef2f2`              |
| `--red-100` | `#fee2e2`              |
| `--red-200` | `#fecaca`              |
| `--red-300` | `#fca5a5`              |
| `--red-400` | `#f87171`              |
| `--red-500` | `#ef4444`              |
| `--red-600` | `#dc2626`              |
| `--red-700` | `#b91c1c`              |
| `--red-800` | `#991b1b`              |
| `--red-900` | `#7f1d1d`              |
| `--red-950` | `#450a0a`              |
| `--red`     | `var(--color-red-500)` |

### Orange

| Variable       | Value                     |
| -------------- | ------------------------- |
| `--orange-50`  | `#fff7ed`                 |
| `--orange-100` | `#ffedd5`                 |
| `--orange-200` | `#fed7aa`                 |
| `--orange-300` | `#fdba74`                 |
| `--orange-400` | `#fb923c`                 |
| `--orange-500` | `#f97316`                 |
| `--orange-600` | `#ea580c`                 |
| `--orange-700` | `#c2410c`                 |
| `--orange-800` | `#9a3412`                 |
| `--orange-900` | `#7c2d12`                 |
| `--orange-950` | `#431407`                 |
| `--orange`     | `var(--color-orange-500)` |

### Amber

| Variable      | Value                    |
| ------------- | ------------------------ |
| `--amber-50`  | `#fffbeb`                |
| `--amber-100` | `#fef3c7`                |
| `--amber-200` | `#fde68a`                |
| `--amber-300` | `#fcd34d`                |
| `--amber-400` | `#fbbf24`                |
| `--amber-500` | `#f59e0b`                |
| `--amber-600` | `#d97706`                |
| `--amber-700` | `#b45309`                |
| `--amber-800` | `#92400e`                |
| `--amber-900` | `#78350f`                |
| `--amber-950` | `#451a03`                |
| `--amber`     | `var(--color-amber-500)` |

### Yellow

| Variable       | Value                     |
| -------------- | ------------------------- |
| `--yellow-50`  | `#fefce8`                 |
| `--yellow-100` | `#fef9c3`                 |
| `--yellow-200` | `#fef08a`                 |
| `--yellow-300` | `#fde047`                 |
| `--yellow-400` | `#facc15`                 |
| `--yellow-500` | `#eab308`                 |
| `--yellow-600` | `#ca8a04`                 |
| `--yellow-700` | `#a16207`                 |
| `--yellow-800` | `#854d0e`                 |
| `--yellow-900` | `#713f12`                 |
| `--yellow-950` | `#422006`                 |
| `--yellow`     | `var(--color-yellow-500)` |

### Lime

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--lime-50`  | `#f7fee7`               |
| `--lime-100` | `#ecfccb`               |
| `--lime-200` | `#d9f99d`               |
| `--lime-300` | `#bef264`               |
| `--lime-400` | `#a3e635`               |
| `--lime-500` | `#84cc16`               |
| `--lime-600` | `#65a30d`               |
| `--lime-700` | `#4d7c0f`               |
| `--lime-800` | `#3f6212`               |
| `--lime-900` | `#365314`               |
| `--lime-950` | `#1a2e05`               |
| `--lime`     | `var(--color-lime-500)` |

### Green

| Variable      | Value                    |
| ------------- | ------------------------ |
| `--green-50`  | `#f0fdf4`                |
| `--green-100` | `#dcfce7`                |
| `--green-200` | `#bbf7d0`                |
| `--green-300` | `#86efac`                |
| `--green-400` | `#4ade80`                |
| `--green-500` | `#22c55e`                |
| `--green-600` | `#16a34a`                |
| `--green-700` | `#15803d`                |
| `--green-800` | `#166534`                |
| `--green-900` | `#14532d`                |
| `--green-950` | `#052e16`                |
| `--green`     | `var(--color-green-500)` |

### Emerald

| Variable        | Value                      |
| --------------- | -------------------------- |
| `--emerald-50`  | `#ecfdf5`                  |
| `--emerald-100` | `#d1fae5`                  |
| `--emerald-200` | `#a7f3d0`                  |
| `--emerald-300` | `#6ee7b7`                  |
| `--emerald-400` | `#34d399`                  |
| `--emerald-500` | `#10b981`                  |
| `--emerald-600` | `#059669`                  |
| `--emerald-700` | `#047857`                  |
| `--emerald-800` | `#065f46`                  |
| `--emerald-900` | `#064e3b`                  |
| `--emerald-950` | `#022c22`                  |
| `--emerald`     | `var(--color-emerald-500)` |

### Teal

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--teal-50`  | `#f0fdfa`               |
| `--teal-100` | `#ccfbf1`               |
| `--teal-200` | `#99f6e4`               |
| `--teal-300` | `#5eead4`               |
| `--teal-400` | `#2dd4bf`               |
| `--teal-500` | `#14b8a6`               |
| `--teal-600` | `#0d9488`               |
| `--teal-700` | `#0f766e`               |
| `--teal-800` | `#115e59`               |
| `--teal-900` | `#134e4a`               |
| `--teal-950` | `#042f2e`               |
| `--teal`     | `var(--color-teal-500)` |

### Cyan

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--cyan-50`  | `#ecfeff`               |
| `--cyan-100` | `#cffafe`               |
| `--cyan-200` | `#a5f3fc`               |
| `--cyan-300` | `#67e8f9`               |
| `--cyan-400` | `#22d3ee`               |
| `--cyan-500` | `#06b6d4`               |
| `--cyan-600` | `#0891b2`               |
| `--cyan-700` | `#0e7490`               |
| `--cyan-800` | `#155e75`               |
| `--cyan-900` | `#164e63`               |
| `--cyan-950` | `#083344`               |
| `--cyan`     | `var(--color-cyan-500)` |

### Sky

| Variable    | Value                  |
| ----------- | ---------------------- |
| `--sky-50`  | `#f0f9ff`              |
| `--sky-100` | `#e0f2fe`              |
| `--sky-200` | `#bae6fd`              |
| `--sky-300` | `#7dd3fc`              |
| `--sky-400` | `#38bdf8`              |
| `--sky-500` | `#0ea5e9`              |
| `--sky-600` | `#0284c7`              |
| `--sky-700` | `#0369a1`              |
| `--sky-800` | `#075985`              |
| `--sky-900` | `#0c4a6e`              |
| `--sky-950` | `#082f49`              |
| `--sky`     | `var(--color-sky-500)` |

### Blue

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--blue-50`  | `#eff6ff`               |
| `--blue-100` | `#dbeafe`               |
| `--blue-200` | `#bfdbfe`               |
| `--blue-300` | `#93c5fd`               |
| `--blue-400` | `#60a5fa`               |
| `--blue-500` | `#3b82f6`               |
| `--blue-600` | `#2563eb`               |
| `--blue-700` | `#1d4ed8`               |
| `--blue-800` | `#1e40af`               |
| `--blue-900` | `#1e3a8a`               |
| `--blue-950` | `#172554`               |
| `--blue`     | `var(--color-blue-500)` |

### Indigo

| Variable       | Value                     |
| -------------- | ------------------------- |
| `--indigo-50`  | `#eef2ff`                 |
| `--indigo-100` | `#e0e7ff`                 |
| `--indigo-200` | `#c7d2fe`                 |
| `--indigo-300` | `#a5b4fc`                 |
| `--indigo-400` | `#818cf8`                 |
| `--indigo-500` | `#6366f1`                 |
| `--indigo-600` | `#4f46e5`                 |
| `--indigo-700` | `#4338ca`                 |
| `--indigo-800` | `#3730a3`                 |
| `--indigo-900` | `#312e81`                 |
| `--indigo-950` | `#1e1b4b`                 |
| `--indigo`     | `var(--color-indigo-500)` |

### Violet

| Variable       | Value                     |
| -------------- | ------------------------- |
| `--violet-50`  | `#f5f3ff`                 |
| `--violet-100` | `#ede9fe`                 |
| `--violet-200` | `#ddd6fe`                 |
| `--violet-300` | `#c4b5fd`                 |
| `--violet-400` | `#a78bfa`                 |
| `--violet-500` | `#8b5cf6`                 |
| `--violet-600` | `#7c3aed`                 |
| `--violet-700` | `#6d28d9`                 |
| `--violet-800` | `#5b21b6`                 |
| `--violet-900` | `#4c1d95`                 |
| `--violet-950` | `#2e1065`                 |
| `--violet`     | `var(--color-violet-500)` |

### Purple

| Variable       | Value                     |
| -------------- | ------------------------- |
| `--purple-50`  | `#faf5ff`                 |
| `--purple-100` | `#f3e8ff`                 |
| `--purple-200` | `#e9d5ff`                 |
| `--purple-300` | `#d8b4fe`                 |
| `--purple-400` | `#c084fc`                 |
| `--purple-500` | `#a855f7`                 |
| `--purple-600` | `#9333ea`                 |
| `--purple-700` | `#7e22ce`                 |
| `--purple-800` | `#6b21a8`                 |
| `--purple-900` | `#581c87`                 |
| `--purple-950` | `#3b0764`                 |
| `--purple`     | `var(--color-purple-500)` |

### Fuchsia

| Variable        | Value                      |
| --------------- | -------------------------- |
| `--fuchsia-50`  | `#fdf4ff`                  |
| `--fuchsia-100` | `#fae8ff`                  |
| `--fuchsia-200` | `#f5d0fe`                  |
| `--fuchsia-300` | `#f0abfc`                  |
| `--fuchsia-400` | `#e879f9`                  |
| `--fuchsia-500` | `#d946ef`                  |
| `--fuchsia-600` | `#c026d3`                  |
| `--fuchsia-700` | `#a21caf`                  |
| `--fuchsia-800` | `#86198f`                  |
| `--fuchsia-900` | `#701a75`                  |
| `--fuchsia-950` | `#4a044e`                  |
| `--fuchsia`     | `var(--color-fuchsia-500)` |

### Pink

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--pink-50`  | `#fdf2f8`               |
| `--pink-100` | `#fce7f3`               |
| `--pink-200` | `#fbcfe8`               |
| `--pink-300` | `#f9a8d4`               |
| `--pink-400` | `#f472b6`               |
| `--pink-500` | `#ec4899`               |
| `--pink-600` | `#db2777`               |
| `--pink-700` | `#be185d`               |
| `--pink-800` | `#9d174d`               |
| `--pink-900` | `#831843`               |
| `--pink-950` | `#500724`               |
| `--pink`     | `var(--color-pink-500)` |

### Rose

| Variable     | Value                   |
| ------------ | ----------------------- |
| `--rose-50`  | `#fff1f2`               |
| `--rose-100` | `#ffe4e6`               |
| `--rose-200` | `#fecdd3`               |
| `--rose-300` | `#fda4af`               |
| `--rose-400` | `#fb7185`               |
| `--rose-500` | `#f43f5e`               |
| `--rose-600` | `#e11d48`               |
| `--rose-700` | `#be123c`               |
| `--rose-800` | `#9f1239`               |
| `--rose-900` | `#881337`               |
| `--rose-950` | `#4c0519`               |
| `--rose`     | `var(--color-rose-500)` |


# defineConfig

Pollen exports a configuration helper function to give full typescript support in any file, including plain JS config files.

{% code title="pollen.config.js" %}

```javascript
const { defineConfig } = require('pollen-css/utils');

module.exports = defineConfig(pollen => ({ ... }));
```

{% endcode %}


# fluid

Generates complex CSS `clamp()` functions for robust fluid units, used for Pollen's inbuilt fluid typography scale

```typescript
fluid(
  minSize: number, 
  maxSize: number, 
  minWidth?: number, 
  maxWidth?: number
)
```

{% code title="pollen.config.js" %}

```javascript
const { fluid } = require('pollen-css/utils');

module.exports = (pollen) => ({
  modules: {
    fluidFontSize: {
      '0': fluid(14, 16)
    }
  }    
});
```

{% endcode %}

<table><thead><tr><th width="158">Property</th><th width="100">Default</th><th width="104">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>minSize</code></td><td></td><td>Yes</td><td>Smallest value of the size (in px)</td></tr><tr><td><code>maxSize</code></td><td></td><td>Yes</td><td>Largest value of the size (in px)</td></tr><tr><td><code>minWidth</code></td><td><code>480</code></td><td>No</td><td>Screen width fluid range begins</td></tr><tr><td><code>maxWidth</code></td><td><code>1280</code></td><td>No</td><td>Screen width fluid range ends</td></tr></tbody></table>


# shimmie

CSS variables aren't supported on IE11, so Pollen ships with a dynamic polyfill called `shimmie`. Shimmie will check for support and, if required, dynamically load and apply the excellent [`css-vars-ponyfill`](https://jhildenbiddle.github.io/css-vars-ponyfill/#/) shim with sane configuration.

{% code title="app.js" %}

```javascript
import { shimmie } from 'pollen-css/utils';

shimmie();
```

{% endcode %}


# Motivations

Pollen is built on the belief that CSS libraries should encourage consistency, be standards-driven, composable, extensible, unopinionated, functional, and highly performant.

### Consistency

One of the largest problems in modern CSS development is consistency and maintainability. Splitting code into modules and components can help, but only reduces the scope of the problem. Helper and utility classes can also help, but tightly couples styling to markup.

Thankfully CSS now has the same solution to this as other programming languages: variables. [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) are a new web specification that has already been adopted by all modern browsers, which Pollen relies heavily on. They allow us to create a single source of truth for a whole project. Which means we not only enforce consistency but can also instantly theme and [adapt on a global level](https://github.com/peppercornstudio/pollen-docs/tree/36d276304ba5f5bfcca4045de428c219e3e46302/docs/dynamic-theming/README.md) as well.

### Standards-driven

Libraries and frameworks should be built on top of existing or emerging standards wherever possible, allowing the platform to do the heavy lifting. Pollen is built on the belief that polyfilling functionality for the minority use-case (in this case: \<IE11) is almost always better than compromising performance, code-weight, and maintainability for the majority. The result is a future-facing and highly efficient toolset that only improves with time.

### Composable

Rather than a set of monolithic UI widgets, CSS libraries should provide small focussed tools that can be composed into your own custom components. Pollen takes this concept to the extreme, with a collection of single-purpose variables that can be mixed and matched for any use case. It encourages rapid development without the technical debt.

### Extensible

CSS libraries shouldn’t be constricting or add bloat, they should be a foundation that you can build upon and adapt. Pollen is designed to be extended and customised, used as a framework for creating your own custom design systems from prototype to production.

### Unopinionated

Pollen does not impose a design language or theme. It is a set of style-agnostic tools that can be composed and extended to form your own custom UI.

### Functional

Pollen is a functional library. It's pure CSS that works in any environment — stylesheets, inline styles, CSS-in-JS, with any framework. Its variables are used in individual properties, with no hidden side-effects or complex behaviour sets. This results in maintainable, scalable, and readable code.

### Performant

The entire Pollen bundle weighs \~1.5kb, and you can easily strip out any parts you don't need with simple [configuration](/basics/configuration). It's all plain CSS, with a native runtime in the browser, and no extra overhead. Pollen will never grow into a monolithic framework, and you don’t need to worry about stripping it out when moving from prototype to production.


# Contributing

Thank you for your interest in contributing! Pollen is a fully open-source, MIT licensed project, and there are several ways you can help.

### Spread the word

The biggest way you can help with Pollen is simply to tell your friends about it! Open source projects live and die by their community. [Tweet about it](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.pollen.style\&text=Pollen%2C%20a%20@tailwindcss%20alternative%20that%20doesn%27t%20reinvent%20CSS), [star it on Github](https://github.com/peppercornstudio/pollen/stargazers), and pass it around.

### Open an issue

If you’ve noticed a bug with Pollen, or think there’s a feature that should be included, open an issue against the [Github repository](https://github.com/peppercornstudio/pollen).

When creating an issue, try to be as detailed as possible. If you’re reporting a bug, list steps to reproduce the problem and the expected outcome. If you’re suggesting a feature, explain the use-case it solves and why it would be a good fit for Pollen.

### Submit a PR

If there’s an existing issue you’d like to help solve pull requests are always welcome! Before submitting a PR make sure you’re either addressing an open issue, or have previously discussed the feature or code you’re adding.

### Working on issues

Please feel free to take on any issue that's currently open. Feel free to resolve any issue that you would enjoy working on even if it happens to be a low priority.


# v4 -> v5

Pollen v5 introduced several breaking changes to fix unintuitive behavior and lay stronger foundations for the future

## Breaking changes

* The `pollen-css` library is now ESM-only, not CommonJS
* Dropped support for < Node v16
* CSS import moved to `/pollen.css` rather than default package export
* Properties keys in `module`s are no longer converted from `camelCase` to `kebab-case` when generating CSS variables
* Default color palette has been replaced with a much more robust and extensive palette, adapted from Tailwind's
* Deprecated modules `elevation` and `easing` removed, replaced by the new modules introduced in v4 (`shadow` and `ease` respectfully)

## Migration Guide

1. If you're using the default CSS from Pollen, update your import path from `pollen-css` to `pollen-css/pollen.css`
2. Ensure you're using Node v16+
3. If you have your own config, update any `camelCase` property names to be `kebeb-case`
4. If you are using Pollen's default color palette, get the output from v4 (in JSON format for easier migration) and add it to custom config in v5, since the default palette has changed significantly
5. If you are still using the deprecated default modules `--elevation` or `--easing` update them to `--shadow` and `--ease` respevitvely