paywall minimal fade gradient subscription paywall fade gradient minimal subscribe content fading content paywall minimal subscription prompt below article
Paywall Minimal
Fetch pattern JSON:
curl https://webspire.de/patterns/paywall/minimal.json minimal.html
<div class="ws-paywall mx-auto max-w-2xl">
<!-- Visible content that fades out -->
<article class="prose prose-sm max-w-none text-[var(--ws-paywall-text)]">
<p class="text-sm leading-relaxed text-[var(--ws-paywall-text-soft)]">Design tokens are the foundational building blocks of every modern design system. They represent the smallest decisions — colors, spacing, typography, shadows — as named, reusable values that flow from design tools to code without manual translation. When implemented correctly, tokens create a single source of truth that scales across platforms and teams.</p>
<p class="mt-4 text-sm leading-relaxed text-[var(--ws-paywall-text-soft)]">The challenge lies in governance. As token libraries grow, teams face difficult questions about naming conventions, versioning strategies, and the boundary between global tokens and component-specific overrides. The most successful systems we've studied adopt a three-tier architecture: primitive, semantic, and component tokens.</p>
<p class="mt-4 text-sm leading-relaxed" style="mask-image: linear-gradient(to bottom, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);">
<span class="text-[var(--ws-paywall-text-soft)]">Primitive tokens define the raw palette — every shade, every spacing step, every font weight. Semantic tokens map meaning onto primitives: "color-action-primary" points to a specific blue. Component tokens scope decisions to individual patterns. This layering keeps the system flexible without sacrificing consistency, but requires disciplined governance and clear documentation.</span>
</p>
</article>
<!-- Subscribe prompt -->
<div class="mt-6 rounded-xl border border-[var(--ws-paywall-border)] bg-[var(--ws-paywall-bg)] p-6 text-center">
<p class="text-lg font-semibold text-[var(--ws-paywall-text)]">Continue reading with Premium</p>
<p class="mt-1 text-sm text-[var(--ws-paywall-text-soft)]">Unlock this article and hundreds more with a subscription.</p>
<a href="#" class="mt-4 inline-block rounded-xl bg-[var(--ws-paywall-action-bg)] px-8 py-3 text-sm font-semibold text-[var(--ws-paywall-action-text)] transition hover:opacity-90">Subscribe</a>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
paywallminimalfadegradientsubscription
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Article paragraphs with last one fading. |
| prompt | Yes | Subscribe prompt card. |
Minimal paywall variant. Three paragraphs of article text where the last paragraph fades to transparent using a CSS gradient mask. Below, a simple subscribe prompt with heading, description, and CTA button.