Component Recipes

Practical compositions of Purissimo components. Copy, paste, and adapt.

Hero Section

A centered hero with heading, description, and call-to-action buttons.

Build with clarity

A pure HTML5/CSS design system inspired by Antarctic ice. Zero JavaScript. Maximum accessibility.

Get Started Documentation 
<section class="text-center py-12 px-4">
  <h2 class="heading-1 mb-4">Build with clarity</h2>
  <p class="text-lg text-muted mb-6"
     style="max-width: 560px; margin-inline: auto;">
    A pure HTML5/CSS design system...
  </p>
  <div class="flex gap-3 justify-center">
    <a href="#" class="btn btn--primary btn--lg">Get Started</a>
    <a href="#" class="btn btn--secondary btn--lg">Documentation</a>
  </div>
</section>

Feature Grid

Cards arranged in a responsive grid to showcase features or services.

Zero JavaScript

Every component is built with pure CSS. No runtime dependencies.

Accessible

WCAG 2.1 AA compliant. Semantic HTML with proper ARIA attributes.

Lightweight

Single CSS file under 40KB minified. No build tools required.

<div class="grid"
     style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
  <div class="card">
    <div class="card__body">
      <p class="mb-1">
        <span class="icon" style="font-size: 2rem; color: var(--color-action);"
              aria-hidden="true">check_circle</span>
      </p>
      <p class="font-semibold mb-1">Feature Title</p>
      <p class="text-sm text-muted">Feature description.</p>
    </div>
  </div>
  <!-- repeat for more features -->
</div>

Contact Form

A form with validation, a submit button, and an alert for feedback.

Get in touch

<div class="alert alert--success mb-4" role="alert">
  <span class="alert__icon icon" aria-hidden="true">check_circle</span>
  <p class="alert__message">Message sent successfully.</p>
</div>

<form>
  <div class="grid" style="grid-template-columns: 1fr 1fr;">
    <div class="form-field">
      <label class="form-label" for="name">Name</label>
      <input class="form-input" type="text" id="name" placeholder="Your name">
    </div>
    <div class="form-field">
      <label class="form-label" for="email">Email</label>
      <input class="form-input" type="email" id="email" placeholder="you@example.com">
    </div>
  </div>
  <div class="form-field">
    <label class="form-label" for="subject">Subject</label>
    <select class="form-select" id="subject">
      <option>General inquiry</option>
    </select>
  </div>
  <div class="form-field">
    <label class="form-label" for="message">Message</label>
    <textarea class="form-textarea" id="message" rows="4"></textarea>
  </div>
  <div class="mt-4">
    <button type="submit" class="btn btn--primary">Send Message</button>
  </div>
</form>

Pricing Cards

Side-by-side pricing tiers with badges, feature lists, and CTA buttons.

Simple pricing

Choose the plan that fits your needs.

Starter

$0/month

  • 3 projects
  • Community support
  • Basic analytics
Get Started

Pro Popular

$19/month

  • Unlimited projects
  • Priority support
  • Advanced analytics
Upgrade to Pro

Enterprise

$49/month

  • Everything in Pro
  • Dedicated support
  • Custom integrations
Contact Sales 
<div class="grid"
     style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
  <div class="card card--elevated">
    <div class="card__header">
      <p class="font-semibold">
        Pro <span class="badge badge--primary ml-1">Popular</span>
      </p>
      <p class="heading-3 mt-1">
        $19<span class="text-sm text-muted font-regular">/month</span>
      </p>
    </div>
    <div class="card__body">
      <ul class="list" style="list-style: none; padding-left: 0;">
        <li class="flex gap-2 items-center">
          <span class="icon text-sm" style="color: var(--color-success);"
                aria-hidden="true">check_circle</span>
          Feature name
        </li>
      </ul>
    </div>
    <div class="card__footer">
      <a href="#" class="btn btn--primary w-full">Upgrade</a>
    </div>
  </div>
</div>

Blog Post

Typography, blockquote, figure, and code block composed into an article layout.

Tutorial

Getting Started with Purissimo

January 15, 2026 · 5 min read

Purissimo is a minimalist design system built entirely with HTML5 and CSS. It requires no JavaScript runtime and ships as a single CSS file.

Simplicity is the ultimate sophistication.

— Leonardo da Vinci

To include Purissimo in your project, add the stylesheet to your HTML head:

