# Rectangles — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://rectangles.fm/
Captured: 2026-11-02
CSS measured: 2026-11-02T07:04:04.444Z at 1440×1000 — https://rectangles.fm/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website features a highly skeuomorphic, editorial design language that mimics physical objects like manila folders, clear plastic binder sleeves, torn notebook paper, and vinyl record covers. The underlying canvas is a stark, dark grey/black, allowing the brightly lit, textured physical metaphors to stand out. Typography is bold and high-contrast, pairing a chunky sans-serif for headings with a more standard sans-serif for body copy. The layout relies heavily on asymmetrical composition, overlapping elements, and scroll-triggered animations that manipulate the scale and position of these physical metaphors.

## Classification

- Industry: creative
- Site type: Blog, Portfolio
- Business model: Portfolio
- Styles: editorial, retro, bold, photographic, skeuomorphic, grunge-distressed
- Platform: Framer
- Technology: GSAP

## Typography

- Display: Perfume Sans 1 — weight 600; size 234.3px; line-height 128.9px; tracking -11.7px; Regular (100% role confidence, computed values)
- Heading: Perfume Sans 1 — weight 600; size 40px; line-height 36px; tracking -0.4px; Regular (90% role confidence, computed values)
- Body: Forma DJR Display Regular — weight 400; size 16px; line-height 19.2px; tracking 1px; Regular (80% role confidence, computed values)

## Functional palette

