Skip to content

DESIGN-RULES.md

Latest commit

 

History

History
181 lines (153 loc) · 11.1 KB

DESIGN-RULES.md

File metadata and controls

181 lines (153 loc) · 11.1 KB
Raw

Design rules — extracted from reference analysis

Codified rules driving the generative engine, extracted from the /References set (Swiss grid-system studies, Helvetica posters, INARA/BTTR, Nina Kraviz, Coffee & Cigarettes, POLYMER, Zero Signal, 6-Sheet/A3/Digital grid systems) plus canonical typographic-scale theory. Keep the engine sampling only from this space.

1. The grid — LOAD-BEARING, not decorative (the #1 lesson from the audit)

The single most important rule: every element is placed on INTEGER grid lines via grid-column: <startLine> / <endLine> and grid-row: <startLine> / <endLine>. No fractional math (Math.ceil(C*0.62)) — that produces masses that float off the grid and looks amateur. The reference grid-system posters prove every mass occupies a whole number of modules, snapped on BOTH edges.

Grid presets (each archetype declares the grid that suits it — the references use different column counts per design, they do NOT force one grid):

  • 2-col — INARA/BTTR posters: headline block in one column, meta in the other.
  • 3-col — Digital Presentation / Helvetica history: dense text columns + image modules.
  • 4-col — Form & Found web, Lorem web grid: kicker col 1, headline+body cols 3-4.
  • 6-col — 6-Sheet poster system: image module cols 3-6, list cols 2-wide each.
  • modular (cols × rows) — Coffee & Cigarettes checkerboard, Schweizer red blocks: masses are whole row×col modules.

Rules observed:

  • Rows = a baseline field (8–12 rows for posters); image/mass heights are whole multiples so top AND bottom land on row lines.
  • Consistent measure: text columns are a fixed whole-column width, flush on both column lines. Empty columns are intentional negative space, not leftover gaps.
  • Images snap to modules and usually sit INSIDE the grid (not always full-bleed); full-bleed is a deliberate choice, not the default.
  • Gutter = 1 base unit; margin = 3–4 base units; both consistent.

2. Typographic scale (canonical ratios)

Posters are display-led and high-contrast: a huge hero, tiny meta, little in between. Use:

  • Structural ratio: Perfect Fourth = 1.333 for the meta→label→subhead steps.
  • Display jump: Golden Ratio ≈ 1.618 (or larger) from subhead to hero — the dramatic gap seen in every reference (POLYMER, Nina Kraviz, AU, Zero Signal).
  • Base unit ~ canvas width × 0.0095 for meta; hero is fit-to-cell (fills its grid area), which naturally lands far above the structural steps.
  • Hero line-height 0.88–0.95, tight negative tracking (−0.02 to −0.04em).
  • Meta/labels: line-height 1.2–1.45, mono accent gets slight positive tracking.

Sources: Creative Market, spec.fm type scale.

2b. THE GENERATIVE GRAMMAR (the core of the system — learned from INARA/Lorem)

The reference posters (esp. the INARA/BTTR set: same content, 6 distinct layouts) reveal that professional generative layout is NOT a set of fixed templates. It is a small set of rules that assign content blocks to grid regions, with variation operators. Build THIS, not templates:

  1. Grid chosen proportional to the aspect ratio (so layouts adapt to any canvas): roughly cols ≈ round(shortSide-based) and rows ≈ round(longSide-based) keeping cells near-square; pick from a sensible set per ratio. The grid is the constant.
  2. Regions = the page split into a few rectangular zones along grid LINES, using rule-based proportions (halves, thirds, golden ~0.62, 2/3). A composition is a partition of the grid into 2–4 primary regions (e.g. a tall hero region + a sidebar; or a top band + image band + caption band).
  3. Content blocks have ROLES: kicker, headline, numeral/mark, list(meta A), body(meta B), footer, image(s). Each role has placement RULES:
    • headline → the largest text region; may split across two regions.
    • footer → a bottom-edge strip; kicker → a top-edge strip.
    • body/list → a column-measure region (1–2 cols wide), flush-left.
    • image → a whole-module region, optionally bleeding to touched edges.
    • numeral → a large region anchored to a corner.
  4. Variation operators (driven by the seed → endless distinct results): flush-left vs flush-right per block; invert (white-on-black); image present/region; headline split top+bottom; swap which region is hero; rotate kicker to a vertical edge.
  5. INVARIANTS that always hold (what keeps every result good): everything on integer grid lines; flush alignment; one type system; few sizes w/ large jumps; generous margins; asymmetric balance; one accent. Sampling only explores placements that keep these true.
  6. Validate every generation: no region overlaps, every block on integer lines, nothing overflows its region (fit/shrink), no empty hero. Resample on failure.

Because regions are computed from the actual cols×rows, the SAME rules produce a valid, on-grid layout at ANY aspect ratio — poster, square, story, wide. This is the fix for "layouts break when the aspect ratio changes."

3. Composition patterns (region-partition archetypes, expressed as rules)

Each is a recurring, defensible structure observed in the references:

  1. Monolith — one giant headline owns the page; meta in a corner. (Nina Kraviz, Helvetica title.)
  2. Edge-headline — display word(s) flush to an edge, often split top/bottom of the page, image between. (INARA/BTTR set, Coffee & Cigarettes.)
  3. Number/Word hero — an oversized number or 2–3 letters as a graphic element, anchored in a corner or center. (POLYMER "48", Zero Signal "oN", AU.)
  4. Spec-sheet — small title + multi-column dense text with labeled data rows; thin rule under title. (POLYMER lower half, Helvetica history, Digital Presentation.)
  5. Checkerboard / modular blocks — alternating image/ink/paper cells on a strict module grid; headline words run the edges. (Coffee & Cigarettes.)
  6. Multi-image editorial — 2 images in different cells, headlines interleaved, optional thin connector lines from labels to points, big letters in corners. (Zero Signal, brand-guideline two-image, AU.)
  7. Split — vertical/horizontal division, image one side, type the other. (BTTR.)
  8. Index / list — left column of short list items, right column of titles/dates, small leading numbers (01.01). (6-Sheet city list, ballet list.)
  9. Specimen — type as the subject, centered or flush, minimal meta.
  10. Stack/bands — strong horizontal bands (title / image / meta).

4. Graphic accents (the "designed" details)

These small marks are what separate designed work from generative mush — sample sparingly (style-dependent probability):

  • Thin rules dividing zones (full-width or column-width), 1–2px. Common.
  • Square markers — small filled + outline squares as registration marks. (Nina Kraviz corners.)
  • Connector lines — thin diagonal/elbow lines from a label to a point. (Zero Signal "France"/"Spain".)
  • Leading micro-labels — tiny 01.01, 9.5625/11.25, timecodes, superscripts. (6-Sheet, POLYMER K-ROS 48, AU 2703 / 14:44:23.)
  • Full-bleed image behind type, with reversed (on-image) text. (Nina Kraviz, AU.)
  • Edge-bleeding ink/accent blocks snapped to modules. (Schweizer red.)

5. Type system (locked: Geist Sans ONLY, lighter weight)

  • Geist Sans is the only typeface. No Geist Mono, no serif. One face, used at a few discrete sizes and weights. (Per user: single typeface, lighter weight.)
  • Lighter weights: hero/display at 500–600 (medium/semibold), NOT 800/900 black. Body/meta at 400. Labels at 500. The references' display type is confident through SIZE and the grid, not brute weight — lighter reads more refined.
  • Discrete type scale, not continuous fit. Pick hero size from a fixed scale step (so all posters share a type system), then only shrink if it would overflow. Continuous "fill every cell exactly" is a tell of generated work — real designers set a few sizes and let white space happen. Scale (Perfect Fourth 1.333 + golden display jump), as multiples of a base ≈ canvas width × 0.013: display / headline / subhead / body / caption.
  • Flush-left, ragged-right. Tight negative tracking on display (−0.02em). line-height 0.95–1.05 for display (lighter weight needs a touch more than 0.9).

6. Color (keep tight — lesson from rolled-back v2)

Default b/w + optional single accent (red is the canonical Swiss accent; the references are overwhelmingly b/w + red, plus occasional full-bleed photo color). Do NOT widen to many palettes/fonts — that made v2 generic. One accent, used deliberately on blocks/rules/markers.

7. Aspect ratios (a variety of applications)

Support poster (3:4, A4, 4:5), square (1:1) for social, and story (9:16), plus a wide/web (16:9) — the references show the same system transferring across poster, social, and web contexts. Column count may drop for narrow/wide ratios.

8. Müller-Brockmann discipline (from the grid-systems skill)

Source: Grid Systems in Graphic Design (1981), encoded in the hyperagent skill skill-muller-brockmann-grid-systems (saved in /References). The non-negotiables:

  • One source of truth. All grid params (--cols, --gutter, --margin, --bl baseline, --lh leading) live in CSS vars. The grid overlay reads the SAME vars as the content — never hand-author the overlay separately or it drifts. (#1 real-world bug.)
  • Baseline rhythm is sacred. Leading = whole multiple of the baseline unit; every element snaps to it. Display line-heights set in px, not unitless (unitless pushes large type off-grid).
  • Box-on-grid ≠ ink-on-grid ← the subtle one. A big headline whose box sits on a column line still looks misaligned because the glyph's ink is inset by its left side-bearing. Fix at runtime: measure ctx.measureText(firstChar) .actualBoundingBoxLeft with the loaded font (after document.fonts.ready + on resize) and shift margin-left so the ink lands on the line. Apply to hero + big numerals. (Caveat: side-bearing is font-specific; headless Chrome may lack the webfont and measure wrong — embed/verify with the real font.)
  • Palette house rules: white #fff, ink #111, ONE accent = Swiss red #e4002b. No warm-cream "Claude look". Never blue/purple gradients.
  • Type: grotesque (Geist) for display+body; mono (Geist Mono) for folios, captions, grid annotations — the technical register. Flush-left, ragged-right. Few sizes, large scale jumps. Big numerals/data set large = signature move.
  • Hierarchy through scale + weight + white space, not color. Generous margins; asymmetry held in tension by the grid.
  • Grid toggle convention: a button and the G key toggle body.grid-on; overlay shows numbered column fields + baseline (major line every --lh, faint minor every --bl) + margin lines. "Showing the real grid IS the demo."
  • Creed: "A grid you can't toggle on and measure is a mood board, not a system. Build from one source of truth, prove it at 0px, and align the ink."