Based design

Based Design

Compositional mechanics extracted from structural analysis of 1,241 pages across Emigre Magazine Issues 01–45 (1984–1998). Not a style guide — physics. No aesthetic opinions, no trends. Just how marks on a surface direct the human eye.

When to Use This Skill

Activate for any visual design task: layouts, web pages, presentations, print, posters, editorial design. This system overrides default "safe" design instincts (centered headings, uniform grids, polite spacing) with structural mechanics that create energy, hierarchy, and rhythm.

Works for any brand, any medium. The principles are compositional gravity — they apply everywhere.

---

The 8 Absolute Laws

These appeared in 32+ of 45 issues analyzed. They are non-negotiable.

1. Content Earns Its Space (No Master Grid)

Each content section gets its own spatial logic. An interview = dense multi-column. A poem = single narrow column. A gallery = open field. Unity comes from shared micro-elements (consistent labels, body text specs, color palette) — not spatial uniformity.

• Cohesion device: 2–3 recurring micro-details (letterspaced small-cap labels, consistent body specs, a hairline rule style) hold wildly different grids together
• Anti-pattern: Forcing everything onto the same 12-column grid

2. Density Oscillation Is Pacing

Alternate between dense (85–95% fill) and sparse (30–40% fill). No middle register. This creates breathing rhythm: compression → release → compression → release.

• Never run more than 3 dense sections without a sparse one
• The breath page: Near-empty page between dense sections. One small element, slightly off-center, prevents it reading as error
• 3:1 pattern: ~3 dense spreads followed by 1 open spread sustains attention indefinitely
• Density signals genre before reading begins: dense = literary, moderate = conversational, sparse = visual

3. Typography Is Architecture

Type above ~48pt stops being text and becomes building material — beams, walls, ceilings, columns.

• Three modes: (1) Reading text — body copy, linear. (2) Visual mass — display type as shape/weight/spatial divider. (3) Cultural signal — typewriter = documentary, serif = literary, sans caps = institutional
• Load-bearing threshold: Type occupying >40% of page area becomes structural, not communicative
• Ghost type: Same hue, 5–15% value shift from background. Occupies space without commanding attention. Creates a third layer between background and foreground
• 25:1 rupture: Above this ratio, type stops being a heading and becomes architecture

4. Asymmetric Weight Distribution

No symmetry. Load 70% of visual mass into 40% of the area. The remaining 60% creates tension.

• Productive range: 55/45 to 65/35. Below 55/45 reads as balanced. Above 70/30 reads as abandoned
• Counterweight minimum: Can be as small as 5% of area if it has maximum tonal contrast
• Three patterns: Asymmetric balance → directed movement. Diagonal → dynamic energy. Uniform field → contemplation

5. Negative Space Is Pressurized

White space is never leftover. It is pressurized (tension against density), breathing (pace control), confrontational (demanding reckoning with emptiness), framing (gallery-like isolation), or load-bearing (remove it and the composition collapses).

• The test: Remove the white space. If the composition collapses, it was active. If nothing changes, it was passive. Passive white space is a failure
• 30% threshold: Below 30% fill, space becomes foreground. Each element gains disproportionate gravity through isolation
• Specimen framing: To present an object for study, surround with 75–90% white space (4:1 minimum frame-to-object ratio)

6. Scale Contrast Drives Hierarchy

10:1, 20:1, even 40:1 ratios between largest and smallest elements. The jumps are abrupt and dramatic.

• Below 4:1 — elements compete (anti-pattern)
• 6:1–10:1 — editorial hierarchy sweet spot
• Above 25:1 — type becomes architecture, not heading
• Three tiers only: Display (~60–80pt), metadata (~14–18pt), body (~8–10pt). No intermediate sizes. The ratio 1:4:12 is most effective
• Tone beats scale: A dark/opaque element beats a large/light element in hierarchy

7. Collision, Not Transition

Unlike elements meet at hard edges. No gradients. No mediating elements. No blending zones. Energy comes from the boundary where two systems meet without reconciliation.

• Signal strength: Change 1 parameter = new subsection. Change 3+ simultaneously = new section entirely
• Collision effectiveness scales with the number of differing parameters (grid, typeface, density, palette, scale)
• Exception: Between zones of dramatically different density, a 2–3 spread graduated transition (decompression chamber) maintains immersion

8. Compose at the Spread Level

A single page is half a composition. Design the spread (or full viewport). Weight gradient left-to-right pulls the eye across.

• The gutter is always active: It divides, bridges, or anchors. Decide which for each spread
• Cross-gutter continuity: Align structural elements across the gutter at the same vertical position (span ≥60% of spread width)
• Gap semantics: Between images — narrow (<3mm) = continuous; medium (3–8mm) = related; wide (>8mm) = independent

---

10 Core Laws

Appeared in 17–31 of 45 issues. Major compositional decisions.

