Craft — Paper Collage Productivity Homepage

---
version: alpha
name: Craft — Paper Collage Productivity Homepage
colors:
  ink: '#030302'
  surface-1: '#FFFFFF'
  surface-2: '#9BD8A9'
  surface-3: '#F5F5F7'
  surface-4: '#FDE99B'
  surface-5: '#B8CAF5'
typography:
  heading:
    fontFamily: UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif,
      ui-serif, Georgia, "serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 66px
  body:
    fontFamily: UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif,
      ui-serif, Georgia, "serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28.8px
---

## Overview
A tactile productivity homepage with blue cloud texture, torn-paper layers, an editorial serif headline, colorful product demonstrations, portrait-led stories, pricing and a dark textured footer. Inspected at 1440px desktop and 390px mobile on 2026-10-02. The primary image is the full desktop page; mobile evidence is the opening viewport only.

## Colors
The palette lists opaque computed CSS colors observed in this reference. A sampled-canvas token, when present, is a screenshot pixel sample rather than a CSS declaration. Gradients, transparency, texture, illustration colors and logo hues remain visually described; do not flatten them into one accent.

## Typography
The measured heading sample (Your space for notes, tasks, and big ideas) uses UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif, ui-serif, Georgia, "serif", 66px with 66px leading and weight 400. The supporting sample uses UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif, ui-serif, Georgia, "serif", 24px / 28.8px. The corresponding mobile heading sample is 48px / 48px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
A rounded near-full-width hero frames the floating pill navigation and centered headline. The desktop introduction shows a large app window emerging through layered paper. At 390px the navigation simplifies to wordmark, trial link and menu, while a phone preview replaces the desktop app composition. The narrow heading wraps to three lines. The long desktop page alternates people, product use cases, organizational features, customization, community and pricing. Saved images measure 1440 × 11149px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
Halftone clouds, paper tears, a softly glowing glass navigation rail and overlapping product windows produce depth without a heavy application-dashboard frame. Colored feature panels use shallow shadows; the closing footer is almost black with fine texture.

## Shapes
Large rounded panels, pill controls, irregular paper edges, phone and desktop device frames, and compact colorful notes. Do not approximate the paper artwork with plain rectangular color blocks.

## Components
Floating navigation, hero, use-case portrait gallery, note/task/AI product stories, organization and customization sections, community cards, Free/Plus pricing, closing action and multi-column footer. Carousel content is one captured state. Original lazy images were requested eagerly to avoid unloaded edge artwork; no assets were substituted.

## Do's and Don'ts
Keep serif marketing headings distinct from the sans-serif product UI. Preserve the blue/cream base and selective yellow, lavender and mint accents. Do not represent pictured documents as editable widgets or endorse source testimonials as measured results. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.