Paper

Mission

Bring the tangibility of physical stationery to the screen — stacked sheets, torn edges, and layered depth that makes digital feel touchable.

Brand

🎨 Colors

• #FAFAF6 — Background (bright white paper)
• #3A3A3A — Primary (graphite)
• #4A90D9 — Accent (fountain pen blue)
• #F5A623 — Secondary (highlighter yellow)
• #F2EFE9 — Surface (cream sheet)
• #1C1C1C — Text (ink black)

🔤 Typography

• Headings: DM Serif Display (serif, editorial)
• Body: DM Sans (sans-serif, clean pairing)
• Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2.25rem / 3xl 3rem

📐 Spacing

• 8px grid, with intentional 2-4px offsets between "sheets"
• Section padding: 5rem vertical, 2rem horizontal
• Card gaps: 1.5rem
• Max content width: 70rem

🧩 Components

• Buttons: Slight 2px radius, subtle 1px shadow (1px blur, 1px y-offset), hover lifts shadow to 2px blur
• Cards: White surface, 1px border #E0DCD3, stack effect via negative margin or CSS grid overlap, 4px radius
• Nav: Thin bottom border, text links, clean sans-serif, no background until scroll
• Hero: Large serif headline, optional torn-paper edge (CSS mask-image), clean photography
• Footer: Stacked-sheet effect at page bottom, subtle gradient for "page curl"

♿ Accessibility

• Contrast ratio ≥ 4.5:1 on all body text
• Focus ring: 2px solid #3A3A3A with 2px offset, 4px radius
• Reduced motion: disable page-load stagger animations and hover lift effects
• Minimum font size: 0.875rem (14px)
• Decorative paper edges hidden from screen readers

✍️ Writing Tone

Warm, personal, considered. Hand-written feel without being casual. Use full words ("and" not "&"). Punctuation is precise. Headlines feel typeset, not typed.

Do / Don't

✅ Do

• Stack elements with z-index and subtle box-shadows to create paper depth
• Use CSS background-image with subtle noise texture (SVG or base64 under 2KB)
• Stagger card animations on load (50ms delay between each)
• Add "torn edge" dividers using mask-image or SVG clip-path
• Underline links with a highlighter-yellow background-color, not text-decoration

❌ Don't

• Use gradients as the primary depth mechanism — shadows and borders first
• Overlap more than 3 visible "sheets" at any scroll position
• Use border-radius larger than 4px on any element
• Animate with durations under 200ms — paper moves deliberately
• Use dark mode unless it evokes "black paper" with white ink

Quality Gates

• Stacked-sheet effect (z-index + shadow) visible on cards or sections
• Noise/grain texture present and under 2KB
• Highlighter-style link underlines implemented via background-color
• Focus states match the 4px radius and graphite color
• No CSS animation-duration under 200ms
• Page readable at 320px with serif headings rendering cleanly