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.
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
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/agency-grid-layout-minimal/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Set a wide max-width shell with visible column divisions first.
-
Anchor a hero headline across most columns, support copy in a side column.
-
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.