---
version: alpha
name: Sublime Text — license pricing and purchase page
colors:
  primary: '#3C78B4'
  surface: '#FFFFFF'
  text: '#444444'
  muted: '#777777'
typography:
  primaryRole:
    fontFamily: Lato, Arial, sans-serif
    fontSize: 34px
    fontWeight: 400
    lineHeight: 54px
  supporting:
    fontFamily: Lato, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
omitted:
- section: spacing
  reason: Per-reference dimensions and observed composition are given in Layout; no
    global scale is inferred.
- section: rounded
  reason: Observed shape roles are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific components are described in prose rather than an inferred
    implementation API.
---

## Overview

A complete license-pricing page combines personal-versus-business guidance with a purchase form, license details, an optional related-product offer and legal notes.

Captured from https://www.sublimehq.com/store/text at 2026-10-16T06:08:39.902632+00:00. This is a full-page capture.

## Colors

primary: `#3C78B4`; surface: `#FFFFFF`; text: `#444444`; muted: `#777777`. These values describe observed interface roles, not a complete brand palette. Keep text and surfaces distinct; do not spread the primary accent across every element.

## Typography

- h1 “Buy Sublime Text”: Lato, Arial, sans-serif, 34px, weight 400, line height 54px.
- h3 “License Info”: Lato, Arial, sans-serif, 19.2px, weight 400, line height 30.72px.
- h3 “Bundles”: Lato, Arial, sans-serif, 19.2px, weight 400, line height 30.72px.
- h3 “Total:
                        $99 USD”: Lato, Arial, sans-serif, 19.2px, weight 400, line height 30.72px.
- p “Sublime Text may be downloaded and evaluated for free, however a ”: Lato, Arial, sans-serif, 16px, weight 400, line height 25.6px.

The primary token describes a sampled heading or link, not an inferred global type scale. Use the accompanying composition to establish hierarchy rather than applying one size everywhere.

## Layout

Use a broad centered page with a prominent Buy Sublime Text heading and explanatory licensing copy. Align license selection and personal details in the form while keeping the order total and purchase action visually separate. Retain the business-account link and legal notes. This capture is the initial untouched purchase state, not a completed checkout.

Desktop image: 1440 × 1395px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport. Measured document widths were 1440px desktop and 480px mobile.

The page keeps fixed-width form regions at 390px, creating horizontal overflow. Capture evidence records that source behavior; a new implementation should stack the fields and order summary and fit all input labels within the viewport.

## Elevation & Depth

A flat light canvas and fine outlined form groups carry the structure. Avoid adding unsupported floating panels or elaborate shadows.

## Shapes

Conventional radio controls, rectangular text inputs and compact action buttons make this a utilitarian licensing workflow.

## Components

A complete license-pricing page combines personal-versus-business guidance with a purchase form, license details, an optional related-product offer and legal notes. Preserve the selected reference's hierarchy and reading order. This is one visible state: hover, focus, validation, menus, downloads and successful transactions are untested unless explicitly described. No credentials were entered, forms submitted, accounts created or purchases made. Any customer statements, pricing or performance claims visible in the source are source-owned copy, not independently verified facts.

## Do's and Don'ts

- Do preserve the specific spacing relationships, content grouping and type hierarchy described above.
- Do provide accessible focus indicators and responsive controls in a new implementation; this is a recommendation, not a claim that every source state passed testing.
- Do use original content and substantiated claims when adapting the pattern.
- Don't reproduce observed source overflow, clipping or ticker-spacing defects.
- Don't infer animation timing, validation behavior or completed transactions from a static frame.