← Back to the library

Pricing page · productivity

Alfred — Two-License Powerpack Pricing

Sign in to save

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.

Visit original website ↗Captured Oct 5, 2026 · 1440px wide

Build with this design

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.

Download DESIGN.md ↓
View DESIGN.md
---
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.

Full screenshot of Alfred — Two-License Powerpack Pricing

Design belongs to its original creator. Use this example for inspiration, not as a licensed template.

A little more taste in your inbox.

A weekly selection of standout designs, useful UI elements, and fresh inspiration from TastefulKit.