---
version: alpha
name: Sublime Text — two-product download CTA
colors:
  primary: '#3C78B4'
  surface: '#FFFFFF'
  text: '#444444'
  muted: '#777777'
  section: '#856A93'
typography:
  primaryRole:
    fontFamily: Lato, Arial, sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: 51.2px
  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 muted-purple CTA section presents two white product cards with contrasting app marks, short descriptions and blue download actions.

Captured from https://www.sublimetext.com/ at 2026-10-16T06:08:52.475724+00:00. This reference isolates `.swimlane > section:last-child`.

## Colors

primary: `#3C78B4`; surface: `#FFFFFF`; text: `#444444`; muted: `#777777`; section: `#856A93`. 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

- h2 “Meet the Sublime Family”: Lato, Arial, sans-serif, 32px, weight 700, line height 51.2px.
- h3 “Sublime Text”: Lato, Arial, sans-serif, 32px, weight 400, line height 51.2px.
- p “The sophisticated text editor for code, markup and prose”: Lato, Arial, sans-serif, 16px, weight 400, line height 25.6px.
- a “DOWNLOAD”: Lato, Arial, sans-serif, 16px, weight 400, line height 25.6px.
- h3 “Sublime Merge”: Lato, Arial, sans-serif, 32px, weight 400, line height 51.2px.

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

Center the family heading over two equal white cards. Put each app mark beside its product name, a short description beneath, and action buttons on a shared lower baseline. The second card has both information and download actions. Both cards come from the Sublime Text homepage; this is not a separate Sublime Merge site submission.

Desktop image: 1200 × 425px at a 1440px viewport. Mobile evidence: 440 × 681px at a 390px viewport. The selected element measured 1200.00 × 423.98px desktop and 440.00 × 679.98px mobile. Crops use current document coordinates after a warm-up full-page screenshot; integer rounding may add at most one pixel per edge.

The two cards stack at the narrow viewport. Their measured container still exceeds 390px because of the source minimum-width layout. Keep the stacked pattern but use fluid widths when adapting.

## Elevation & Depth

Use a flat purple section behind lightly shadowed white cards. The depth should stay restrained enough that the app marks remain the strongest accents.

## Shapes

Cards and blue buttons have small corner radii. Square dark app icons contrast with white card surfaces; avoid making these cards pills.

## Components

A muted-purple CTA section presents two white product cards with contrasting app marks, short descriptions and blue download actions. 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.