Graceful & Minimal CSS design system in pure semantic HTML

Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Get started Download

5.6 KB minified and gzipped

<form>
  <input type="text" placeholder="Example">
  <button type="submit">Example</button>
</form>

Let's keep the wedesign graceful and simple!

With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.

Class-light and semantic

We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

Great styles with just one CSS file

No dependencies, package manager, external files or JavaScript.

Responsive everything

Elegant and consistent adaptatives spacings and typography on all devices.

Light or Dark mode

Shipped with two beautiful color themes, automatically enabled according to the user preference.

Examples

Minimalist templates to discover Pico in action.

Class-less

Just a pure semantic HTML markup, without .classes

Company

A classic company or blog layout with a sidebar

Google Amp

A simple layout for Google Amp, with inlined CSS

Sign in

A minimalist layout for Login pages

More Code, More Problems

A great design should be minimal, fast and maintainable.

  • Most popular CSS frameworks are bulky, overkill and hard to customize without hyper-overriding styles.
  • Huge stackings of wrappers and CSS classes are unnecessary for semantics elements.
  • Large and complex CSS file increase memory usage and cause longer style calculations.
  • Basics HTML elements should not require packaging large amount of dependencies.
<form class="form form-modifier margin padding align">
  <div class="input-wrapper input-wrapper-modifier margin padding">
    <input type="text" class="input input-type-modifier input-style-modifier input-size-modifier">
  </div>
  <button type="submit" class="button button-style-modifier button-size-modifier action-trigger margin padding">
    Action
  </button>
</form>
<form>
  <input type="text">
  <button type="submit">Action</button>
</form>