Sketch — Soft Gradients and Editorial Product Story

---
version: alpha
name: Sketch — Soft Gradients and Editorial Product Story
colors:
  ink: '#212123'
  surface-1: '#FFFFFF'
  surface-2: '#151515'
  surface-3: '#F5F5F5'
  surface-4: '#000000'
  surface-5: '#555DFF'
typography:
  heading:
    fontFamily: Reckless, "serif"
    fontSize: 76px
    fontWeight: 500
    lineHeight: 76px
  body:
    fontFamily: InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
---

## Overview
An editorial design-tool homepage pairing oversized Reckless serif headlines with soft pink-violet light, a tilted editor preview, asymmetric feature cards, customer quotes and a jewel-led closing action. 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 (Designers, welcome home.) uses Reckless, "serif", 76px with 76px leading and weight 500. The supporting sample uses InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif, 24px / 32px. 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 opening headline and supporting copy occupy two desktop columns above an oversized tilted editor image. Design and collaboration stories use unequal card grids; the prototype row exposes a horizontal sequence. At 390px the headline reduces from 76px to 48px, the introduction becomes a single column, and navigation switches to a menu icon plus Sign In. The narrow screenshot shows the release card stacking its artwork above the copy. Only the opening mobile viewport was visually inspected; lower-page mobile arrangements are not certified. Saved images measure 1440 × 8356px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
The background is a diffuse lavender/pink wash rather than a hard panel. The editor preview uses perspective; white and near-black feature cards establish contrast. Buttons have a glossy inset edge and a warm or violet gradient rim.

## Shapes
Large soft rectangles contain the release announcement and product cards. Keep the precise black diamond in the navigation distinct from the colorful app icon near the closing action.

## Components
Global navigation, opening download CTA, release announcement, editor preview, source customer quotes, Design/Prototype/Collaborate feature groups, company-positioning panel, download CTA, newsletter and link footer. Quotes and product claims are source content, not independently verified outcomes.

## Do's and Don'ts
Keep the serif headlines compact and the product imagery dominant. Preserve the unequal feature-card hierarchy. Do not turn every block into the same card, or infer working editor behavior from the pictured product UI. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.