Pastel Desk Scrapbook UI

/pastelDeskScrapbookUi
A tactile, analog-inspired design system bringing warmth and craft to digital interfaces through pastel colors, layered paper textures, and playful, hand-drawn accents.
0 likes
0 bookmarks
Jun 15, 2026
Design System Content
# Pastel Desk Scrapbook UI

A design language for tactile, analog-inspired digital spaces.

---

## Philosophy

> "Design should feel collected, not constructed."

This system creates interfaces that feel like a highly curated creative desk—warm, inviting, and layered with intention. The design should evoke the physical sensation of flipping through a premium scrapbook, relying on textured paper canvases, gentle layering, and organic accents rather than harsh digital perfection. 

### Core Beliefs

1. **Tactile imperfection** — Interfaces should feel touched by human hands. We use washi tape, torn edges, and handwritten notes to break the sterile digital grid.
2. **Layering builds depth** — Depth isn't achieved through heavy digital shadows, but by mimicking physical stacked paper, polaroid frames, and sticker labels art-directed into collages.
3. **Softness in structure** — Boundaries are defined by graphite or soft brown strokes, completely eliminating harsh blacks and aggressive outlines.
4. **Colorful harmony** — Pastel accents are scattered playfully but purposefully, acting as highlighters, post-it notes, and structural separators.
5. **Physical motion** — Interactions mimic real-world materials. Paper slides, tape peels, and cards gently lift when interacted with.

### Strict Rules

* **No Pure Black** — True `#000000` is forbidden. Use deep graphite or espresso brown for maximum contrast.
* **Readable Foundations** — Despite the analog aesthetic, core content must remain ultra-readable using a clean, friendly sans-serif. Handwriting is strictly reserved for micro-labels and annotations.
* **No Harsh Digital Shadows** — Shadows must be tight, warm, and slightly offset to mimic the actual physical thickness of cardstock resting on a desk.
* **No Sterile Gradients** — Backgrounds should be flat or carry an extremely subtle paper-grain texture.
* **Annotations Over Emojis** — Emotive communication is handled via hand-drawn SVG doodles, arrows, and circles rather than standard OS emojis.

---

## Color Palette

### Canvas & Stroke Scale

The palette replaces traditional harsh whites and grays with warm ivory, pale oats, and earthy, organic strokes. 

```css
/* Canvas Backgrounds (Base to Top Layer) */
bg-desk-oat           /* Main foundational desk canvas (#F6F3ED) */
bg-paper-ivory        /* Primary card and module background (#FCFBF8) */
bg-paper-white        /* Highlighted or elevated note cards (#FFFFFF) */
bg-kraft-100          /* Secondary panels, photo-frame mattes (#EAE5D9) */

/* Strokes & Borders (Replacing Black/Gray) */
border-graphite-soft  /* Default structural borders, subtle lines (#8A8580) */
border-graphite-dark  /* Primary text, icons, and focused boundaries (#4A4743) */
border-brown-ink      /* Warm alternative for active states (#6B523D) */

/* Text Hierarchy */
text-graphite-dark    /* Primary body copy, main headings */
text-brown-ink        /* Warm secondary text, subtle emphasis */
text-graphite-soft    /* Muted metadata, timestamps, placeholders */

```

### The Highlighter Palette (Pastel Accents)

These pastels are used for sticker fills, washi tape, highlighting text, and interactive states. They are intentionally desaturated to feel sun-faded.

```css
bg-pastel-lavender    /* Subtle groupings, secondary buttons (#E3DDF2) */
bg-pastel-peach       /* Warm highlights, active tab indicators (#FFD8C9) */
bg-pastel-butter      /* Callout cards, warning/note backgrounds (#FDF1B8) */
bg-pastel-sage        /* Success states, positive metric indicators (#D1E2C4) */
bg-pastel-powder      /* Informational tags, link hovers (#C8E5F0) */
bg-pastel-coral       /* Urgent notifications, primary calls to action (#F4B3A8) */

```

### Destructive Actions

```css
hover:bg-pastel-coral/50
hover:text-brown-ink
hover:border-pastel-coral

```

