Paper / Skeuomorphic Texture

---
name: paper-texture
description: Apply the Paper / Skeuomorphic Texture visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Paper / Skeuomorphic Texture, mentions paper UI, notebook style, journal aesthetic, or describes paper grain background, ruled and margin lines, handwritten accent type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Paper / Skeuomorphic Texture Design System

Tactile paper surfaces as interface: warm paper grounds with subtle grain, ruled notebook lines, humanist serif body text with handwritten accents, gentle 2px corners, and a soft page-lift shadow. A calm, analog metaphor for journaling and note tools.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Paper / Skeuomorphic Texture.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (paper UI, notebook style, journal aesthetic, skeuomorphic paper, stationery UI), or describes its traits: paper grain background; ruled and margin lines; handwritten accent type; soft page-lift shadows; page metaphor layout; muted ink palette.

## Design tokens

### Color palette

- Desk-toned backdrop behind the pages: `#ece7d8` (--color-bg)
- The page itself — warm paper white: `#f4f0e6` (--color-surface)
- Soft ink black, never pure #000: `#2b2b2b` (--color-text)
- Pencil gray for metadata and hints: `#635d4f` (--color-text-muted)
- Fountain-pen blue — links, actions, highlights: `#3f5e78` (--color-accent)
- Faint blue ruled lines on the page: `#b9c6d2` (--color-rule)
- Faded red vertical margin line: `#d9a7a0` (--color-margin-rule)
- Translucent washi-tape strips (70% opacity): `#e8dfc2b3` (--color-tape)

### Typography

- Display / headings: Caveat (fallback: Segoe Script, cursive)
- Body: Lora (fallback: Georgia, serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Comfortable notebook density: content hugs the ruled baseline grid, with wide page margins and modest gaps between pages/cards.
- Border radius: sm 2px, md 4px — Barely-there rounding, like cut paper. Torn-edge clip-paths substitute for radius on decorative pieces.
- Border treatment: 1px solid #d8d2c0 — Hairline paper-edge borders on pages; ruled lines inside content are backgrounds (repeating-linear-gradient), not borders.

### Shadows

- page-lift: `0 1px 3px rgba(0, 0, 0, 0.12)` — Default page/card resting on the desk
- page-hover: `0 3px 8px rgba(0, 0, 0, 0.15)` — Picked-up page on hover or drag
- stack: `0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 0 -2px #efe9da, 0 5px 3px -2px rgba(0, 0, 0, 0.08)` — Stacked-pages effect under a top sheet

### Layout

- Max content width: 1080px
- Page metaphor: content lives on discrete paper sheets over a desk-tone backdrop
- Ruled baselines (repeating-linear-gradient) inside writing areas, aligned to line-height
- A single red margin rule on the left of note areas; metadata sits in the margin
- Slight (0.5–1deg) rotation on decorative pinned/taped items only, never on reading pages

### Effects

- Paper grain: SVG noise at 3–4% opacity on page surfaces
- Torn top edge (jagged clip-path) on note snippets
- Washi-tape strips pinning cards at a slight angle
- Highlighter marks: text backgrounds in translucent yellow with irregular ends

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 140ms / 240ms / 420ms
- Hover lifts a page gently (shadow deepens, 1px rise)
- New items slide in like a sheet placed on the stack, settling with a tiny rotation correction
- Deletions crumple metaphorically via quick scale+fade — no elaborate 3D page turns

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ece7d8;
  --color-surface: #f4f0e6;
  --color-text: #2b2b2b;
  --color-text-muted: #635d4f;
  --color-accent: #3f5e78;
  --color-rule: #b9c6d2;
  --color-margin-rule: #d9a7a0;
  --color-tape: #e8dfc2b3;
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-page-lift: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-page-hover: 0 3px 8px rgba(0, 0, 0, 0.15);
  --shadow-stack: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 0 -2px #efe9da, 0 5px 3px -2px rgba(0, 0, 0, 0.08);
  --border-default: 1px solid #d8d2c0;
  --font-display: Caveat, "Segoe Script", cursive;
  --font-body: Lora, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Lora:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Desk-tone bar with the wordmark in Caveat; links in Lora with a hand-drawn underline (slightly wavy SVG) on hover; active link gets a small tape strip behind it
- **Hero:** A large sheet with torn top edge, ruled lines, Caveat headline like a notebook title, Lora supporting text aligned to the rules, fountain-blue CTA
- **Card:** Paper surface, 2px radius, hairline border, page-lift shadow, optional ruled background and red margin line, 20–24px padding
- **Button (primary):** Fountain-blue fill, paper-white text, 4px radius, page-lift shadow; press flattens the shadow like pressing paper down
- **Button (secondary):** Paper fill with 1px ink border, ink text; hover adds a faint highlighter-yellow wash
- **Form fields:** Writing area: ruled-line background, no box border, ink text starting at the red margin; focus darkens the active rule line to fountain blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The ruled page: faint horizontal baselines across content areas with a single vertical margin rule in faded red, content aligned to the lines like handwriting in a notebook. Spend boldness here; keep everything else quiet.

## Do

- Warm every neutral — paper is cream and ink is charcoal, never #fff/#000
- Align text to the ruled lines; the baseline grid is the interface
- Use the handwritten face for titles and annotations only, serif for all reading text
- Keep textures at whisper level (under 5% opacity) so the metaphor stays calm

## Don't

- Don't stack heavy skeuomorphic chrome (leather, stitching, brass) — this is paper minimalism, not iOS 6 maximalism
- No glossy gradients, glass, or neon accents
- Don't set body copy in the handwritten face
- Avoid rotating or texturing long-form reading areas

## Accessibility notes

- Ink (#2b2b2b) on paper (#f4f0e6) is about 12:1 and fountain blue about 6:1 — both pass; pencil gray (#635d4f) passes AA on both page and desk tones but should stay at 14px+ for comfort
- Ruled lines and grain must sit behind text at low contrast so they never interfere with glyph recognition
- Handwritten Caveat headings are decorative in tone — keep them large (24px+) and semantically normal headings
- Highlighter washes must preserve 4.5:1 for the text they cover

## Reference sites

- NN/g on skeuomorphism: https://www.nngroup.com/articles/skeuomorphism/
- Moleskine: https://www.moleskine.com
- Skeuomorph — overview: https://en.wikipedia.org/wiki/Skeuomorph

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip paper-texture.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/paper-texture.json

Settings → Capabilities → Skills → Upload skill → paper-texture.zip