Startup Website Rules
A comprehensive set of rules for building high-converting, trustworthy, and effective startup websites. Apply these when creating, reviewing, or iterating on landing pages and marketing sites.
When to Use
- Building a new startup landing page or marketing site
- Reviewing an existing homepage for effectiveness
- Improving conversion, clarity, or trust signals on a site
- Auditing copy, CTAs, layout, animation, or social proof
1. First Impressions & The 5-Second Rule
- The clock starts immediately. You have roughly 5 seconds to make a killer first impression when someone clicks on your site.
- Capture attention. If you don't capture the user's attention in that initial window, it does not matter how good the rest of your website is.
- The "Don't Make Me Think" rule. Users should not have to work to figure out what you are trying to tell them. The hierarchy and focus must be obvious immediately.
- Don't hide the value. Avoid making users "scroll to explore" without giving them information upfront. Users have short attention spans and need to know why they should stay immediately.
- Be descriptive immediately. Headlines should clearly explain what the product is and who it is for. Don't rely on vague slogans; start with concrete descriptions.
- Match the "vibe" to the goal. Ensure the visual tone (e.g., uplifting vs. bossy) matches how you want the user to feel about their future success with the product.
- Don't give instructions on how to use a website. Users know how to use a browser. If you have to tell them to "scroll," the design is likely not intuitive enough.
2. Core Messaging & Value Proposition
Answer the "Big 4" Questions Immediately
When a user lands on the site, they need to know:
- What is this?
- Is it for me?
- Does it work?
- Is it credible?
Clarity Over Cleverness
- Be literal and specific. Avoid vague, high-level marketing headlines (e.g., "AI reimagined for Excel"). If you use a cute headline, immediately follow it with a literal sub-headline that explains exactly what the product does.
- Prioritize clarity. Summarize the entire "above the fold" experience into one clear headline, one byline, and one call to action (CTA).
- Avoid "clever" if it means "confusing." Do not sacrifice clarity for a witty tagline. If a tagline has multiple meanings (e.g., "Game Development" meaning "to game" vs. "building games"), it causes friction.
- Avoid jargon. Avoid vague or fluffy language (e.g., "bridge the gap," "usage optimization pipeline") that doesn't explain what the product actually does. Even if the product is technical, complex jargon can make users feel like the product isn't for them.
- Be explicit. If you are selling a specific service (like cleaning), say it clearly. Don't use metaphors that confuse the offering.
- Relevance to audience. If your service is location-dependent (e.g., only available in a specific region), state that early so users from other regions know immediately.
Messaging Strategy
- Speak the user's language. Do not use internal jargon or concepts you invented (e.g., "Progressive discovery") unless your users already use those terms. Explain the "Old World" (current problems) vs. the "New World" (your solution).
- Use customer language. Talk to existing users, ask how they describe the product, and use their exact phrasing on the homepage to resonate with the Ideal Customer Profile (ICP).
- Avoid defining yourself by others. While comparisons can be useful (e.g., "Cursor for X"), relying too heavily on other products prevents you from owning your own identity.
- Lead with the positive. Start by explaining what you do, rather than what the user shouldn't do. Negative framing (e.g., "Stop doing X") is less informative.
- Don't ask for money too early. Explain the value and what the product is before asking a user to "Subscribe" or "Buy."
- Answer "Why Now." For AI startups, explain the new capabilities that make the product possible today (e.g., LLMs, open-source models).
- Define the problem and solution. Users need to understand exactly what problem you solve and how you solve it immediately.
Focus
- Focus on one primary concept. Avoid presenting too many products or value propositions at once (e.g., asset generator vs. game builder vs. avatar animation). This confuses the user about where to click.
- Be opinionated with the user journey. Decide on the main KPI or outcome you want (e.g., "Try Beta") and drive traffic there. Move secondary products or links to other pages to avoid diluting focus.
- Specifics over generics. If selling a generic tool (like "workflows"), focus on a specific problem or use case. Users don't buy "workflow software"; they buy solutions to specific problems.
- Use concrete claims (e.g., "30% cheaper," "25% faster") rather than vague promises, but ensure they are believable.
3. Product Demonstration & Clarity
- Show the actual product. Do not rely solely on vague or generic illustrations. Use screenshots, a collection of screenshots, or a short (2-minute) video walkthrough to anchor the user and show them exactly what the tool looks like and how it works.
- Be literal, not just "marketing speak." Sub-headlines should explain literally what the product is and what the user can do with it (e.g., "Unified supplier inbox" is better than generic phrases like "Focus on your idea").
- Don't hide value behind a login. Allow users to experience the "aha moment" as quickly as possible. If possible, let them try the product, generate a result, or use a demo mode before forcing them to sign up or log in.
- Utilize user input immediately. If you have a prompt box (e.g., for AI generation), show the user the result of that prompt (even if blurred or partial) rather than immediately hitting them with a signup wall.
- Match visuals to the scale of the customer. If you are targeting large enterprise call centers, do not use visuals of a single person on a consumer mobile phone. Show visuals that imply scale/complexity.
- Use product shots. Show what the product looks like immediately to build understanding and trust.
- Video thumbnail value. If you include a video, the static thumbnail screenshot must provide value on its own, as many users will not click play.
- Simplify complex interfaces. When showing screenshots of code or logs, consider abstracting the text slightly so it doesn't compete with the marketing copy you want them to read.
4. Call to Action (CTA) & Conversion
Button Design
- Contrast is key. Ensure your CTA buttons stand out. If your brand color is orange, do not make the button orange; use a contrasting color like black so it doesn't get lost.
- Don't hide the CTA. Important buttons (like "Book a Demo") should not be buried below the fold.
CTA Strategy
- Prioritize one main action. Avoid having multiple identical buttons (e.g., two "Book a Demo" buttons) right next to each other. Use one large CTA and use the remaining space for something else.
- "Book a Demo" creates high friction. Asking a first-time visitor to "Book a Demo" is a dramatic request (implies a 20-minute call). You must convince them of the product's value before asking for this. Consider lower-friction CTAs like "Watch Video" or "See Product" first.
- One main goal per scroll. Kill distractions. Every scroll depth should have a priority message and one main CTA.
- Contextual buttons. It can be effective to hide a button initially and have it animate in when the user reaches the relevant section.
- Always show the next step. It should never be hard to find the CTA. Ensure a clear button is available as the user moves down the page.
Hierarchy & Navigation
- Hierarchy of CTAs. Differentiate between primary actions (e.g., "Book Demo") and secondary actions (e.g., "Read Docs"). Secondary links should not overpower the primary goal visually.
- Limit call to actions. Putting too many buttons/CTAs on the screen creates the "Paradox of Choice," often resulting in users clicking nothing.
- Value exchange. Consider if "Try for Free" is the right ask. Sometimes showing the product value first is more important than asking for a trial immediately.
- Scrolling vs. clicking. Users are more likely to scroll than to click. Put key information on the main page rather than hiding it behind a "Learn More" button.
- Naming consistency. Pick one name for your product and stick to it. Do not confuse users with an open-source project name vs. a product name (e.g., Clavis vs. Strata).
5. Animation & Movement
General Principles
- Don't overdo it. Animation can become distracting very quickly. If there is too much movement (icons flying, things spinning), tone it down.
- Use animation for purpose, not decoration. The best use cases for animation are drawing attention to something specific or making a function overly obvious.
- Purposeful motion. Use animation to draw the user's eye to the specific thing you want them to see or read.
- Less is more. Avoid sensory overload (too many colors, moving graphs, flashing text).
- Simplify for new visitors. A new visitor will not spend time trying to decipher a complex abstract animation. You have 5-10 seconds to convince them; make the animation simple and the meaning obvious.
Specific Techniques
- Ticker effects. If using a scrolling logo ticker, ensure it isn't moving too fast. A good trick is to make the ticker pause or slow down to half-speed on hover so users can actually read the logos.
- Scroll-triggered tabs. If you have tabbed content, users often won't click them. Connect the tabs to scrolling behavior so the content automatically cycles/reveals as the user scrolls down the page.
- Guidance. Use pulsing or glowing effects to guide the user to the next specific action (e.g., a "Click to Answer" button for a demo).
Animation Pitfalls
- Speed matters. If text is moving or rotating, ensure it stays on screen long enough to be read. Short phrases work best for moving text; long sentences move too fast to process.
- Don't distract. Animation should not distract from the main story. If a user is watching a "wavy background" or a "creepy hand," they aren't reading your value proposition.
- Don't overdo it (at once). Too much animation happening at once splits focus and makes the user feel like they are missing things.
- Avoid auto-playing animations or moving elements that distract the user while they are trying to read text.
- No scroll jacking. Do not hijack the user's scroll behavior (this is a major negative).
- Load times. Avoid "preloaders" that make a user wait just to see a decorative animation. The animation is rarely worth the wait.
- Clarify concepts. The best animations illustrate concepts that are hard to explain with static text or images.
- Ensure animations don't look broken (e.g., lines cutting off abruptly at the edge of a container).
- "Chill" scrolling experiences are often better than overwhelming motion.
- Functional animation. Use animation only to draw the eye to the specific next step or feature you want to highlight.
6. Copywriting & Typography
Text Quality
- Obsess over details. Inconsistent spacing (e.g., double spaces between words) or bad kerning signals a lack of attention to detail, which undermines trust in the product and the data presented.
- Consistency is key. Be consistent with capitalization (Title Case vs. sentence case). Inconsistencies create "friction" and erode trust — if you aren't on top of grammar details, users may wonder what other details (like security) you are missing.
Readability
- Text width. Use a max-width for text blocks. Reading sentences that stretch across the entire width of a screen is exhausting for the user.
- Design for scanners. Most people only scan headlines. If a user only reads your bolded headlines, they should still understand the full story.
- Be careful with bolding. Do not bold negative words (e.g., "trial and error," "random mutations") as skimmers will focus on those instead of the solution.
- Legibility. Ensure text contrasts well with the background (e.g., light gray text on a black or blue background can be hard to read).
- Make sub-headlines and button text large enough to read easily without straining.
Content
- Explain acronyms/names. If your name relies on a reference (e.g., "The Hog" standing for "Head of Growth"), explain it clearly. Do not assume the user gets the joke or reference.
- Back up your claims. If you use words like "High Quality," your examples and visuals must be objectively high quality. If your output is generic, position the product around "speed" or "ease of use" instead of "quality."
- Avoid "noise." Don't include lines like "Trusted by the best" if the logos below it already communicate that fact. Every word should add value.
- To find the right headline, ask current users how they would describe the product. Use their terminology rather than internal marketing jargon.
7. Social Proof & Trust
Testimonials
- Make testimonials real. Quotes must feel authentic. Avoid capitalizing every word in a sentence (humans don't type like that).
- Cite sources. Testimonials should include the person's name and their specific company. Generic titles like "VP of Marketing" without a company name feel made up.
- Humanize the proof. Use quotes with photos of real people. It makes the company feel tangible and trustworthy.
Logos & Integrations
- Logo selection. Use logos of modern, relevant companies (e.g., Perplexity, Cursor) to signal to users that you are a modern, cutting-edge tool.
- If showing a list of partners/integrations, use a continuous stream or a clear filterable list.
- Ensure hover states on logos are smooth and don't "snap" awkwardly.
- Leverage social proof. Displaying recognizable logos of customers helps build trust and credibility.
Credibility Signals
- Show product momentum. Displaying a changelog or a "What's New" section with dates shows that the product is alive and constantly improving.
- YC branding. Don't make "Backed by YC" your entire personality. It is social proof, not the product itself.
- About page. Have a dedicated "About" or "Team" page rather than linking to an external YC launch post.
- Game recognize game. Showing that other established, respected companies use the product validates it immediately.
Team & Photos
- Do not heavily modify or "clip" people's photos in weird ways.
- Pro tip: To make mismatched headshots look consistent, remove the backgrounds and apply a black-and-white filter to all of them.
- Match the imagery to the audience. If your target customer is a 21-year-old, don't use stock imagery of an older man. Ensure the visuals portray the actual target user.
8. Layout & Visual Hierarchy
Structure
- Avoid split focus. Do not use two equal-weight columns above the fold. This confuses the user about where to look. Establish a clear hierarchy with a single "hero" element.
- Use the "fold" wisely. The main headline and value proposition must be visible without scrolling. If the main explanation is below the fold, everything above it is just noise.
- Visual hierarchy. Use layout to group related items. Do not use full-width lines to separate content that belongs together. Avoid unnecessary boxes or lines that clutter the view.
- Simplify page count. It is okay to have multiple pages (e.g., put pricing or "about" on a separate page). Trying to cram everything onto one landing page can create noise and overwhelm the user.
Design Aesthetic
- Avoid "Rainbow Backgrounds." Distinctive backgrounds can be distracting and fail to properly "containerize" the content, making it hard for users to orient themselves.
- Match aesthetic to the domain. The design style should match the product's function. (e.g., A recruiting platform involves people; a "brutalist war" aesthetic might feel disconnected and cold. Add human elements/faces if the product is about people).
- B2B doesn't have to be boring. B2B sites can be fun, colorful, and personable because you are still designing for humans. However, "fun" should never compromise usability or legibility.
The Blank Page Exercise
If a page is cluttered, start a new blank page and only add elements that help the user understand what the product is. Test this on people who don't know the product. Only once clarity is achieved should you add other elements.
Visualizing the Product
- If you have a physical product, show it.
- If you have a digital product, show the interface or a representation of it.
- Users want to know what they are buying (e.g., Is it hardware? Is it software? Is it an add-on?).
"How it Works" Sections
Placing a visual explanation (like a flowchart or demo) early on the page helps users quickly understand complex products.
9. Visual Design & "Vibe Coding"
Avoiding AI Slop
- Avoid "AI Slop." Be wary of default AI-generated styles, characterized by massive shadows, excessive purple gradients, and bad typography.
- Stick to the basics. If you aren't a designer, play it safe. Use system fonts and standard layouts. Let the system decide for you rather than trying to make custom design decisions that might look sloppy.
Consistency
- Consistency is key. Ensure font sizes, colors, and styles are consistent across all pages (e.g., Pricing, Roadmap). Do not jump between light mode and dark mode or change color schemes randomly between pages.
Polish
- Polish the "above the fold." The first impression matters most. Ensure there are no detail bugs, misalignments, or weird borders in the top section of the site.
- Every pixel must add value. Ask yourself if every line, box, or glow effect is necessary. If it doesn't help the user understand the product, remove it.
- Fit and finish = trust. Proper spacing and line height are crucial. Inconsistent spacing or poor layout ruins the illusion of quality, specifically for Enterprise customers who equate design quality with data security/trust.
Imagery & Icons
- Animation usage. Animations add life and visual interest but must align with the brand's intended "adjectives" (e.g., optimistic, progress).
- Logo design. Ensure the logo is legible. Check what the iconography implies (e.g., a TV with a line through it might look like a "broken" TV rather than a "superpowered" one). Ensure visual balance between the icon and the wordmark.
- Icons. If you use icons to represent tools or integrations, make them distinct and recognizable. Don't make users guess what an icon represents.
- Good branding. A memorable URL (e.g., "bottomless.com" or "reason.ai") helps users remember the brand and come back later.
- Trust signals. Clean design and high-quality packaging/imagery can make a brand feel trustworthy immediately.
10. Demos, Media & Interaction
Show, Don't Just Tell
- Video. If using video, ensure it explains what is different about your product. Don't use "sitcom music."
- Interactive demos. If possible (especially for voice AI), let users try the product immediately without friction.
Managing Wait States
If your product involves AI processing time:
- Don't just show a spinner.
- Show the user what is happening (e.g., logs, steps being taken) to keep them engaged.
- Focus the user's eye on the progress.
Onboarding
- Allow users to play with the tool (e.g., "3 free messages") before hitting a hard signup wall.
- Get to the "aha" moment fast. Reduce the number of clicks required to see value.
- Make value concrete. If the value is monetary (e.g., savings), create a calculator or CTA (e.g., "View my savings") that makes the benefit feel "present to hand."
11. User Interaction & Onboarding
Don't "Wall" the User
- Avoid forcing a login immediately.
- Allow users to try the tool, create something, or invest effort before asking them to sign up.
Respect UI Affordances
- Do not design elements that look interactive (e.g., a "drag and drop" demo) but are actually static images or links to a login page. This breaks trust.
12. Differentiation
- Explain the "How." If you are in a crowded market (e.g., cloud cost reduction), you must explicitly state what makes you different (e.g., "Group buying/Group discounts"). Do not bury the unique mechanism in FAQs or deep in the page.
- Head-to-head comparisons. If necessary, show why you are better than the status quo or competitors.
- Specific vs. generic. If your product creates "brand videos," explain exactly what that means and how it differs from competitors like Sora. Don't assume the user knows.
- Break the template. Many AI-generated sites look identical (same layout, same "blue buttons"). To build a memorable brand, you eventually need to break out of the standard box and create something unique.
13. AI-Specific Advice
- Show a "Feat of Strength." Use video or animation to demonstrate the "magic" of the AI. Show the input and the immediate, impressive output.
- List the stack. Mentioning specific tools or models (e.g., Hugging Face, Stability AI, ChatGPT, Replicate) creates resonance with technical users and signals that the product is "for them."
14. Technical Performance & SEO
- Page speed is critical. Google ranks websites based on criteria including page speed. A heavy, slow-loading site will be deprioritized in search results.
- Optimize images. Avoid large, heavy images that slow down load times.
- Mobile first. The world has moved to mobile. A site that loads slowly on a fast desktop connection will be unusable on a cellular network. If a page hasn't loaded within 5 seconds, the user is likely gone.
- Mobile responsiveness. Always check the design on smaller windows, tablets, and mobile phones. Users are often on the go.
15. User Experience (UX) & Research
- Map the user journey. Analyze how the user got to the page. Does the ad or link they clicked match the promise on the landing page? A disconnect here causes drop-offs.
- Think-aloud testing. The best way to find issues is to sit a user down and have them speak their thoughts aloud as they view the site for the first time.