← ClaudeAtlas

typography-layout-systemslisted

Use when composing type in space rather than sizing it — deciding how a poster, hero, editorial spread, dashboard, or landing page is structurally organized. Also use when a layout feels arbitrary, elements float without relationship, a grid is being applied by reflex, or a composition needs deliberate tension or movement.
jpoindexter/typography-skills · ★ 1 · Web & Frontend · score 74
Install: claude install-skill jpoindexter/typography-skills
# Typography layout systems Elam's premise: *"All design is based on a structural system."* There are eight, and the grid is only one. Reaching for a grid by default is a choice made by habit rather than by reasoning. ## 1. When to invoke - Composing a page, spread, poster, hero, or screen at the structural level. - A layout "feels arbitrary" or elements sit without visible relationship. - Someone reached for a 12-column grid without asking whether it fits. - You want deliberate movement, tension, or expressive composition. **Do not** invoke for sizing (`hierarchy-and-scale`) or spacing detail (`microtypography`). ## 2. Required context - The **content inventory** — how many text groups, what lengths, what images. - Whether the composition is **fixed** (poster, print) or **fluid** (web). - Whether it must **repeat** across many instances or is a one-off. - The intended **reading order**, explicitly. - Brand or system constraints that pre-commit you to a structure. ## 3. Invariant principles - **Every composition has a structural system, chosen or not.** Choosing by default is still choosing. - **The system determines the reading order.** If reading order isn't controlled, the composition isn't finished. - **Structure and content should agree.** Symmetric content in an asymmetric system fights itself. - **Systems can be combined** — Elam notes compositions that carry characteristics of two systems at once. Combination is a deliberate act, not a hedge. - **Fluid