<link rel="stylesheet" href="purissimo.css">

[ Image placeholder ]

An example layout built with Purissimo components.

With just semantic HTML and Purissimo classes, you can build production-ready interfaces that are accessible, fast, and beautiful.

CSS Design System Accessibility 
<article>
  <p class="text-sm text-muted mb-2">
    <span class="badge badge--primary">Tutorial</span>
  </p>
  <h2 class="heading-2 mb-2">Article Title</h2>
  <p class="text-sm text-muted mb-6">Date &middot; Read time</p>

  <p class="mb-4">Body paragraph...</p>

  <blockquote class="blockquote mb-4">
    <p>Quote text</p>
    <footer class="blockquote__footer">
      &mdash; <cite>Author</cite>
    </footer>
  </blockquote>

  <pre class="code-block mb-4"><code>code snippet</code></pre>

  <figure class="figure mb-4">
    <img class="figure__image" src="..." alt="...">
    <figcaption class="figure__caption">Caption</figcaption>
  </figure>

  <div class="divider"></div>
  <div class="flex gap-2 mt-4">
    <span class="badge">Tag</span>
  </div>
</article>

Settings Panel

A settings form combining toggles, checkboxes, select, and a card layout.

Notification Settings

Email notifications

Receive updates via email

Push notifications

Browser push alerts

Weekly digest

Summary email every Monday

Email frequency 
<div class="card mb-4">
  <div class="card__body flex flex-col gap-4">
    <div class="flex justify-between items-center">
      <div>
        <p class="font-medium">Setting label</p>
        <p class="text-sm text-muted">Description</p>
      </div>
      <label class="form-toggle">
        <input type="checkbox" checked>
        <span class="form-toggle__track"></span>
      </label>
    </div>
  </div>
</div>

<fieldset class="form-fieldset">
  <legend class="form-legend">Frequency</legend>
  <label class="form-radio">
    <input type="radio" name="freq" checked>
    <span class="form-radio__indicator"></span>
    <span class="form-radio__label">Option</span>
  </label>
</fieldset>

FAQ

An accordion-based frequently asked questions section with a heading.

Frequently Asked Questions

Everything you need to know about Purissimo.

Is Purissimo really zero JavaScript?

Yes. Every component, including modals, tabs, accordions, and tooltips, is implemented using only HTML5 and CSS. No JavaScript is needed for any interactive behavior.

How do I customize the color theme?

Override the CSS custom properties in the :root selector. All colors, spacing, and typography are defined as tokens that you can change in one place.

Is it accessible?

Purissimo is built with WCAG 2.1 AA compliance as a minimum. All components use semantic HTML, proper ARIA attributes, and support keyboard navigation.

Can I use it with a framework?

Absolutely. Since Purissimo is just a CSS file, it works with any framework: React, Vue, Svelte, Astro, plain HTML, or anything else that renders HTML.

<div class="text-center mb-6">
  <h3 class="heading-3 mb-2">Frequently Asked Questions</h3>
  <p class="text-muted">Subtitle text.</p>
</div>

<div class="accordion">
  <details class="accordion__item" open>
    <summary class="accordion__header">Question?</summary>
    <div class="accordion__content">
      <p>Answer.</p>
    </div>
  </details>
  <!-- more items -->
</div>

Stats Dashboard

A navbar with breadcrumbs, stat cards, a table, and alerts composed into a dashboard view.

Total Users

2,847

+12.5%

Revenue

$14.2k

+8.1%

Active Now

384

Live

Recent Activity

User Action Status
Alice Johnson Signed up Active
Bob Smith Upgraded plan Pro
Carol Davis Submitted ticket Pending 
<!-- Stat cards in a grid -->
<div class="grid"
     style="grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));">
  <div class="card">
    <div class="card__body">
      <p class="text-sm text-muted mb-1">Label</p>
      <p class="heading-3">2,847</p>
      <p class="text-xs" style="color: var(--color-success);">+12.5%</p>
    </div>
  </div>
</div>

<!-- Table inside a card -->
<div class="card">
  <div class="card__header">
    <p class="font-semibold">Recent Activity</p>
  </div>
  <div class="card__body" style="padding: 0;">
    <table class="table">
      <thead>
        <tr>
          <th>User</th>
          <th>Action</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Name</td>
          <td>Action</td>
          <td><span class="badge badge--success">Active</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>