---
id: "aw-site-58384"
source: https://www.awwwards.com/sites/watson
author: "Watson Design Group, Inc. (watson-dg)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Torn Paper Collage over Giant Wordmark

## Summary
The opening screen of a creative studio site: a huge black grotesk placeholder wordmark is partly hidden behind three overlapping scraps of torn grey paper, and below it a large serif statement runs in centred lines with small photos set inline between the words. Worth studying for its mix of physical collage texture, a footnoted nav and editorial serif copy that treats images as words.

## Style
- Theme: light (white page, black type, grey paper)
- Mood: editorial, tactile, witty, crafted
- Tags: collage, torn-paper, inline-images, serif-statement, giant-wordmark, footnote-nav, editorial
- Category: Hero, Typography

## Palette
| Role | Hex |
|---|---|
| Page white | #FEFEFE |
| Paper light | #DADADA |
| Paper mid | #C7C7C7 |
| Paper shadow | #868080 |
| Image tile grey | #EBEBEB |
| Off-white | #F8F8F8 |
| Ink black | #1A1818 |
| Accent red | #C8102E |

## Typography
- Wordmark (six capitals): grotesk sans, bold, uppercase, slightly condensed, tight tracking, about 22 percent of frame height, black. Inter Tight (700) or Archivo (700).
- Statement ("creative studio, led by craft ... in search of conversation"): high-contrast transitional serif, regular, lowercase, tight leading (about 1.0), about 8 percent of frame height, black, centred. Newsreader (400) or Libre Caslon Text (400).
- Underlined word with a circled superscript footnote marker "(2)" and a long horizontal rule after it.
- Nav: small sans, regular, sentence case; centre items prefixed by tiny superscript numbers "(1)", "(2)", "(3)" and separated by commas. Inter (400).
- Location label ("LA + London"): small sans, regular, above the wordmark's left edge.

## Layout
- 4:3 frame (1600x1200) on plain white.
- Nav row at about 3.5 percent height: wordmark text left at a 2.5 percent margin, footnoted links centred, "About" right.
- Giant wordmark spans from 19 to 81 percent of the width at 20 to 42 percent height; the location label sits just above its top-left corner.
- Paper collage: three irregular torn sheets (a tall shard, a large tilted square, a narrower right piece) overlapping each other and the wordmark, centred at about 50 percent width and 45 percent height, covering roughly 40 percent of the frame.
- Statement block begins at about 72 percent height and continues below the fold, centred with images inline at text height (about 90px tall) and 24px gaps.
- No borders, radii or drop shadows apart from the natural paper texture.

## Elements
- Torn paper scraps: grey textured paper with speckles, fibres and slightly ragged edges, rotated at different angles, layered above the wordmark and partly above the statement.
- Giant wordmark: solid black letters, cropped by the paper.
- Inline images: a small dark red abstract photo between words, and a red and white high-top sneaker on a light grey square tile.
- Footnote marker: circled numeral in a small sans beside the underlined word.
- Horizontal rule: a 3px black line about 70px long following the footnote.
- Nav: minimal text links, no buttons or icons.

## Motion
Static image. Idea: drop the paper scraps in one by one with a slight rotation settle (spring, 80ms stagger) and let them drift a few pixels with the cursor.

## Rebuild it
1. Page: `bg-white text-[#1A1818]`; nav `flex justify-between px-[2.5vw] pt-6 text-lg` with `sup` numbers in the centre links.
2. Wordmark: `text-[22vh] font-bold uppercase tracking-[-0.02em] leading-none text-center mt-[10vh]`, with the location label `absolute` above its left edge.
3. Paper scraps: export three torn-paper PNGs with transparent edges; position them `absolute` over the wordmark with `rotate` values like -8, 14 and 4 degrees.
4. Statement: `font-[Newsreader] text-[8vh] leading-[1] text-center max-w-4xl mx-auto`; inline images as `span` elements with `inline-block h-[0.9em] aspect-[4/3] align-middle rounded-none` backgrounds.
5. Footnote: `sup` with `rounded-full border px-1 text-xs` and an `inline-block w-16 h-[3px] bg-current align-middle` rule.
6. Motion: animate each scrap from `y: -60, rotate: r - 10, opacity: 0` to its rest pose with a spring (stiffness 180, damping 16, 80ms stagger), and add pointer parallax of up to 8px per scrap.

## Generation prompt
A minimal white editorial website hero: a giant bold black uppercase sans-serif wordmark partly covered by three overlapping pieces of torn grey textured paper in a collage, small sans-serif navigation with superscript footnote numbers above, and a large centred lowercase serif statement below with small photos placed inline between the words, crafted and witty, no real brand names or logos.