OpenAlternative — Open-source Software Directory

---
version: alpha
name: "OpenAlternative \u2014 Open-source Software Directory"
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
A light software-directory landing page with centered newsletter hero, sponsor grid, searchable three-column tool cards, compact repository metrics and related-category discovery. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## 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
A centered 1024px desktop content column combines an airy hero with a dense three-column catalogue. At 390px the cards stack and navigation condenses. Closed filter listboxes contain internally scrollable choices; the static capture does not expand every option. Measured screenshot bounds: 1440 × 6239px desktop and 390 × 15442px 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
Navigation, sponsored announcement, hero signup, sponsor logos, search/filter/sort controls, tool cards, pagination, alternative recommendations, trending categories and footer. One current page of the directory is captured, not every paginated result. The floating source advertisement was dismissed through its public close control before capture. No searches or subscriptions submitted.

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