Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- Inside a browser-framed dark page, a compact left-aligned headline and explanation sit above paired mint and outlined pills. A large rounded product-interface image occupies the lower area over a colored gradient backing; compact navigation runs across top. Browser chrome and surrounding gradient are staging.
- Type
- Moderately large bold white sans heading, smaller gray body and tiny navigation/action labels. Exact font and metrics unknown.
- Color and surface
- Deep green-black field, mint action, gray text and subdued interface image.
- Components
- Place a compact bold white left headline and gray explanation on deep green-black above paired mint/outlined actions and a large rounded product-interface image.
What makes it work
- Deep green-black field
- Compact left-aligned white headline and gray explanation
- Mint and outlined paired actions
- Large rounded interface preview below
On a new subjectFor a public housing assistance service, place a compact white left headline and gray explanation on deep green-black above mint/outlined actions and a rounded resource-directory preview.
Measured
Fonts loadedIBM Plex Sans
H180.64px / 500 / -3.6288px
Body text16px
Page backgroundoklab(0.18513 -0.0155215 -0.00235601)
Text coloroklch(0.9702 0 0)
Page height2,683px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- A darkened city skyline fills the hero behind a large white lower-left sans headline, small supporting copy and mint and dark rounded actions. Compact navigation spans the top and a translucent notification-style panel sits at upper right. The original desktop reference shows the same text over an almost empty dark field; the gallery reference presents a different product section in a browser mockup.
- Responsive
- Tablet replaces desktop links with a menu while retaining two top actions; phone keeps one top action and menu. The image crops more tightly around the skyline and the hero copy remains low on the page. The notification panel shifts inward and occupies most of the phone width.
- Scroll
- At actual scrollY 750 a dark section shows a row of muted logos and two outlined feature panels beneath a white heading. The rounded navigation and notification remain near the top; the hero paragraph is clipped at the viewport edge. Do not infer a complete interaction from this one frame.
