---
version: alpha
name: Craft — Paper-Sky Plans and Feature Comparison
colors:
  ink: '#030302'
  surface-1: '#FFFFFF'
  surface-2: '#FCF9F7'
  surface-3: '#B8CAF5'
  surface-4: '#D5ACD8'
  surface-5: '#F6CB98'
typography:
  heading:
    fontFamily: UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif,
      ui-serif, Georgia, "serif"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 59.4px
  body:
    fontFamily: UntitledSansFont, "UntitledSansFont Fallback", apple-system, InterFont,
      "InterFont Fallback", BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
      "sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
---

## Overview
A full pricing page with a free card and larger Craft Plus family/team area over paper-and-cloud artwork, followed by feature comparisons, a value stack and common questions. 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 (Choose The Plan That’s Right For You) uses UntitledSerifFont, "UntitledSerifFont Fallback", apple-system-ui-serif, ui-serif, Georgia, "serif", 54px with 59.4px leading and weight 400. The supporting sample uses UntitledSansFont, "UntitledSansFont Fallback", apple-system, InterFont, "InterFont Fallback", BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "sans-serif", 18px / 25.2px. The corresponding mobile heading sample is 38px / 37.62px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The desktop page gives the Free plan a narrow left card and the paid options a much wider right card with three internal columns. The billing pill sits in the paid card header. At 390px Free and Plus become successive full-width cards, and the paid heading and billing switch stack. The mobile Free card omits the large desktop numeric block in the inspected opening state, prioritizing its description and Sign up action. Saved images measure 1440 × 5547px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
Off-white cards sit above a sky-blue textured background with torn lavender/yellow paper at their base. Rounded white actions have soft shadows, while the free sign-up button is solid black.

## Shapes
Asymmetric large rounded cards, capsule billing control, pill actions, fine feature-table separators and small check marks. A large paid container groups Plus, Family and Team rather than giving all tiers equal visual weight.

## Components
Free/Starter and Craft Plus with Plus, Family and Team prices; yearly/monthly selector; larger-group contact row; detailed Free/Plus feature table; value comparison; closed common-question controls and footer. Prices shown are the source euro/yearly state. No billing selection, checkout or trial was initiated.

## Do's and Don'ts
Preserve the free-versus-paid grouping and disclose billing cadence near prices. Do not invent an active monthly state or claim all comparison rows fit in the mobile opening viewport. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.