#	Law	Key Rule
9	Vertical text = architecture	Rotated 90° at page edge → structural element, not reading matter. Defines territory boundaries
10	Color = zoning	Color defines where you are, not what something looks like. Max 4 colors. Wilder layouts → tighter palette. Accent ≤30% of area
11	Photos = mass	Place images for shape/weight first, illustration second. Crop aggressively. A portrait is a dark rectangle before it's a face
12	Face override	Human face >15% of page area dominates everything including display type. Biological, not compositional. Design with it, not around it
13	Letterspacing = structural	>50% char width → horizontal beam. 200%+ tracking → reduces density 15–20%. Extreme tracking on small caps → whisper-quiet metadata texture
14	Handmade disruption	Every mechanical system needs periodic hand-made interruption. Contrast is production mode (hand vs. machine), not weight or size
15	3 hierarchy levels max	(1) Dominant display, (2) secondary, (3) body. More than 3 = no clear path. Even complex surfaces stay at 3
16	Progressive chaos = momentum	Order → chaos = forward momentum. Chaos → order = resolution. Establish the system before breaking it
17	Text density = tonal value	At arm's length, text = grey rectangle. Body ≈ 60% grey. Bold ≈ 75%. Justified text = architectural mass with clean edges
18	Grid exists to be violated	Establish structure specifically so its breaking is legible. A grid never broken is dead. Broken rules with no visible system = chaos

---

12 Structural Laws

Appeared in 9–16 of 45 issues. Powerful for specific situations.

#	Law	Key Rule
19	Multi-register = texture	Different scripts/typefaces create different visual textures. Non-primary script at 15–30% of type mass for maximum energy
20	Found documents = two layers	Reproduced artifacts carry their own design DNA + your placement. Both active simultaneously. Frame them or collide them — never leave them floating
21	Column width = genre	1 col = poetry. 2 = interview. 3 = continuation. 4 = feature. 8+ = data. Narrow = intimate. Wide = authoritative
22	Substrate isn't neutral	Paper/background color, texture, and material actively participate. Colored stock compresses contrast range 15–20%
23	Space power ∝ 1/quantity	In dense context, restricted white space is the most powerful element. <30% fill → space IS the composition. >85% → remaining space dominates
24	Fragmentation = implied scale	Crop at least 30% of a word at the edge. Viewer mentally extends it. Design feels larger than its format
25	Inline scale shifting	Size/weight changes mid-paragraph collapse headline systems into continuous flow. Enlarged words form scannable secondary layer
26	Layering replaces grid (z-axis)	3 layers = convincing depth. 4+ risks confusion. Ghost type (5–10% opacity, 3–5× readable size) = atmospheric layer
27	Leading = compositional	Generous (130–140%) = rhythmic striping, contemplative. Tight = solid mass, urgent. Leading IS reading speed
28	Margins = semantic	Generous (15–20%) = reflective. Narrow (5–8%) = urgent/dense. Reader calibrates before reading a word
29	Self-referential labeling	"PAGE 1 CONTENTS" at display scale inverts hierarchy. Meta-info becomes the dominant visual element
30	Grid-free needs more space	Without grid: 60–75% negative space minimum. Each element needs 3–4× its own area in surrounding space

---

Decision Framework

When facing a design task:

Step 1: Content Audit

What content types exist? Each gets its own spatial system (Law 1). Identify what's literary, conversational, data-driven, visual.

Step 2: Establish Scale System

Define exactly 3 tiers (Law 15): display, metadata, body. Set ratios ≥10:1 between display and body (Law 6). No intermediate sizes.

Step 3: Plan Density Rhythm

Map the sequence. Which sections are dense (85–95%)? Which are sparse (30–40%)? Follow 3:1 dense-to-breath ratio (Law 2). Design the density envelope consciously.

Step 4: Load the Weight

Place 70% of visual mass in 40% of area (Law 4). Identify entry point on the heavy side. Let the other 60% pull against it.

Step 5: Activate the Space

Every void must earn its keep (Law 5). Test: would removing this space collapse the composition? If not, it's passive — either pressurize it or fill it.

Step 6: Create Collisions

Where do unlike systems meet? Make those boundaries hard edges (Law 7). Text meets image at a hard edge. One grid ends, another begins with no transition.

Step 7: Check Hierarchy

Squint. Can you identify exactly 3 levels? If you see 4+, simplify. If you see 2, add a metadata layer. Tone beats scale when they compete (Law 15).

Step 8: Unify with Micro-Elements

Across all sections, maintain 2–3 recurring micro-details: a label style, a rule weight, a metadata treatment. This is the thread (Law 1 corollary).

---

Implementation Engineering

Bridging compositional principles to interactive media. Framework-agnostic — works with pure HTML/CSS, React, Vue, Svelte, or anything else.

Compositional Dials

Three tunable parameters that map Based Design laws to interactive contexts. Set per project.

