OpenAlternative — Newsletter and Multi-column Directory Footer

---
version: alpha
name: "OpenAlternative \u2014 Newsletter and Multi-column Directory Footer"
colors:
  canvas: '#FFFFFF'
  text: lab(48.496 0 0)
  primary: lab(11.608 -0.00000745058 0)
typography:
  label:
    fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  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: 18px
---

## Overview
An isolated flat footer combining an email subscription block, social icons and grouped browse, collection, quick-link and related-product navigation. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `footer` 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 a sample uses "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 16px / 24px, weight 400; supporting text uses 12px / 18px. Its corresponding mobile sample is 16px / 24px. 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
Desktop places the subscription block left and four compact link columns right. At 390px subscription spans the width and links form two columns. Attribution sits beneath; subsequent popular-category lists are outside this footer element. Measured screenshot bounds: 1024 × 316px desktop and 342 × 727px 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
Wordmark, email subscription action, social links, Browse, Collections, Quick Links, Other Products and attribution. Captured only the semantic footer; links and subscription outcomes not exercised.

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