# Picocss 2 1 1 > Minimalist CSS framework that styles semantic HTML elements by default with responsive typography, automatic light/dark modes, and 130+ customizable CSS variables. Use when building clean, lightweight web interfaces with pure HTML markup, creating class-light designs without JavaScript dependencies, or implementing accessible design systems with minimal CSS. - Skill: `tangledgroup/picocss-2-1-1` (Agent Skill, multi-file: 10 files) - Install (CLI): `npx skillmds@latest add tangledgroup/picocss-2-1-1` - Raw SKILL.md: https://api.skillmd.com/api/skills/tangledgroup/picocss-2-1-1/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: tangledgroup (https://skillmd.com/u/tangledgroup) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tangledgroup/picocss-2-1-1 --- # Pico CSS 2.1 ## Overview Pico CSS is a minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. It is a "superpowered HTML reset" — write semantic HTML, add Pico CSS, and get a polished, accessible interface with zero JavaScript dependencies. Key characteristics: - **Class-light** — fewer than 10 `.classes` overall (most styling targets HTML elements directly) - **Semantic-first** — styles native HTML tags (`
`, `
`, `
`, `
`, etc.) - **Responsive everything** — font sizes and spacings scale natively with screen width - **Light/dark mode** — automatic `prefers-color-scheme` detection, no JavaScript needed - **130+ CSS variables** — full customization without overriding stylesheets - **Sass-based** — compile custom builds with modular settings - **Class-less version** — zero classes needed for basic layouts ## When to Use - Building clean, lightweight web interfaces with pure HTML markup - Creating class-light designs without JavaScript dependencies - Implementing accessible design systems with minimal CSS overhead - Prototyping quickly with semantic HTML - Projects where reducing CSS specificity and bundle size matters - Documentation sites, landing pages, admin panels, and internal tools ## Core Concepts **Semantic styling**: Pico directly styles HTML tags rather than requiring utility classes. A `` looks great without any `class` attribute. A `