# 350 layout compositions, organized into a browsable design reference catalog

> The expanded edition of the 100-layout collection sorts composition references into eight categories and 33 subtopics, from rule of thirds to Chinese traditional composition.

**nevertoday/350-layout-compositions** — 350 layout composition references across visual principles, editorial design, typography, grids, web UI, film, Chinese art, and presentations.

- Repository: https://github.com/nevertoday/350-layout-compositions
- Stars: 831 · Forks: 95
- Language: Python
- License: NOASSERTION
- Published: 2026-09-19 · Updated: 2026-09-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/nevertoday-350-layout-compositions

## What the collection is

350-layout-compositions is a reference catalog on GitHub: 350 types of layout and composition, organized into eight top-level categories and 33 subtopics, each with a thumbnail that opens into a 1086 by 1448 high-resolution PNG. The project grew out of an earlier 100-layout edition. The original 100 images, thumbnails, and gallery links all remain in place, so bookmarks from the old version keep working.

Every entry is named and numbered, which turns the collection from an inspiration dump into something you can cite. A catalog.csv file in the v2 directory provides the search data, and a release attachment bundles all images for offline use. The stated purpose is a knowledge catalog that is browsable, searchable, and downloadable, and the execution matches that description.

## Eight categories, tabbed like an interface

The top-level split balances classical foundations against modern application surfaces. Composition logic leads with 86 entries. Visual principles and reading patterns hold 45. Editorial, print, and advertising contribute 36. Typography, grids, and East Asian text cover 54. Web and UI carry the largest share at 79 entries. Film frame composition adds 14, Chinese traditional composition 20, and presentation slides 16.

The README renders these categories as keyboard-style tabs, which reflects how the docs are structured: each category is its own page under docs/350/, so you can jump straight to web UI layouts without scrolling past golden ratios. The weighting is a defensible editorial choice. Print and UI together account for over a third of the collection, which matches where layout decisions actually get made today.

## Composition logic, the default gallery

The default view opens on the 86 composition logic entries, subdivided into named groups. Classic rules and negative space run from entries 001 to 015: rule of thirds, golden ratio, golden spiral, golden triangle, diagonal method, rectangular infold, odd-number rule, space rule, gaze room, motion room, headroom, fill the frame, negative space, frame within a frame, and leading lines.

The next block, entries 016 through 030, covers weight, lines, and axes: centered, off-center, symmetric, asymmetric, mirror, horizontal, vertical, diagonal, parallel lines, converging lines, crossing lines, central axis, off-axis, double axis, and cross composition. Further groups continue through letter shapes and curves, geometric and radial structures, arrays and stacking and grouping, spatial depth and projection, and viewpoint with depth of field. The subtopic names double as a vocabulary for critique, which is quietly the most useful thing about the whole project.

## Beyond the classical canon

Where the collection earns its size is in the categories most reference sets skip. The web and UI section with 79 entries addresses screens rather than paper: card grids, dashboard layouts, mobile patterns. The typography and grid section includes East Asian text handling, a subject Western composition books rarely treat, with 54 entries covering type, grid, and CJK-specific problems.

The film frame section applies composition to motion: where a director places a subject within the frame and why. The Chinese traditional section documents 20 composition principles from Chinese art history, an organizing tradition with its own spatial logic that rarely appears in design references translated for the web. The presentation section, 16 entries, treats the slide deck as a layout medium with its own rules. Together these make the catalog useful to interface designers, editors, video creators, and presenters, not just print designers.

## How to use it

Three access paths cover the common cases. Browse in the repository through docs/350/README.md and the category pages, where each thumbnail links to its full-resolution image. Download everything as a zip from the latest GitHub release attachment, which suits offline study or classroom use. Query catalog.csv when you need to filter programmatically, for example pulling every entry in the visual principles category into a mood board tool.

The numbering scheme also supports citation. Telling a teammate to study entries 009 through 011, the gaze and motion room compositions, is a precise instruction in a way that sharing a Pinterest board is not. For design education specifically, the numbered sequence within each subtopic forms ready-made lesson units.

## A reference that respects its own history

The migration note deserves attention as a practice. Version 2.0.0, released 2026-08-31, expanded the catalog from 100 to 350 and reorganized it into the eight-category structure. Rather than breaking the old links, the project preserved the classic 100 images at their original paths, kept the original gallery intact, and shipped the legacy release alongside the new one.

Anyone who has watched a beloved reference site die in a redesign will appreciate the choice. It also makes the growth legible: you can diff the two editions to see exactly what 250 entries the expansion added and where. For a resource whose entire value is being findable, treating backward compatibility as a feature rather than an afterthought is consistent with the project's whole approach.

## Conclusion

350-layout-compositions does one thing thoroughly: it names, numbers, and organizes layout patterns so designers can browse, cite, and download them. The eight-category structure covers classical composition through web UI, film framing, East Asian typography, and Chinese traditional art, and the full-resolution images ship as a single download. As a shared vocabulary for design critique or as course content, the numbered catalog format beats an unstructured inspiration board.

## FAQ

### What is a composition layout?

A composition layout is the arrangement of elements within a frame or page: where subjects, text, and empty space sit relative to each other. This catalog documents 350 named examples, from rule of thirds and golden ratio in its composition logic category to card grids in web UI and subject placement in film frames.

### What are the basic rules for design layout?

The catalog’s composition logic section covers the standard starting rules: rule of thirds, golden ratio and spiral, diagonal method, odd-number rule, leading lines, negative space, and frame within a frame, followed by balance-oriented patterns like symmetry, asymmetry, and axis-based arrangements. Each rule has a numbered, high-resolution reference image.

### What are the different styles of layout?

The collection organizes 350 layout styles into eight categories: composition logic (86), visual principles (45), editorial and advertising (36), typography and grids including East Asian text (54), web and UI (79), film frame composition (14), Chinese traditional composition (20), and presentation slides (16).

## Sources

- [Issues](https://github.com/nevertoday/350-layout-compositions/issues)
- [nevertoday/350-layout-compositions on GitHub](https://github.com/nevertoday/350-layout-compositions)
- [README](https://github.com/nevertoday/350-layout-compositions/blob/main/README.md)
- [Releases](https://github.com/nevertoday/350-layout-compositions/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/nevertoday-350-layout-compositions
