Kage Design logo kage
bilt.com
bilt.com · Landing page · Dark · Minimal · Editorial screenshot

Design analysis

Bilt's landing page is a long, cinematic dark page in near-black navy with a faint map-grid texture behind the hero, where left-aligned white serif headline text sits beside floating glassmorphic notification chips ("Ride with Lyft", "Dine out at Tucci") scattered over an aerial city. Below, a full-width night photograph of an apartment building hosts pill tab tabs (Rent/Neighborhood/Rewards) and a dark rent-summary card overlay. The page then develops in alternating rhythms: a 3-card feature row with photography and glass UI overlays (credit-score gauge, Rent Day card), a "Neighborhood Benefits" section with scattered photo tiles, category filter pills, and full-bleed dining photography columns with caption overlays; then a redemption section pairing left-aligned headings with logo-card carousels (airlines, hotels, Amazon, Walmart, Airbnb) under small horizontal rules; press-quote cards; a centered final CTA; and a minimal footer. Type is a light, wide sans-serif with generous letter spacing on huge headings; small caps labels, thin dividers, and pale-blue pill buttons provide the only color accents against the monochrome dark palette. Density is low with lots of negative space; every section breathes and the accent color is used sparingly for CTAs only.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146766657-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146762471.webp
- Design on Kage: https://kage.design/designs/bilt-landing-page

Build a long-scroll dark fintech landing page for a rent-rewards product, in this style:

## Palette & mood
- Background: near-black navy (#0A0E14 range) throughout, no white sections; the entire page is dark mode.
- Subtle background texture: a faint city-map grid / street pattern behind the hero and a couple of sections (very low opacity, monochrome).
- Text: white/off-white. Secondary text: gray ~#8A93A0.
- Single accent color: pale periwinkle/light blue (#B9C7F0-ish) used ONLY for pill-shaped CTA buttons ("Start earning today"). Buttons are small, fully rounded, dark text on the pale accent.
- Occasional lime/green micro-accents inside status chips ("Active").

## Typography
- One light-weight geometric sans-serif, used across the page. Huge section headings (~64-80px) at light weight (300-400), normal case, generous letter spacing on smaller labels.
- Small uppercase or letter-spaced eyebrow labels above headings, thin 1px gray horizontal rules as section dividers.
- Body text is small (~14-15px), gray, max-width ~34ch, left-aligned.

## Page structure (in order)
1. **Hero**: left-aligned 2-3 line headline ("Earn points on rent and mortgage…") with a small accent pill CTA below; to the right, 4-5 floating glassmorphic notification chips (dark translucent, rounded ~12px, tiny icon + brand name + points subtitle like "Ride with Lyft • Redeemed 250 pts") scattered at varied positions over an aerial dark city photo. Hero is short (~40vh), lots of negative space.
2. **Full-width building photograph section**: a night photo of an apartment building, with a centered pill tab bar (Rent / Neighborhood / Rewards) and a headline + CTA on the left; on the right a dark rent-summary card overlay: property name + address, "Monthly Rent $3,000", "Credit Boost" with a lime "Active" pill, "Annual Points earned 36,000 pts". Card is a slightly lighter dark surface with thin internal dividers, rounded ~16px.
3. **"Earn rewards on rent"**: heading + subhead top-left, "Log in" link top-right; below, a 3-column card row. Each card = rounded photography (interior/lifestyle) with a translucent glass UI overlay (a card widget, a credit-score gauge with needle, a benefits list card), then below the image a white card title and gray body paragraph. 
4. **"Neighborhood Benefits™"**: heading left with short gray copy; scattered photo tiles of merchants (restaurant, pharmacy, yoga, rideshare) at staggered positions over the faint map texture, each with a small dark caption chip (brand name + benefit). Below, a centered pill filter bar (Dining / Pharmacy / Fitness / Rideshare) with the active pill filled white. Then a full-width 3-column dining photography row (3 tall photos) each with a bottom dark caption strip ("Up to 3X pts • Earn points at local restaurants").
5. **Redemption section**: huge light heading "Redeem the industry's most valuable and flexible points", then repeated sub-blocks, each with a small icon + sub-heading and gray copy + accent pill CTA on the left, and a carousel of partner logo cards on the right ("Airline transfer partners (17)" with prev/next chevrons): rounded ~16px dark cards slightly lighter than background, each with a centered partner logo (Turkish Airlines, Aer Lingus, Wyndham, Amazon, Walmart, Airbnb) and small gray name below. Group into: travel, everyday purchases, gift cards.
6. **Press quotes**: heading "Why over 6.5 million members…"; 3-column row of dark cards, each with press outlet name ("POINTS GUY", "BUSINESS INSIDER") and a short quote in white.
7. **Final CTA**: centered heading "Ready to start getting rewarded on your rent?" + gray subline + accent pill button.
8. **Footer**: minimal — two thin link columns on the left, huge light-weight wordmark bottom-left, social icons right, tiny gray legal lines at the very bottom.

## Layout rules
- Max content width ~1200px, generous 96-120px vertical padding between sections.
- Two-column patterns: text block left (~40%), media/cards right (~60%), or heading spanning full width with cards below.
- Cards: rounded 16px, surface one step lighter than page background, thin 1px borders where needed, generous internal padding.
- Photography: night/lifestyle, always with dark overlay chips for captions — never raw images.
- Motion: subtle scatter/parallax on hero chips and benefit tiles; carousels scroll horizontally with chevron controls.
- Fully responsive: card rows stack, carousels become swipeable.

Components from this page

All components

Related designs