- Canvas — canvas #121212: color-1: computed rgb(18, 18, 18); AI role: The #121212 dark grey/black serves as the primary background color for the entire page. (100% role confidence, computed values)
- Text — text #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used for the primary headings and body text against the dark canvas. (100% role confidence, computed values)
- Surface — surface #F5F3D4: color-6: computed rgb(245, 243, 212); AI role: The pale yellow #F5F3D4 is used as the background color for the distinctive sticky note newsletter form. (90% role confidence, computed values)
- Text — text #000000: color-4: computed rgb(0, 0, 0); AI role: Black (#000000) is used for text placed on top of lighter skeuomorphic elements, like the newsletter form. (90% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Perfume Sans 1",
    "fontStack": "\"Perfume Sans 1\", \"Perfume Sans 1 Placeholder\", sans-serif",
    "weight": "600",
    "size": "40px",
    "lineHeight": "36px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Livestreams",
        "top": 1449,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Takeaways",
        "top": 4913,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "From our community",
        "top": 8135,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Perfume Sans 1",
    "fontStack": "\"Perfume Sans 1\", \"Perfume Sans 1 Placeholder\", sans-serif",
    "weight": "600",
    "size": "64px",
    "lineHeight": "44.8px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Where designersget unstuck",
        "top": 121,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Perfume Sans 1",
    "fontStack": "\"Perfume Sans 1\", \"Perfume Sans 1 Placeholder\", sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "0.4px",
    "traits": "capitalize",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "Listen",
        "top": 10550,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Youtube",
        "top": 10578,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Spotify",
        "top": 10606,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Perfume Sans 1",
    "fontStack": "\"Perfume Sans 1\", \"Perfume Sans 1 Placeholder\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "0.3px",
    "traits": "capitalize",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Livestream",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Newsletter",
        "top": 22,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Takeaways",
        "top": 22,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Forma DJR Display Regular",
    "fontStack": "\"Forma DJR Display Regular\", \"Forma DJR Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Unpolished, honest conversations,",
        "top": 1505,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "with you in the room.",
        "top": 1524,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Bob Baxley on what he learned at Apple.",
        "top": 1080,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Forma DJR Display Regular",
    "fontStack": "\"Forma DJR Display Regular\", \"Forma DJR Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "1.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Watch on Youtube",
        "top": 1108,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Watch on Youtube",
        "top": 2356,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Watch on Youtube",
        "top": 2356,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Forma DJR Display Bold",
    "fontStack": "\"Forma DJR Display Bold\", \"Forma DJR Display Bold Placeholder\", sans-serif",
    "weight": "700",
    "size": "30px",
    "lineHeight": "25.5px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Design's",
        "top": 450,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Group Chat",
        "top": 476,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Perfume Sans 1",
    "fontStack": "\"Perfume Sans 1\", \"Perfume Sans 1 Placeholder\", sans-serif",
    "weight": "600",
    "size": "234.3px",
    "lineHeight": "128.9px",
    "letterSpacing": "-11.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Rectangles",
        "top": 10907,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Perfume Sans 1",
    "fontStack": "\"Perfume Sans 1\", \"Perfume Sans 1 Placeholder\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Ⓒ Rectangles",
        "top": 10811,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2026",
        "top": 10811,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": null,
    "fontStack": "sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Panel 2 of 3",
        "top": 1543,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#121212",
    "alpha": 1,
    "cssValue": "rgb(18, 18, 18)",
    "count": 4,
    "contexts": [
      {
        "tag": "body",
        "text": ":root body { background: var(--token-34db2426-54e1-488f-9616-640c6a7a5f58, rgb(18, 18, 18)); }Livest",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "LivestreamNewsletterTakeawaysCommunityFrom Chrishtml body { background: var(--token-60020197-3782-4f",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "input",
        "text": "",
        "top": 583,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#44CCFF",
    "alpha": 1,
    "cssValue": "rgb(68, 204, 255)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1449,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 14,
    "contexts": [
      {
        "tag": "h1",
        "text": "Where designersget unstuck",
        "top": 121,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "TOGETHER WITH",
        "top": 295,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Livestreams",
        "top": 1449,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "Design's",
        "top": 450,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Panel 2 of 3",
        "top": 1543,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 1186,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "rgba(255, 255, 255, 0.8)",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "Livestream",
        "top": 22,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Unpolished, honest conversations,",
        "top": 1505,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F5F3D4",
    "alpha": 1,
    "cssValue": "rgb(245, 243, 212)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Design's Group Chat",
        "top": 428,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 17,
    "contexts": [
      {
        "tag": "a",
        "text": "Youtube",
        "top": 10578,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10790,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#1C1C1C",
    "alpha": 1,
    "cssValue": "rgb(28, 28, 28)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 438,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Sections are separated by large vertical gaps, while content within sections overlaps and ignores strict grid alignment to enhance the physical metaphor.
- Corner style: The digital canvas uses sharp corners, but the visual elements rely entirely on the organic, varied corner shapes of the photographed physical objects (rounded folder tabs, jagged torn paper).
- Radius: CSS border-radius is minimal; perceived roundness comes from the assets themselves.
- Borders: CSS borders are largely absent, replaced by the visual edges of the skeuomorphic images (e.g., the welded seam of a plastic sleeve).
- Buttons: Buttons, such as the 'Join' button on the form, are stark, sharp-cornered rectangles with solid black fills and white text, contrasting with the textured backgrounds.
- Content width: Content is generally centered but uses aggressive asymmetrical positioning, with large visual elements breaking out of standard column constraints.
- Density: While text is relatively sparse, the visual density is high due to detailed textures, overlapping objects, and simulated shadows.
- Evidence: DOM facts confirm basic black/white color schemes and typography, while screenshots reveal that almost all visual framing and structural elements are achieved through high-fidelity, skeuomorphic imagery rather than CSS styling.

## Sections

Gallery section count: 7. Each entry corresponds to one gallery capture.

1. **Navbar — Rectangles Navbar** (Home)
   Small uppercase links spaced evenly on a dark strip stay quiet, so the collage below carries the visual weight.
   Capture: 1440×60px; page bounds 0–60px of 10217px; source section ID: `164b1201-b14a-439a-81c8-61af82a837bc`; image: https://media.designdetails.io/library/85857ee8ef4f8046f1d54e57dac800219b6dbff29b4a9b6e4f04cd8af197d995/164b1201-b14a-439a-81c8-61af82a837bc.webp
   SECTION.md v3.2: `164b1201-b14a-439a-81c8-61af82a837bc` (deterministic evidence; editorial review pending)
2. **Hero — Collage hero with email signup** (Home)
   A bold stacked headline beside a pinned paper collage and an inline email box gives personality and a clear single action.
   Capture: 1440×941px; page bounds 60–1001px of 10217px; source section ID: `400d350a-81af-4af1-a4f2-8c282b25d790`; image: https://media.designdetails.io/library/48c40c77c2040732cf254bd051f91d8ac18c02f1b2e4ca6d7701c56e6b704a43/400d350a-81af-4af1-a4f2-8c282b25d790.webp
   SECTION.md v3.2: `400d350a-81af-4af1-a4f2-8c282b25d790` (deterministic evidence; editorial review pending)
3. **Gallery — Livestream guests as vinyl-style covers** (Home)
   Consistent album-cover framing with short captions and watch links makes each guest instantly scannable and playful.
   Capture: 1440×2094px; page bounds 1449–3543px of 10217px; source section ID: `3e7cf431-fc8b-4b2a-810d-b0c1c6e3ed1c`; image: https://media.designdetails.io/library/931bbac8037ab235d0accb0df2fcac18461345166753804e270fb4c2e0d36154/3e7cf431-fc8b-4b2a-810d-b0c1c6e3ed1c.webp
   SECTION.md v3.2: `3e7cf431-fc8b-4b2a-810d-b0c1c6e3ed1c` (deterministic evidence; editorial review pending)
4. **Gallery — Takeaway documents in horizontal strip** (Home)
   Paper-sheet covers with portraits and bold titles make each talk look like a collectible, easy to scan across.
   Capture: 1440×2116px; page bounds 4783–6899px of 10217px; source section ID: `2c91566c-80a8-437b-ad57-7bb9ca5b361d`; image: https://media.designdetails.io/library/828c16c4f0f5ba63d342feddd4105526d7565844a1d202058ba12f6992f166ec/2c91566c-80a8-437b-ad57-7bb9ca5b361d.webp
   SECTION.md v3.2: `2c91566c-80a8-437b-ad57-7bb9ca5b361d` (deterministic evidence; editorial review pending)
5. **Testimonials — Notepad quote cards in grid** (Home)
   Highlighted phrases on torn notebook paper with small portraits make short praise feel human and quickly readable.
   Capture: 1440×699px; page bounds 7099–7798px of 10217px; source section ID: `d613a6a9-e7d4-4c7f-8798-e638ed67174e`; image: https://media.designdetails.io/library/d57f526e50723bc3a5ed08f839ef38cda27fb139a0f3262909c27871013d04b5/section-manual-d613a6a9-e7d4-4c7f-8798-e638ed67174e-1793681109920.webp
   SECTION.md v3.2: `d613a6a9-e7d4-4c7f-8798-e638ed67174e` (deterministic evidence; editorial review pending)
6. **Founder — Founder letter on folded paper** (Home)
   A typewriter-style letter with bold key lines delivers a personal pitch and makes the mission feel sincere.
   Capture: 1440×1119px; page bounds 8435–9554px of 10217px; source section ID: `5a3e6e50-5350-47b0-a590-d33b217d6b5b`; image: https://media.designdetails.io/library/260e50aa6ef834446ae74d07de75d704941673de75758746b9dcf16892d10db8/5a3e6e50-5350-47b0-a590-d33b217d6b5b.webp
   SECTION.md v3.2: `5a3e6e50-5350-47b0-a590-d33b217d6b5b` (deterministic evidence; editorial review pending)
7. **Footer — Four-column footer with giant wordmark** (Home)
   Small grouped link columns stay tidy while an oversized wordmark gives a strong brand sign-off.
   Capture: 1440×663px; page bounds 9554–10217px of 10217px; source section ID: `f24c7208-38e7-4a41-9443-cbdfde9afc8b`; image: https://media.designdetails.io/library/a927d3e0312ed5cd6c433cb9b2da5c0eafbc956197d8bbf23b01327819ebb192/f24c7208-38e7-4a41-9443-cbdfde9afc8b.webp
   SECTION.md v3.2: `f24c7208-38e7-4a41-9443-cbdfde9afc8b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/a7d8e0327549b333a0dfa572dd6ee64774ed0d998af5a6e77f69ca5f640ff266/desktop_full-1025ef99-2026-11-02T07-04-04-457Z.webp
- Mobile screenshot: https://media.designdetails.io/library/ffdbe505f8feefd732da7ce0549dcc6da7bd7979beedfedf46517ed7dbec1046/mobile_full-1025ef99-2026-11-02T07-04-34-882Z.webp
- Open Graph image: https://media.designdetails.io/library/ea0f654823d9c944a20ec114613aee4b73c09d0ce3972e09c220b5c6b3b64f34/og_image-1025ef99-2026-11-02T07-04-12-922Z.webp
- Full-page video: https://media.designdetails.io/library/b92c716a9086095d5c2b00e87a1498a4ebc00e78631f39387d75480b00493f26/motion-1793603301227.mp4
- Video poster: https://media.designdetails.io/library/d6ccd6f2125132d6e0e956f6742ad5001c41eab31eec2059109ad024851f5293/motion-poster-1793603301227.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Newsletter Form
- Editorial Card
- Testimonial Card
- Footer
- Floating Sticky Form
- Physical Media Containers

## Quality rubric

Overall: 63.3/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Rectangles.fm commits fully to a skeuomorphic, analog-media idiom—manila folders, vinyl record sleeves, torn notebook paper, and sticky notes—and, unlike many image-heavy sites, actually maps each physical metaphor to the semantic type of content it holds: episodes become album sleeves, takeaways become case files, testimonials become notebook scraps. That content-to-form discipline, combined with a scroll-triggered motion system that consistently stages entry, exit, and reversal across the hero, livestreams, takeaways, and community sections, gives the site a real structural coherence that goes beyond a single hero effect. Typography and color support rather than compete with the collage imagery, using a restrained near-black/white/cream base. Where it falls short of a higher tier is in originality of the individual devices themselves—paper-texture collage, vinyl nostalgia, and sticky-note UI are now familiar tools in editorial and indie-studio design—and in execution discipline, since the identical 'Design's Group Chat' card repeating at several points down a very long page reads as a cloned conversion widget rather than a controlled compositional choice. The result is a well-executed, idea-driven idiom that is good and cohesive but not yet restrained or singular enough to be called exceptional.

- Typography (15%): 62 — A single display family (Perfume Sans, 600 weight) is used at multiple scales with tuned letter-spacing (tight at -11.7px for the 234px footer wordmark, -1.9px for the 64px H1) against a plainer body sans (Forma DJR Display). The pairing is coherent and the scale jump from 16px body to a 234px footer mark is confident. However much of the perceived typographic character comes from hand-lettered script baked into photographic vinyl-cover assets rather than coded type, and the actual CSS typographic system (nav/body/headings) is a fairly conventional bold-display + simple-body editorial pairing without unusual optical adjustments beyond basic tracking.
- Color (10%): 58 — The authored palette is minimal and purposeful: near-black canvas (#121212), white text, and a single cream/yellow accent (#F5F3D4) for the sticky-note capture card, plus one blue section background (#44CCFF). This restraint keeps the dense collage imagery legible. But beyond this core triad, nearly all visual color variety (teal tiles, denim blue, warm skin tones, record sleeve greens) comes from photography/illustration rather than a designed CSS color system, so the demonstrable color craft is thin.
- Layout (20%): 66 — The page sustains an asymmetrical, overlapping collage composition across hero, livestreams, takeaways, and community sections, with oversized type breaking container bounds in the footer and varied overlap/rotation of physical-object imagery. This is a genuine structural idiom applied consistently, not a one-off hero trick. The weakness is a persistent, identically-styled 'Design's Group Chat' card that reappears many times down the page at different coordinates, reading more like a sticky conversion widget duplicated across scroll rather than a deliberately composed recurring motif, which undercuts the sense of an intentional grid/rhythm.
- Motion (20%): 64 — A consistent scroll-tied motion system is described across sections: hero parallax/scale, horizontal card entry for livestream items, staggered slide-up for takeaway documents, and scale/opacity pop-in with symmetric reverse behavior on scroll-up for testimonials. Applying the same forward/reverse scroll-trigger logic across four distinct sections shows systemic intent rather than an isolated hero effect. However, these are now common scroll-trigger patterns (parallax scale, staggered reveal, horizontal slide) without a distinguishing signature movement, and no evidence supports claims about easing quality, frame rate, or smoothness.
- Originality (25%): 60 — The site commits to a skeuomorphic analog-media concept—manila folders, torn notebook paper, sticky notes, and vinyl record sleeves—mapped specifically to content types (episodes as records, takeaways as case files, testimonials as notebook scraps). This conceptual binding is a genuinely distinctive choice for a design-podcast/newsletter site and goes beyond a single decorative flourish. However, each individual device (paper-texture collage, retro vinyl nostalgia, sticky-note UI) is a well-established trope in editorial and indie-studio design; the innovation here is in combination and content-mapping rather than invention of a new visual language, which caps it short of a landmark or hard-to-substitute idea.
- Content (10%): 72 — The visual metaphors are not merely decorative skins but are matched to the semantic type of content they hold: watchable video episodes become vinyl album art, written takeaway articles become case-file documents with photo clips, short social-proof quotes become notebook scraps, and the email capture becomes a sticky note. This purposeful mapping between container form and content type is the site's clearest strength and ties the disparate sections into one legible system.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Record sleeves, torn notebook paper and barcode stickers are scattered at angles over black, framing each guest like a vinyl release rather than a webinar. Bold stacked headlines and handwritten names keep the collage readable, while repeated sticky-note sign-up prompts turn scrolling into easy, low-pressure chances to join.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.