A design system of pinned notes, pushpins, and layered paper
Warm cork browns set the stage, while paper whites, sticky-note yellows, and pastel scraps bring layered color to the board.
Cork Light
#D4A96A
Cork Mid
#C49A5C
Cork Dark
#A67C42
Board Frame
#5C3D1E
Paper White
#FAF9F5
Sticky Yellow
#FFF9B0
Note Blue
#D4E8F7
Note Pink
#FAD4E0
Note Green
#D4EDDA
Pin Red
#D32F2F
Pin Yellow
#FBC02D
Pin Green
#388E3C
Pin Blue
#1976D2
Handwritten notes meet clean print. Caveat for scribbled headings, Patrick Hand for casual labels, and Inter for readable body text.
Caveat -- Display & Headings
Patrick Hand -- Casual / Labels
Inter -- Body Text
Pinned to the Board
Important Reminder
Meeting Notes
Don't forget!
The quick brown fox jumps over the lazy dog. Clean, readable body text anchors the handwritten personality of headers and labels. Every note on the board needs to be legible at a glance.
Scribbled in the margin -- date unknown
"The best ideas start as scraps of paper pinned to a board."
A 4px base unit keeps elements tidy, like measuring the gaps between pinned notes on a well-organized board.
Interactive elements styled as pinned paper scraps -- sticky-note primaries, outlined secondaries, and urgent pink danger notes.
Input fields written on paper notes -- underlined text areas, squared-off checkboxes, and round radio buttons.
Content containers styled as pinned scraps -- sticky notes, index cards, photo prints, and torn paper edges, each slightly askew.
Quick sync every morning at 9:15. Bring your coffee and your status update.
Submit the quarterly report before Friday. Templates are in the shared drive.
Surprise party for Sarah in the break room. Bring snacks if you can!
Preliminary findings suggest a 30% improvement. Need more data points to confirm.
Budget has been approved for the new office plants. Pick them up this weekend.
Ideas parked here until we have bandwidth. Review next sprint planning.
Lined with a red margin, just like the real thing. Great for structured notes and lists.
Polaroid-style memory
Ripped from a notebook and hastily pinned. The curled corner adds character.
Urgent notices pinned front and center -- color-coded paper strips with pushpin accents for info, success, warning, and error states.
Heads up
The conference room is booked all day Tuesday. Use the lounge for meetings instead.
All done!
Your report has been submitted successfully. A copy was pinned to the shared board.
Watch out
The printer is running low on toner. Place an order before it runs out completely.
Problem!
The shared drive is currently offline. IT has been notified and is working on a fix.
Red thread linking related items -- the hallmark of every detective board, project timeline, and conspiracy wall.
Gather requirements and user feedback. Pin all findings to the board.
Brainstorm solutions. Every sticky note is a potential breakthrough.
Build a rough version. Tape mockups to the board for team review.
Launch, celebrate, and pin the victory memo to the board.
Washi tape dividers, rubber stamps, pushpin clusters, and other finishing touches for the board.