Electric-Blue Studio Pricing

{"summary": "A single-screen, frameless responsive pricing page for a dev-tool / prompt-library SaaS, built around a radical 'one plan, no tiers' message. An electric-blue accent pops against a near-black ink background; an oversized statement headline (half solid white, half hairline-outlined ghost type) anchors the top, and the pricing itself is a two-column grid: a large primary plan card with a monthly/annual toggle on the left and a stacked, slightly-rotated accent panel + optional power-up add-on toggles on the right. A clean two-column FAQ accordion and a mono-typeset footer close the page.", "style": {"description": "Electric, high-contrast dark dev-tool aesthetic: near-black ink canvas, one saturated electric-blue accent used surgically for CTAs, glows, knobs and checkmarks, and a typographic system that pairs a tight geometric grotesk for display with an all-caps tracked monospace for labels/metadata. Subtle dotted grain texture and a blue glow shadow give it a 'terminal meets premium product' feel.", "prompt": "Dark, electric, terminal-grade SaaS aesthetic. Palette: background ink #08090c (near-black), panel #0e1016, card surfaces #13161f, hairline borders/dividers #21242f (very low-contrast lines). Single accent: electric blue elec #2563ff (CTAs, knobs, focus glow), bright variant elecbright #4d7bff (hover, checkmarks, small accents), deep variant elecdeep #163fb0 (filled accent panel), and an icy tint ice #bcd1ff for soft highlights. Text is white at graded opacities: headlines pure white, body white/55, muted labels white/40-45, micro-print white/30-35. Typography: 'Space Grotesk' (weights 400-700) for all display and UI copy, set very tight (letter-spacing -0.04em, line-height ~0.9 on the giant headline); 'JetBrains Mono' (400-700) for ALL small labels, eyebrows, price-billing notes, nav items, footer links, and badges, always uppercase with wide tracking (0.1em-0.28em). Signature 'outline-type' treatment: transparent fill with a ~1.6px stroke in #4a5168 for the second line of big headlines (ghost/outlined word). Effects: a reusable 'elec-glow' = box-shadow 0 0 0 1px rgba(37,99,255,0.4), 0 24px 80px -28px rgba(37,99,255,0.65) on the accent button/card/logo; a faint dotted 'grain' = radial-gradient dots rgba(255,255,255,0.045) at 5px spacing over hero/accent panel; rounded-[26px] large radii on cards, rounded-full pills for buttons/nav/toggles; electric blue ::selection. Antialiased, smooth scroll. Overall mood: confident, premium, engineered, not playful."}, "layout_and_structure": {"description": "Frameless, single-column responsive web page (max content width 1280px, padded 20-32px) that flows top to bottom: sticky translucent nav, a centered hero headline + sub, a two-column pricing grid (primary plan card | accent panel + add-on power-ups) that collapses to one column on mobile, a fine-print tax note with an FAQ jump pill, a social-proof strip, a two-column FAQ accordion, and a footer. The pricing card grid is the visual + functional centerpiece. Cards reflow from the 2-column (1fr + fixed 360px) desktop layout down to a single stacked column on small screens; the feature checklist inside the card goes 2-col to 1-col.", "prompts": [{"part": "Sticky nav", "prompt": "Sticky top nav (z-50) with translucent ink background (bg-ink/85) + backdrop-blur and a hairline bottom border (#21242f), 68px tall, inner max-width 1280px. Left: brand lockup = an 8x8 rounded-lg electric-blue tile with elec-glow holding a white lightning icon, beside the wordmark 'PROMPTYARD' in bold tight grotesk (~17px). Center (hidden on mobile): mono uppercase nav links (~12px, tracking 0.14em, white/55) as rounded-full hover pills \u2014 'LIBRARY' with a small elecbright count badge (842), 'PRICING', 'FAQ', 'SHOWCASE'. Right: a ghost mono 'SIGN IN' link and a primary rounded-full electric-blue 'START FREE' button with elec-glow and an up-right arrow icon."}, {"part": "Hero / statement headline", "prompt": "Centered hero on a grain-textured section, generous vertical padding (pt-16 to 24, pb-20 to 28). Eyebrow row: mono 'PRICING' in elecbright, a short 10px hairline rule, then mono 'ONE PLAN. NO TIERS.' in white/45 \u2014 all uppercase, wide tracking. Massive two-line statement headline in tight grotesk (clamp(2.9rem,9.2vw,8.2rem), line-height 0.9): line 1 'Unlock the whole' in solid white, line 2 'prompt library' in the outline/ghost stroke style (transparent fill, #4a5168 stroke). Below, a centered max-w-xl subhead in white/55 (~15-16px) selling the value: '842 production-grade design prompts. One membership. Pour an idea in, ship a UI out, on the infinite canvas.'"}, {"part": "Pricing layout (the centerpiece)", "prompt": "Two-column responsive grid, max-w-[940px] centered, items-start, gap-6: lg:grid-cols-[minmax(0,1fr)_360px], collapsing to one column on mobile. LEFT = the primary plan card: rounded-[26px], bg #13161f, hairline border, elec-glow, with a thin electric gradient hairline along its top edge (transparent->elec->transparent). Inside, padded 28-40px: (1) a centered billing toggle row \u2014 'Monthly' label, a custom rounded-full switch (28x56px, elec/25 fill, elec/50 border, electric knob that slides 28px with a cubic-bezier transition), and 'Annual' label carrying a mono 'SAVE 25%' pill badge; (2) a giant centered price: small '$' (white/55), the number in clamp(3.6rem,12vw,6.4rem) grotesk that flips between '19' (monthly) and '15' (annual) via the toggle, and a '/mo' suffix (white/45); under it a mono billing line that flips 'BILLED MONTHLY \u00b7 $228/YR' <-> 'BILLED ANNUALLY \u00b7 $180/YR'; (3) a full-width rounded-full electric CTA 'GET FULL ACCESS' with arrow + elec-glow, then mono micro-print '14-DAY FREE TRIAL \u00b7 CANCEL ANYTIME'; (4) a hairline divider; (5) a feature checklist as a 2-col (sm) / 1-col (mobile) grid of items, each an elecbright check icon + white/80 label (All 842 prompts, New drops weekly, Infinite canvas, Coding-agent skill, Export to code, Priority support). RIGHT column = a stacked pair: an accent 'WHY ONE PLAN' panel (rounded-[26px], solid deep-blue #163fb0, faint grain overlay, gently rotated ~2.2deg on desktop) with a sparkle icon + mono kicker, a bold 19px reassurance line, a top-bordered footer row showing a big '842' next to mono 'PROMPTS UNLOCKED'; below it a 'POWER-UPS' add-on card (rounded-[26px], bg-card, hairline border) listing three optional toggle rows \u2014 'Team seats +$9/seat', 'Private prompts +$6/mo', '2\u00d7 gen credits +$12/mo' \u2014 each with an elecbright icon, label + mono price, and a small rounded-full switch that turns electric blue when on. This single-card-plus-add-ons model (not a 3-tier wall) is the defining pricing structure."}, {"part": "Fine print + FAQ jump + social proof", "prompt": "Below the grid (max-w-[940px]): a flex row pairing a mono micro-print tax/VAT note (white/35, ~10.5px) on the left with a rounded-full outline pill link 'STILL CURIOUS? READ THE FAQ' (border #21242f, bg panel, hover electric tint, down-right arrow) on the right; collapses to stacked + centered on mobile. Then a centered social-proof strip: a tiny electric dot + mono 'ALREADY SHIPPING WITH +6,400 BUILDERS' in white/40."}, {"part": "FAQ", "prompt": "FAQ section on a panel (#0e1016) background with a top hairline border, padded 80-112px vertical. Two-column grid lg:grid-cols-[0.9fr_1.1fr], gap-12/16. LEFT: mono 'FAQ' eyebrow (elecbright), a two-line display heading 'Questions, / answered.' (second line in the outline-stroke style), a white/50 supporting line in the warm brand voice ('Anything else, ping us and we'll sort it together. Real humans, fast replies.'), and a rounded-full electric 'TALK TO US' button with a chat icon. RIGHT: a divide-y accordion (hairline dividers, top+bottom borders) of native details/summary items; each summary is a 16-18px semibold question with an elecbright plus icon that rotates 45deg to an x when open; answers in white/55 (~14.5px). Items: 'Is there really just one plan?', 'Can I cancel whenever?', 'Do the prompts work in my coding agent?', 'What does the free trial include?' (first one open by default)."}, {"part": "Footer", "prompt": "Footer on ink (#08090c) with a top hairline border, padded ~56px. Top row (stacks on mobile): left = the same lightning-tile brand lockup + a white/40 tagline ('Idea in, shippable UI out. The prompt library for builders who move fast.'); right = a 3-column grid of mono uppercase nav links (white/45 -> white on hover): LIBRARY, PRICING, SHOWCASE, FAQ, CHANGELOG, CONTACT. A top-bordered bottom bar holds a mono copyright '\u00a9 2026 PROMPTYARD. ALL RIGHTS RESERVED.' (white/30) and right-aligned TERMS / PRIVACY links."}]}, "special_ui_components": [{"component": "Outline / ghost statement headline", "description": "The second line of each big heading is rendered as transparent-fill outlined type (only a hairline stroke), creating a layered solid-white-over-ghost-blue-grey effect that defines the page's typographic personality.", "prompt": "Apply an 'outline-type' class to the second line of display headings: color transparent, -webkit-text-stroke 1.6px #4a5168. Pair it with a solid pure-white first line in tight grotesk (letter-spacing -0.04em, line-height 0.9) so the headline reads as one solid word stacked over one hollow/outlined word."}, {"component": "Monthly/annual billing toggle with price flip", "description": "A custom rounded-full switch that toggles the plan card between monthly and annual, sliding an electric knob and swapping both the giant price number and the mono billing-period sub-line; annual is the default-on state and shows a 'SAVE 25%' badge.", "prompt": "Build a rounded-full toggle (h-7 w-56px, elec/25 fill, elec/50 border) with an electric-blue knob (h-5 w-5, elec-glow) that translateX(28px) on a .28s cubic-bezier(.4,0,.2,1) transition when toggled. Wire a 'price-flip' pattern: when the card has class 'toggled', hide the .price-q (monthly: 19, 'BILLED MONTHLY \u00b7 $228/YR') elements and show .price-a (annual: 15, 'BILLED ANNUALLY \u00b7 $180/YR'); also brighten the active Monthly/Annual label to white and dim the other to white/60 via JS. Show a mono 'SAVE 25%' pill next to the Annual label."}, {"component": "Add-on power-up toggles", "description": "Three optional feature switches that let users compose extra capacity on top of the single base plan \u2014 the interactive expression of the 'one plan + power-ups' pricing model.", "prompt": "Render a 'POWER-UPS' card with rows, each a clickable label containing an elecbright feature icon, a 13.5px name with an inline mono price (e.g. '+$9/seat'), and a small rounded-full switch (h-6 w-44px). On click, toggle an 'on' state: switch fill goes from white/15 to electric blue (bg-elec) with an elecbright border, and the knob translateX(20px) and brightens to solid white. Items: Team seats +$9/seat (users icon), Private prompts +$6/mo (database icon), 2\u00d7 gen credits +$12/mo (lightning icon)."}, {"component": "Rotated accent panel", "description": "A solid electric-deep-blue panel tilted a couple degrees to break the grid, reinforcing the single-plan value prop with a big '842 PROMPTS UNLOCKED' stat.", "prompt": "A rounded-[26px] panel filled solid deep electric blue (#163fb0) with a faint grain overlay, rotated ~2.2deg on large screens. Inside: a sparkle icon + mono 'WHY ONE PLAN' kicker, a bold 19px white value line, then a top-bordered row pairing a big display '842' with mono 'PROMPTS UNLOCKED'."}, {"component": "elec-glow accent treatment", "description": "A reusable electric-blue glow (subtle ring + large soft drop shadow) applied to all primary interactive/branded elements to give them a charged, light-emitting quality.", "prompt": "Define .elec-glow as box-shadow: 0 0 0 1px rgba(37,99,255,0.4), 0 24px 80px -28px rgba(37,99,255,0.65). Apply to the primary CTA buttons, the plan card, the toggle knob, and the lightning brand tile so they appear to glow against the near-black background."}, {"component": "Native details FAQ accordion", "description": "Lightweight, JS-free expand/collapse FAQ using native details/summary with a custom rotating plus-to-x icon.", "prompt": "Use native <details>/<summary> with the default marker hidden (list-style none, ::-webkit-details-marker display none). Style each summary as a flex row: question on the left, an elecbright plus icon on the right that rotates 45deg (becoming an x) when the item is [open], via a .25s ease transform. Separate items with hairline divide-y borders."}], "special_notes": "Frameless, fully responsive web page (no device chrome): content is centered in a max-w-1280px container with 20-32px side padding, and the pricing grid sits in a max-w-940px well. Layout reflows gracefully \u2014 the pricing grid goes from 2 columns (1fr + 360px) to a single stacked column, the in-card feature checklist goes 2-col -> 1-col, nav links and the annual 'SIGN IN' link hide on mobile, and the fine-print + FAQ-jump row stacks and centers. The nav is sticky with a translucent blurred background. The defining structural choice is a SINGLE-PLAN pricing model (one card with a monthly/annual toggle) augmented by optional add-on power-up toggles, deliberately rejecting the usual 3-tier comparison wall \u2014 copy throughout ('ONE PLAN. NO TIERS.', 'WHY ONE PLAN') reinforces this. Built with Tailwind (CDN config defining the custom color tokens), Iconify Phosphor (ph:*) icons, and Google Fonts Space Grotesk + JetBrains Mono. Brand voice in supporting copy stays warm and human ('ping us and we'll sort it together'). No em-dashes used in customer-facing copy."}

