Gallery screenshot, saved 2026-10-24
How it’s built
- Layout
- A black portfolio layers fine irregular contour lines and faint grid divisions behind an enormous left-aligned white sans introduction. Small identity and numbered work/service/about/blog links span the top; a thin status row crosses below. Metadata sits beneath the headline, followed by a divider, muted secondary sentence and paired lower-right pill actions. A coordinate crosshair/label overlays the contours, but its purpose is unestablished.
- Type
- Very large clean white sans headline, compact tracked mono-like labels and muted body copy; exact face unknown.
- Color and surface
- Near-black, white and gray text, fine gray contours, muted blue-violet lines and small blue markers.
- Components
- Compact numbered header, oversized introduction, metadata row, contour graphic, divider and paired actions.
What makes it work
- Near-black field with fine contour linework
- Oversized left-aligned white statement
- Small tracked identity/metadata hierarchy
- Separated lower copy and actions
On a new subjectFor a regional earthquake-preparedness office, use a dark field with original fault contours beside a large readiness statement, compact tracked update row and two restrained actions. Replace portfolio copy; leave map interaction unclaimed.
Live behavior
- Today
- The desktop hero uses an off-white field, oversized black sans-serif headline and short introduction, small monospaced metadata, blue accents, thin rules and pill-shaped calls to action. The later desktop frame adds topographic contour lines across the background. The header combines a PG mark, numbered navigation, circular controls and a contact button. The captured scrolled position reveals an oversized manifesto statement combining black and faint outlined lettering.
- Responsive
- At 1440×1000 the numbered navigation is visible and the two hero buttons sit at the lower right. At 768×1024 the header uses a Menu control and the calls to action appear below the introduction. At 390×844 the text wraps into more lines, the hero buttons stack, and the middle location metadata and header contact button are not visible. These are three sampled widths, not breakpoint measurements.
- Scroll
- At measured scrollY 750 CSS px, the screenshot shows the lower hero and the start of the manifesto, while the header remains at the top of the viewport and a small 07% indicator appears beneath it. The two states do not establish the mechanism or full scroll transition.