DESIGN_VARIANCE (1–10) — Maps to Law 4 (asymmetric weight) + Law 18 (grid violation)

• 1–3: Symmetric grids, uniform spacing. Safe corporate.
• 4–7: Offset elements, overlapping, varied column ratios. Editorial energy.
• 8–10: Masonry, fractional grids, massive empty zones. Asymmetric layouts must fall back to single-column on small screens.

MOTION_INTENSITY (1–10) — New axis. Based Design is static; screens aren't.

• 1–3: No auto-animations. Hover/active state changes only.
• 4–7: CSS transitions with considered easing (cubic-bezier). Scroll-triggered reveals.
• 8–10: Choreographed sequences, parallax, spring physics, staggered orchestration.

VISUAL_DENSITY (1–10) — Maps to Law 2 (density oscillation) + Law 28 (margins as semantic)

• 1–3: Gallery feel. Huge gaps, generous margins, expensive emptiness.
• 4–7: Standard application spacing.
• 8–10: Tight padding, 1px separators, monospace numbers for data. Cockpit density.

Performance Guardrails

• Only animate transform and opacity — never top, left, width, height. GPU-composited properties only.
• Grain/noise filters: Apply to fixed pointer-events: none pseudo-elements, not to content layers.
• Z-index discipline: Use for systemic layer contexts only (modals, tooltips, navigation). No arbitrary z-index wars.
• Contain heavy animations: Isolate complex animations in their own compositing layer / component to limit DOM repaint cost.
• Viewport height: Use min-height: 100dvh (dynamic viewport), never 100vh (breaks on mobile with browser chrome).

Interactive State Requirements

Every interactive component must account for:

• Loading — skeleton placeholders with shimmer animation, not spinners
• Empty — purposeful empty state with guidance, not blank space
• Error — inline error messaging with recovery path
• Tactile feedback — hover, active, focus states that feel physical

Common AI Design Signatures to Avoid

Patterns that signal machine-generated design. Not rules — awareness.

Visual:

1. Pure #000000 black — use near-black (#0a0a0a, #111) for depth
2. Neon outer glows and drop shadows on everything
3. Oversaturated accent colors (saturation >80%)
4. Excessive gradient text as decoration
5. Purple/blue "AI aesthetic" palette as default

Layout: 6. Perfect bilateral symmetry everywhere — centered hero, centered cards, centered everything 7. Generic 3-column equal-width card grids as the go-to layout 8. Uniform spacing with no density variation between sections

Typography: 9. Oversized H1 with no counterweight — massive heading floating in space 10. Display type that's decorative but says nothing structural

Content: 11. Placeholder names: "John Doe", "Jane Smith", "Acme Corp" 12. Generic avatar circles with initials 13. Perfectly round numbers ($10,000 instead of $10,247) 14. Startup slop language: "Elevate", "Seamless", "Unleash", "Revolutionize" 15. Broken or generic Unsplash image URLs

Materiality: 16. Cards for everything — use border-top, divide-y, or negative space where elevation doesn't communicate hierarchy 17. Unstyled component library defaults — always customize 18. Max 1 accent color per palette. Stick to it.

Form & Data Patterns

• Label above input, helper text optional, error message below
• Contain layouts with a max-width (~1400px or contextually appropriate)
• CSS Grid over complex flexbox math for 2D layouts
• Standardize breakpoints project-wide

---

Typeface Decision Tree

Choose by structural job, not preference:

Need	Choice
Long-form reading, literary register	Serif body
Contemporary/institutional register	Sans-serif body
Maximum visual mass / architecture	Bold sans display
Tension through fragility at scale	Light/thin sans display
Increase density without area	Condensed
Horizontal beams and barriers	Extended/wide
Documentary authenticity, equal voices	Monospace/typewriter
Disrupt mechanical systems	Handwritten/script
Anti-corporate signal in disciplined layouts	Irregular/hand-drawn face

---

Reference Files

Load on demand — not all at once:

File	When to Load
references/laws-complete.md	Deep dive on any specific law — full corollaries and edge cases
references/techniques-rhythmic.md	Designing sequential flow, density arcs, section pacing, breathing rhythm
references/techniques-spatial.md	Grid alternatives, column strategies, spatial organization, containment
references/techniques-surface.md	Color, layering, depth, texture, found materials, z-axis effects
references/techniques-typographic.md	Type specimens, scale play, legibility spectrum, type as structure
references/implementation-patterns.md	CSS/HTML code patterns translating these principles to web
references/implementation-arsenal.md	Creative interaction catalog: animation patterns, scroll effects, micro-interactions, Bento paradigm
references/evidence-base.md	Source methodology, serif/sans decision tree with full rationale
RAW-FULL.md	Original 978-line unedited reference (archive)

---

30 laws. 107 techniques. 3 dials. 1,241 pages of structural analysis. Zero aesthetic opinions. Just physics.