Monochrome paper

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

Read MarkdownUpdated 2026-10-20

Interactive sample

Try the welcome screen, then turn the cover letter. All content here is fictional.

Enable JavaScript to interact with the sample. The sources and prompt remain available below.

Prompt

Paste into your coding agent. Includes instructions for Impeccable when available.

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.

Source

Original interface · Hire Tianze

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

Guidance for purposeful motion, restrained effects and reduced-motion support. This is a reference, not a template or the source of the original application.