Pico CSS

Pico styles semantic HTML directly. You write a form with no class attributes at all and it comes out looking designed, with dark mode already handled. Around ten kilobytes, no build step, no JavaScript.

At a glance

Install	one <link> tag
Size	roughly 10 KB minified and gzipped
Classes	none required, a handful optional
Dark mode	automatic from prefers-color-scheme
MCP server	not published
License	MIT

Install

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

What the markup looks like

This is the entire point. No classes anywhere, and the result is a clean, responsive, accessible-by-default form.

<main class="container">
  <hgroup>
    <h1>Create an account</h1>
    <p>It takes under a minute.</p>
  </hgroup>

  <form>
    <label>Email
      <input type="email" name="email" placeholder="name@company.com" required>
    </label>
    <label>
      <input type="checkbox" role="switch"> Send me updates
    </label>
    <button type="submit">Sign up</button>
  </form>
</main>

Where it wins

Documentation sites, internal tools, admin pages, prototypes, anything where design time is not the point but ugly is not acceptable either. It also rewards semantic markup, which tends to improve accessibility as a side effect.

Choose it if

• You want a decent-looking page in one line and zero maintenance.
• You are writing server-rendered HTML and do not want a build pipeline.

Look elsewhere if

• You need a distinctive brand. Every Pico site looks like a Pico site.
• You need interactive components. There are none.