Introduction

Form and function

What is Stoneware?

Stoneware is a CSS-first design system that provides everything you need to build clean, professional interfaces. It includes:

  • Design Tokens - CSS custom properties for colors, typography, spacing, shadows, and more
  • Component Classes - Pre-built styles for buttons, inputs, cards, modals, and other UI elements
  • Utility Classes - Helpers for layout, spacing, and common patterns
  • Dark Mode - Full dark mode support via data-theme="dark"

Design Philosophy

Stoneware follows these core principles:

Clean

Remove visual noise by using less color and padding on the elements themselves. Let everything breathe by giving them space, not by making them bigger.

Dark Accents

Primary actions use near-black (#18181b), not bright colors. Colors are for semantics

Subtle Shadows

Please don't use these, but if you need them they are light and they create depth without distraction.

Smooth Transitions

Less is more.

Quick Example

<button class="sw-btn sw-btn-primary">Primary Action</button>
<button class="sw-btn sw-btn-secondary">Secondary</button>
<button class="sw-btn sw-btn-ghost">Ghost</button>

Next Steps