Design Systems

Agency Grid Layout Minimal

Editorial multi-column grid with oversized headlines and tiny uppercase labels.

What it is

A layout direction for agency sites: wide grid shells, oversized display headlines, small uppercase metadata in adjacent columns, and architectural image blocks.

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
From the upstream SKILL.md

Why it matters for design

  • Strict column placement makes every element position read as intentional.
  • Scale contrast between display headlines and tiny metadata carries the hierarchy.
  • Negative space is preserved instead of filled, keeping the page editorial.

What it covers

  • Scope
  • Visual target
  • Implementation guidance
  • Recommended patterns
  • Tuning knobs
  • Avoid

How to install

Agency Grid Layout Minimal

  1. Clone the repo.

    git clone https://github.com/MengTo/Skills
  2. Point Codex at the skill file.

    agent-skills/web-design/agency-grid-layout-minimal/SKILL.md
  3. Then describe the UI you want. Codex follows the skill.

How to run it with Codex

  1. Set a wide max-width shell with visible column divisions first.

  2. Anchor a hero headline across most columns, support copy in a side column.

  3. Build service rows as multi-column listings with tiny metadata labels.

Every plugin here is free, open source, and links to its real upstream source.

More on the codex-design list ↗

Next step

Design with Open Design, without the setup

Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.