# Monochrome paper

> A quiet monochrome interface with a personal welcome and a cover letter that turns like paper.

Repository: pbakaus/impeccable · Category: Engineering practice · Status: Active

Keywords: design style, monochrome, paper, document viewer, CSS, motion, gestures, Impeccable, accessibility, design tokens, UI pattern

## Source

- [Original interface · Hire Tianze](https://hire.tianzezhao.com): Developed with Tianze from a grey, black and white brief and a literal cover-letter metaphor. The original document view requires an invitation code.
- [Impeccable · design and motion guidance](https://github.com/pbakaus/impeccable/blob/abf5779cabc20147fd9c013fa4705088c200bf8a/plugin/skills/impeccable/reference/animate.md): Guidance for purposeful motion, restrained effects and reduced-motion support. This is a reference, not a template or the source of the original application.

## Prompt

Use the Impeccable skill, if available, to build a Monochrome paper interface. Work within the existing stack and adapt it to this product.

Visual direction
Use an off-white (#fafafa) background, white surfaces, near-black (#171717) text and primary actions, muted grey (#666) supporting text, and thin grey (#e5e5e5) borders. Use native system typography, compact controls, 6px control corners, 8-10px panel corners and square paper sheets. Keep shadows faint and spacing generous around the document.

Layout and copy
Start with a short, welcoming introduction and one clear action. Keep the access panel around 420px wide and the document column around 860px. Editable fields use at least 16px text. Remove instructions that simply repeat a field or button. Use this product's real content; do not copy the sample person's name or claims.

Paper interaction
Place the cover letter above the resume. Add a small lower-right paper corner that lifts and settles twice, then rests. A left swipe or mouse drag turns the cover around its left edge; an upward gesture from the lower edge turns it around the top. Short drags return to rest. Use a restrained transition of roughly 650ms. Keep button and keyboard alternatives, normal reading scroll, pinch zoom and visible focus. Respect reduced-motion settings.

Implementation and verification
Use native CSS and browser events unless the project already has an appropriate interaction library. Reserve layout space so transitions do not shift nearby controls. Check phone and desktop layouts, keyboard use, cancelled and wrong-direction drags, long content, and reduced motion. Use Impeccable to polish the result while preserving this visual direction. Finish with a working interactive implementation, not a screenshot.

## Interactive sample

Open the browser version of this page to explore the sample. It uses fictional content, with mouse, touch and keyboard controls.