Emerald 4-Tier SaaS Pricing Table

{"summary": "A clean, light-mode SaaS pricing page in a confident emerald-on-near-white palette: a sticky translucent nav, a centered hero with a 'design prompts' badge and a Monthly/Annual billing toggle (Save 20% pill), and the signature 4-tier pricing block where Free / Pro / Team / Enterprise sit as one fused bordered table on desktop with the Pro column lifted, scaled, and ring-highlighted as 'Most popular'. Below: a minimal FAQ accordion and a gradient-emerald CTA card over a quiet footer. The transferable value is this exact look (emerald accents, soft-shadowed white cards on a faint grid background, Sora display + Inter body) plus the 4-tier 'fused-table-with-one-promoted-column' pricing structure.", "style": {"description": "Premium light SaaS aesthetic: near-white paper background (#fbfdfb) with a faint emerald dot/grid hero wash, emerald-600 (#059669) as the single accent across logo, primary buttons, highlighted plan ring, badges and the CTA gradient. Ink-toned neutral text scale (almost-black headings #0c1410 down to muted #7d8d85). Sora for display/headings (geometric, tight tracking), Inter for body/UI. Generous whitespace, rounded-2xl cards, two layered soft green-tinted shadows, hairline #e7efe9 dividers, tabular-nums on prices.", "prompt": "Light-mode SaaS visual system. Background paper #fbfdfb. Single accent = emerald family: emerald-50 #ecfdf5, 100 #d1fae5, 200 #a7f3d0, 300 #6ee7b7, 400 #34d399, 500 #10b981, 600 #059669 (primary), 700 #047857, 800 #065f46, 900 #064e3b. Neutral 'ink' text scale: ink-900 #0c1410 (headings), ink-700 #1f2a24 (body/strong), ink-500 #566a60 (secondary), ink-400 #7d8d85 (muted/captions). Hairline divider/border = 'line' #e7efe9. Typography: display font 'Sora' (weights 500/600/700, tight -tracking, used for logo, h1/h2, prices, plan names) and body font 'Inter' (weights 400/500/600) for everything else; antialiased. Shapes: rounded-2xl cards, rounded-lg buttons/badges, rounded-full pills and toggle. Shadows: two custom soft greens \u2014 card-pop = '0 1px 2px rgba(6,78,59,0.04), 0 8px 24px -12px rgba(6,78,59,0.12)' and a stronger card-pop-hi = '0 4px 12px rgba(6,78,59,0.08), 0 24px 48px -18px rgba(5,150,105,0.30)' reserved for the highlighted plan. Hero gets a faint emerald grid-bg: a 60% radial emerald glow at top-center over two 44px linear gradients (rgba(16,185,129,0.05)) for vertical+horizontal grid lines. Prices use tabular-nums. Overall feel: airy, trustworthy, modern-dev-tool, lots of negative space."}, "layout_and_structure": {"description": "Frameless, fully responsive single-column web page (not a fixed-frame mockup): centered max-w-6xl content, sticky translucent nav, centered hero with billing toggle, then the 4-tier pricing block, a centered FAQ accordion, and a gradient CTA + footer. The pricing tiers reflow from a fused 4-column bordered table on desktop -> 2 columns on tablet -> 1 stacked column on mobile.", "prompts": [{"part": "Sticky top nav", "prompt": "Sticky top header (sticky top-0, z-50), translucent paper background with backdrop-blur and a bottom hairline border. Inside a max-w-6xl row, 64px tall: left = brand lockup (emerald-600 rounded-lg square icon tile with a white sparkle glyph + 'Promptly' wordmark in Sora 700) followed by a horizontal nav of muted links (Library, Canvas, Docs, Pricing) where the current page link is ink-900; right = a ghost 'Sign in' text link and a solid near-black (ink-900) rounded-lg 'Start free' button. Nav links hide on mobile."}, {"part": "Hero / headline + billing toggle", "prompt": "Centered hero on the faint emerald grid-bg, bottom-bordered. Top: a rounded-full emerald-50 pill with emerald-200 border and emerald-700 text + lightning icon reading a proof stat ('12,000+ ready-to-use design prompts'). Then a large two-line Sora 700 headline ('Pricing that scales from first prompt to full product.'), ~46px desktop / 34px mobile, tight leading. Below, a muted Inter subhead paragraph (max-w-xl). Then the billing toggle: 'Monthly' label, a pill switch (emerald-600 track, white sliding knob), 'Annual' label with a small emerald-100 'Save 20%' pill. The toggle is a CSS-only checkbox driven via body:has(#billing:checked); the active side label is ink-900, the inactive side is muted, and prices swap (see prices)."}, {"part": "Pricing block (the core \u2014 4 tiers, fused table)", "prompt": "The signature element: four plan columns \u2014 Free / Pro / Team / Enterprise. On desktop (lg) they fuse into ONE rounded-2xl white card with an outer border and card-pop shadow, the four columns separated only by vertical hairline dividers (no per-card shadow/border). On tablet (md) it becomes a 2x2 grid of separate rounded-2xl white cards each with their own border + card-pop shadow; on mobile it stacks to 1 column. Each column has a fixed-min-height head block (min-height ~196px on desktop so dividers/checklists align) containing: a small uppercase wide-tracked Sora plan name, a 13px muted one-line description, the price, a sub-price caption, and a full-width CTA pinned to the bottom of the head (mt-auto). Price = 40px Sora 700 tabular numerals + a '/ month' (or '/ user / mo') caption; Monthly vs Annual values swap via the toggle (Pro $24->$19, Team $59->$47, Free always $0, Enterprise always 'Custom'). Below the head, a hairline top border then a small muted 'Includes' / 'Everything in X, plus' label and a checklist of 5-6 items, each an emerald check icon + ink-700 text. CTAs differ by tier: Free = outline 'Start for free'; Pro = solid emerald-600 'Start 14-day trial'; Team = soft emerald-50 'Start team trial'; Enterprise = white outline 'Contact sales'. The PRO column is the promoted one: 2px emerald-500 border, the stronger card-pop-hi shadow, lifted and slightly scaled up (lg:-my-3, scale-1.015), z-raised above neighbors, with a centered 'Most popular' emerald-600 pill badge straddling its top edge, emerald-toned plan name and 'Everything in Free, plus' divider. Enterprise column sits on a faintly tinted paper background. Under the block, a centered muted footnote line with a 'Compare every feature \u2192' emerald link."}, {"part": "FAQ accordion", "prompt": "Centered FAQ section on a white band, max-w-3xl. A Sora 700 'Questions, answered' heading, then a vertical list of native <details> accordion rows separated by hairline dividers (top+bottom rule on the group). Each summary is a 15px ink-900 question with a plus icon on the right that rotates 45deg when open; the open answer is muted 14px relaxed-leading text. First item open by default. 4 Q&As about generations, the coding-agent skill, rollover credits, and switching/canceling plans."}, {"part": "CTA card + footer", "prompt": "A standout CTA card: rounded-2xl with an emerald-600->emerald-700 diagonal gradient and emerald-200 border, centered white Sora heading ('Start designing in the next minute.'), an emerald-50 subline ('No credit card. 40 free generations and the full library on the house.'), and a white pill button with emerald-700 text + arrow icon. Below it, a footer row (border-top hairline): brand lockup on the left, a flex-wrap row of muted footer links (Library, Changelog, Privacy, Terms) in the middle, and a muted copyright on the right; stacks vertically on mobile."}]}, "special_ui_components": [{"component": "Monthly/Annual billing toggle (CSS-only)", "description": "A pill switch between 'Monthly' and 'Annual' labels with a 'Save 20%' pill; flipping it swaps every plan's displayed price and the active-side label color, with no JavaScript.", "prompt": "Build a pure-CSS billing toggle: a visually-hidden checkbox (#billing) plus a label-driven pill track (h-7 w-[50px], emerald-600 track, inner shadow) with a white round knob. Use the modern body:has(#billing:checked) selector to (a) translate the knob ~22px, (b) flip which label is ink-900 vs muted ink-400, (c) reveal the 'Save 20%' emerald-100 pill at full opacity, and (d) toggle display between .price-month and .price-year spans inside every plan so monthly prices hide and annual prices show. No JS \u2014 everything driven by :has()."}, {"component": "Highlighted 'Most popular' plan column", "description": "The Pro column is visually promoted out of the fused table: thicker emerald ring, deeper green shadow, lifted/scaled, raised z-index, and a badge straddling its top border.", "prompt": "Promote one pricing column: give it a 2px emerald-500 border (overriding the table's hairline dividers), the stronger card-pop-hi green shadow, relative z-10, and on desktop lift+enlarge it with negative vertical margin and a ~1.5% scale so it visually pops above the fused row. Anchor a small rounded-full emerald-600 uppercase 'Most popular' pill absolutely centered on its top edge (-top-3, left-1/2, -translate-x-1/2). Use emerald-700 for its plan name and an emerald-100 (vs neutral) divider above its feature list."}, {"component": "Fused-table pricing grid with aligned rows", "description": "Four plan columns that merge into a single bordered card on desktop using internal hairline dividers, with fixed-height head blocks so price rows, dividers, and checklists line up across columns.", "prompt": "Implement the pricing grid as grid-cols-1 -> md:grid-cols-2 -> lg:grid-cols-4. On lg, wrap the row in a rounded-2xl white card with one outer border + card-pop shadow and lg:gap-0, then strip each column's own border/shadow and add lg:border-r hairline dividers (last column none) so they read as one continuous table. To keep dividers and checklists aligned, give each column's header a fixed min-height (~196px on desktop, reset to 0 on mobile) and pin the CTA to the bottom with mt-auto. On md/sm, revert columns to individual rounded-2xl bordered cards with their own card-pop shadow."}, {"component": "Feature checklist rows", "description": "Per-plan 'Includes / Everything in X, plus' lists of emerald-check + label rows.", "prompt": "Under each plan's head divider, a tiny uppercase-ish muted label ('Includes' or 'Everything in <lower tier>, plus') followed by a vertical list (space-y-3) of 13.5px ink-700 rows, each a flex of a small emerald check icon (emerald-500, or emerald-600 inside the highlighted Pro column) + the feature text. 5-6 rows per plan, escalating value up the tiers."}], "special_notes": "This is a FRAMELESS, fully responsive real web page, not a fixed-canvas mockup: content is centered in a max-w-6xl container, the nav is sticky and translucent (backdrop-blur), and the pricing tiers reflow 4-col fused table -> 2-col -> 1-col across breakpoints. Reproduce the EXACT palette (paper #fbfdfb, emerald-600 #059669 accent, ink text scale #0c1410/#1f2a24/#566a60/#7d8d85, hairline #e7efe9) and fonts (Sora display, Inter body). Built with Tailwind (CDN) + iconify (Phosphor 'ph:' icons) and two custom green box-shadows; the billing toggle and FAQ accordion are pure CSS (no JS). The whole layout reads as one accent color on near-white with lots of whitespace \u2014 keep it restrained, do not add a second accent hue."}

