Does it require an API key or paid service?

No. The section is HTML/CSS/JavaScript with inline SVG and system fonts; it has no image-generation or hosted-service dependency. Your agent can draft copy for review. Payment services you later connect are separate from this visual section.

Can the colors match my brand?

Yes. Retune the tier accents and headline highlighter through tokens while preserving the warm paper-and-ink structure. The featured ribbon/CTA stays yellow, and dark mode inverts paper/ink. Check contrast in both themes after changing colors.

How many plans and what happens on phones?

Two to four, with exactly one featured. The supplied default has three columns; adapt the grid and tilt rules for another count. Below 860px it becomes a centered single column with the tilted-card treatment intact. Check the final copy and count rather than assuming adding a card alone finishes the adaptation.

Can I use React/Vue or host-controlled dark mode?

Yes. Adapt the markup into your own stack, map the tiers over data and keep hover behavior in CSS. Contain the global reset/body/root rules as well as the prefixed classes. Remove the local toggle/controller if the host sets the theme attribute; the package supplies neither a full app nor billing logic.

Sketchnote Pricing

Previews from the publisher

Present two to four offers as notebook-like pricing cards, with one clearly featured plan. Sketchnote Pricing combines handwritten system type, tilted paper shapes, ink borders, hard shadows and a sticky-note ribbon. The bundled HTML is a visual section with an optional light/dark toggle; checkout and billing behavior must be connected separately.

What you get

A standalone HTML pricing-section template with inline CSS/JavaScript/SVG, system fonts and no fetched assets or library dependency. It runs without a build step or image-generation account. In an existing project, adapt the section into that stack’s component conventions instead of replacing the application.
A three-card default that can be adapted to two to four tiers, each with name, price/billing cycle, audience blurb, three to five outcome-focused features and a tier-specific action. Exactly one plan is featured by a yellow ribbon and CTA, not by scaling the card larger.
The full notebook treatment: warm paper/ink tokens, 2px borders, irregular corners, neighboring card tilts below 2.5 degrees, blur-free offset shadows, subtle headline highlighter and margin doodles. Card hover/focus lifts deepen the shadow; button press sinks the button. All typography, including prices and actions, uses the same system handwriting stack.
An optional “lights out” toggle with paper/ink inversion, brighter accents and a yellow ribbon in both themes. It follows the operating-system preference initially; a host application can remove the local toggle/script and set the theme attribute itself. Reduced motion removes transitions while leaving states usable.
A plain-language tuning/integration guide for accents, motion, plan count and responsive layout. The default section is capped at 1120px with a 34px gap and collapses below 860px to one centered column up to 460px. Component classes use skp prefixes, but raw template resets, body rules and root tokens are global and need isolation or adaptation when embedded.

Before you choose

Read the offers before judging the doodles: buyers should understand the audience, price/cycle, meaningful feature differences and next action for every tier. Keep the featured treatment clear without enlarging its card, and test the actual destination so the visual recommendation has a useful continuation.

Good fit

An indie product, creator tool or friendly consumer app wants pricing with a playful character.
A founder wants a memorable hand-drawn section without commissioning bespoke illustration.
An existing HTML, React, Vue or other framework site can adapt the markup, tokens and tier data into its own structure.

Not for

A formal enterprise presentation that does not suit handwritten tilted cards.
A complete billing system: billing-period switches, currency changes, subscriptions and payment checkout are not supplied.
A full landing-page builder, or a promise that raw template CSS can be pasted into any host without checking global-style effects.

How to use

You say

/sketchnote-pricing Make a playful hand-drawn pricing section for my garden app Sproutly: three plans, the middle one featured, with dark mode.

Provide product name, two to four tiers, approved prices/cycles, one-line audience blurbs, three to five features per tier, one featured plan and each action’s destination. Copy can be drafted from a product description for review, but confirm the actual offer before use.
Start from the bundled template and style grammar. Replace title, eyebrow, headline, support line, icons/doodles and cards rather than rebuilding its visual CSS from memory. Keep exactly one featured card, alternate neighboring tilts and choose meaningful SVG icons from the product’s world.
Match brand accents through tokens, keeping paper/ink unless a change is needed. The ribbon stays yellow. Retune one motion/style value at a time: 2px ink borders, no blurred shadows, rotations below 2.5 degrees and accessible text in both themes. Avoid replacing only important text with a corporate sans font.
For a different tier count, adapt cards and the grid as well as the alternating tilt rules. The raw template uses repeat(3,1fr), so a true two- or four-column wide row needs its column count updated; adding a fourth card and tilt rule alone does not change that grid. Recheck the single-column phone layout.
For standalone output, retain one inline offline file; an iframe can isolate its document styles. In an existing site, port tiers as data/components, keep hover states in CSS, and contain the template’s global reset/body/root tokens as well as its prefixed component rules. If the host owns theming, remove the local toggle/controller and drive data-skp-theme from the host.
Wire each CTA to the approved destination and replace #REPLACE links. This section displays offers; it does not create a checkout session, switch currencies or provision memberships. No API key, paid generation or new library is required by the standalone template; a host framework keeps its existing tooling.
Test each card/button hover, press and keyboard focus, both theme states, the featured ribbon and narrow layout below 860px. Inspect reduced-motion behavior, text contrast, long feature wrapping and host-style leakage. Report the actual integration and browser checks rather than treating the template’s source claim of prior verification as a new test.

Requirements and costs

You bring: Plan tiers: 2-4 tiers with name, price, blurb, 3-5 features, and the featured tier (the Skill can draft them from a product description)
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT