# Everything you need to redesign the home page Handoff kit for the Greenlight team. Reference document, not a decision — it lays out every word, color, font, picture, and file that makes up the home page today, in plain language, so you can plan a new look without guessing at what is actually there. Nothing on the live site is changed by this document. Covers the public marketing home page at greenlightdate.com only (not the signed-in app, pricing page, or legal pages, though the header and footer shown here appear on those pages too). ## Page map 1. What this is 2. The page, piece by piece 3. The current colors 4. The fonts and sizes 5. The logo 6. Pictures and video on the page 7. What we need back from you 8. Before pictures, for markup and reference (see the deployed page for the screenshots themselves — image-heavy, not included in this text file) ## 01 — What this is This packet is the complete kit for redesigning the home page: every section, every sentence of text, every color, every font, the logo, and every photo and video currently on the page, all collected in one place. Nothing about the live site changes because this document exists. It only ships once you have looked it over, made your choices, and told us what you want built. ## 02 — The page, piece by piece Think of the home page like a house with rooms in a fixed order: entryway, hallway of instructions, den with switches, mantel with photos, exit with fine print stuck to the door. Below is every room, in order, with its exact words today. Everything quoted below is yours to keep, move, shorten, or rewrite — moving it to a new layout does not delete or lose any of it. ### 1. Header The bar at the top of every page on the site, like a store's sign and doorbell. Shows the Greenlight name and, on the home page only, two buttons for people who are not signed in yet. - Brand name: **Green***light* — "light" is set in the brand green. - Buttons: "Log in" and "Sign up" ### 2. Hero The big introduction at the top, like a shop window display. A looping video plays behind large text and one main button. - Main headline: "Send date offers. *Not likes.*" - Supporting line: "The dating app built for people who actually want to go on dates." - Buttons: "Get the green light" and "Already have an account? Log in" ### 3. Trust strip A short row of three quick facts, like the icons a hotel puts under its name (free breakfast, free parking, pool). - Included: ID verification - You: set your windows - 0: endless chats ### 4. How it works A three-step explanation, next to a traffic-signal graphic that lights red, then amber, then green as you scroll, matching the three steps. - Section heading: "Three steps to a *real date.*" - Step 1 — Discover with intent: "Browse curated profiles and see exactly when they are free: no guessing, no 'let's figure it out later.'" (small line: "Real people. Real availability.") - Step 2 — Send a date offer: "Propose something specific: an activity and a place. Thoughtful beats a like." (small line: "Be clear. Be specific. Be intentional.") - Step 3 — It's a date: "They accept, chat unlocks, and a countdown to your date begins. When the date arrives the chat closes, because the point was never to keep texting." (small line: "Real dates. Not pen pals.") ### 5. Benefits panel A widget styled like a physical metal panel with five switches. Clicking a switch shows its explanation, like flipping a breaker shows which room it controls. - Section heading: "Built on respect, *consent & intention.*" - Switch 1 — Offers, not likes: "Skip the small talk. Send a concrete plan and get to the date." - Switch 2 — Real availability: "See open windows and propose a time that genuinely works." - Switch 3 — Verification, built in: "Verify your ID and photos to earn the Verified badge, so when you see one, you know who you're meeting." - Switch 4 — Messaging unlocks at yes: "Chat opens only once a date is confirmed. No creeping DMs." - Switch 5 — Safety is the foundation: "You control your own availability. Share your ETA and an emergency contact. Your location is never shared automatically. Report or block anytime." ### 6. Story cards Four photo-and-quote pairs, like postcards pinned to a corkboard, each painting a scene of a date that started from an offer. **Important:** these four scenes are made-up examples, not real member stories, and the page discloses this on purpose ("Illustrative scenarios. Our members write the real ones.") because of a past issue with copy that read like a real endorsement. If this section is redesigned, that disclosure line needs to stay somewhere visible, worded the same or close to it. - Section heading: "The kind of date *an offer can start.*" - Opening lines: "One clear offer beats a hundred unanswered hellos." / *"Illustrative scenarios. Our members write the real ones."* - Card 1 — "Picture an offer like this": No "hey." Just an offer: Tuesday, 7 PM, a tiny natural wine bar in the neighborhood. She had three open windows that week and picked it. Two glasses of Barolo later, a date meant to end at nine ran well past midnight. - Card 2 — "Or something this simple": The offer was almost too simple: a Sunday picnic, lemons from the market, no plan after. He marked himself free and said yes. Now they argue happily over who packs the better basket. - Card 3 — "Or a date that becomes a routine": She almost scrolled past, then saw a real offer for Thursday dinner at her favorite waterfront spot. He'd read her profile. He'd chosen the place on purpose. The first date became every Thursday since. - Card 4 — "Or a plan worth remembering": The offer was a bike ride out of town and a picnic at golden hour. She set a Saturday window; he planned the rest. Somewhere past the second hill, neither was thinking about the app anymore. ### 7. Final call to action One last invitation to sign up, like the register at the front of a store on your way out. - Heading: "Your *green light* is waiting." - Buttons and note: "Sign up" and "Already have an account? Log in" (small note: "The Greenlight web app is live now. The mobile app is coming nationwide soon.") ### 8. Footer The bottom strip on every page site wide — a change here shows up everywhere. - Tagline (official slogan, must always read exactly this way): "A better way to date." - Link columns — Product: Pricing, Safety. Legal: Privacy Policy, Terms of Service, Refund Policy, Acceptable Use, Law Enforcement Requests. Contact: support@greenlightdate.com - Bottom line: "Web app live now · Mobile app soon" and "© 2026 Greenlight. All rights reserved." ## 03 — The current colors Every color on the home page today, like a hardware store's wall of paint swatches, each with its own code so you can order the exact same paint again. Give any of these codes to the team and they mix the exact color. **What stays and what changes:** picture the page as a room. The green is the furniture, the couch everyone recognizes as "this is a Greenlight room." A repaint changes the walls, not the couch. The near-black background and near-white text are the walls, expected to change in a cream redesign. The green stays, because it is the one color people already associate with the brand. | Plain name | Code | Where it shows up | In a cream redesign | | --- | --- | --- | --- | | The near black background | #070b08 | The color behind the entire page | Would change | | The secondary dark background | #0a100c | Behind a couple of sections, slightly different from the main background | Would change | | The card surface color | #0f1611 | Behind the switch panel and story text boxes | Would change | | The secondary card surface | #131c16 | A slightly lighter card color used in a few spots | Would change | | The thin divider line color | #1e2a22 | The faint hairlines that separate sections | Would change | | The main text color | #f1f5f1 | Headlines and most body writing (near white, for reading on the dark background) | Would darken, to read on a light background | | The secondary muted text | #94a398 | Captions and smaller supporting text | Would darken | | The faintest text | #6e7c72 | Fine print and the least important labels | Would darken | | The main brand green | #00c753 | Every button, link, and the glowing ring on the logo | Stays, this is the brand anchor | | The secondary green | #1fb857 | Pairs with the main green in the smooth blend on buttons | Stays, paired with the brand green | | The deep green | #0e3d22 | A darker green used for depth in a few spots | Likely stays | | The gold accent | #e3cea0 | The footer tagline, and the italic emphasis words in headings ("real date," "consent & intention") | Stays, it is the secondary brand color | Logo-only colors (hand-set inside the badge artwork itself, not pulled from the page theme): bright ring highlight green #7dffc0, ring mid green #00e061, ring deep green #00a844, lit lamp bright green #7ff0ac, lit lamp mid green #2fdd70, lit lamp deep green #00c853. If the brand green changes, this file needs a deliberate, separate update. Machine-readable version: `colors.json`. ## 04 — The fonts and sizes The page uses exactly two typefaces, on purpose — like a nice restaurant menu uses one clean typeface for dish names and one fancier one for section titles. - **The everyday font — Familjen Grotesk.** Used for buttons, navigation, body paragraphs, captions. Plain, clean, easy to read, doing most of the work on the page. - **The statement font — Fraunces.** Used for the big headlines and specific emphasized words within them, shown in italics (like "real date" and "consent & intention"). Fancier, more expressive, like a book cover title rather than the pages inside. How to read the sizes: everything is measured against the smallest, most common piece of text on the page, an ordinary paragraph. | Element | Sample | Size relative to body text | | --- | --- | --- | | Hero headline | "Send date offers." | About 5x body size | | Section heading | "Three steps to a real date." | About 3x body size | | Final call to action | "Your green light is waiting." | About 2.3x body size | | Story quotes | "Two glasses of Barolo later…" | About 1.3x body size | | Section lead line | "The dating app built for…" | Roughly body size | | Step titles | "Discover with intent" | Slightly under body size | On a full-size desktop screen the hero headline runs about 84 pixels tall and regular reading paragraphs run about 17 to 19 pixels tall. Everything shrinks together, in proportion, on a phone. ## 05 — The logo The mark is not two dark circles and a green dot laid flat. It is built to look like a real physical object: a round metal badge (imagine a polished pocket watch case) with a vertical stack of three traffic-light lenses set into its face. The top and middle lenses sit dark and unlit. Only the bottom lens is lit, glowing green, exactly like a real traffic light showing "go." **Please read before changing the logo:** the logo built into the live pages updates automatically everywhere at once, because it is one master piece of artwork the whole site points to. But there are also several separate, saved-off copies of the logo sitting in other places — the browser-tab icon, the picture used inside marketing and receipt emails, and the preview image shown when a Greenlight link is shared. Those are like printed photographs of the logo rather than the logo itself: if the master artwork changes, none of those saved copies update on their own. Each has to be noticed and manually swapped out, or the old logo keeps showing up in emails and link previews even after the website itself looks brand new. The separate saved copies that would need manual updating: - `favicon-v4.svg` — the small icon shown in a browser tab - `favicon.ico` — a backup version of that same tab icon, for older browsers - `apple-touch-icon-v3.png` — the icon that appears if someone saves the site to an iPhone home screen - `email-logo.png` — the logo image inside every email Greenlight sends - `opengraph.jpg` — the preview picture shown when a Greenlight link is pasted into text messages, iMessage, or social apps **A new logo option exists.** A hearts-based redesign of the mark has been drafted and approved for review: `hearts-logo.svg` (source artwork), plus pre-rendered `hearts-logo-512.png`, `hearts-logo-128.png`, and `hearts-logo-48.png` for the sizes above. For whoever rebuilds the site, `GreenlightLogoHearts.tsx` is the code version of the new logo, a React component ready to drop in. ## 06 — Pictures and video on the page Every photo and video file currently loaded on the home page. All of these, plus the logo and the color list above, are in the Downloads section of the deployed kit page (and in `greenlight-redesign-kit.zip`). - **Hero background video** — the looping video behind the top headline. One version for wide desktop screens, one separately cropped for tall phone screens, so faces stay framed on both. Filmed for Greenlight, not stock footage. Files: `hero-loop-v4.mp4` / `.webm` (desktop), `hero-loop-mobile-v4.mp4` / `.webm` (phone). - **Hero fallback pictures** — still frames shown if a phone or browser will not play the video, or if someone has motion reduced in their settings. Files: `hero-poster-v4.jpg` (desktop), `hero-poster-mobile-v4.jpg` (phone). - **Story photos (four)** — the four couple photos next to the made-up date scenes. Read as licensed stock photography, a different style from the brand-filmed hero video, and the easiest to swap. Files: `couple-1.jpg`, `couple-2.jpg`, `couple-3.jpg`, `couple-4.jpg`. - **Switch panel graphics (two)** — the "on" and "off" look of each switch in the benefits panel, styled like a physical metal toggle. Files: `button-off.webp`, `button-on.webp`. - **Traffic signal graphic** — the tall vertical graphic next to the "how it works" steps, matching the logo's traffic-light idea, its three lights glowing in sequence as you scroll. File: `signal-head.webp`. ## 07 — What we need back from you You do not need design software or any technical skill to hand this back. Send it however is easiest. 1. **Your new look, in any form.** A Figma file, a Canva mockup, a screenshot of the current page with notes drawn on top, or even a photo of a hand sketch on paper. All equally usable starting points. 2. **The colors you picked.** If you are not working from a tool that gives you exact codes, a phone photo of paint chips, fabric swatches, or a screenshot of a color you like elsewhere on the web is enough — it will be translated into the exact codes in section 03. 3. **Any wording changes.** If you want to reword, shorten, or reorder any of the text in section 02, mark it up directly or just describe the change in plain language. Once we have that, we build it to match exactly and show a working preview before anything goes live on the real site. ## 08 — Before pictures, for markup and reference Full-page screenshots of the current live home page (desktop and mobile) are on the deployed kit page itself, for use as a markup reference. They are not duplicated here since this file is text-only. ## Asset list (also in the Downloads section of the deployed page) Home page media: `hero-loop-v4.mp4`, `hero-loop-v4.webm`, `hero-loop-mobile-v4.mp4`, `hero-loop-mobile-v4.webm`, `hero-poster-v4.jpg`, `hero-poster-mobile-v4.jpg`, `couple-1.jpg`, `couple-2.jpg`, `couple-3.jpg`, `couple-4.jpg`, `button-off.webp`, `button-on.webp`, `signal-head.webp`. Logo and brand marks (current, live): `greenlight-logo-mark.svg`, `greenlight-logo-mark.png`, `favicon-v4.svg`, `favicon.ico`, `apple-touch-icon-v3.png`, `email-logo.png`, `opengraph.jpg`. Logo and brand marks (new hearts option, drafted for review): `hearts-logo.svg`, `hearts-logo-512.png`, `hearts-logo-128.png`, `hearts-logo-48.png`, `GreenlightLogoHearts.tsx`. Machine-readable companions: `colors.json`, `kit.md` (this file). --- Reference document for the Greenlight team. Covers the public marketing home page only. Does not include the signed-in app, the pricing page, or the legal pages, though the header and footer shown here appear on those pages too.