Menu

Individual skill

hierarchy-spatial

Use this skill when constructing visual hierarchy through layout, position, size, and whitespace — not type, not color. Trigger when laying out a page or section and deciding what gets the dominant region, where to place the focal element, how much breathing room to give it, and how secondary elements should arrange around it. Trigger when reviewing a layout that "feels cramped" or "feels lost," when a hero's CTA is competing with surrounding content, or when a dashboard's primary KPI is the same size as everything else. Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/hierarchy-spatial/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,532
Repository last updated
Nov 6, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Hierarchy through space

Spatial hierarchy uses three tools: **position**, **size** (relative to neighbors), and **whitespace** (isolation around an element). Together they can carry a complete hierarchy without depending on typography or color. Spatial hierarchy is what makes a magazine spread or a museum poster work even before you read a word.

## When this is the decisive sub-aspect

- You're laying out a hero, dashboard, gallery, or any composition where placement and size are doing more work than type.
- You're reviewing a screen where "everything has the same weight" — the typographic hierarchy is fine but the layout is flat.
- You need to elevate one element among many roughly equivalent ones (a featured project, a recommended plan, a primary metric).
- You're working in a constrained type system (one or two sizes) and need hierarchy from elsewhere.

## Core ideas

### Size relative to neighbors carries hierarchy