Postmark — Language Tabs and Migration Code Panel

---
version: alpha
name: Postmark — Language Tabs and Migration Code Panel
colors:
  ink: '#24272D'
  sampled-canvas: '#FAF9F7'
typography:
  heading:
    fontFamily: Elizeth, "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif
    fontSize: 40px
    fontWeight: 700
    lineHeight: 48px
  body:
    fontFamily: '"Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
---

## Overview
An isolated developer feature section with a heavy serif introduction, language-logo tabs, syntax-colored curl sample and a yellow migration-guide dropdown band. Inspected at 1440px desktop and 390px mobile on 2026-10-02. Isolated element: `#home-start-sending`. Capture bounds were measured after a warm-up full screenshot and verified against the fresh cropped image.

## Colors
The palette lists opaque computed CSS colors observed in this reference. A sampled-canvas token, when present, is a screenshot pixel sample rather than a CSS declaration. Gradients, transparency, texture, illustration colors and logo hues remain visually described; do not flatten them into one accent.

## Typography
The measured heading sample (Start sending in minutes) uses Elizeth, "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif, 40px with 48px leading and weight 700. The supporting sample uses "Rund Text", "Helvetica Neue", Arial, Helvetica, sans-serif, 20px / 32px. The corresponding mobile heading sample is 40px / 48px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
The #home-start-sending image crop is 1440 × 946px desktop and 390 × 1121px mobile. A centered heading and lead sit above a single horizontal logo row and broad white code surface on desktop. On mobile logos wrap to two rows, code retains unwrapped long lines inside its masked horizontal area, and migration copy stacks above the dropdown. Only the initial code position was captured; horizontal scrolling was not tested. Saved images measure 1440 × 946px desktop and 390 × 1121px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
The selected curl tab visually joins a white rounded code panel with a light shadow. The yellow migration band shares the panel bottom and uses contrast rather than a separate elevated card.

## Shapes
Raised rounded active tab, white rectangular code surface with rounded outer corners, colorful language logos and a dark native-style select control in the yellow base.

## Components
Heading, lead, curl/Node/Python/Rails/Ruby/PHP/C# and More tabs, sample curl request, and migration dropdown. Only #home-start-sending is captured, with no surrounding hero/footer. The curl example contains source placeholders, not working credentials. Tabs, dropdown and API call were not executed.

## Do's and Don'ts
Keep code monospaced and visually distinguish syntax without claiming the faint source palette is an accessibility standard. Preserve the selected-tab-to-panel relationship. Do not wrap long source code into arbitrary prose or turn the capture into a functional request demonstration. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.