Originally published on no-code.supply.
TL;DR
- The thing people remember about a website is rarely the font or the colour. It's one idea that only makes sense for that business.
- The best place to find that idea is the thing you sell: its numbers, its materials, its paperwork, its hours, its process.
- Seven examples from my own templates, one or two ideas each: lead with your one number, use odd, true numbers, borrow a format from print, let people use the product, show your working, let the photos carry the effect, draw the hard part.
- Most of these cost nothing. The words and the numbers do most of the work. The fancy effect is the last ten per cent.
- One test before you keep an idea: could it sit on a competitor's site? If yes, it's decoration.
The follow-up to "keep one thing that's only yours"
In the post about AI slop I said every site needs one thing nobody else has. A photo, a line, a tool, a number that's true.
That's easy to say and hard to do. So this post is the how.
I'm Lauri Lännenmäki, a design engineer, and I make website templates. Every template starts with a made-up business and one interaction people should remember. I pick that before any code exists. (More on how they're made.)
Below are seven of them, with what each one does and how you'd steal the idea for your own site. You don't need to buy anything, and you don't need to know what a shader is. Most of these work in plain HTML, in Framer, in Squarespace, wherever.
The rule: take it from the thing you sell
Here's the pattern across all seven. The memorable part isn't an effect that someone picked from a gallery. It comes from the business itself:
- a bike shop leads with how much the bike weighs
- a restaurant shows its fire's opening hours
- a fund that writes long essays looks like a printed journal
- a type foundry lets you type
- a photographer's photos behave like film
None of those would make sense on anyone else's site. That's why they stick.
The swap test
Before you keep an idea, ask two questions:
- Could it sit on a competitor's site, unchanged?
- Could it sit on a site in a completely different industry?
A glowing gradient blob passes both. So does a bento grid. That's decoration. A seat map of your dining room fails both, and that's the one you want.
1. Lead with your one number (Vela)
Vela is a pre-order site for a city e-bike. The hero doesn't open with a slogan. It opens with 15.8 kg, set huge, and then one line: "The stairs just lost the argument."
Vela: the weight is the headline, and the paragraph says what it means.
The paragraph under it translates the number into a day: light enough to carry up four floors with a coffee in your other hand. A spec becomes a picture in your head.
Further down, the range gets the same treatment. Instead of "90 km range" in a table, the page pins a city and rides through it as you scroll, from 07:40 to 22:15. "One charge. Sunrise to last orders."
And when you pick a frame colour, the whole page repaints in it, not just the bike.
Steal this:
- Find the one number that sums up why someone buys from you. Weight, time, price, distance, how many, how few.
- Make it the biggest thing on the page.
- Write the sentence under it that says what the number means in someone's day. "15.8 kg" is a spec. "Carry it up four floors with a coffee" is a reason.
2. Use odd, true numbers (Hearth)
Hearth is a tasting-menu restaurant in an old forge. There's a row of numbers about the fire:
- 0 gas lines in the building. Everything is cooked on wood, or not cooked at all.
- 11 m chimney, laid in 1893.
- 1.4 t of oak burned a month.
- 3 zones on the fire bed.
Hearth: four numbers nobody else could put on their site.
Compare that with the usual row of stats: 10x faster, 99.9% uptime, 500+ happy customers. Round numbers sound made up, because they usually are. Odd numbers sound measured. And a zero can say more than a big number.
The other detail I like: a status line at the top of the page that says when the fire is lit. "The fire is resting · lit tomorrow, 16:00." It's worked out from the opening days, in the restaurant's own time zone, so it's always right. It's opening hours, written as if the building were alive.
Steal this:
- Write down ten true numbers about your business. Keep the ones only you could have. The year the building went up beats "est. 2019".
- Turn your opening hours into a sentence that changes with the time of day. "Open now, until 18:00" is a start.
3. Borrow a format from print (Parallel)
Parallel is a venture fund that backs unfashionable infrastructure. Its headline is "The future is mostly plumbing." And the whole site is set like a printed quarterly.
Parallel: a fund website that reads like issue three of a journal.
The conventions come straight from paper:
- an issue number and "filed from Pittsburgh & Rotterdam" under the header
- a page number in the header that changes as you scroll: "p. 1, Front page", then "p. 2, The thesis"
- a contents list with dotted leaders and page numbers
- a drop cap, and footnotes that slide into the margin
- figures with numbers, like "Fig. 1, Two partners, one direction". It labels the two hairlines across the page, which drift apart and back as you scroll and never touch.
Even the portfolio table plays along: "Gaps in the numbering are companies in stealth."
The format does a job before anyone reads a word. A fund that publishes long essays looks like it thinks in years, not quarters. You believe the essay a little more because of how it's set.
Steal this:
- Think of a printed thing your customers already trust. A menu, a receipt, a field guide, a ticket, a spec sheet, a lab report, a recipe card.
- Borrow three of its conventions, not all of them. Page numbers and a drop cap are enough to read as "journal". Twelve of them and it's a costume.
4. Let people use the product (Ferro Type)
Ferro Type is a type foundry. Most font sites show a pangram and a price. This one lets you play with the font before you're asked to buy it.
Ferro Type: every slider is a real axis in the font file.
- The hero word reacts to your cursor. Each letter gets heavier the closer you are and wider depending on where you are.
- The type tester has a slider for each axis in the font file, and a button that copies the CSS for whatever you've made.
- The glyph inspector works with the arrow keys, "because we're not animals". Each glyph gets a note: "Flat apex, cut at 4°. A pointy one looked like it wanted to sell you something."
That last bit matters as much as the tester. The small copy is where a site gets its voice. Nobody reads a hero twice, but people do read the captions.
(The demo uses Roboto Flex, a free variable font from Google Fonts, standing in for the foundry's own. If you've never played with variable font axes, it's a good one to start with.)
Steal this:
- What's the smallest piece of your product you can put on the page? A calculator, a sample, a before and after, a quiz, a sound.
- Then write the small stuff, like tooltips, captions and empty states, in the voice of the person who made it.
5. Show your working (Datum)
Datum is a portfolio for a designer who also builds. There's an Inspect switch in the header (or press I). Turn it on and the page draws its own 12-column grid, the spacing between sections, the type specs, and a live measure of whatever's under your pointer. It reads all of that from the real layout, so it can't lie.
For someone who sells design and code, the site is the portfolio piece. Inspect mode just lets you check.
The rest of the page is honest in a quieter way:
Datum: prices on the page, and a week strip that shows how long each one takes.
- Prices are on the page. A two-week sprint is a fixed €8,500.
- Every project and service has a week strip: a row of cells split into design weeks and build weeks, on the same scale. You can see at a glance that one project took twelve weeks, and how much of that was building.
- The contact section says when the next opening is (2 February 2027) and how fast you'll get a reply.
Steal this:
- If you sell a service, show the process as a picture, not a paragraph. A row of boxes with weeks in them is enough.
- Put a price on the page, even a "from" price. Nothing feels more confident than a number.
- Say when you're next free. It answers the question people are too polite to ask.
6. Let the photos carry the effect (Halation)
Halation is a portfolio for a photographer who shoots in low light. Its effects all come from photography itself:
- The hero photo fades in from the dark under a fine grain.
- An "hours" viewer steps through twenty photos in the order of the clock. Each one dims to dark and the next develops back up, like a print in a tray.
- The series pull each frame into focus as you scroll, next to a lens distance scale that turns as you go.
Halation: one photo, the name, and a caption with a place and a time.
Everything else stays out of the way: wide capitals for the name, small captions, no decoration. The interface is quiet so the photos can be loud.
And look at the caption: "Kaamos. Pallas Fell, 12:40. No sunrise." A place, a time, and one fact. It does more for the photo than "Winter landscape" ever could.
(Under the hood, the effects run as WebGPU shaders over the real images, with a plain CSS version of each for browsers that can't. I didn't write those shaders. I asked for the effect, and the agent built it.)
Steal this:
- If your work is visual, find the effect in your own medium. Film develops, lenses focus, paint dries, wood gets sanded, a cake rises. That's a better animation than a fade-up that every site has.
- Caption every image with where, when and one detail.
- When the images are good, make the rest of the page quieter, not louder.
7. Draw the hard part (Good Dirt)
Good Dirt is a cracker brand that buys its grain from regenerative farms. It's the opposite of quiet: a yellow sunburst, illustrated boxes dropping into the hero, a headline that says "Crunch from the ground up."
But its best idea is a diagram.
Good Dirt: the why, drawn as a soil cross-section you dig through by scrolling.
"Regenerative farming" is the reason the brand exists, and it's hard to explain in a sentence. So the page doesn't try. It pins a cross-section of a field and digs 120 cm down as you scroll. Roots, fungi and worms grow in as you pass each layer. The chapters have names like "The underground internet" and "The night shift". No soil-science degree required.
The flavour cards do the voice trick from Ferro in a spec table:
- Tastes like: sourdough, sea spray, Sunday
- Pairs with: smoked salmon, cream cheese, a Tuesday
- Crunch: 9 / 10
Two real facts, then a joke in the last slot. It reads like a label and sounds like a person.
Steal this:
- Find the part of your story people nod along to without understanding. Turn it into a drawing they move through: layers, steps, a timeline, a map.
- Write your product specs as a table, and let one line in each be human.
Where to look for your own idea
You're not making a bike, a forge or a type foundry. That's fine. Every business has the same places to dig:
- Numbers. What you can measure: weight, hours, distance, years, batch numbers.
- Paperwork. The documents your trade already has: menus, invoices, tickets, certificates, plans, receipts.
- Tools and materials. What's on your desk or your workbench, and what it does: a lens, a fire, a ruler, dough.
- Time. When you're open, when things happen, how long the work takes, what changes by season.
- Process. The steps between "hello" and "done". People love seeing how something is made.
- Words. The jargon of your trade, explained once, kindly.
Pick one of these and push it further than feels comfortable. One idea, done properly, beats five done halfway.
If you work with an AI agent, it's surprisingly good at the brainstorm, as long as you give it the facts:
Here's what my business does, who buys from me and why: [two or three
sentences]. List 20 things that only exist in my line of work: numbers I
could measure, documents and forms my trade uses, tools and materials,
things that happen at a particular time of day or year, and steps in how
the work gets done. For each, suggest one way it could appear on my
website. Skip anything that could appear on a website in another industry.
Most of the list will be meh. You're looking for the one that makes you go "oh, of course". Then, if you build with an agent, write it into your AGENTS.md as a rule, so the agent doesn't smooth it away on the next change.
What you don't need
Look back at the "steal this" lists. Almost nothing on them needs code:
- a big number and a sentence about it
- ten true numbers
- three conventions from a printed thing
- prices and dates
- captions with a place and a time
- a spec table with one joke in it
That's writing and layout. The pinned scroll scenes and the shaders are the last ten per cent. They're fun, and the templates have them because templates are a showcase. But a site with the right number in the headline and no animation will be remembered. A site with a WebGL blob and "Elevate your workflow" won't.
Do the cheap version first. Add motion only if it still needs it.
FAQ
What if my business is boring?
Then you're in good company. Parallel's headline is literally about plumbing. "Boring" usually means "nobody has explained it well yet", and that's an opening. The numbers and the paperwork are often where boring businesses are most interesting.
Do I need animation for a site to stand out?
No. Every idea above has a version that's just text and layout. Motion helps when it shows something real, like a photo developing or a field being dug. It hurts when it's there because the builder had it.
Won't one idea make the site feel gimmicky?
Only if it's not true. A seat map is a gimmick at a restaurant that doesn't take bookings. Keep the idea tied to something real about you, and keep the rest of the page plain, and it reads as character, not a trick.
Can I use a template and still stand out?
Yes, if you change the parts that carry the idea. Swap in your own number, your own captions, your own paperwork. If you keep the template's idea, you'll have someone else's idea. I wrote more about that in the slop post.
Wrap-up
The sites people remember aren't the ones with the most effects. They're the ones where you can tell who made it and what they sell in a few seconds, because the page is built out of that.
So look at what you sell. Find the number, the paper, the tool, the hour or the step that only you have. Put it on the page, and push it.
If you want to see these seven ideas working, every template has a live demo: Vela, Hearth, Parallel, Ferro Type, Datum, Halation and Good Dirt.
