Editorial Cream + Ink Two-Path SaaS Pricing

{"summary": "A warm, editorial SaaS pricing page for a design/AI tool that splits the page into two paths: a wide self-serve area with two tiers (Starter + a highlighted Pro card) and a narrow dark Enterprise contact-sales panel. Cream 'paper' background, a Fraunces serif display headline with an italic colored accent, an electric-blue brand color, and a gold accent reserved for Enterprise. A monthly/annual toggle live-swaps prices, and a two-column FAQ grid + minimal footer close the page.", "style": {"description": "Warm editorial-meets-dev-tool aesthetic: an off-white cream canvas, a tall serif display headline mixed with a clean grotesque body, an electric cobalt-blue accent for actions/highlights, near-black 'ink' surfaces for the premium Enterprise panel, and a muted gold reserved exclusively for Enterprise feature checks. Soft 2xl-rounded white cards on the cream, hairline beige borders, and a single deep drop-shadow on the popular plan to lift it off the page.", "prompt": "Use a warm cream/paper background (#f6f4ef) with pure-white cards (#ffffff) and hairline borders in a beige line color (#e7e3da). Text uses an 'ink' ramp: near-black #101418 for headings, #1b2127 for the dark Enterprise panel, body text #2a323b, muted text #5a6671, and faint labels #7c8893. The primary brand accent is electric cobalt blue with a ramp: #eef3ff (tint), #dbe5ff, #3858f6 (base), #2c46d6 (hover), #2438ad; use brand-50 chips, brand-500 fills/checks, brand-600 for the italic accent and links. Reserve a muted gold #c8a45a only for the Enterprise feature checkmarks. Typography: Fraunces (serif, 'display') for the H1, plan names, section H2s and the logo wordmark, weights 400-700 with a true italic for the colored accent word; Inter (sans, weights 400/450/500/600/700) for all body, nav, features, buttons, and prices. Apply tabular + lining numerals on price numbers. Surfaces are rounded 2xl (cards) and full pill radius (buttons, badges, toggle). The popular plan card gets a 2px near-black border and a soft long drop-shadow (0 20px 50px -22px rgba(16,20,24,.45)); all other cards use 1px beige borders and no shadow. Generous whitespace, antialiased rendering, smooth scroll."}, "layout_and_structure": {"description": "A frameless, fully responsive web page (no browser chrome), max-width 7xl content column centered with px-6 gutters. Top is a sticky translucent nav; then a centered hero; then the pricing block built as a 12-column split (8 cols of self-serve cards beside a 4-col dark Enterprise panel) with a centered billing toggle above it; then a two-column FAQ section on a white band; then a minimal footer. Cards reflow responsively: the self-serve pair is 2-up on >=sm and stacks to 1; the 12-col split goes side-by-side on >=lg and stacks the Enterprise panel below on smaller screens. Overall the pricing grid behaves like a 3->2->1 column reflow as the viewport narrows, with the sticky nav persisting.", "prompts": [{"part": "Sticky nav", "prompt": "A sticky top header (z-50) with a translucent paper background (bg-paper/85) and backdrop-blur plus a hairline bottom border. Inside a centered max-w-7xl row, h-16: left cluster has a logo (a rounded-lg near-black square holding a white sparkle icon + a Fraunces serif wordmark) followed by left-aligned nav links (Library and Solutions with caret-down, Docs, Pricing) in ~14px Inter, muted ink-500 that darken on hover, with the current 'Pricing' link in solid ink. Right side: a 'Log in' text link (hidden on small screens) and a pill 'Start free' button in near-black with paper text."}, {"part": "Hero / headline", "prompt": "Centered hero on the cream background, generous top padding (pt-16 to pt-24). A small pill badge with a tiny blue status dot reads '12,000+ vetted design prompts'. Below, a large Fraunces serif H1 (~44px mobile to ~58px desktop, tight leading 1.05) reading 'Pricing that scales with your craft' where the trailing phrase is set in italic brand-600 blue. A muted single-paragraph subhead (~16-17px, max-w-xl) explains the two paths: start solo self-serve, or bring the whole org onto a tailored Enterprise rollout."}, {"part": "Billing toggle", "prompt": "Centered above the pricing grid: a 'Monthly' label, a pill toggle switch (h-7 w-12) with a sliding white knob that animates on a cubic-bezier ease, and an 'Annual' label accompanied by a small brand-50 'Save 20%' chip in brand-600. Active period label is solid ink; inactive is muted. The toggle is interactive."}, {"part": "Pricing layout (two-path 12-col split)", "prompt": "The core pricing block is a 12-column grid (1-col stacked on mobile). LEFT PATH spans 8 cols and is the self-serve lane: a small uppercase tracked label 'Self-serve' with a user-circle icon, then a 2-up card grid (stacks to 1 on mobile). Card 1 'Starter': Fraunces plan name, a one-line description, a big price ('$9' annual / '$12' monthly) with a '/mo' suffix and a 'billed annually/monthly' note, a 4-item feature list with brand-500 check icons (200 generations/month, full library access, 1 canvas, community support), pushed to the bottom an outline pill 'Start free' button that inverts to near-black on hover. Card 2 'Pro' (highlighted): a 2px near-black border + long soft shadow, an absolutely-positioned near-black 'Most popular' pill tab overlapping the top edge, larger price ('$23' annual / '$29' monthly), a 5-item feature list (Unlimited generations bolded, unlimited canvases & folders, coding-agent skill for Claude/Cursor, export to React/HTML/Figma, priority support), and a solid brand-blue pill CTA 'Start free trial'. Below the two cards, a muted helper line: 'Need more seats? Add a team workspace' with a brand-blue underlined link. RIGHT PATH spans 4 cols: an uppercase label 'For teams & orgs' with a buildings icon, then a full-height dark Enterprise panel (near-black ink-900 bg, paper text, rounded-2xl, p-8): Fraunces 'Enterprise' name, a muted descriptive paragraph, a prominent paper-colored pill 'Contact sales' CTA with an arrow icon that nudges right on hover, a thin white/10 divider, an 'Everything in Pro, plus' label, a 5-item feature list with GOLD check icons (SSO/SAML & SCIM, shared brand kits & design tokens, RBAC & audit log, dedicated success manager, 99.9% uptime SLA), and pinned to the bottom a small trust line with a shield icon: 'SOC 2 Type II \u00b7 GDPR ready'."}, {"part": "FAQ", "prompt": "A 'Common questions' section on a white card band separated by a top hairline border. Centered Fraunces H2 (~32-38px). Below, a two-column grid (1-col on mobile) of four Q&A blocks; each question is a bold ~15px Inter line led by a blue question-mark icon, with a muted ~14px answer beneath. Questions cover: what counts as a generation, switching plans, the free plan, and how Enterprise billing works."}, {"part": "Footer", "prompt": "A minimal footer on the cream background: a top hairline border, then a row (stacks on mobile) with the logo mark + Fraunces wordmark on the left, a horizontal set of muted links (Library, Docs, Changelog, Privacy) that darken on hover in the middle, and a faint copyright '\u00a9 2026 Promptcraft, Inc.' on the right."}]}, "special_ui_components": [{"component": "Monthly/Annual billing toggle with live price swap", "description": "A pill switch whose white knob slides with a cubic-bezier transition; flipping it recolors the active period label, retitles every card's 'billed annually/monthly' note, and live-swaps each price number between its monthly and annual value.", "prompt": "Build a pill toggle (h-7 w-12, full radius) with an absolutely-positioned white knob (h-6 w-6) that translates 100% on the 'on' state via a .22s cubic-bezier(.4,0,.2,1) transition. On click, flip a boolean: toggle the active class, recolor the 'Monthly' vs 'Annual' labels (solid ink for active, muted for inactive), set each price element's text from its data attributes (data-m monthly / data-a annual, prefixed with '$'), and rewrite each period note element to 'billed annually' or 'billed monthly'. Default state is Annual on. Wire it so prices animate instantly with no layout shift (tabular numerals)."}, {"component": "Highlighted 'Most popular' plan card", "description": "The Pro card is visually elevated with a thick dark border, a deep soft shadow, and an overhanging pill badge so it reads as the recommended self-serve tier.", "prompt": "Give the recommended card a 2px near-black border (vs 1px beige on siblings) and a long soft drop-shadow (0 20px 50px -22px rgba(16,20,24,.45)). Add an absolutely-positioned pill badge overlapping the top edge (-top-3, left-7) in near-black with paper uppercase tracked text reading 'Most popular'. Keep the same rounded-2xl card shape and internal layout as the other tier so only the emphasis differs."}, {"component": "Dark Enterprise contact-sales panel", "description": "A full-height near-black panel set apart from the light self-serve cards, using a paper-colored CTA and gold feature checks to signal premium, contact-sales tier.", "prompt": "Create a full-height (h-[calc(100%-2rem)]) flex-column panel with a near-black ink-900 background, paper text, rounded-2xl, p-8. Stack: serif 'Enterprise' title, muted paragraph, a paper/white pill 'Contact sales' CTA with a right-arrow icon that translates right on hover, a thin white/10 horizontal divider, an uppercase 'Everything in Pro, plus' label, a feature list using GOLD (#c8a45a) check icons against paper/90 text, and an mt-auto bottom trust line (shield icon + 'SOC 2 Type II \u00b7 GDPR ready') pinned to the panel base."}, {"component": "Feature list rows with icon checks", "description": "Consistent feature rows across all plans using small bold check icons, blue on light self-serve cards and gold on the dark Enterprise panel.", "prompt": "Render each feature as a flex row with a small (15px) bold check icon top-aligned and shrink-0, then ~13.5-14px text. Use brand-500 blue checks on the light cards and gold checks on the dark Enterprise panel. Allow inline emphasis (e.g. bold 'Unlimited') inside a row, and keep ~12px vertical rhythm (space-y-3 / space-y-3.5) between rows."}], "special_notes": "Render as a FRAMELESS, fully responsive web page (no browser window chrome). The pricing layout is the hero of the page: a two-path 12-column split (8-col self-serve lane + 4-col dark Enterprise panel) that stacks vertically on smaller screens, with the self-serve cards reflowing 2->1. Treat the whole card grid as a 3->2->1 column reflow with a persistent sticky translucent nav. Icons are Phosphor (iconify ph:* set). The defining transferable moves to preserve: cream 'paper' canvas + white cards, Fraunces serif headline with one italic blue accent word, electric cobalt blue actions, a single highlighted plan (dark border + shadow + overhanging badge), and a near-black Enterprise panel with gold checks and a contact-sales CTA instead of a price. No em-dashes in copy; use a middot in the trust line."}

