AutoGineer
Generated banner for Documentary Brutalist Agency
Generated logo for Documentary Brutalist Agency

Documentary Brutalist Agency

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • No issues found
Download ZIP

From the author

Create or redesign creative agency, production studio, architecture, culture, and portfolio websites with billboard typography, hard black-and-white chapters, exposed grids, documentary imagery, irregular collages, restrained parallax, brutalist navigation, and accessible FAQ controls.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive design and implementation guide for creating websites that utilize a brutalist aesthetic. It emphasizes high-contrast black-and-white visuals, billboard-scale typography, and exposed grid systems to showcase creative work. The approach prioritizes narrative flow through documentary-style imagery and collages, while maintaining strict accessibility and performance standards for navigation and interactive elements.

What it does

  • Defines a visual language based on hard typography and high-contrast color palettes.
  • Provides structural guidelines for page components like headers, hero sections, and FAQ modules.
  • Offers technical implementation advice for responsive grids and accessible disclosure patterns.
  • Sets motion design standards that favor decisive transitions over decorative animations.
  • Includes a validation checklist to ensure accessibility and narrative coherence.
  • Outlines best practices for managing documentary-style media and irregular collages.

When to use it

  • When building a portfolio or studio website that requires a bold, unconventional aesthetic.
  • When you want to emphasize project imagery through a minimalist, text-driven layout.
  • When designing for creative agencies, architecture firms, or production studios.
  • When you need a design system that balances brutalist visual style with functional accessibility.

Advantages

  • Creates a distinct, memorable brand identity through strong visual hierarchy.
  • Ensures accessibility is integrated into the design rather than treated as an afterthought.
  • Provides a clear, modular framework for consistent page composition.
  • Promotes performance by avoiding heavy decorative elements like glass or gradients.

Usage examples

“Design a hero section for a creative architecture studio using the brutalist framework.”
The agent generates a layout featuring a billboard-scale headline, minimal navigation, and a high-contrast black-and-white color scheme.
“How should I implement an accessible FAQ section for a brutalist agency site?”
The agent provides instructions on using semantic HTML details/summary elements with proper aria-expanded states and keyboard focus management.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/documentary-brutalist-agency/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip documentary-brutalist-agency.zip -d .agents/skills

Documentation by Meng To

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.

