documentary-brutalist-agency

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.