Introducing Pollen
The foundation of your next design system
Pollen is a configurable library of CSS variables. It lets you write faster, more consistent, and more maintainable styles. Use it in any stack and easily extend it as a build tool for your own custom design systems.
What it looks like
Pollen's low-level design tokens can be used to build any project. They're easy to customise and extend, and they're globally responsive. They don't require preprocessors, class naming conventions, or any new non-standard syntax
CSS
CSS-in-JS
Object styles
Inline Styles
Live example
1
.button {
2
font-family: var(--font-sans);
3
font-size: var(--scale-00);
4
font-weight: var(--weight-medium);
5
line-height: var(--line-none);
6
padding: var(--size-3) var(--size-5);
7
background: var(--color-blue);
8
border-radius: var(--radius-xs);
9
color: white;
10
}
Copied!
1
const Button = styled.button`
2
font-family: var(--font-sans);
3
font-size: var(--scale-00);
4
font-weight: var(--weight-medium);
5
line-height: var(--line-none);
6
padding: var(--size-3) var(--size-5);
7
background: var(--color-blue);
8
border-radius: var(--radius-xs);
9
color: white;
10
`
Copied!
1
<button styles={{
2
fontFamily: 'var(--font-sans)',
3
fontSize: 'var(--scale-00)',
4
fontWeight: 'var(--weight-medium)',
5
lineHeight: 'var(--line-none)',
6
padding: 'var(--size-3) var(--size-5)',
7
background: 'var(--color-blue)',
8
borderRadius: 'var(--radius-xs)'
9
color: 'white'
10
}}>
11
Button
12
</button>
13
Copied!
1
<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;">
2
Button
3
</button>
Copied!
Who's using Pollen
Pollen is used extensively in production and actively maintained by the photo nerds Bokeh. It's also used by many other awesome teams in projects from small to large-scale. Are you using Pollen? Open an issue on Github to add your site to the list.
Corellium
Bokeh
Inventia
Siesta Campers
Faethm
Madeleine Ostoja
Last modified 6mo ago
Copy link
Edit on GitHub