OpenAlternative — Magic-link and Social Sign-in
Auth form · Software directory
Pricing page · Software directory
A complete advertising page with three sponsorship plans, segmented billing cadence, a highlighted Platinum option, audience breakdown and supporting credibility content.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: "OpenAlternative \u2014 Advertising Sponsorship Pricing"
colors:
canvas: '#FFFFFF'
text: lab(11.608 -0.00000745058 0)
primary: lab(11.608 -0.00000745058 0)
typography:
heading:
fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
fontSize: 36px
fontWeight: 550
lineHeight: 40px
body:
fontFamily: '"Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
fontSize: 14px
fontWeight: 400
lineHeight: 20px
---
## Overview
A complete advertising page with three sponsorship plans, segmented billing cadence, a highlighted Platinum option, audience breakdown and supporting credibility content. 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", 36px / 40px, weight 550; supporting text uses 14px / 20px. 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
Desktop aligns Silver, Gold and Platinum in three columns under the billing switch, followed by audience statistics, testimonial and sponsor strip. Mobile stacks plans and the lower content. This prices advertising placements, not access to the directory. Measured screenshot bounds: 1440 × 2490px desktop and 390 × 4180px 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
Weekly/Monthly/Yearly controls in the captured monthly state, Silver/Gold/Platinum cards, Get started actions, audience segmentation, source metrics/testimonial and sponsor marquee. Hidden or offscreen logo variants in the marquee were flagged by the image heuristic; the visible logo strip was inspected. Billing changes and purchases were not tested.
## 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.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.