---
"Emerald 4-Tier SaaS Pricing Table" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/emerald-4-tier-saas-pricing-table @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Emerald 4-Tier SaaS Pricing Table. \"Emerald 4-Tier SaaS Pricing Table\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/emerald-4-tier-saas-pricing-table @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-emerald-4-tier-saas-pricing-table",
      "license": "CC0-1.0",
      "attribution": "\"Emerald 4-Tier SaaS Pricing Table\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/emerald-4-tier-saas-pricing-table @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fbfdfb"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0c1410"
    },
    "card": {
      "$type": "color",
      "$value": "#fbfdfb"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#0c1410"
    },
    "primary": {
      "$type": "color",
      "$value": "#fbfdfb"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#059669"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#0c1410"
    },
    "accent": {
      "$type": "color",
      "$value": "#059669"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#eceeec"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#616664"
    },
    "border": {
      "$type": "color",
      "$value": "#d8dad8"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#fbfdfb"
    }
  },
  "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)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Emerald 4-Tier SaaS Pricing Table" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/emerald-4-tier-saas-pricing-table @ 6c6090694520. */
:root {
  --background: #fbfdfb;
  --foreground: #0c1410;
  --card: #fbfdfb;
  --card-foreground: #0c1410;
  --primary: #fbfdfb;
  --primary-foreground: #1c1917;
  --secondary: #059669;
  --secondary-foreground: #0c1410;
  --accent: #059669;
  --accent-foreground: #fafaf9;
  --muted: #eceeec;
  --muted-foreground: #616664;
  --border: #d8dad8;
  --destructive: #dc2626;
  --ring: #fbfdfb;
  --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);
}

