Getting Started

PaperStack is a paper-inspired design system built HTML-first and CSS-first. It ships as a pnpm monorepo with individual packages you can consume selectively.

Installation

Download the pre-built zip from the store, or install packages directly from npm.

Download Core (Free) Buy Pro — $29

# Install all packages
pnpm add @paperstack/tokens @paperstack/foundations @paperstack/utilities @paperstack/themes @paperstack/components

# Or just the essentials
pnpm add @paperstack/foundations @paperstack/components

Packages

Package	Description
`@paperstack/tokens`	Design tokens as CSS custom properties (SCSS)
`@paperstack/foundations`	CSS reset, base styles, prose, accessibility
`@paperstack/utilities`	Utility classes for layout, spacing, typography
`@paperstack/themes`	Prebuilt themes (light, dark, vintage, terminal)
`@paperstack/components`	CSS + JS component primitives
`@paperstack/icons`	SVG sprite icon system
`@paperstack/adapters`	React & Vue component wrappers

Quick Start

Import the globals SCSS file and you get tokens + reset + base styles in one step:

// main.ts or main.scss
import "@paperstack/foundations/src/globals.scss";
import "@paperstack/utilities/src/index.scss";
import "@paperstack/components/src/index.scss";

// Initialize JS-powered components
import { initAll } from "@paperstack/components";
initAll();

Then use the classes in your HTML:

<div class="ps-paper ps-paper--raised ps-p-4">
  <h2 class="ps-heading-lg">Hello PaperStack</h2>
  <p class="ps-body-md ps-text-secondary">Paper surface with raised shadow.</p>
</div>

Theming

Switch themes at runtime by setting the data-theme attribute on <html>:

// Light (default)
document.documentElement.removeAttribute("data-theme");

// Dark Parchment
document.documentElement.setAttribute("data-theme", "dark-parchment");

// Vintage Paper
document.documentElement.setAttribute("data-theme", "vintage-paper");

// Terminal Paper
document.documentElement.setAttribute("data-theme", "terminal-paper");

Or use the applyTheme() helper from @paperstack/foundations:

import { applyTheme } from "@paperstack/foundations";
applyTheme("vintage-paper");

Recommended Fonts

PaperStack is designed to work with:

EB Garamond — heading & reading (editorial serif)
Inter — UI text (modern sans)
JetBrains Mono — code & monospace

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Then set the font variables in your root styles:

:root {
  --font-ui: "Inter", system-ui, sans-serif;
  --font-reading: "EB Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-heading: "EB Garamond", Georgia, serif;
}