OpenAlternative — Newsletter Hero with Pixel-grid Backdrop

---
version: alpha
name: "OpenAlternative \u2014 Newsletter Hero with Pixel-grid Backdrop"
colors:
  canvas: '#FFFFFF'
  text: lab(11.608 -0.00000745058 0)
  primary: lab(42.757 39.083 38.881)
typography:
  heading:
    fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
    fontSize: 48px
    fontWeight: 550
    lineHeight: 48px
  body:
    fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15px
---

## Overview
An isolated centered hero combining a bold two-line headline, supporting text, compact inline email signup and pale green square-grid decoration. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `section:has(h1)` from the source page.

## Colors
The YAML palette records computed CSS text/action colors, retaining native lab() notation. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.

## Typography
The selected h1 sample uses "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 48px / 48px, weight 550; supporting text uses 12px / 15px. Its corresponding mobile sample is 30px / 36px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
The isolated 1024px desktop section centers its title, paragraph and email action. At 390px the section narrows to 342px, the heading wraps and the inline email/action pair remains compact. The source supporting paragraph extends beyond the section bounds at this width, so its right edge is clipped in the exact component crop; do not reproduce that overflow in an adaptation. Measured screenshot bounds: 1024 × 336px desktop and 342 × 312px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Fine gray outlines and very pale inset card surfaces supply shallow separation; avoid heavy floating shadows.

## Shapes
Small rounded rectangles, hairline separators, compact outline icons and restrained spacing.

## Components
Small builder badge, heading, supporting copy, email input and burnt-orange Subscribe action, avatars and source subscriber statement. Cropped to section:has(h1); navigation and sponsor matrix are excluded. The faded square-grid ornament extends beyond the content container on the full page; this crop follows the section bounds.

## Do's and Don'ts
Keep utility controls compact and let typography establish hierarchy. Source metrics, logos and testimonials are captured content, not claims available to reuse for another product. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.