Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A dark full-width community landing page has a small identity at left, a long rounded navigation capsule, utility icons and pale submission action at right. A centered two-line headline sits over dim particle-like imagery and extensive open hero space. Five red outline icon/text pairs span the lower hero. Rounded website thumbnails begin below, with a white consent panel obscuring the lower-right capture.
- Type
- Bold closely tracked clean sans headline dominates; smaller compact sans navigation and feature labels remain subordinate. Matching DOM capture reports h1 computed family DM Sans, 73.8px/73.8px, weight 700, tracking -1.476px at desktop. This is computed style, not a verified painted-font identity.
- Color and surface
- Near-black/navy hero and faint warm particle field; white heading, saturated crimson outline icons and primary actions, dark translucent-looking navigation capsule and pale submission control. The white consent surface is an overlay, not the underlying page palette.
- Components
- Header/nav capsule, utility icons, submission action, centered hero title, icon/benefit strip, rounded thumbnail wall, showcase action and consent dialog.
What makes it work
- Deep dark subdued media field and high-contrast large centered type
- Compact rounded header navigation treatment
- Repeated bright outline icon and short-label pairs
- Rounded image showcase below hero
On a new subjectFor a regional volunteer-services hub, place a concise community promise over subdued dark regional imagery, show bright outline icons with service benefits in a broad strip, and continue into rounded project photographs. Retain compact capsule navigation and strong action contrast; replace developer/theme content and handle consent as a separate functional requirement.
Measured
Fonts loadedDM Sans, Roboto, fontawesome, Material Icons
H173.8px / 700 / -1.476px
Body text16.4px
Page background#eeeeee
Text color#000000
Page height6,869px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- The saved US Pro Creators states show a deep navy/black hero with subdued warm particle imagery, large tightly spaced centered white sans heading, crimson primary action and a strip of five crimson outline-icon/benefit pairs. Desktop has a long rounded dark text-navigation capsule with separate logo, utility icons and pale submission action. Rounded thumbnail rows continue below. A white consent panel covers lower-right desktop content and the bottom mobile region. The next section, visible after scrolling, changes to white with a left explanatory heading/copy and a large rounded workspace photograph at right.
- Responsive
- At1440px the main heading is two lines, navigation is text-rich and five benefits share one row. At768px the header uses small account/search/menu icons and benefit groups form two columns with a centered final item. At390px the heading wraps to four lines, primary action and supporting explanation stack, and the visible first benefit becomes one horizontal icon/label pair in a vertical flow. The consent panel covers lower mobile content. The sampled tablet document is772px wide at a768px viewport, so these captures do not establish zero horizontal overflow or every breakpoint.
- Scroll
- The requested desktop scroll reaches scrollY750 with document height6869 at a1000px viewport. The header remains at the top while the thumbnail-showcase base and a white two-column explanatory section become visible. The consent overlay stays lower-right. This is one verified document scroll and partial next-section observation, not a full-page interaction review.
