Craft Docs

Craft Docs, creative, soft

Preview image. Unlock full-res

Digital Scrapbook Collage. The design feels like a thoughtful, tactile scrapbook where structured digital notes meet soft, organic textures.

Palette
#fff3e7
#030302
#ffffff
#f7f7f7
#efefef
#e1e1e1
#bebbba
#41413f
#9bd8a9
#fde99b
#b8caf5
#9ed4ef

The design aesthetic is gentle, creative, and tactile, evoking the feeling of a personal journal or artist's scrapbook. This is achieved through a warm, off-white canvas (#fff3e7), a palette of soft pastels (#9bd8a9, #fde99b), and organic, torn-paper collage elements. The primary visual signature is the typographic pairing: a sophisticated, tightly-tracked serif (UntitledSerifFont) for large, literary headlines, contrasted with a clean, functional sans-serif (UntitledSansFont) for all UI and body text. Rounded corners (14px, 24px) are prevalent, but are punctuated by pill-shaped buttons, creating a soft and approachable interface. Deep, multi-layered shadows provide a subtle, non-intrusive sense of depth, making elements feel floated rather than stacked. Use UntitledSerifFont for all major headlines (H1, H2) to establish the brand's literary, crafted feel. Apply tight negative letter-spacing (e.g., -2.24px at 56px) to serif headlines for a professional, refined look. Layer torn-paper textures and soft pastel color blocks (Mint, Marigold) to create the signature collage aesthetic. Use the complex, multi-layered shadow style on all key floating elements like cards. Set main page content on the warm Canvas (#fff3e7) background, not pure white. Combine generous corner radii (14px, 24px) with pill-shaped buttons for a friendly, approachable UI. Maintain generous vertical whitespace (96px+) between content sections. Don't use the serif font for UI controls, body copy, or any text smaller than 24px. Don't use pure black text; always use the softer Ink (#030302). Don't use hard, single-source drop shadows. Stick to the soft, deep, multi-layered shadow style. Don't use sharp 0px corners on buttons or cards. Don't use a pure white (#ffffff) page background for long-form content. Don't clutter the layout; prioritize spaciousness and clear, centered compositions. Don't use vibrant accent colors for large background surfaces; reserve them for small highlights or illustrative frames.

More like this