---
"Editorial Cream + Ink Two-Path SaaS Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-cream-ink-two-path-saas-pricing-3dee65 @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Editorial Cream + Ink Two-Path SaaS Pricing. \"Editorial Cream + Ink Two-Path SaaS Pricing\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-cream-ink-two-path-saas-pricing-3dee65 @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-editorial-cream-ink-two-path-saas-pricing-3dee65",
      "license": "CC0-1.0",
      "attribution": "\"Editorial Cream + Ink Two-Path SaaS Pricing\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-cream-ink-two-path-saas-pricing-3dee65 @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f6f4ef"
    },
    "foreground": {
      "$type": "color",
      "$value": "#101418"
    },
    "card": {
      "$type": "color",
      "$value": "#f6f4ef"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#101418"
    },
    "primary": {
      "$type": "color",
      "$value": "#f6f4ef"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#101418"
    },
    "accent": {
      "$type": "color",
      "$value": "#e7e3da"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#e7e5e1"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#646669"
    },
    "border": {
      "$type": "color",
      "$value": "#d4d2ce"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#f6f4ef"
    }
  },
  "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 */
/* "Editorial Cream + Ink Two-Path SaaS Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-cream-ink-two-path-saas-pricing-3dee65 @ 6c6090694520. */
:root {
  --background: #f6f4ef;
  --foreground: #101418;
  --card: #f6f4ef;
  --card-foreground: #101418;
  --primary: #f6f4ef;
  --primary-foreground: #1c1917;
  --secondary: #ffffff;
  --secondary-foreground: #101418;
  --accent: #e7e3da;
  --accent-foreground: #1c1917;
  --muted: #e7e5e1;
  --muted-foreground: #646669;
  --border: #d4d2ce;
  --destructive: #dc2626;
  --ring: #f6f4ef;
  --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 */
/* "Editorial Cream + Ink Two-Path SaaS Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-cream-ink-two-path-saas-pricing-3dee65 @ 6c6090694520. */
/** Tailwind theme extend for Editorial Cream + Ink Two-Path SaaS Pricing (superdesign-editorial-cream-ink-two-path-saas-pricing-3dee65) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f6f4ef",
        "foreground": "#101418",
        "card": "#f6f4ef",
        "primary": "#f6f4ef",
        "primary-foreground": "#1c1917",
        "secondary": "#ffffff",
        "accent": "#e7e3da",
        "muted": "#e7e5e1",
        "border": "#d4d2ce",
        "destructive": "#dc2626",
        "ring": "#f6f4ef"
      },
      "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 */
/* "Editorial Cream + Ink Two-Path SaaS Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/editorial-cream-ink-two-path-saas-pricing-3dee65 @ 6c6090694520. */
@layer base {
:root {
  --background: #f6f4ef;
  --foreground: #101418;
  --card: #f6f4ef;
  --card-foreground: #101418;
  --primary: #f6f4ef;
  --primary-foreground: #1c1917;
  --secondary: #ffffff;
  --secondary-foreground: #101418;
  --accent: #e7e3da;
  --accent-foreground: #1c1917;
  --muted: #e7e5e1;
  --muted-foreground: #646669;
  --border: #d4d2ce;
  --destructive: #dc2626;
  --ring: #f6f4ef;
  --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);
}
}