---
"Electric-Blue Studio Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/electric-blue-studio-pricing-188a8f @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Electric-Blue Studio Pricing. \"Electric-Blue Studio Pricing\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/electric-blue-studio-pricing-188a8f @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-electric-blue-studio-pricing-188a8f",
      "license": "CC0-1.0",
      "attribution": "\"Electric-Blue Studio Pricing\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/electric-blue-studio-pricing-188a8f @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#08090c"
    },
    "foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "card": {
      "$type": "color",
      "$value": "#08090c"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "primary": {
      "$type": "color",
      "$value": "#08090c"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0e1016"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "accent": {
      "$type": "color",
      "$value": "#0e1016"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#17181b"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a3a3a2"
    },
    "border": {
      "$type": "color",
      "$value": "#2b2b2e"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#08090c"
    }
  },
  "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 */
/* "Electric-Blue Studio Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/electric-blue-studio-pricing-188a8f @ 6c6090694520. */
:root {
  --background: #08090c;
  --foreground: #fafaf9;
  --card: #08090c;
  --card-foreground: #fafaf9;
  --primary: #08090c;
  --primary-foreground: #fafaf9;
  --secondary: #0e1016;
  --secondary-foreground: #fafaf9;
  --accent: #0e1016;
  --accent-foreground: #fafaf9;
  --muted: #17181b;
  --muted-foreground: #a3a3a2;
  --border: #2b2b2e;
  --destructive: #dc2626;
  --ring: #08090c;
  --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 */
/* "Electric-Blue Studio Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/electric-blue-studio-pricing-188a8f @ 6c6090694520. */
/** Tailwind theme extend for Electric-Blue Studio Pricing (superdesign-electric-blue-studio-pricing-188a8f) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#08090c",
        "foreground": "#fafaf9",
        "card": "#08090c",
        "primary": "#08090c",
        "primary-foreground": "#fafaf9",
        "secondary": "#0e1016",
        "accent": "#0e1016",
        "muted": "#17181b",
        "border": "#2b2b2e",
        "destructive": "#dc2626",
        "ring": "#08090c"
      },
      "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 */
/* "Electric-Blue Studio Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/electric-blue-studio-pricing-188a8f @ 6c6090694520. */
@layer base {
:root {
  --background: #08090c;
  --foreground: #fafaf9;
  --card: #08090c;
  --card-foreground: #fafaf9;
  --primary: #08090c;
  --primary-foreground: #fafaf9;
  --secondary: #0e1016;
  --secondary-foreground: #fafaf9;
  --accent: #0e1016;
  --accent-foreground: #fafaf9;
  --muted: #17181b;
  --muted-foreground: #a3a3a2;
  --border: #2b2b2e;
  --destructive: #dc2626;
  --ring: #08090c;
  --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);
}
}