Paperline v1.0 GitHub →
Examples · 09

A warm, editorial design system, seen in the wild.

Nine sample pages — from marketing landing to inbox to long-form article — assembled from the same Paperline tokens, components, and icons. Every page links back to its source so you can copy any piece into your own work.

Components31
Icons38
Tokens70+
ThemesLight · Dark
LicenseMIT

Product surfaces

App UIs
01 · Dashboard Project dashboard

Sidebar nav, stat cards, filterable project table, team list, and activity feed.

PLStatPLTablePLProgress
02 · Inbox Mail-style inbox

Three-pane layout — folders, message list, message body. Hover and selection states.

PLAvatarPLBadgePLTag
03 · Analytics Reports & analytics

Date-range filters, stat cards, a CSS bar chart, and a detailed breakdown table.

PLStatPLTabsPLTable
04 · Settings Account settings

Multi-section profile form with toggles, appearance picker, and a confirm-delete danger zone.

PLFieldPLTogglePLModal

Marketing & entry

Public surfaces
05 · Marketing Landing page

Editorial hero, feature grid, pricing tiers, and testimonial — every typographic register on display.

DisplayPLBadgePLCard
06 · Auth Sign in

Centered form card, OAuth providers, focus states, and inline validation messaging.

PLFieldPLInputPLDivider
07 · Flow Onboarding

Four-step card flow: account, role, plan, success. Step dots and animated transitions.

PLAlertPLBadgePLDivider
08 · Editorial Article reader

Long-form reading: serif body, pull quote, code block, and a footnoted byline. The type stack at scale.

SerifMonoPLDivider
09 · Minimal Drop-in card

The smallest possible integration — one card, one button. Copy as your starting template.

PLCardPLButton