Files

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <title>Documentary Brutalist Agency · Skill Demo</title>
  <style>
    :root{--black:#0b0b0a;--white:#f2efe6;--mint:#c8dfcf;--pink:#e8bbc4;--line:rgba(242,239,230,.28);font-family:Arial,Helvetica,sans-serif;color:var(--white);background:var(--black)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--black)}button,a{font:inherit;color:inherit}.nav{position:relative;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.13em;text-transform:uppercase}.nav a{text-decoration:none}.navCenter{font-weight:900;font-size:15px}.navEnd{text-align:right}.menuButton{border:0;border-bottom:1px solid;padding:4px 0;background:transparent;text-transform:uppercase;letter-spacing:.13em;cursor:pointer}.hero{position:relative;min-height:680px;overflow:hidden;padding:26px 24px 18px}.kicker{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.hero h1{position:relative;z-index:2;margin:56px 0 0;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(96px,15vw,206px);font-weight:900;line-height:.69;letter-spacing:-.045em;text-transform:uppercase}.hero h1 span{display:block}.hero h1 span:last-child{text-align:right}.collage{position:absolute;z-index:1;inset:78px 12% 20px 29%;pointer-events:none}.image{position:absolute;overflow:hidden;border:1px solid var(--black);background:#777;box-shadow:0 0 0 1px var(--white)}.image:after{position:absolute;inset:0;content:"";mix-blend-mode:screen;opacity:.35}.one{top:0;left:20%;width:40%;height:48%;background:linear-gradient(145deg,#554941,#cfb094 48%,#4a5a4b)}.one:after{background:radial-gradient(ellipse at 53% 38%,#f2c8a8 0 12%,transparent 13%),linear-gradient(90deg,transparent 48%,#202020 49% 62%,transparent 63%)}.two{right:0;bottom:3%;width:43%;height:43%;background:linear-gradient(125deg,#d4d1c7,#5a6458 56%,#242823)}.two:after{background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,255,255,.4) 35px 36px)}.three{bottom:0;left:0;width:32%;height:36%;background:linear-gradient(35deg,#281f1e,#a95c4d 48%,#d9bb9e)}.three:after{background:radial-gradient(circle at 55% 42%,#f4c7a6 0 10%,transparent 11%)}.caption{position:absolute;z-index:3;bottom:24px;left:24px;display:flex;width:calc(100% - 48px);align-items:end;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.caption p{max-width:35ch;margin:0;line-height:1.5}.arrow{display:grid;width:56px;height:56px;place-items:center;border:1px solid;border-radius:50%;font-size:22px;text-decoration:none}.philosophy{display:grid;min-height:480px;grid-template-columns:.55fr 1fr;padding:34px 24px;background:var(--white);color:var(--black)}.philosophy h2{margin:0;font-size:13px;text-transform:uppercase}.statement{max-width:13ch;margin:0;font-size:clamp(50px,7vw,104px);line-height:.9;letter-spacing:-.065em}.menu{position:fixed;z-index:20;inset:0;display:none;place-items:center;background:var(--mint);color:var(--black)}.menu[aria-hidden="false"]{display:grid}.menu a{font-family:Impact,sans-serif;font-size:11vw;text-decoration:none;text-transform:uppercase}.close{position:absolute;top:20px;right:24px;border:1px solid;border-radius:99px;padding:10px 14px;background:transparent;cursor:pointer}@media(max-width:760px){.nav{grid-template-columns:1fr 1fr}.navStart{display:none}.navCenter{text-align:left}.hero{min-height:610px}.hero h1{font-size:25vw}.collage{inset:115px 7% 70px 20%}.philosophy{grid-template-columns:1fr;gap:70px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.collage{transform:none!important}}
  </style>
</head>
<body>
  <main>
    <nav class="nav" aria-label="Demo navigation"><a class="navStart" href="#work">Selected work · 24—26</a><a class="navCenter" href="#top">Common Practice®</a><div class="navEnd"><button class="menuButton" type="button" aria-expanded="false" aria-controls="menu">Menu +</button></div></nav>
    <section class="hero" id="top"><div class="kicker"><span>Independent creative office</span><span>Culture / Places / Objects</span></div><h1><span>Make Culture</span><span>Move.</span></h1><div class="collage" aria-label="Documentary project collage" role="img"><i class="image one"></i><i class="image two"></i><i class="image three"></i></div><div class="caption"><p>Strategy, identity, and moving image for institutions with something real to change.</p><a class="arrow" href="#work" aria-label="View selected work">↓</a></div></section>
    <section class="philosophy" id="work"><h2>Our position · 01</h2><p class="statement">A good identity does not decorate the work. It gives the work a public life.</p></section>
  </main>
  <div class="menu" id="menu" aria-hidden="true"><button class="close" type="button">Close</button><a href="#work">Work / About / Contact</a></div>
  <script>const menu=document.querySelector('.menu');const openButton=document.querySelector('.menuButton');const closeButton=document.querySelector('.close');function setMenu(open){menu.setAttribute('aria-hidden',String(!open));openButton.setAttribute('aria-expanded',String(open));(open?closeButton:openButton).focus()}openButton.addEventListener('click',()=>setMenu(true));closeButton.addEventListener('click',()=>setMenu(false));addEventListener('keydown',event=>{if(event.key==='Escape'&&menu.getAttribute('aria-hidden')==='false')setMenu(false)});</script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/documentary-brutalist-agency · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download documentary-brutalist-agency.zip