Landing Page Designer

I have designed a minimalist, high-contrast dark mode landing page for CodeWhisper. I chose the "Focus-First" design base, which uses generous whitespace and a monospaced aesthetic to appeal to serious novelists who value clarity over clutter.

CodeWhisper Beta Landing Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeWhisper | Write Without Noise</title>
    <style>
        :root {
            --bg: #0a0a0a;
            --text: #e0e0e0;
            --accent: #50fa7b;
            --muted: #6272a4;
        }
        body {
            margin: 0;
            padding: 0;
            background: var(--bg);
            color: var(--text);
            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }
        header {
            text-align: center;
            margin-bottom: 6rem;
        }
        h1 {
            font-size: 3rem;
            letter-spacing: -1px;
            margin-bottom: 1rem;
        }
        .hero-sub {
            color: var(--muted);
            font-size: 1.2rem;
        }
        .section {
            margin-bottom: 8rem;
        }
        .cta-box {
            border: 1px solid var(--accent);
            padding: 3rem;
            text-align: center;
            border-radius: 4px;
        }
        input {
            background: transparent;
            border: none;
            border-bottom: 2px solid var(--muted);
            color: var(--accent);
            font-family: inherit;
            font-size: 1.2rem;
            padding: 0.5rem;
            width: 100%;
            max-width: 300px;
            margin-bottom: 2rem;
        }
        button {
            background: var(--accent);
            color: #000;
            border: none;
            padding: 1rem 2rem;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
        }
        .svg-icon {
            width: 48px;
            height: 48px;
            fill: var(--accent);
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <svg class="svg-icon" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
            <h1>CodeWhisper</h1>
            <p class="hero-sub">The novel-writing environment for those who hate distractions.</p>
        </header>

        <section class="section">
            <h2>Pure Markdown. Zero Menus.</h2>
            <p>We stripped away the ribbons, the sidebars, and the bloat. It's just you and your prose, rendered in beautiful typography that stays out of your way.</p>
        </section>

        <div class="cta-box">
            <h3>Enter the Inner Circle.</h3>
            <p>Join 500+ novelists in our closed beta.</p>
            <form id="beta-form">
                <input type="email" placeholder="email@address.com" required><br>
                <button type="submit">Get Early Access</button>
            </form>
            <p id="msg" style="display:none; color: var(--accent); margin-top: 1rem;">You're on the list. Watch your inbox.</p>
        </div>
    </div>
    <script>
        document.getElementById('beta-form').addEventListener('submit', function(e) {
            e.preventDefault();
            this.style.display = 'none';
            document.getElementById('msg').style.display = 'block';
        });
    </script>
</body>
</html>

Next steps

• Save the code block as an .html file and open it in your browser to preview.
• Update the SVG icon in the header if you have a specific brand logo.
• Swap the system font stack in the :root if you prefer a serif aesthetic for novelists.