Sublime Text — illustrated feature grid

---
version: alpha
name: Sublime Text — illustrated feature grid
colors:
  primary: '#3C78B4'
  surface: '#FFFFFF'
  text: '#444444'
  muted: '#777777'
typography:
  primaryRole:
    fontFamily: Lato, Arial, sans-serif
    fontSize: 32px
    fontWeight: 700
    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

An eight-item product-feature section combines light uppercase headings, alternating monochrome illustrations and concise text blocks in a spacious two-column grid.

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

## 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

- h2 “What’s New”: Lato, Arial, sans-serif, 32px, weight 700, line height 54px.
- p “Sublime Text 4 is packed with new features and enhancements, incl”: Lato, Arial, sans-serif, 16px, weight 400, line height 25.6px.
- h3 “GPU RENDERING”: Lato, Arial, sans-serif, 24px, weight 400, line height 38.4px.
- p “Sublime Text can now utilize your GPU on Linux, Mac and Windows w”: Lato, Arial, sans-serif, 16px, weight 400, line height 25.6px.
- h3 “APPLE SILICON AND LINUX ARM64”: 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

Center the What’s New heading and italic introduction above four paired rows. Alternate icon placement within the items: some icons precede the text, others follow it. Preserve consistent row rhythm and generous separation rather than boxing every feature into a card.

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

At the 390px viewport the source element measures wider than the viewport but switches to one column. Icons and text stack, often with centered illustrations. The crop includes the actual full element width; do not mistake it for an overflow-free mobile design.

## Elevation & Depth

The selected section is flat white. Hierarchy comes from whitespace and gray icon strokes, not shadows.

## Shapes

Feature artwork uses simple outlined rectangular symbols with occasional rounded corners. Heading highlight is pale gray; text groups are otherwise unboxed.

## Components

An eight-item product-feature section combines light uppercase headings, alternating monochrome illustrations and concise text blocks in a spacious two-column grid. 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.