/* powered by Styledex — https://styledex.dev */
/* "Emerald 4-Tier SaaS Pricing Table" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/emerald-4-tier-saas-pricing-table @ 6c6090694520. */
/** Tailwind theme extend for Emerald 4-Tier SaaS Pricing Table (superdesign-emerald-4-tier-saas-pricing-table) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fbfdfb",
        "foreground": "#0c1410",
        "card": "#fbfdfb",
        "primary": "#fbfdfb",
        "primary-foreground": "#1c1917",
        "secondary": "#059669",
        "accent": "#059669",
        "muted": "#eceeec",
        "border": "#d8dad8",
        "destructive": "#dc2626",
        "ring": "#fbfdfb"
      },
      "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)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Emerald 4-Tier SaaS Pricing Table" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/emerald-4-tier-saas-pricing-table @ 6c6090694520. */
@layer base {
:root {
  --background: #fbfdfb;
  --foreground: #0c1410;
  --card: #fbfdfb;
  --card-foreground: #0c1410;
  --primary: #fbfdfb;
  --primary-foreground: #1c1917;
  --secondary: #059669;
  --secondary-foreground: #0c1410;
  --accent: #059669;
  --accent-foreground: #fafaf9;
  --muted: #eceeec;
  --muted-foreground: #616664;
  --border: #d8dad8;
  --destructive: #dc2626;
  --ring: #fbfdfb;
  --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);
}
}