Kitchen Sink - Pico CSS Demo

This page demonstrates howPico CSSautomatically styles semantic HTML elements with our enhanced modular system, design tokens, and utility classes.

Typography

Headings

Heading 1 (2.5rem)

Heading 2 (2rem)

Heading 3 (1.75rem)

Heading 4 (1.5rem)

Heading 5 (1.25rem)

Heading 6 (1rem)

Text Elements

This is a regular paragraph withbold text,italic text, and asample link. Links are automatically styled with the theme color.

Here's some inline code:npm run dev, and here's a keyboard shortcut:Ctrl+C.

This is a blockquote with automatic left border styling and enhanced typography. Pico CSS provides beautiful semantic styling with improved spacing and visual hierarchy.
— Quote attribution

You can also highlight text withthe mark elementfor emphasis.

Lists

Unordered List

First item
Second item with a longer description to show line wrapping
Third item

Ordered List

First step
Second step
Third step

Definition List

Pico CSS: A modern, modular CSS framework with comprehensive theming and design tokens
Progressive Enhancement: A design philosophy that emphasizes basic functionality first
Design Tokens: Consistent design values for spacing, typography, colors, and other visual properties

Code Examples

Code Blocks

Pico CSS provides enhanced styling for code blocks with improved contrast and readability:

// JavaScript example
const message = "Hello, Pico CSS!";
console.log(message);

// Enhanced styling with better shadows and spacing
// Clean and readable with proper contrast ratios

Sample code:console.log("Sample output")

Form Elements

Complete Form Example

Interactive Elements

Details and Summary

Click to expand

This content is hidden by default and expands when the summary is clicked. Bolt.css provides clean styling for collapsible content.

You can include any HTML content here, including:

Lists
Links:Sample link
Code:example.function()

Another expandable section

Multiple details elements work perfectly together.

Progress Indicators

Loading progress:

32%

Indeterminate progress:

Meter example:

6 out of 10

Tables

Data Table

Pico CSS Feature Comparison
Feature	Pico CSS	Traditional CSS	Notes
Semantic HTML	✅ Yes	❌ Classes required	Pico CSS styles HTML directly
Modular Architecture	✅ Built-in	❌ Manual setup	Organized into semantic partials
Design Tokens	✅ Comprehensive	❓ Custom implementation	Consistent spacing, colors, typography
Dark Mode	✅ Enhanced	❌ Manual setup	Auto-switching with custom overrides
Utility Classes	✅ Optional	❓ Varies	Flexible enhancement system
Customization	✅ Design Tokens	✅ Full control	Token-based customization system

Media Elements

Images and Media

Sample image — Images are automatically responsive and styled with rounded corners

Pico CSS automatically makes images responsive and adds enhanced styling with subtle shadows and rounded corners.

Enhanced Components & Design Tokens

Custom Card Components

Card Example

This card demonstrates our custom component system with design tokens for consistent spacing and shadows.

Another Card

Cards use semantic spacing variables like--space-mdand shadow tokens like--shadow-base.

Utility Classes

Typography utilities:

Small success text

Regular warning text

Large error text

Layout utilities work great with semantic HTML

Design Token Showcase

Our design token system provides consistent values:

Spacing Scale

Visual representation of spacing scale: 3xs, 2xs, xs, sm, md, lg

Shadow System

Small shadow

Base shadow

Medium shadow

Large shadow

Theme Demonstration

Automatic Dark Mode

This page automatically switches between light and dark themes based on your system preference. Try changing your system theme to see it in action!

Light theme features:

White background with dark text
Blue accent colors
Light gray borders and backgrounds

Dark theme features:

Dark background with light text
Lighter blue accent colors
Dark gray borders and backgrounds