Class-light and Semantic
Thriving on simplicity, Pico directly styles your HTML tags, using fewer than 10 .classes overall. It also comes with a class-less version for wild HTML purists.
Minimal CSS Framework
for Semantic HTML
A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
Write HTML, Add Pico CSS, and Voilà!
12.9K
69.4K
(Last month)
2M
(Last month)
A Superpowered HTML Reset
With just the right amount of everything, Pico is a great starting point for a clean and lightweight design system.
Great Styles with Just CSS
No extra baggage needed. Pico works seamlessly without dependencies, package managers, external files, or JavaScript, achieving elegant and straightforward styles with pure HTML markup.
Responsive Everything
Effortless elegance on every device. Pico natively scales font sizes and spacings with screen widths, resulting in a consistent and elegant look across devices. No extra classes or configuration needed.
Light or Dark Mode
Pico comes with two accessible, neutral color schemes out of the box: light and dark. The best part? It automatically adapts to users' prefers-color-scheme, all without the use of JavaScript.
Easy Customization
Customize Pico with over 130 CSS variables, or dive deeper by using SASS. Switch between 20 handcrafted color themes and compose with 30+ modular components to tailor the UI to your brand's look and feel.
Optimized Performance
Speed meets elegance. Unlike bulky and overcomplicated frameworks that demand extensive class overrides and JavaScript, Pico keeps your HTML lean, decreases memory usage by avoiding excessive CSS specificity, and reduces loaded files.
Embrace the Power of Less
A strong design foundation thrives on simplicity and ease of maintenance.
😌 Pico CSS
<form>
<input type="text">
<button type="submit">Action</button>
</form>🥵 Utility CSS Framework
<div class="container display-flex my-md mx-sm">
<form class="form shadow-md my-md mx-sm align-center">
<div class="input-wrapper border-radius-sm">
<input type="text" class="input text-color-gray placeholder-color-light-gray focus-outline-blue">
</div>
<div class="button-wrapper border-radius-sm">
<button type="submit" class="button bg-color-blue text-color-white focus-light-blue hover-light-blue">
Action
</button>
</div>
</form>
</div>