Starter
For trying things out solo.
$0/ month, free forever
- 1 project
- Community support
- Basic analytics
- Export to CSV
Marketing: conversion and trust
Pricing, proof, FAQs, product cards, consent and the pages that close the sale. All brand names, people, prices and figures are placeholders.
Pricing cards
Three tiers, a highlighted plan with a badge, tick lists and a spring hover. Root .sf-pricing > .sf-plan (--featured). Sample prices.
Pro
For small teams shipping weekly.
$24/ month per seat
- Unlimited projects
- Priority email support
- Advanced analytics
- Custom domains
- Automations
Team
For growing orgs with process.
$59/ month per seat
- Everything in Pro
- Roles and permissions
- Audit log
- Single sign-on
- Onboarding call
Pricing billing toggle
Switch monthly/yearly and the prices roll digit by digit. Root .sf-billing[data-sf-billing-toggle]; prices are .sf-roll[data-sf-monthly][data-sf-yearly].
Save 20%
Starter
$0/ month/ month, billed yearly
Pro
$24/ month/ month, billed yearly
Team
$59/ month/ month, billed yearly
Pricing comparison table
Grouped feature rows, sticky header and first column, horizontal scroll on phones. Root .sf-plan-compare > .sf-plan-compare__table; highlight a column with .sf-plan-compare__hl.
| Compare plans | Starter$0 | Pro$24 / seatPopular | Team$59 / seat |
|---|---|---|---|
| Core | |||
| Projects | 1 | Unlimited | Unlimited |
| Storage | 1 GB | 50 GB | 1 TB |
| Custom domains | |||
| Automations | |||
| Collaboration | |||
| Seats included | 1 | Up to 10 | Unlimited |
| Roles and permissions | |||
| Shared workspaces | |||
| Audit log | |||
| Support | |||
| Support channel | Community | Email and chat | |
| Response time | Best effort | 1 business day | 4 hours |
| Onboarding call | |||
Swipe sideways to compare every plan.
Testimonial card
One quote with an avatar and role. Root .sf-testimonial.
“We moved our whole weekly review into Acme in an afternoon. People stopped asking where things live.”
Testimonial wall
Masonry wall using CSS columns. Root .sf-wall > .sf-testimonial (--lg for a bigger quote).
“We moved our whole weekly review into Acme in an afternoon. People stopped asking where things live.”
“I was skeptical of another tool. Two weeks later it is the only tab I keep pinned.”
“Our replies got shorter and kinder because the answers were finally one search away.”
“Small details like the way things settle into place make the team actually enjoy filing updates.”
“Clients get a clean link, I get my evenings back. That is the whole review.”
“Rollout was boring in the best way. No migration drama, no training sessions.”
Testimonial carousel
Scroll-snap track with arrows, dots and keyboard support. Root .sf-tcarousel[data-sf-tcarousel]; add data-sf-tcarousel-autoplay="5000" to auto-advance.
“We moved our whole weekly review into Acme in an afternoon. People stopped asking where things live.”
“I was skeptical of another tool. Two weeks later it is the only tab I keep pinned.”
“Our replies got shorter and kinder because the answers were finally one search away.”
“Clients get a clean link, I get my evenings back. That is the whole review.”
“Rollout was boring in the best way. No migration drama, no training sessions.”
Quote / pull-quote block
Large editorial quote, left-ruled or centered. Root .sf-pullquote (--center); wrap emphasis in <mark>.
Good software should feel like a calm room, not a busy street.
We shipped in half the time and slept twice as well.
Founder note
A personal letter card with a signature that draws itself. Root .sf-founder.
FAQ accordion
Native details accordion with category tabs and live search. Root .sf-faq[data-sf-faq-filter]; items carry data-cat.
7 questions
Can I change plans later?
Yes. Upgrade or downgrade whenever you like and the difference is prorated on your next invoice.
Do you offer refunds?
Sample answer: describe your refund window here, for example a 30 day money-back guarantee on new subscriptions.
Is there a discount for yearly billing?
Yearly plans are billed once and come with a discount over paying monthly. See the pricing toggle above for sample numbers.
How do I invite my team?
Open Settings, choose Members, then add emails. Invites expire after seven days if they are not accepted.
Can I export my data?
You can export everything as CSV or JSON from the account page at any time. Exports are emailed when they are ready.
Where is my data stored?
Sample answer: name your hosting regions and describe how backups work. Keep it short and specific.
Do you support single sign-on?
Single sign-on is available on the Team plan. Setup guides cover the common identity providers.
No answers match that search. Try a different word.
Team grid
Member cards that flip on hover or focus, or slide a bio up (--reveal). Root .sf-team > .sf-member. Placeholder people.
Reveal variant (.sf-member--reveal)
Avatar bios
Compact horizontal bios with tags. Root .sf-bios > .sf-bio.
Maya Rowe
Head of Operations
Maya joined to fix how the team shares work and stayed to build the habits around it. Before Acme she ran operations at a few small studios.
Theo Lin
Design lead
Theo cares about the small moments: how a button feels, how a list settles. He sketches everything on paper first.
Priya Shah
Staff engineer
Priya keeps the foundations boring and fast so everyone else can be creative on top of them.
Case study card
Cover, tag, headline, two metrics and a stretched link. Root .sf-case. Figures are samples.
Retail
How Brightside cut weekly reporting from a day to an hour
A small ops team replaced four spreadsheets with one shared view. Sample story.
-85%time on reports
4tools retired
Agency
Fieldnote onboarded ten clients without a single kickoff call
Templates and a calm client portal did the talking. Sample story.
10clients, one month
0kickoff calls
Results strip
Big numbers that count up when scrolled into view. Root .sf-results (--ink); numbers use data-sf-mc-count.
85%less time on weekly reporting (sample)
12xfaster onboarding (sample)
4.8average rating out of 5 (sample)
2,400teams on the waitlist (sample)
99.9%uptime target (sample)
30 mintypical setup time (sample)
3xmore replies (sample)
Blog card
Media, category, title, excerpt and meta with a stretched link. Root .sf-post inside .sf-posts.
Product
Introducing calmer notifications
A quieter default for everything that pings you, and why we think it is better.
Guides
A small team's guide to weekly reviews
Fifteen minutes, one doc, no meeting that should have been an email.
Company
What we changed after reading 300 support emails
Patterns we noticed, fixes we shipped, and the one we got wrong.
Category chips
Toggle chips that filter a target list (here the blog cards above). Root .sf-tagchips[data-sf-tagchip-filter="#selector"] > .sf-tagchip.
Blog list row
Compact archive row with a date, title, excerpt and arrow. Root .sf-post-list > .sf-post-row.
-
Oct 9
Introducing calmer notifications
A quieter default for everything that pings you, and why we think it is better.
-
Sep 28
A small team's guide to weekly reviews
Fifteen minutes, one doc, no meeting that should have been an email.
-
Sep 12
What we changed after reading 300 support emails
Patterns we noticed, fixes we shipped, and the one we got wrong.
-
Aug 30
Naming things: a field guide
Ten rules for names that still make sense a year later.
Featured post
Two-column hero post that stacks on mobile. Root .sf-post-featured.
Featured
The year we stopped adding features and started removing them
A look back at what we cut, what customers noticed, and what it did to our support queue. Placeholder copy.
Read the postProduct card
Media placeholder, badge, wishlist heart (data-sf-wishlist, remembered in localStorage) and a quick add button with confetti (data-sf-quick-add). Root .sf-product.
Cart items: 0
New
Desk Lamp Mini
Warm light, small footprint
$48
-20%
Linen Tote
Everyday carry
$32 $40
Ceramic Mug Set
Set of two
$28
Review stars
Fractional display stars via --sf-rating (.sf-review-stars, --sm/--lg), an input (.sf-rate, radios) and a summary (.sf-rsum).
4.6Based on 128 reviews (sample)
Review item
Avatar, stars, title, body and a helpful toggle. Root .sf-review.
Lena B. Verified buyerOctober 2, 2026
Exactly what I hoped for
Arrived quickly, easy to set up, and the build feels solid. I would happily order another. Sample review text.
Omar M.September 19, 2026
Great, with one small gripe
Does the job nicely. I wish the packaging were smaller, but the product itself is great. Sample review text.
Countdown timer
Flip digits for days, hours, minutes and seconds. Root .sf-countdown[data-sf-countdown]: an ISO date or a relative value like +2d6h. Fires soft:countdown-end.
Cookie / consent banner
Bottom banner with preference switches; the choice is remembered in localStorage under the attribute value. Shown static here; drop --static to pin it to the viewport bottom. Fires soft:consent.
Contact form block
Info column plus a form with inline validation and an animated success state. Root .sf-contact; form [data-sf-contact-form]. Listen for soft:contact-submit (cancelable) to send for real.
Let's talk
Questions about plans, a custom setup or just how things work? We reply within one business day.
- hello@acme.exampleEmail
- +1 (555) 010-0199Mon to Fri, 9 to 5
- 12 Example StreetPlaceholder address
Message sent
Thanks for reaching out. We will get back to you within one business day.
App store / download buttons
CSS-made download buttons with neutral wordmarks and abstract glyphs (--ring, --diamond, --bars). Root .sf-store (--light, --outline, --sm).
Trust badges
Icon badges for reassurance near a buy button. Root .sf-trust > .sf-trust__item. Replace the copy with claims you can back up.
- Secure checkoutEncrypted from cart to confirmation
- Cancel anytimeNo contracts, no hidden fees
- Privacy firstWe never sell your data
- Friendly supportReal people, quick replies
Guarantee strip
Dark strip with a slowly rotating seal. Root .sf-guarantee.
30d
Try it risk free for 30 days
If Acme is not right for you, tell us within 30 days and we will refund your first payment, no questions asked. Placeholder terms.
Video testimonial card
Poster with a springy play button that opens a dialog player shell (simulated progress). Root .sf-vtest; trigger [data-sf-video="dialogId"]; dialog .sf-vmodal.
“It felt like we had always worked this way.”
Maya R., Operations lead, Brightside Co.“Clients finally understand what we are doing.”
Theo L., Founder, Fieldnote StudioPress / as seen in strip
Text wordmarks (invented names) in a centered row or an endless marquee that pauses on hover. Root .sf-press (--marquee).
As seen in
- Harbor Times
- Brightwire
- The Quarterly
- fieldnote
- pixelpress
- Harbor Times
- Brightwire
- The Quarterly
- fieldnote
- pixelpress
404 page block
Animated error block: a zero with wandering eyes. Root .sf-404.
We looked everywhere
The page you wanted has moved, been renamed, or never existed. Let's get you back on track.
Coming soon page block
Morphing blobs, a launch countdown and an email capture with validation. Root .sf-soon; form [data-sf-soon-notify].
Something calm is on its way.
Acme is almost ready. Leave your email and we will let you know the moment the doors open.
You are on the list. Talk soon.
Build progress72% (sample)
Legal / document layout
Sticky table of contents that tracks your scroll, a readable prose column and a last-updated stamp. Root .sf-legal; TOC nav[data-sf-toc]; body .sf-legal__prose.
Terms of Service
Sample text only. This is not legal advice and not a real agreement.
1. Overview
This is placeholder text for a legal page. Replace it with your real terms. It is here to show line length, heading rhythm and the sticky table of contents.
Lorem ipsum style filler continues so the section has some body: the point of this block is the layout, not the legal content. Keep paragraphs short and plain, and prefer lists for anything a reader needs to scan.
2. Your account
You are responsible for keeping your login details safe. Tell us promptly if you think someone else has used your account. Sample clause.
Lorem ipsum style filler continues so the section has some body: the point of this block is the layout, not the legal content. Keep paragraphs short and plain, and prefer lists for anything a reader needs to scan.
3. Acceptable use
Please use the service lawfully and considerately. Do not attempt to disrupt it or access data that is not yours. Sample clause.
Lorem ipsum style filler continues so the section has some body: the point of this block is the layout, not the legal content. Keep paragraphs short and plain, and prefer lists for anything a reader needs to scan.
- Be kind to other people and to the service.
- Keep your credentials private.
- Report problems instead of working around them.
4. Payments and refunds
Fees are charged in advance for each billing period. Describe your refund and cancellation policy plainly here. Sample clause.
Lorem ipsum style filler continues so the section has some body: the point of this block is the layout, not the legal content. Keep paragraphs short and plain, and prefer lists for anything a reader needs to scan.
5. Privacy
Explain what you collect, why, and how long you keep it. Link to your full privacy notice. Sample clause.
Lorem ipsum style filler continues so the section has some body: the point of this block is the layout, not the legal content. Keep paragraphs short and plain, and prefer lists for anything a reader needs to scan.
6. Contact
Questions about these terms? Write to legal@acme.example. Placeholder address.
Lorem ipsum style filler continues so the section has some body: the point of this block is the layout, not the legal content. Keep paragraphs short and plain, and prefer lists for anything a reader needs to scan.
Pricing calculator
Sliders with a live, rolling total. Root .sf-calc[data-sf-calc]; each slider has data-sf-calc-input, data-rate and data-free. Sample rates.
150
1,000100,000
- Platform fee
- Seats (first one free)
- Requests (first 10,000 free)
Estimated total
$0/ month
Referral / share card
Invite card with progress, a copy-link button that toasts, and share targets. Root .sf-referral; button [data-sf-copy-link="#inputId"]; native share via [data-sf-share].