---

## Typography

A friendly, geometric sans-serif (Figtree, Plus Jakarta Sans, or Satoshi) forms the structural foundation, paired with a casual handwritten font (e.g., Caveat, Kalam) for art-directed micro-moments.

### Font Families & Weights

```css
font-sans        /* Figtree or Plus Jakarta Sans. Clean, round, and legible. */
font-hand        /* Hand-drawn aesthetic. Used sparingly for annotations. */

font-normal      /* Core body copy, long-form text */
font-medium      /* UI text, interactive labels, standard headers */
font-semibold    /* Photo-frame titles, sticker text, emphasized data */

```

### Font Size Scale

```css
text-[11px]      /* Handwritten annotations, tiny sticker metrics */
text-xs          /* Metadata, photo-frame dates (12px) */
text-sm          /* Standard interactive labels, note-card bodies (14px) */
text-base        /* Core reading paragraphs, list items (16px) */
text-lg          /* Subsection headers, pull quotes (18px) */
text-xl          /* Card titles, primary interactive elements (20px) */
text-3xl-5xl     /* Hero text, large editorial quotes (tracking slightly tight) */

```

### Text Treatments

```css
decoration-wavy       /* Used for links inside body copy instead of solid underlines */
underline-offset-4    /* Gives breathing room to text decorations */
rotate-[-2deg]        /* Applied to handwritten tags to make them feel organic */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Treatment |
| --- | --- | --- | --- | --- | --- |
| Hero Title | Sans | 5xl | semibold | graphite-dark | tight tracking |
| Card Header | Sans | xl | medium | graphite-dark | none |
| Body Text | Sans | base | normal | graphite-dark | none |
| Sticky Note | Hand | text-lg | normal | brown-ink | slight rotation |
| Sticker Tag | Sans | xs | semibold | graphite-dark | uppercase, wide |

---

## Animation System

### Core Philosophy: Physicality & Craft

Motion should never feel digital, frictionless, or instantaneous. It should emulate the physical resistance and charm of interacting with paper on a desk.

### Page Transitions (The Paper Slide)

Elements slide in with slight, staggered friction as if being dealt onto a table.

```tsx
initial={{ opacity: 0, y: 15, rotate: -1 }}
animate={{ opacity: 1, y: 0, rotate: 0 }}
transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }} // Springy, paper-like drop

```

### Micro-Interactions (The Tape Peel & Card Lift)

Hovering over interactive elements simulates a slight physical lift or a corner peeling up.

```tsx
// Card Lift Hover
whileHover={{ 
  y: -4, 
  rotate: 0.5, 
  boxShadow: "4px 8px 12px rgba(74, 71, 67, 0.08)" 
}}

// Washi Tape Peel
whileHover={{ 
  scale: 1.05, 
  rotate: -3, 
  transformOrigin: "top right" 
}}

```

---

## UI Components

### Washi Tape Corners

Used to "pin" modules, photos, or note cards to the background canvas.

```tsx
<div className="absolute -top-2 -left-3 w-12 h-4 bg-pastel-peach/80 mix-blend-multiply rotate-[-15deg] backdrop-blur-[2px] shadow-sm rounded-sm z-10" />
<div className="absolute -bottom-2 -right-3 w-10 h-4 bg-pastel-sage/80 mix-blend-multiply rotate-[10deg] backdrop-blur-[2px] shadow-sm rounded-sm z-10" />

```

### Torn-Edge Dividers

Instead of straight lines, section breaks use an organic, jagged SVG to simulate ripped paper.

```tsx
<div className="w-full h-3 bg-[url('/torn-edge-pattern.svg')] bg-repeat-x opacity-40" />

```

### Photo-Frame Modules

Images and hero components are wrapped in thick off-white borders, resembling polaroids or gallery mattes.

```tsx
<div className="p-3 pb-8 bg-paper-white border border-graphite-soft shadow-[2px_3px_6px_rgba(74,71,67,0.05)] transform rotate-1">
  <img src="..." className="w-full border border-graphite-soft/30 rounded-sm" />
  <span className="font-hand text-graphite-soft mt-3 block text-center">fig 1. dashboard</span>
