Finch_Website

Inspiration We needed a landing page that could sell the idea of Finch before the product was fully built. Looking at the websites of companies we admired — particularly Cluely.com — we were struck by how much a design language alone could communicate trust, quality, and ambition. We wanted Finch's site to feel that premium from day one.

What it does The Finch website is a fully static, zero-framework landing page that communicates the product, pricing, team, and mission. It includes:

A dark/light mode toggle with persistent theme A CSS-only browser mockup hero showing the extension in action A working waitlist email form with toast notification

How we built it Pure HTML, CSS, and vanilla JavaScript

The design system lives entirely in CSS custom properties:

css :root { --red: #d43c33; --orange: #e09643; --navy: #1a2744; --gradient-brand: linear-gradient(135deg, var(--red), var(--orange)); } We drew direct inspiration from Cluely's aesthetic — adopting DM Serif Display for headings, a warm beige-to-navy gradient sky for the hero, full pill-shaped buttons, and side-by-side contrast panels for the Problem/Solution section.

The hero visual is entirely CSS — a realistic Mac browser chrome with traffic light dots, a Workday-style job application form, and the Finch extension popup overlaid in the top-right with an SVG score ring.

Challenges we ran into Replicating Cluely's "airy" feel without copying it — finding the right balance of whitespace, serif type, and warm gradient tones took several iterations The browser mockup hero — building a convincing, responsive browser + ATS form + extension popup purely in HTML/CSS was the most complex single component

Accomplishments that we're proud of The CSS browser mockup hero: a fully interactive-looking scene built without a single image A complete design system with 20+ custom properties, consistent spacing, and smooth animations throughout Dark mode that covers every section, including the browser mockup internals

What we learned Vanilla CSS is more powerful than most developers give it credit for. A strong design reference (Cluely) dramatically accelerates decision-making — you spend less time debating colors and more time building.

What's next for Finch_Website Connect the waitlist form to a real backend (Supabase or Airtable) Add a live product demo section with an interactive extension walkthrough Set up GitHub → Vercel CI for automatic deploys on every push

Built With

• css
• html
• javascript
• vercel