<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.
Preview
A starter example with all elements and components used in Pico
Class-less
Just a pure semantic HTML markup, without .classes
Basic template
A basic custom template for Pico using only CSS custom properties (variables)
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>