Craft — Torn-Paper Hero with Responsive Device Art

---
version: alpha
name: Craft — Torn-Paper Hero with Responsive Device Art
colors:
  ink: '#030302'
  sampled-canvas: '#92CEED'
typography:
  heading:
    fontFamily: UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif,
      ui-serif, Georgia, "serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 66px
  body:
    fontFamily: UntitledSansFont, "UntitledSansFont Fallback", apple-system, InterFont,
      "InterFont Fallback", BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
      "sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
---

## Overview
An isolated rounded hero combining halftone blue clouds, torn lavender/yellow paper, a centered serif headline, glass CTA and desktop-to-phone product art direction. Inspected at 1440px desktop and 390px mobile on 2026-10-02. Isolated element: `main section.shadow-block`. Capture bounds were measured after a warm-up full screenshot and verified against the fresh cropped image.

## 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 UntitledSansFont, "UntitledSansFont Fallback", apple-system, InterFont, "InterFont Fallback", BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "sans-serif", 16px / 24px. 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
The exact main section.shadow-block hero measures 1400 × 920px at 1440px and 358 × 777px at 390px. The desktop centered headline sits above the glass action and wide app preview. The mobile version changes the product artwork to a phone and wraps the heading to three lines. Floating source navigation overlaps the hero in both captured states, as it does on the live page. Saved images measure 1400 × 920px desktop and 358 × 777px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
Paper layers and halftone cloud texture sit behind the crisp product frame. The navigation and central action use translucent glass surfaces and soft shadows; the device imagery supplies the strongest foreground depth.

## Shapes
A 24px-style rounded outer panel, capsule navigation/CTA, irregular torn-paper boundaries, and a large phone silhouette on mobile.

## Components
Only the exact hero element bounds are included: headline, primary action, collage art and responsive product preview, with the live navigation visibly overlaid. Subsequent use-case sections and footer are outside the capture. Menu and trial/download actions were not exercised.

## Do's and Don'ts
Retain genuine art direction across screen sizes rather than scaling the desktop mockup until it becomes illegible. Do not mistake intentional masking of the device at the hero bottom for a complete product screenshot. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.