research-document
Composition Genome v1
Composition Genome v1
Mission
Build an evidence-based theory of composition that explains why layouts work, not just how they look.
The guiding principle is:
No design recommendation should be stronger than the evidence supporting it.
Core Philosophy
Evidence hierarchy
- Biological constraints
- Cognitive mechanisms
- Cultural conventions
- Design heuristics
- Style preferences
Higher levels may override lower ones only with strong evidence.
Genome Structure
Layer 1 --- Human Systems
- Perception
- Attention
- Memory
- Decision Making
- Motor Control
- Emotion
- Learning
Layer 2 --- Composition Systems
Spatial Organization
- Proximity
- Separation
- Density
- Alignment
- Enclosure
- Connectedness
Hierarchy
- Dominance
- Scale
- Sequencing
- Emphasis
Visual Encoding
- Typography
- Color
- Shape
- Iconography
- Contrast
- Motion
Structure
- Rhythm
- Balance
- Symmetry
- Asymmetry
- Repetition
- Variety
Navigation
- Wayfinding
- Landmarks
- Progressive disclosure
- Information scent
Interaction
- Affordance
- Feedback
- State
- Discoverability
Layer 3 --- Candidate Laws
Every law should include:
- Hypothesis
- Prediction
- Supporting evidence
- Contradictory evidence
- Confidence
- Limitations
- Design implications
Current laws include:
- Relative Separation
- Peripheral Separation Cost
- Conditional Grouping Benefit
- Search Competition
- Structural Encoding
- Cue Competition
- Recognition Beyond Visibility
- Similarity-Weighted Interference
- Directional Crowding
- Attentional Relief
- Temporal Cue Priority
- Reinforced Structure
- Probabilistic Proximity
Layer 4 --- Design Rules
Design rules are conditional translations of candidate laws.
Example:
Biological finding → Composition principle → Design rule → Implementation guideline
Layer 5 --- Components
Future component library:
- Page shells
- Cards
- Forms
- Navigation
- Tables
- Dashboards
- Dialogs
- Alerts
Components should encode evidence-backed relationships rather than arbitrary styling.
Layer 6 --- Implementation
Outputs include:
- HTML
- CSS
- Design tokens
- Web Components
- Style guides
- AI layout generation
Relationship Graph (Conceptual)
Perception → Attention → Grouping → Hierarchy → Search Efficiency → Working Memory → Decision Quality
Spatial Organization → Grouping
Typography → Readability
Color → Attention → Grouping
Motion → Attention
Hierarchy → Navigation → Decision Making
Research Roadmap
Phase 1
Build the genome.
Phase 2
Collect evidence for every genome node.
Phase 3
Construct causal relationship graph.
Phase 4
Extract candidate laws.
Phase 5
Develop measurable metrics.
Phase 6
Create style profiles.
Phase 7
Generate layouts from evidence.
Standards for Future Markdown Files
Every document in this project should begin with YAML front matter.
Required fields:
---
title:
project: Composition Science
version:
status:
date:
authors:
purpose:
tags:
---
Optional fields:
- related_documents
- supersedes
- confidence
- references
- generated_from
This allows documents to be indexed, linked, searched, and consumed by LLMs while remaining human-readable.
Immediate Next Priorities
- Build the complete genome map with every major node.
- Expand each node into its own research document.
- Link every paper to genome nodes instead of isolated topics.
- Build a knowledge graph connecting concepts, evidence, and candidate laws.
- Begin identifying measurable variables for each node.
Vision
The end product is not a design system.
It is a scientific framework for composition capable of explaining, predicting, evaluating, and generating layouts across media including interfaces, editorial design, architecture, industrial design, data visualization, photography, and art.