---
version: alpha
name: Sublime Text — classic editor product landing
colors:
  primary: '#3C78B4'
  surface: '#FFFFFF'
  text: '#444444'
  muted: '#777777'
typography:
  primaryRole:
    fontFamily: Lato, Arial, sans-serif
    fontSize: 48px
    fontWeight: 400
    lineHeight: 76.8px
  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 classic developer-tool landing uses a slate-to-purple gradient, a large code-editor demonstration, an illustrated feature grid and a purple product-family CTA.

Captured from https://www.sublimetext.com/ at 2026-10-16T06:07:05.444854+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 “Text Editing, Done Right”: Lato, Arial, sans-serif, 48px, weight 400, line height 76.8px.
- h2 “What’s New”: Lato, Arial, sans-serif, 32px, weight 700, line height 54px.
- h3 “GPU Rendering”: Lato, Arial, sans-serif, 24px, weight 400, line height 38.4px.
- h3 “Apple Silicon and Linux ARM64”: Lato, Arial, sans-serif, 24px, weight 400, line height 38.4px.
- h3 “Tab Multi-Select”: Lato, Arial, sans-serif, 24px, weight 400, line height 38.4px.

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 1200px centered desktop content lane beneath a dark gray header. Center the product tagline and download controls above the large editor demonstration. Follow with its explanatory strip, an eight-item two-column feature grid, a two-card family CTA and a muted footer. Preserve the detailed editor image rather than replacing it with abstract decoration.

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

At 390px the header links wrap below the wordmark and feature items stack. The source retains a roughly 480px minimum document width, causing horizontal overflow and clipping in the mobile viewport. The heading decreases from 48px to 30px but the narrow layout still needs improvement; do not copy that minimum-width constraint.

## Elevation & Depth

The gradient hero supports a dark editor preview. White content panels have restrained shadows and the family section uses a flat purple surface.

## Shapes

Use square-edged or slightly rounded panels and compact rectangular blue actions, not large modern pill buttons. Feature illustrations alternate beside their text.

## Components

A classic developer-tool landing uses a slate-to-purple gradient, a large code-editor demonstration, an illustrated feature grid and a purple product-family CTA. 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.