Documentary Brutalist Agency

Use hard typography to establish a point of view, then let real project imagery carry the proof.

Establish the Story

1. Open with a billboard-scale positioning line and minimal navigation.
2. Cut directly into selected work on black.
3. Use a sparse white philosophy chapter to explain how the studio thinks.
4. Build one documentary collage as a paced process story.
5. Add verified testimonials or updates on pale proof surfaces.
6. Resolve objections in a minimal FAQ before the oversized footer wordmark.

Replace source names, projects, people, photography, quotes, claims, and links. Use original or licensed documentary material.

Build the Visual System

• Use hard black and warm white with occasional pale mint or pink proof surfaces.
• Pair one compressed display face with one neutral grotesk.
• Expose grid lines, use square corners, and avoid glass, glow, and decorative gradients.
• Let type and photography create hierarchy; keep icons and ornament minimal.
• Use line breaks as composition. Test them at every breakpoint.
• Maintain strong contrast without making every element equally loud.

Compose the Page

• Header: use a compact identity, current section, and a decisive menu trigger.
• Hero: set one compressed headline near billboard scale; keep supporting copy small.
• Work: use black chapters with large titles, role labels, and documentary media.
• Philosophy: cut to warm white with fewer words and more breathing room.
• Collage: vary image scale and alignment while preserving narrative DOM order.
• Testimonials: use pale proof cards only for verified quotes.
• Updates: set compact editorial entries with date, category, and action.
• FAQ: use hard rules and predictable disclosure behavior.
• Footer: finish with an oversized wordmark and a clear contact route.

Implement the Documentary Collage

• Use CSS Grid and reserve every image box before media loads.
• Keep DOM order aligned with narrative order even when the visual grid is irregular.
• Map shallow transforms to scroll progress and cap parallax below 5%.
• Reveal captions on both hover and focus; keep them available to touch and assistive technology.
• Retain the grid when an image fails or is absent.
• Use a short pinned handoff only when it clarifies the story and never overlap contact or footer.

Implement Menu and FAQ Controls

• Use semantic buttons and native details/summary or an accessible disclosure pattern.
• Update aria-expanded; preserve deep links and browser history.
• Trap focus only inside a true modal menu and restore it on close.
• Make hover, focus, pressed, open, disabled, loading, and current states distinct without color alone.
• Keep navigation and FAQ fully usable when motion is disabled.

Motion Defaults

• Use 160–220ms for controls and 500–760ms for masks and section entrances.
• Favor slow collage parallax, sticky contrast changes, and decisive black/white cuts.
• Animate one reading transition at a time.
• Pause offscreen observers and media; clean up route timelines.
• Do not use constant floating, smooth-scroll theater, or scroll hijacking.

Validate

• Read the page in DOM order with CSS and motion disabled.
• Test the menu, FAQ, collage captions, and project links with keyboard and touch.
• Check compressed headline wrapping at 320px, tablet, desktop, and 200% zoom.
• Verify image dimensions, alt text, contrast, focus, reduced motion, and failed-media states.
• Remove invented projects, clients, quotes, awards, or results.

Avoid

• Brutalism as random misalignment or inaccessible contrast.
• Decorative masonry with no narrative order.
• Rounded SaaS cards, glass, glow, or many gradients.
• Continuous parallax that competes with the work.
• Modal focus traps on non-modal navigation.