Skip to main content

PaperStack Playground

Interactive component showcase

Design Tokens

Colors — G2

Blue 500
Blue 300
Blue 700
Red 500
Green 500
Black 500

Colors — STABILO Highlights

Yellow
Green
Orange
Pink
Blue

Colors — Parchment

100
300
500
700
900

Typography

Display 3 — The Quick Brown Fox
Heading 4 — Jumps Over The Lazy Dog
Heading 2 — Editorial Subheader
Body 1 — EB Garamond reading text. Long-form articles and editorial content use this scale for comfortable reading at extended lengths.
Body base — Inter UI text. Used for labels, controls, and interface elements.
Fine Print — Captions, metadata, timestamps, and legal copy.
Mono — JetBrains Mono for code and technical content

Colors

G2 Palette

Blue 300
Blue 500
Blue 700
Red 500
Green 500
Black 500

STABILO Highlights

Yellow
Green
Orange
Pink
Blue

Parchment

100
300
500
700
900

Semantic — Surfaces

base
raised
overlay
sunken

Semantic — Accents

primary
danger
success
warning

Semantic — Highlights

yellow
green
orange
pink
blue

Spacing Scale

--space-base
--space-1
--space-2
--space-3
--space-4
--space-5

Paper Surfaces

Default Paper

Raised

Stacked

Float

Interactive (hover me)

Cards

Default Card

Standard elevated card with header and body.

Paper Card

Paper-surface card with warm shadow.

Interactive Card

Hover to lift. Click to press.

Tabs

Document content goes here. Use arrow keys to navigate between tabs.

Toolbar

Dividers

Before divider

After divider

Section Label

Annotations

Command Palette

Keyboard-driven overlay for quick actions and navigation.

or press Ctrl K

Forms

Shipping address
Notifications
Danger zone
This action cannot be undone.
We'll never share your email.
https://
That username is already taken.
Tier
Mode

Prose

The Art of Paper

Paper has been the primary medium of human knowledge for over two millennia. From parchment scrolls to printed broadsheets, the tactile quality of paper shapes how we think, annotate, and remember.

Typography in Print

A well-chosen typeface is the invisible architecture of reading. Serif fonts trace their origins to Roman stone inscriptions, while sans-serifs emerged with the industrial revolution.

The difference between the right word and the almost right word is the difference between lightning and a lightning bug.

Mark Twain

Code in Context

Technical writing often includes inline code and larger code blocks:

import "@paperstack/foundations";
import "@paperstack/utilities";
  • HTML-first components
  • CSS custom properties throughout
  • Minimal JavaScript enhancement

Lists

Unordered — Disc

  • Fresh parchment, lightly textured
  • G2 ink, medium point
  • Minimal interface, maximum focus

Ordered — Decimal

  1. Gather your materials
  2. Compose your thoughts
  3. Write without distraction

Checklist

  • Framework agnostic
  • HTML-first components
  • CSS custom properties throughout
  • Minimal JavaScript enhancement

Dash List

  • Lora for headings
  • Inter for UI labels
  • EB Garamond for reading

No Markers

  • Clean layout for custom-styled items
  • No built-in indentation or bullets

Separated

  • Paper surfaces
  • Ink color system
  • Typography scale
  • Spacing tokens

Card

  • Vintage Paper theme
  • Terminal Paper theme
  • Dark Parchment theme

Sizes

  • Small — tighter spacing, smaller font
  • Good for dense UI or helper text
  • Large — more spacious
  • Good for reading-focused layouts

Toggle Group

Single-select (radio)

Multi-select (press)

Sizes

Split Button

OTP / PIN Input

6-digit OTP

—

4-digit PIN (small)

Stepper / Quantity Input

Quantity
Pages — small
Units — large

Keyboard Shortcut Labels

Press ⌘ K to open the command palette.

Undo with Ctrl+Z, redo with Ctrl+Shift+Z.

Navigate cells with ↑ ↓ ← →.

Small size: Esc to cancel.

Filter Bar & Chips

Horizontal filter bar

Active chips with dismiss

View Toggle & Sort Control

View toggle

Sort control

Disclosure & Hierarchy

Disclosure (native details)

What is PaperStack?
PaperStack is a paper-inspired design system built HTML-first. It uses CSS custom properties for tokens and layered paper surfaces for depth.
How do themes work?
Set data-paper, data-ink, and data-mode on the root element. Free tier includes plain paper with G2 inks. Pro unlocks washi, kraft, letterpress, blueprint, graph papers.

Collapsible section (JS)

These settings control advanced behaviour. Change them only if you know what you're doing.

Show More

PaperStack's design philosophy is rooted in the physical act of writing. Every shadow is a lifted paper edge. Every divider is a fold. The typefaces — Lora for headings, EB Garamond for reading, Inter for UI — were chosen to complement the tactile warmth of physical stationery. The ink system mirrors real pen inks: G2 blacks and blues for everyday use, STABILO highlights for emphasis, and aged parchment tones for heritage contexts. This document would be hidden after the first two lines in production.

Line Clamp

This paragraph is clamped to two lines in the browser. Any text beyond that will be cut off with an ellipsis, keeping the layout tidy without truncating content in an unpredictable way.

Spoiler / Blur Reveal

The answer to the riddle is: a shadow. It follows you everywhere but has no mass.

Page Header & Footer

Standard page header

Documents

Project Archive

All files and drafts for the current workspace, sorted by last modified.

Page footer

© 2026 GraceSoft · PaperStack v0.2.0

Settings layout (preview)

Profile

Manage your public profile information.

Display name Shown on your public profile
Bio A short description about yourself

Auth Layout

The .ps-auth-layout is a full-screen centered layout. Below is a scaled preview of the card area.

PaperStack

Sign in to your workspace

Don't have an account? Sign up free

Theme Switcher

The .ps-theme-switcher provides a self-contained UI for the three-axis theme system. The sidebar above already uses selects for the same purpose; this is the compact popover variant.