Alfred — Three-Path Download and Upgrade CTA
Call to action · productivity
Pricing page · productivity
A complete license-pricing page with two centered price tiles, a purple upgrade announcement, teal prices, a returning-customer upgrade link and a low-contrast patterned canvas.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: Alfred — Two-License Powerpack Pricing
colors:
primary: '#5C1F87'
purple: '#5C1F87'
teal: '#2E8796'
canvas: '#FFFFFF'
body-ink: '#757575'
heading-ink: '#5A5A5A'
sample-heading: '#5A5A5A'
sample-supporting: '#999999'
price: '#4BACBC'
typography:
heading:
fontFamily: Bitter, serif
fontSize: 35.2px
fontWeight: 400
lineHeight: 44px
supporting:
fontFamily: Bitter, serif
fontSize: 16px
fontWeight: 400
lineHeight: 25.6px
---
## Overview
A complete license-pricing page with two centered price tiles, a purple upgrade announcement, teal prices, a returning-customer upgrade link and a low-contrast patterned canvas. Inspected on 2026-10-05. This is a complete desktop page capture, not an isolated component crop.
## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. Purple marks product identity and teal marks paid actions; white and restrained gray carry the longer explanatory content.
## Typography
The listed font families and sizes are measured CSS samples. The selected heading sample is Bitter, serif at 35.2px, weight 400, line-height 44px. A supporting paragraph sample uses 16px with 25.6px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.
## Layout
Two compact license tiles sit side by side beneath a centered title and announcement. At 390px, the title wraps and the tiles stack vertically; their 64px price type remains prominent. The surrounding content rail contracts to 350px. The footer follows the pricing section rather than floating beside it. Primary image dimensions are 1440 × 1244px at a 1440px viewport. The mobile evidence is 390 × 844px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.
## Elevation & Depth
Thin outlines distinguish flat white price tiles from the patterned background. A stronger gray bottom band differentiates the lifetime-upgrade offer without a large shadow.
## Shapes
Nearly square tile geometry, shallow rounded corners, a wide purple announcement and a separate white upgrade-link slab establish the hierarchy.
## Components
Single License and Mega Supporter tiles show the source's captured £34 and £59 prices. A separate older-license upgrade link and license-type documentation clarify purchase context. No checkout, payment or license lookup was submitted; prices are a dated visual observation, not a continuing offer.
## Do’s and Don’ts
Maintain clear separation between license scope and price. Keep the older-license route distinct from new purchase options; do not relabel one-time licenses as subscriptions or invent discount percentages. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.