Sketch — Jewel Icon Download CTA

---
version: alpha
name: Sketch — Jewel Icon Download CTA
colors:
  ink: '#212123'
  sampled-canvas: '#F5F5F5'
typography:
  heading:
    fontFamily: Reckless, "serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 48px
  body:
    fontFamily: InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
---

## Overview
An isolated centered download call to action: golden app jewel, compact two-line serif heading, supporting copy and one glossy black button with a warm gradient outline. Inspected at 1440px desktop and 390px mobile on 2026-10-02. Isolated element: `#get-started`. 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 (Discover a better way to design) uses Reckless, "serif", 44px with 48px leading and weight 500. The supporting sample uses InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif, 20px / 32px. The corresponding mobile heading sample is 32px / 40px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The #get-started image crop is 1376 × 618px at the desktop viewport and 358 × 618px at 390px. A narrow central stack preserves icon, heading, paragraph and action order. On mobile the supporting copy wraps to four lines and the heading remains a compact two-line block; the large exterior breathing room is retained. Saved images measure 1376 × 618px desktop and 358 × 618px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
The rounded app tile casts a faint shadow. The faceted yellow gem supplies dimensionality, while the black button has an inset sheen and orange/yellow rim. The rest of the section remains flat and pale.

## Shapes
A rounded-square app tile, jewel silhouette, and a moderately rounded rectangular button. This is not a pricing card or a full-width banner.

## Components
Golden app icon, “Discover a better way to design” heading, source supporting copy and Get started for free link. Only the #get-started element is captured; adjacent logos, navigation and footer are excluded. The download action was not clicked during component inspection.

## Do's and Don'ts
Use a single action and preserve the quiet space around the icon. Do not add a second competing button or treat the source audience statement as independently verified social proof. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.