New look and feel
All colors have been carefully and manually redefined for a more contrasted, neutral (less bluish) look and feel.
The default color theme is much more accessible. Most colors now follow the WCAG 2.1 AAA standard, and some secondary muted colors follow the WCAG 2.1 AA standard.
Focus states have been improved for more consistency and contrast, and spacings have been reduced for a sleeker and more neutral style.
We added more CSS variables, now totaling over 130, to easily create a unique look and feel, enhancing design flexibility.
Pico v2 comes with 380 manually crafted colors to help you personalize your brand design system. The colors can be imported into any
.scssfile, and a new stylesheet with all the color utilities is provided.
We have updated the breakpoints to follow the width of standard devices and added a new breakpoint for larger screens.
With group (
role="group"), you can now stack forms elements and buttons horizontally.
Conditional Styling is a powerful feature that allows you to apply styles selectively by wrapping elements in
.pico containers, which is ideal for mixed-style environments. This method restricts styling to designated sections, making it particularly useful for combining multiple stylesheets or components seamlessly.
Play with the Version Picker, which offers 20 precompiled color themes accessible via CDN for all Pico versions. The total number of combinations is over 100.
All CSS custom properties are prefixed with
pico-to avoid collisions with other CSS frameworks or your vars. We also added new CSS variables and renamed some to follow a consistent pattern
We renamed and moved many
.scss files. If you import Pico modules, you need to update your paths.
Buttons are not
width: 100%; by default anymore. Only form buttons are full-width to be consistent with other form elements.
.striped class is now used for the striped table’s style.
Grid columns now collapse on small devices (
We removed the
overflow-x: auto; from
<figure> and introduced a new utility class,
.overflow-auto, to enable horizontal scrolling on any element.