Champagne Noir Paywall

superdesignCC0-1.0Prompt onlyLanding · landingLuxury · luxuryExperimental · experimentalLight · lightMedium · mediumOrange · orangeVivid · vividSerif · serifGeneral · general

A premium dark subscription paywall: champagne/gold accents on near-black, an italic-serif value headline, a Free-vs-Pro feature table, a yearly(best-value)/monthly plan toggle, and a gold "Start free trial" CTA. Category: Pricing Pages. Prompt author listed upstream: Jason Zhou.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Champagne Noir Paywall" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/champagne-noir-paywall-65a2fd · 6c6090694520 · © Superdesign

Prompt

{
  "summary": "A luxe, trustworthy mobile subscription / premium-upgrade PAYWALL on near-black with champagne-gold accents: a brand + 'PRO' lockup with a close button, an editorial italic-serif value headline + subhead, a Free-vs-Pro feature comparison table with gold checks, two plan cards (Yearly with a 'Best value / save %' badge + selected state, and Monthly), a prominent gold 'Start free trial' CTA, a trust line, and small legal/restore footer links. Reads premium, not pushy.",
  "style": {
    "description": "Premium champagne / 'Champagne Noir': deep charcoal near-black + gold-to-champagne gradient accent, editorial serif display.",
    "prompt": "Deep charcoal near-black frame (#080706 / #0c0b0a / #161412 / #211d18 layers) with a warm gold→champagne gradient accent (champagne #f6e6bd → gold #d9b25f → brass #b98f3e); cream text #f4ecdd, warm-neutral mute #9b8f7c; gold-hairline dividers + a subtle gold radial top glow; the CTA carries a metallic top sheen (brushed-gold feel). Fonts: Cormorant Garamond (refined serif display, italic accent on a key word) + Plus Jakarta Sans (body/CTA). NO orange, NO green, NO slop-indigo — gold is the only accent."
  },
  "layout_and_structure": {
    "description": "Single mobile paywall, vertical: top bar, headline + subhead, comparison table, plan cards, CTA, trust line, footer links.",
    "prompts": [
      {"part": "Top bar", "prompt": "A brand logo tile + a gold 'PRO' pill on the left, a close (×) on the right."},
      {"part": "Headline", "prompt": "An editorial serif headline with one word in italic gold accent (e.g. 'Unlock your deepest focus.'), and a muted 1-2 line subhead."},
      {"part": "Comparison table", "prompt": "A 'What you get' matrix: feature rows with Free vs Pro columns; Pro = gold checkmarks, Free = muted dashes/checks."},
      {"part": "Plan cards", "prompt": "Two selectable plan cards: Yearly (with a 'Best value' badge + 'save %', a per-month price, a strikethrough anchor, billed-annually note, and a selected gold radio) and Monthly (price + radio). One is pre-selected."},
      {"part": "Primary CTA", "prompt": "A full-width gold gradient 'Start 7-day free trial' button (dark label), with a small 'Free for 7 days, then $X/year' line beneath."},
      {"part": "Trust + footer", "prompt": "A 'loved by 200k+' trust line with a small icon; a footer row of muted links: Terms · Privacy · Restore."}
    ]
  },
  "special_ui_components": [
    {"component": "Free-vs-Pro matrix", "description": "Feature comparison.", "prompt": "A two-column comparison table (Free / Pro) with gold check glyphs on the Pro side and muted marks on Free."},
    {"component": "Plan toggle cards", "description": "Yearly vs monthly.", "prompt": "Two bordered plan cards with radio selectors; the yearly card carries a 'Best value' badge and a selected gold ring."}
  ],
  "special_notes": "Gold is the only accent. Keep pricing math consistent (per-month = annual/12; verify the 'save %'). Editorial serif for the one headline, clean sans elsewhere. Responsive at 360/768."
}

---
"Champagne Noir Paywall" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Champagne Noir Paywall. \"Champagne Noir Paywall\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-champagne-noir-paywall-65a2fd",
      "license": "CC0-1.0",
      "attribution": "\"Champagne Noir Paywall\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f4ecdd"
    },
    "foreground": {
      "$type": "color",
      "$value": "#080706"
    },
    "card": {
      "$type": "color",
      "$value": "#f4ecdd"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#080706"
    },
    "primary": {
      "$type": "color",
      "$value": "#f6e6bd"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#080706"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#080706"
    },
    "accent": {
      "$type": "color",
      "$value": "#d9b25f"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e5ded0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5e5e5d"
    },
    "border": {
      "$type": "color",
      "$value": "#d2cbbe"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#f6e6bd"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Champagne Noir Paywall" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520. */
:root {
  --background: #f4ecdd;
  --foreground: #080706;
  --card: #f4ecdd;
  --card-foreground: #080706;
  --primary: #f6e6bd;
  --primary-foreground: #1c1917;
  --secondary: #080706;
  --secondary-foreground: #080706;
  --accent: #d9b25f;
  --accent-foreground: #fafaf9;
  --muted: #e5ded0;
  --muted-foreground: #5e5e5d;
  --border: #d2cbbe;
  --destructive: #dc2626;
  --ring: #f6e6bd;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Champagne Noir Paywall" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520. */
/** Tailwind theme extend for Champagne Noir Paywall (superdesign-champagne-noir-paywall-65a2fd) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f4ecdd",
        "foreground": "#080706",
        "card": "#f4ecdd",
        "primary": "#f6e6bd",
        "primary-foreground": "#1c1917",
        "secondary": "#080706",
        "accent": "#d9b25f",
        "muted": "#e5ded0",
        "border": "#d2cbbe",
        "destructive": "#dc2626",
        "ring": "#f6e6bd"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Champagne Noir Paywall" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/champagne-noir-paywall-65a2fd @ 6c6090694520. */
@layer base {
:root {
  --background: #f4ecdd;
  --foreground: #080706;
  --card: #f4ecdd;
  --card-foreground: #080706;
  --primary: #f6e6bd;
  --primary-foreground: #1c1917;
  --secondary: #080706;
  --secondary-foreground: #080706;
  --accent: #d9b25f;
  --accent-foreground: #fafaf9;
  --muted: #e5ded0;
  --muted-foreground: #5e5e5d;
  --border: #d2cbbe;
  --destructive: #dc2626;
  --ring: #f6e6bd;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}