</div>

```

---

## Component Catalog

### Cards & Notes

Containers mimic index cards or stacked paper. They use soft shadows that remain tight to the bounding box.

```tsx
// Layered Paper Card
"bg-paper-ivory border border-graphite-soft rounded-md p-6 shadow-[2px_4px_0px_rgba(138,133,128,0.15)] hover:-translate-y-1 hover:shadow-[4px_6px_0px_rgba(138,133,128,0.15)] transition-all duration-300"

// Ruled Note Card
"bg-pastel-butter border border-pastel-butter/80 rounded-sm p-5 bg-[linear-gradient(transparent_95%,#8A8580_20%)] bg-[length:100%_1.5rem]"

```

### Buttons

Buttons resemble physical stickers or tags. Soft outlines and pastel fills.

```tsx
// Primary Sticker Button
"bg-pastel-coral text-graphite-dark font-medium text-sm rounded-full px-5 py-2.5 border-2 border-graphite-dark shadow-[2px_2px_0px_#4A4743] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-[1px_1px_0px_#4A4743] transition-all"

// Secondary Outline Button
"bg-transparent border border-graphite-soft text-graphite-dark font-medium text-sm rounded-full px-5 py-2.5 hover:bg-pastel-lavender/40 hover:border-graphite-dark transition-colors"

```

### Inputs

Inputs look like fill-in-the-blank lines on a printed form, rather than heavy rectangular boxes.

```tsx
// Blank-Line Input
"w-full px-2 py-2 bg-transparent border-b-2 border-dashed border-graphite-soft text-graphite-dark placeholder-graphite-soft/60 focus:outline-none focus:border-pastel-coral focus:border-solid transition-all"

```

### Badges & Sticker Labels

Tiny, slightly tilted elements that look like price tags or planner stickers.

```tsx
// Micro Tag
"inline-block px-2.5 py-1 text-xs font-semibold uppercase tracking-wide rounded-sm bg-pastel-powder text-graphite-dark border border-graphite-soft/50 shadow-sm transform -rotate-1"

// Handwritten Annotation
"absolute -top-4 -right-6 font-hand text-brown-ink text-sm rotate-[4deg]"

```

### Hero Section Collage

The hero area eschews rigid grids for an overlapping, art-directed desk layout.

```tsx
<div className="relative w-full min-h-[60vh] flex items-center justify-center bg-desk-oat">
  <HeroText />
  <StickerBadge className="absolute top-1/4 right-1/3" />
  <PhotoFrame className="absolute bottom-10 left-10 -rotate-3" />
  <NoteCard className="absolute top-20 right-20 rotate-2" />
</div>

```

---

## Quality Checklist

* [ ] Are all borders and strokes rendered in soft graphite or brown, entirely avoiding `#000000`?
* [ ] Do interactive cards feature warm, tight, directional drop shadows (simulating actual paper)?
* [ ] Is the primary typography set in a clean, legible sans-serif font?
* [ ] Are handwritten fonts strictly localized to micro-labels, annotations, and playful arrows?
* [ ] Do UI elements overlap naturally (like papers on a desk), utilizing washi tape or sticker patterns?
* [ ] Is motion responsive and physical (e.g., tape-peel hovers, slight rotations, springy drop-ins)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm ivory, pale oats, and kraft-paper backgrounds.
* Pastel highlighters (lavender, peach, butter yellow, sage, powder blue, faded coral).
* Hand-drawn circles, arrows, or underlines (via SVG) to draw attention.
* Gentle parallax scrolling where background items move at slightly different speeds.
* Clean, friendly sans-serif for 95% of text to maintain usability.

### ✗ Not Allowed

* Harsh geometric grids that force perfect alignment everywhere.
* Heavy digital drop shadows that spread out uniformly (e.g., large blur radius).
* System emojis (🚫📱). Use custom hand-drawn SVG doodles instead.
* Neon, heavily saturated, or primary colors.
* Heavy block-color overlays or sterile glassmorphism blurs.