Arah2/.agents/skills/design-taste-frontend/library/sites.json

[
 {
  "id": "aww-pp-neue-montreal",
  "name": "PP Neue Montreal",
  "url": "https://neuemontreal.com/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 8.6,
  "idea": "A typeface specimen dressed as a vintage city travel guide: the font named after Montreal is sold through guidebook titling, postcards and old tourist footage.",
  "mood": [
   "bold",
   "playful",
   "retro-modernist",
   "typographic",
   "confident"
  ],
  "archetype": "giant-wordmark",
  "hero": "Grainy coral-red field. Top row: a monogram in a pale pill at left, a pale-grey pill nav with seven links centred, a black pill button at right. Below at the left margin, a two-line white bold title at about 4.5vw; opposite it, a ring of repeated monograms set around a circle like a stamp. Three full-width black hairlines cut the field into bands: a two-line intro sentence at ~1.6vw sits in the second, and the typeface name fills the third in black bold at ~17vw, two lines, tight leading, 60% of the width. A 4:3 clip of 1960s street footage is inset bottom-right, 29% wide, bottom-aligned with the name.",
  "type": "PP Neue Montreal only: Bold for display with -0.01em tracking and leading near 0.9, Text Regular 16px for body and lists. Sizes leap from 16px to 144px headings to a ~240px name; one section enlarges a single lowercase letter to viewport height.",
  "colour": "#ed4b44 #1a1a1a #f0e7d4 #18bc42 #b5b5b5 #f2c21a — Each chapter takes a flat field (coral red, near-black, cream, green) with black or cream type; one headline colours every word differently. Warm, print-poster feel with visible grain.",
  "imagery": "Archive 1960s city footage, saturated vintage postcards, a handwritten postcard back, and rotated specimen posters and stamp sheets scattered around a headline. All square-cornered and inset, never full-bleed.",
  "layout": "24px side margins and full-width hairlines marking bands. Content is left-anchored in three or four columns split by vertical hairlines; chapters alternate between tabular lists, a scattered collage, a centred statement and a giant glyph comparison. A pill nav stays pinned.",
  "sections": [
   {
    "role": "intro",
    "description": "Near-black screen split by a vertical hairline at about 75% width. Left: a three-line small heading at the top margin, then a five-line bold oblique headline at ~6vw in which each line is indented further right like a staircase and each word takes its own colour (green, cream, grey, yellow, blue, orange). Right narrow column: two stacked postcards, one saturated photo card and one cream handwritten card with a stamp. A tiny section label sits bottom-left."
   },
   {
    "role": "other",
    "description": "A dark band of pure tabular type. A body paragraph occupies column one; weight names stack as tight single-line lists in two further columns divided by vertical hairlines. Below, a small label over a full-width rule introduces a two-column timeline: years stacked at the left margin, release notes stacked from the centre line behind a short vertical rule. One text size, leading near 1.0, no decoration at all."
   },
   {
    "role": "gallery",
    "description": "Dark full-viewport stage with a three-line cream headline at ~4vw placed dead centre. Around it eight or nine specimen artefacts (a stamp sheet, a green poster with a blue numeral, a grey flag chart, a rainbow ticket grid, concentric colour squares) are each rotated 10 to 30 degrees and arranged on a loose ring, several cropped by the viewport edge, as if tossed on a table."
   },
   {
    "role": "showcase",
    "description": "Cream field. A caption row at the top: a two-line label at the left margin and a five-line paragraph starting at about 55% width. Then a full-width rule carrying a tiny label at each end naming the two cuts. Below it, two black lowercase letters, each roughly half the viewport wide and cropped by the bottom edge, one from each cut, so the reader compares shapes at poster scale."
   }
  ],
  "steal": [
   "Give a product page a borrowed genre (here a tourist guidebook) and let that genre dictate titles, imagery and chapter names.",
   "Cut a flat colour hero into bands with full-width hairlines and set the name at ~17vw in the bottom band beside a small inset film clip.",
   "Scatter rotated print artefacts on a loose ring around a centred headline and let several crop off the viewport."
  ],
  "media": "The hero is a red printed cover with paper grain; the real media is small, a 418x316 looping 1960s street clip at the bottom right (about 10% of the viewport) beside a wordmark filling about 60% of the width. Later: a postcard pair in the right half of a split, rotated ephemera orbiting a centred statement, full-bleed photo panels that slide up over the previous chapter, a spine accordion, and a full-bleed vintage photograph overscanned 72px each side; square corners, one video.",
  "motion": "Black, then a turning seal of logo letters, then the cover by 4.5s; four hero groups rise 25px and fade over 400ms cubic-bezier(0.44,0,0.56,1) at 200ms steps, settling at about 5.5s though the page loaded in 2.5s. Lenis drives a chain of sticky full-screen chapters: ephemera fly off as a photo panel slides up, a headline steps through weights of the variable cut on scroll, and a single glyph rotates and zooms for about 5 screens; about 390 appear fades run over 400ms on a spring-shaped linear() curve, with no reduced-motion rule."
 },
 {
  "id": "aww-seasats",
  "name": "Seasats",
  "url": "https://www.seasats.com/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 8.4,
  "idea": "Calm, dusk-lit seascapes sell autonomous boats as serene instruments, and the navigation is a column of stacked colour swatches taken from that sea-and-sand palette.",
  "mood": [
   "serene",
   "cinematic",
   "engineered",
   "assured"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A 10px white frame surrounds everything. The left 84% is one rounded media panel: a dusk scene of a low, solar-decked vessel centred on mirror-flat water, with two larger hulls cropped by the panel's left and right edges. The headline is centred in the panel's upper third, two lines of white light-weight flared serif at 124px (8.6vw). A wordmark in custom wide techno lettering sits top-left; a white rounded button with mono caps and a dark-green square arrow sits bottom-centre. The right 14% is the menu: a full-height column of stacked flat colour blocks (blush, sage, then four darkening olives), each holding left-aligned 15px links, sub-items numbered 01 to 04.",
  "type": "seasonMix, a low-contrast serif-sans hybrid, light weight, sentence case, near-zero tracking, at 124px for the headline and about 40px for statements; seasonSans 16px for body and menu; supplyMono uppercase at 9 to 12px for buttons, tags and footer data.",
  "colour": "#a6b3bc #232323 #b7c8be #d6c4b8 #2c3620 #e2832a — Slate blues and lilac greys from the seascapes dominate; the menu adds blush, sage and olive blocks; the footer flips to a burnt-orange and rust scene. Text stays white.",
  "imagery": "Photoreal rendered footage of autonomous boats on glassy water at dusk: symmetrical, low horizon, lots of sky, full-bleed after the hero. Small square-cornered inset stills with mono tag labels float over the scene.",
  "layout": "Mostly full-viewport scenes with one centred text block each, at top or bottom, and the wordmark fixed top-left. Only the hero uses the framed panel-plus-menu split. A thin vertical progress line runs down the right edge.",
  "sections": [
   {
    "role": "features",
    "description": "A pinned full-bleed scene shot from the boat's deck: the hull forms a dark symmetrical wedge rising from the bottom edge to a mast at centre, horizon at one-third. At top-centre six short statements are stacked, centred, at 16px; one is white and the others half opacity, and the highlight steps down the list on scroll. For each, small photo cards (150 to 220px wide, square corners, mono tag on the top edge) appear left and right of the mast."
   },
   {
    "role": "intro",
    "description": "A full-bleed aerial view of dark teal water with several small vessels scattered across the lower half and a faint horizon near the top. A single two-line statement in the light serif at about 40px sits centred near the bottom edge. Nothing else is on screen except the wordmark top-left and the thin progress line at right."
   },
   {
    "role": "footer",
    "description": "Colour inverts to a burnt-orange haze over rust-red terrain, with black silhouettes of hulls and a keel hanging from the top edge as if seen from below the surface. Mid-height: mono readouts at left reporting distance scrolled in metres and scroll speed in knots with a one-line quip; a link list at 16px in the centre; mono contact details at right. The wordmark fills the full width at the bottom, white, about 130px tall."
   }
  ],
  "steal": [
   "Build the menu as a full-height column of stacked flat colour blocks sampled from the imagery, grouping links by block colour instead of by rules or headings.",
   "List every claim at once, centred and dimmed, and move a single full-opacity highlight through the list on scroll while supporting images appear around a fixed subject.",
   "Give the footer its own opposite-temperature scene and a live readout of how far and how fast the visitor scrolled, in the product's own units."
  ],
  "media": "A dusk render of the vessel on still water, as a still, a 3s muted loop and a canvas layered together, fills an inset card at about 84% of the width beside a colour-band nav panel and goes full bleed once scrolled. Then a scroll-scrubbed frame sequence on a sticky stage with labelled photo cards floating at depth, small video thumbnails that grow into full-bleed chapter loops, a WebGL globe rising as a half-sphere from the bottom edge, and sticky product renders that turn with the scroll; 18 images, 6 videos, 8px corners on the hero frame and cards.",
  "motion": "The preloader wordmark's seven letters slide up out of their masks at 50ms steps, the framed hero arrives at 1.2s and the title fades in softly, settling after about 5s, and smooth scroll then runs 34 sticky elements with no pins: the flythrough is a scrubbed image sequence, a fixed background layer changes the ground per chapter, and the nav collapses to a slim right-edge rail. Title characters rise on cubic-bezier(.215,.61,.355,1) (the house ease, 17 uses) with durations that shorten by 12ms per character, so the end of a word catches up with its start."
 },
 {
  "id": "aww-ai-in-design-report-2026",
  "name": "Ai in Design Report 2026",
  "url": "https://stateofaidesign.com/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 8.4,
  "idea": "A research report laid out like a colour-blocked print annual: a thermal-blurred video collage on top, an oversized tight grotesk title, and flat orange, lilac, sage and black blocks carrying stats, quotes and chapters.",
  "mood": [
   "editorial",
   "bold",
   "colour-blocked",
   "assured",
   "contemporary"
  ],
  "archetype": "editorial-masthead",
  "hero": "The top 53% is a full-width video band: blurred, heat-map-like abstract footage in orange, lilac and sage, overlaid with four or five hard-edged rectangles of the same footage in grey or green, two tagged with tiny mono labels in white boxes. The header sits flush on top: a black logo block at far left, an orange link tab running to 40% of the width, two plain links at right. Below the band, on white: a two-line deck at about 1.4vw on a 1% left margin, and from 42% across a two-line title at 8.3vw, medium weight, tracking -0.06em. Bottom row: mono credit left, scroll cue and arrow aligned to the title column.",
  "type": "Beausite Classic, a grotesk with some stroke contrast, in Medium for titles and Regular for text; sentence case, tracking -0.06em at display size. Geist Mono for small uppercase labels. Steps: 8.3vw title, about 5.5vw numerals, about 3vw statements, 16px body, 10px mono. Footer wordmark near 96vw.",
  "colour": "#ffffff #000000 #fe7141 #cdabfe #d1ddd3 #f0ff1c — White base with flat blocks of orange, lilac, sage and black assigned to whole modules (stat tiles, quote panels, chapter bands), all drawn from the hero footage. Text is black, or off-white on black.",
  "imagery": "Hero: abstract blurred video with a heat-map grade, cut into overlapping rectangles. Body: warm documentary photos and clips of people at desks in wood-lined rooms, square-cornered, butted directly against flat colour blocks with no gap.",
  "layout": "1% margins and a recurring column line at about 42% where most headings and text begin. Open white text passages ruled by hairlines alternate with tight mosaics in which photos and colour blocks share edges. Each chapter opens with a full-width colour band.",
  "sections": [
   {
    "role": "proof",
    "description": "A full-width hairline, a tiny mono label at the left, then seven black partner logos evenly spaced across the full width in one row with generous padding above and below, closed by a second hairline. Immediately beneath, another mono label and a three-line statement at about 3vw, flush left and occupying only the left half, followed by a full-width photo strip."
   },
   {
    "role": "stats",
    "description": "A mosaic with no gutters. A photo of two people at a laptop fills the left two-thirds at roughly 1:1; the right third is split into two stacked flat tiles, lilac above and sage below. Each tile carries a large numeral with a plus sign at about 5.5vw in its top-left corner and a two-line caption directly beneath; the rest of the tile is empty colour."
   },
   {
    "role": "testimonial",
    "description": "Quote module as two abutting blocks: a black block on the left 40% holding only a small name and a mono role caption, and a sage block on the right 60% with the quotation at about 3vw, top-left aligned with empty sage beneath. Directly below, a full-width orange band opens a chapter: hairline at top, a large two-digit number with the chapter word under it at left, a two-line title and small paragraph starting at the 42% column."
   },
   {
    "role": "footer",
    "description": "Black footer. A row of three small source counts along the top, separated by vertical hairlines, then the report name in off-white heavy type at nearly full viewport width with a trademark sign at its top-right, then the year at the same size right-aligned on a second line. Two small link columns with mono headings sit lower left beside the year; a hairline and one row of credits and partner logos close it."
   }
  ],
  "steal": [
   "Start most headings and text at a fixed column line about 42% across, leaving the left for small decks, credits and chapter numbers.",
   "Butt flat colour tiles directly against a photograph with no gutter and put one large numeral plus two caption lines in each tile's top-left corner.",
   "Take the page's flat block colours from the hero footage so the abstract video and the layout read as one palette."
  ],
  "media": "A video collage covers 100% of the screen at load and lifts to the top ~53% to uncover the title on white. Below, a documentary photograph two thirds wide in a sticky frame beside stacked colour stat blocks, a pinned deck of colour cards each with a 10s clip docked bottom-left, and a carousel of equal stills running off the right edge: 12 images and 6 muted videos, all square-cornered.",
  "motion": "No preloader, but the collage re-cuts itself for about 4s before the title lands. Framer drives the sticky stacking (a 1350px photo frame and three 900px chapter cards that peel away to uncover the next); there is no split text, links change colour over .2s cubic-bezier(.44,0,.56,1), and one panel slides 610px in over 500ms cubic-bezier(0.44,0,0.37,1)."
 },
 {
  "id": "aww-house-of-honey-1",
  "name": "House of Honey",
  "url": "https://www.houseofhoney.com/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 8.4,
  "idea": "A block-heavy wordmark pierced by a hairline script: the bold-against-delicate contrast is repeated at every scale, with giant pink script behind quiet serif statements.",
  "mood": [
   "glamorous",
   "warm",
   "playful",
   "editorial",
   "confident"
  ],
  "archetype": "giant-wordmark",
  "hero": "Top 42% is a flat blush-pink band; the bottom 58% is a full-bleed photograph of a bright living room, arched window on the centre axis, butting against the band with no margin. A tiny nav row sits at the very top with 8px side margins: block logo glyph and five links left, contact link with a small square arrow box far right. The wordmark fills the width edge to edge: two words in ultra-black extended caps, about 120px cap height, dark aubergine, with a hairline script 'of' 230px tall between them, overshooting above and below. Directly beneath, two two-line serif uppercase taglines at 31px, one flush left, one flush right.",
  "type": "Wordmark in ultra-black extended caps; statements in noeText serif, uppercase, 31–40px, tight tracking; nav and captions in neueHaasGrotesk around 14px; 'canora' hairline script for the connecting word and for cropped background words at 37vw. Three contrasting voices, each with one job.",
  "colour": "#edccbe #331917 #0e0e0e #f26fcb #ffffff — Blush pink and dark aubergine-brown alternate as full fields and as each other's text colour. Hot pink appears only in the oversized script and a 2px divider. Photographs bring saturated colour.",
  "imagery": "Editorial interior photography, saturated and daylight-lit. Hero is a full-bleed landscape crop; projects are portrait crops about 5:6 in a three-column grid with 4px gutters and square corners.",
  "layout": "Edge-to-edge with 8px outer margins. Typographic sections (small centred label, serif statement, cropped giant script) alternate with a three-column image grid. Blush and brown fields swap each section; hairline link rows close blocks. The footer is a full-width logo glyph.",
  "sections": [
   {
    "role": "intro",
    "description": "Dark aubergine field under the hero photo, separated by a 2px hot-pink line. A small sans label centred, then a three-line centred serif uppercase statement at about 31px in blush, 45% of the width. Behind it a hot-pink script phrase set near 37vw runs off both sides and is cut by the section's bottom edge, its ascenders rising into the statement. A smaller serif line follows."
   },
   {
    "role": "other",
    "description": "Title card before the project grid. Blush field, nearly empty screen. A small label and a one-line serif uppercase heading about 40px sit centred at 55% height. The giant pink script returns, cropped by the bottom edge so only its top half shows and running off both sides."
   },
   {
    "role": "work",
    "description": "Three columns edge to edge with 4px gutters and 8px outer margins. Portrait photos about 500×580px, square corners. Under each: an uppercase sans title at 14px and a grey line of GPS coordinates. Two rows, then a full-width hairline row with a text link left and a small square arrow box at the far right."
   },
   {
    "role": "footer",
    "description": "Brown field. The logo glyph is enlarged to full width and about a third of the screen: blush rectangles and quarter-circle arcs with 4px gaps, forming an abstract monogram. Below: four columns of small links, a hairline, two addresses in the first two columns, another hairline, then copyright left and a small blush button right."
   }
  ],
  "steal": [
   "Set a wordmark edge to edge in ultra-heavy extended caps and thread a hairline script connecting word through it that overshoots the cap height both ways.",
   "Use an oversized script word in one hot accent colour as a cropped background layer behind small, calm serif statements.",
   "Split a tagline into two halves, flush left and flush right on the same baseline under the wordmark, instead of centring it."
  ],
  "media": "The lower 58% of the fold is a full-bleed interior photograph that continues for one full viewport as a five-image crossfading slideshow with a pink progress line on its bottom edge. Below: a three-up grid of 4:5 project tiles with 8px gutters sliding over a giant script marquee, a full-bleed tinted feature photograph with its title docked bottom-left, a full-bleed photograph with an inset colour card, and one giant cropped letterform as the footer's picture, the photographs oversized to 110-170% of their frames for drift and no video anywhere.",
  "motion": "There is no visible preloader and the page is whole at 400ms; under Lenis, blocks rise 8px and fade in over 800ms ease-out at 0-260ms staggers (39 WAAPI calls), slideshow crossfades take 600ms cubic-bezier(0.7,0,0.25,1), the oversized photographs drift, and script marquees run on CSS time (90-122s per pair). Page changes use a 1s view transition on the same curve; nothing pins, and there is one reduced-motion rule."
 },
 {
  "id": "aww-white-desert",
  "name": "White Desert",
  "url": "https://white-desert.com/",
  "source": "Awwwards Site of the Day",
  "kind": "hospitality",
  "score": 8.4,
  "idea": "One word, the destination, set a third of the screen tall over footage like a film title card; sheer scale stands in for remoteness.",
  "mood": [
   "cinematic",
   "epic",
   "luxurious",
   "cold",
   "restrained"
  ],
  "archetype": "bottom-anchored-type",
  "hero": "Full-bleed video (the view from an aircraft window over an ice shelf, darkly vignetted by the window frame) fills the viewport. Faint vertical hairlines divide it into six columns. Top-left, three outlined rectangular nav buttons about 120 by 40px with 6px gaps; top-right, two more; between them a small white mountain logo over a condensed caps name. One condensed uppercase word spans almost the full width at 17.8vw, white, centred, anchored so its baseline sits about 35px above the bottom edge. At mid-height a two-line italic serif tagline at about 16px hangs on the first column line at left, and a film-play label sits between two hairlines at right.",
  "type": "Three voices: Oswald 400 uppercase for the giant word and footer wordmark (up to 22vw); Cardinal Classic Long, a light high-contrast serif, for caps statements near 32px and italic taglines; Inter Tight 14px for nav and body. Body to display is roughly an 18x jump.",
  "colour": "#040608 #ffffff #e9e7e1 #1f2b4d #f5821f #95979a — Footage and near-black open the page; content sections flip to pure white with navy serif type and end on a warm grey footer. One small orange tab is the only accent. Cool overall.",
  "imagery": "Aerial and wildlife footage and stills of ice, penguins and rust-coloured rock peaks, natural cool grade, always full-bleed with square corners; trips appear as tall vertical image slices set side by side with no gaps.",
  "layout": "A six-column grid made visible by faint full-height hairlines runs through every section. Text blocks are small and hung off column lines, often starting at column two or three, with large voids around them. Full-bleed image screens alternate with nearly empty white text screens.",
  "sections": [
   {
    "role": "intro",
    "description": "A white screen with the six vertical hairlines still showing. A serif caps paragraph at about 32px, navy, light weight and tight leading, occupies only columns two to four, left-aligned with its first line indented by half the measure. Above its top-left sits a small italic label ringed by a loose hand-drawn pen scribble. An orange vertical tab with rotated text is fixed to the right edge."
   },
   {
    "role": "gallery",
    "description": "Leaving the hero, the giant word blurs and dissolves into white mist that becomes the next section's background. Later a full-viewport photograph of jagged rock peaks in snow bleeds to all four edges, with a narrow 13px paragraph from the white section above overlapping its top edge at a column line, so text and image interlock rather than stack."
   },
   {
    "role": "showcase",
    "description": "A serif caps heading at about 40px sits left of centre with a long pencil-like scribble underline that extends well past the words on both sides. Below, a full-width band of four vertical image panels with no gaps and unequal widths, like an accordion; the first panel carries a two-line italic serif title in white at its top-left."
   },
   {
    "role": "footer",
    "description": "Warm grey field. The top row holds a small logo, three columns of grey link lists with italic serif group headings and, at right, a stack of square-cornered off-white tiles (a video thumbnail, two half-width buttons, one full-width). Beneath, the brand name in navy condensed caps runs edge to edge at about 22vw. A final strip has award badges left, a centred italic quotation and legal links right."
   }
  ],
  "steal": [
   "Set a single place name in condensed caps at about 18vw, centred and anchored to the bottom edge of full-bleed footage, with everything else on screen at 14-16px.",
   "Leave the column grid visible as faint full-height hairlines across video, white and footer sections, and hang small text blocks off those lines.",
   "Ring or underline small serif labels with a loose hand-drawn pen scribble to put one human mark into an otherwise strict layout."
  ],
  "media": "An 18s muted aerial and ice-cave clip covers the whole first screen under a scrim, with the title docked along the bottom edge. Later pictures dissolve into the white page through fog-like fades, a horizontal accordion opens one trip panel at half width beside blurred slivers, vertical ice strips wipe across the previous photograph, and a long pinned track of inset cards floats on a full-bleed texture ground before a closing photo panel carrying a quotation; 20 images, one video, square corners and a high-key cold grade.",
  "motion": "There is no entrance choreography and footage plays from the first frame; under Lenis the hero title blurs and is swallowed by a sticky fog layer growing from 390 to 900px tall, statement lines fill from grey to navy, the camps heading scrubs from 140px down to 60px, and a pinned horizontal track moves the cards at about 0.56px per scrolled pixel over an 8,328px runway. Blocks rise 20rem with opacity over 1.4s cubic-bezier(.16,1,.3,1), and hovers run .3s cubic-bezier(.5,1,.89,1)."
 },
 {
  "id": "opl-applied-imagination",
  "name": "Applied Imagination",
  "url": "https://applied-imagination.gpc.consulting",
  "source": "One Page Love",
  "kind": "other",
  "score": 8.3,
  "idea": "An essay conceived on a flight is read as a descent: an altimeter ticks from 30,000 ft to zero while you scroll down through halftone clouds to mountains at ground level.",
  "mood": [
   "airy",
   "witty",
   "editorial",
   "dreamlike"
  ],
  "archetype": "type-poster",
  "hero": "A pale blue sky fading to warm cream fills the viewport, with white clouds shaded in halftone dots. A tiny serif logotype sits top-centre; no nav. The title, two centred lines of black wedge-serif at 8.9vw, occupies the middle half of the screen and about 73% of its width; a cloud layer passes in front of the second line's baseline so the feet of the letters dissolve into dots. A two-line centred deck at 24px sits beneath. A mono byline strip is centred on the bottom edge with a scroll cue bottom-right. On the left edge at mid-height, a short vertical rule carries a two-line mono altitude readout.",
  "type": "fsKim, a sturdy wedge-serif display face, regular weight at 128px with -0.01em tracking for the title and pull quotes; gtAmerica at 24px for the deck and about 16px for essay body; gtAmericaMono uppercase around 11px with wide tracking for byline, altitude and tape labels.",
  "colour": "#cbe4f2 #f1e3b5 #0a0a0a #ffc013 #8e2f8f #f04e23 — Sky blue melting into sand yellow is the constant ground and text is black. Saturated magenta, orange and yellow arrive only in collage objects, tape labels and the footer contact card.",
  "imagery": "Photo-collage cut-outs (parachutes carrying a treasure chest and a burning dumpster, a pair of legs, mountains) given a coarse halftone dot screen, layered in front of and behind the type against painted clouds.",
  "layout": "A narrow text column about 38% wide for essay passages, interrupted by full-width display pull quotes and collage objects floating at the edges. One continuous sky instead of sections, with a fixed left-edge altimeter. Nearly 23 screens, ending on a ground-level landscape.",
  "sections": [
   {
    "role": "intro",
    "description": "Sky background, no container. A three-line pull quote in black wedge-serif at about 7vw is centred and tightly leaded. Two cut-out parachutes hang over it: a magenta one from the top-left carrying a chest spilling coins, an orange one at lower right carrying a burning dumpster, each overlapping letterforms. Small mono labels on tilted strips of coloured tape are stuck to the objects. Words in the quote turn from grey to black as they are reached."
   },
   {
    "role": "other",
    "description": "Running essay text in about 16px grotesk, black, in a single column roughly 38% of the viewport wide, positioned left of centre with large sky margins on both sides. Paragraphs are separated by a blank line; serif sub-statements at about 28px introduce passages. The next display quote is seen rising from below, its letters partly hidden behind cloud and blurred."
   },
   {
    "role": "contact",
    "description": "Ground level: halftone-screened mountains in green and brown rise from both sides, and the title returns at huge scale, cropped by the top edge and tucked behind the peaks. Centred below is a square-cornered two-panel card: a cream left panel with a short form of two fields and a small orange button, and a magenta right panel with a round portrait, name and a yellow subscribe button. Yellow tape-strip credits sit on the bottom edge."
   }
  ],
  "steal": [
   "Tie a persistent numeric readout to scroll position (altitude falling to zero) so the reader's progress becomes part of the story.",
   "Layer an illustration element in front of the bottom of a giant title so the letters sink into the scene instead of sitting on top.",
   "Apply one coarse halftone dot screen to every photo cut-out so collage pieces from different sources read as one illustration set."
  ]
 },
 {
  "id": "opl-compile",
  "name": "Cursor Compile",
  "url": "https://cursor.com/compile",
  "source": "One Page Love",
  "kind": "event",
  "score": 8.3,
  "idea": "The event name drawn as seven looping one-line curves in seven colours, more signature than logotype, on an otherwise whisper-quiet off-white page whose images are re-rendered as rows of coloured characters.",
  "mood": [
   "quiet",
   "hand-drawn",
   "warm",
   "technical",
   "restrained"
  ],
  "archetype": "giant-wordmark",
  "hero": "Warm off-white field with no header or navigation. Starting about 23% down, a line-drawn wordmark spans from 8% to 92% of the width and about 29% of the height: each letter is a single 2px stroke looping like a Lissajous figure, each in a different colour (orange, green, olive, lilac, black, brown, blue), overlapping its neighbours. Directly beneath, two 14px captions, one flush left in ink and one flush right in grey. After a gap of about 20% of the viewport, three equal columns sit at the bottom, each topped by a hairline: an 18px statement, a grey 14px paragraph, and an email field over a full-width near-black rectangular button.",
  "type": "The only large lettering is the drawn wordmark. All real text is CursorGothic regular in two sizes, 18px and 14px (the largest text on the page is 1.8vw), sentence case, with hierarchy made by ink versus mid-grey rather than by size or weight.",
  "colour": "#edece8 #26251e #f07a1f #2e9e3a #2f6bf0 #9b8ff0 — Warm paper ground with near-black and grey text. The wordmark's colours return one at a time as the single ink of each character-rendered image (lilac, teal, green, orange). Event photos are dark and warm.",
  "imagery": "Two kinds: landmarks and speaker portraits redrawn as rows of tiny characters in one saturated colour on a tint of the same colour; and dark, warm documentary event photos. All are square-cornered rectangles in strict rows.",
  "layout": "About 7% side margins on a three-column grid. Each section has a small two-line heading at left (title in ink, subtitle in grey), then a row or carousel of equal tiles with one-line captions beneath. Very large vertical gaps between sections; a denser photo grid near the end.",
  "sections": [
   {
    "role": "list",
    "description": "Tour dates as a three-column grid of 3:2 tiles. Each tile is a city landmark rendered entirely in rows of small characters in one colour on a pale tint of that colour: lilac, teal, green, orange. Under each tile, one caption line: city name in ink, date in grey straight after it, and a status word flush right. A fourth tile wraps alone to the left of a second row, leaving two columns empty."
   },
   {
    "role": "gallery",
    "description": "Session recordings as stacked carousels. A small heading and grey subtitle, then per stage a tiny label at left with two arrow glyphs at far right and a row of 16:9 dark photo tiles, two full tiles visible and a third cropped by the margin. Each tile has a small white event tag in its bottom-left corner. Caption beneath: speaker name in ink followed by the talk title in grey on the same line."
   },
   {
    "role": "about",
    "description": "Speaker row: one-line heading at left, arrows at right, then four near-square portrait tiles with 8px gaps, each a face drawn in horizontal rows of characters in one colour on its tint (orange, green, lilac, teal). Some tiles show only plain stripes with the face barely emerging, so portraits appear to resolve from lines as they load or on hover."
   },
   {
    "role": "cta",
    "description": "After a three-column photo grid with mixed landscape and portrait crops and 8px gaps, the page ends on an empty off-white screen holding one centred sentence at 18px and a small dark pill button beneath it. There are no footer columns, links or legal rows."
   }
  ],
  "steal": [
   "Draw the name as one continuous thin looping stroke per letter, each in a different colour, and let it be the only large element on the page.",
   "Keep all text at two small sizes and build hierarchy from ink versus grey on the same line (name in ink, detail in grey right after it).",
   "Re-render photographs as rows of tiny characters in a single saturated colour on a tint of that colour, one colour per tile."
  ]
 },
 {
  "id": "opl-the-new-industrials",
  "name": "The New Industrials",
  "url": "https://thenewindustrials.com/",
  "source": "One Page Love",
  "kind": "other",
  "score": 8.3,
  "idea": "A long-read essay laid out inside a visible drafting grid, where colour fields shift as you read and 3D machine parts drift through the margins and finally assemble into the publisher's initials.",
  "mood": [
   "bold",
   "playful",
   "editorial",
   "engineered",
   "saturated"
  ],
  "archetype": "editorial-masthead",
  "hero": "A saturated orange page framed by black hairlines 24px from each edge. Top strip: a monogram logo left, a black pill with orange monospaced title centred, a boxed year right. Under it a row of eight empty outlined cells, 62px tall, like a ruler. A cream panel then fills the remaining width and height. Inside, a WebGL scene of pastel low-poly machine parts with visible wireframes sits behind a two-line uppercase title in a tall condensed slab serif, glyphs about 210px high, spanning 83% of the width. Small monospaced uppercase credits flank it at mid-height; reading time is centred below, with two boxed share links on the bottom edge.",
  "type": "Title in a tall condensed slab serif at roughly 14vw cap height, black, uppercase. Essay in Albra Book serif: 34px lead paragraph, 18px running text with generous leading. Supply Mono in tiny uppercase for credits and box labels; a narrow typewriter-like face for the pull quote.",
  "colour": "#ff8126 #f1ead8 #161615 #4db3ff #c5f53d #ff5fc0 — The page background changes as you read: orange, then a gradient through lilac into sky blue, then acid lime at the end. Type and hairlines stay black; the 3D parts carry rainbow gradients.",
  "imagery": "Real-time 3D machine components (cylinders, gears, polyhedra) in matte pastel with coloured wireframe edges and neon gradient caps; they overlap the title, float into text margins and form letters in the footer.",
  "layout": "Black hairlines divide the whole page into cells: one wide text cell flanked by narrow empty ones, each chapter tagged with a small numbered box at its corner. The lead paragraph spans the cell, running text is indented into a narrower column, and full-width quote screens interrupt.",
  "sections": [
   {
    "role": "intro",
    "description": "On orange, a ruled cell with a small numbered square at its top-right corner. The opening paragraph is set in serif at about 34px, seven lines, filling the cell with 60px padding. A horizontal hairline closes the cell; the next one indents its text by about 180px and drops to 18px, with a vertical rule marking the indent. The side cells stay empty, so the grid reads as margin furniture."
   },
   {
    "role": "other",
    "description": "Pull quote: a full-viewport interruption where the grid lines stop. The background becomes a vertical gradient from orange through dusty lilac to sky blue. Centred, five lines of a narrow, widely tracked typewriter-style face at about 48px in dark olive-brown, each letter trailing a soft red vertical smear downward like wet ink. The next cell resumes on the blue that the gradient ended on."
   },
   {
    "role": "other",
    "description": "Body screens: a single serif column about 960px wide between two vertical hairlines, paragraphs separated by a blank line. One 3D object per screen (a grey-green polyhedron with green edges, an orange hexagonal nut) sits half outside the column, crossing the vertical rule and the page edge at a different height each time, so every screen of text has one sculptural interruption."
   },
   {
    "role": "footer",
    "description": "Acid-lime field. The publisher's three initials are built as a sculpture from the 3D parts seen earlier, about 60% of the viewport tall and spanning nearly the full width, each letter a different assembly of pipes, gears and blocks in clashing gradients. Below, hairlines form two cells holding monospaced uppercase credits at 10px, aligned to the cells' left padding."
   }
  ],
  "steal": [
   "Draw the layout grid as visible black hairlines, including a row of empty cells, and tag each text block with a small numbered box.",
   "Change the page background colour between chapters of a long read so progress is felt as a shift of colour.",
   "Let one family of 3D objects recur at three scales: behind the title, in the margins, and assembled into a monogram at the end."
  ]
 },
 {
  "id": "opl-wild-as",
  "name": "wild",
  "url": "https://craft.wild.as",
  "source": "One Page Love",
  "kind": "agency",
  "score": 8.3,
  "idea": "A studio essay on craft versus AI in which everything decorative is drawn on one square-pixel grid: the hero heatmap, the icons, the diagrams, the marquee lettering and the footer equaliser.",
  "mood": [
   "precise",
   "playful",
   "technical",
   "bright",
   "editorial"
  ],
  "archetype": "editorial-masthead",
  "hero": "White page with a barely visible graph-paper grid. The top 22% is a masthead band split by a vertical hairline at 60%: at left, a two-line uppercase headline in a light grotesk at 5.2vw, tight leading, starting 9% from the left and nearly touching the top edge; at right, a two-line uppercase tagline with words spread to justify the column, then a pixel logo and a small right-aligned description. Below, a full-bleed canvas about 45% of the viewport tall: thousands of small squares in yellow, red, lime, cobalt and navy form a heatmap that erodes into white along its lower edge. A 3vw intro paragraph begins at the fold.",
  "type": "Sneak in one regular-to-light weight does everything: uppercase 75px headline at -0.035em, a 44px sentence-case intro, section headings near 30px, 13px body. Tiny SF Mono uppercase captions with wide tracking sit under headings. A bitmap pixel face appears once, in the closing marquee. No bold anywhere.",
  "colour": "#ffffff #0a0a0a #f2b90f #3b55d9 #1e2340 #e8452c — White page, black type, black buttons. Colour lives only inside the pixel graphics, in a fixed set of yellow, cobalt, navy, red and lime, so every illustration looks related. No section changes background.",
  "imagery": "Canvas-drawn square-pixel fields: a heatmap band, particle streams that tighten from scattered dots into a dense ribbon, pixel smiley faces, an equaliser strip. Client work appears once, as three plain square-cornered photo cards.",
  "layout": "Content runs from 9% to 91% with a constant split: heading in the left third, body in the right two-thirds, a tiny mono caption under the heading. Full-bleed pixel canvases interrupt the text. A small fixed mono link sits top-right; the ending is centred.",
  "sections": [
   {
    "role": "work",
    "description": "Three equal cards in one row, each a 6:5 image with square corners (laptop mock-up, product photo, flat illustration) followed by a centred project name at about 20px and a centred two-line description in small text. No borders, shadows or tags; a small round black arrow button overlaps the right edge of the third image to advance the row. Large white space above and below."
   },
   {
    "role": "intro",
    "description": "Essay rows: a two- or three-line heading at about 2.2vw in the left third with a tiny wide-tracked mono caption below it; in the right two-thirds, two short justified paragraphs at 13px. Under one row, two pixel-art faces built from black squares (a smile and a frown, about 30px) sit side by side, each over a mono label and a three-line centred caption, forming a two-column comparison."
   },
   {
    "role": "how-it-works",
    "description": "A four-word heading on two lines and a short paragraph at the left, then a wide canvas diagram: scattered pale-blue and navy squares at the left converge into a tight horizontal ribbon in the middle and fan out again in yellow at the right, a pixel funnel. Below it four narrow columns, each with a small round dark marker, a bold one-word label and two lines of small text."
   },
   {
    "role": "cta",
    "description": "A single line of bitmap lettering scrolls across the full width, each glyph assembled from yellow squares flecked with red, navy and lime. Centred beneath: a black button with stepped pixel corners, two short grey centred paragraphs and an email line. The page ends with a full-width strip of coloured pixel bars like an audio equaliser, a small black play button centred above it."
   }
  ],
  "steal": [
   "Pick one drawing primitive, a square on a fixed grid, and render every non-text element with it (hero art, icons, diagrams, display lettering, footer) in one five-colour set.",
   "Split a masthead band 60/40 with a vertical hairline: oversized light-weight uppercase headline at left, a word-spaced justified tagline and tiny descriptor at right.",
   "Lay out long copy as rows with the heading in the left third and body in the right two-thirds, and put the tiny mono caption under each heading instead of an eyebrow above it."
  ]
 },
 {
  "id": "aww-hilden-kaira",
  "name": "Hildén & Kaira",
  "url": "https://www.hildenkaira.fi/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 8.3,
  "idea": "The agency name is cast in liquid chrome across the full width, and the same chrome becomes emoji that float through the page, tying a social-media pitch to one material.",
  "mood": [
   "brash",
   "glossy",
   "editorial",
   "witty"
  ],
  "archetype": "giant-wordmark",
  "hero": "Warm light-grey field. The lowercase serif wordmark, rendered as polished chrome 3D letters with a molten ampersand, runs edge to edge across the top quarter (about 220px tall, 16px side margins). A tilted portrait video roughly 180 by 220px covers two of its letters. Directly under the wordmark, four small nav links centred. Then 300px of nothing, with one chrome flame emoji floating at the far left. The headline sits in the bottom third: three centred lines of narrow display serif at 4.4vw, leading so tight that descenders touch ascenders, a two-line 15px sans sub, and two square-cornered buttons, black and pale lime.",
  "type": "PP Editorial New 400 for headlines at 63px, -0.02em tracking and leading near 0.9; PP Neue Montreal 13px for nav, body and buttons. The jump is roughly 5:1 with nothing in between. Stat numerals use the sans at about 60px.",
  "colour": "#eae9e6 #181818 #ecfdad #b5b5b5 #ffffff #3aa57a — Warm grey and near-black alternate by section. Pale lime is the single accent: secondary buttons, headline text on dark, stat tiles and service cards. Chrome silver recurs as a material.",
  "imagery": "Chrome 3D-rendered lettering and emoji objects (flame, heart, dove, microphone, wink) floating free; vertical phone videos of client content shown as fanned, slightly rotated stacks with white borders. Square corners throughout.",
  "layout": "Centred statements with large voids, alternating light and dark full-width bands. Content arrives as square-cornered slabs: a white case card on grey, lime service cards stacking over each other on black. Chrome objects break the grid at the edges.",
  "sections": [
   {
    "role": "testimonial",
    "description": "Full-viewport near-black band. A two-line centred serif statement in pale lime at about 4vw sits in the upper third with nothing near it. Two small testimonials are pushed to the bottom-left and bottom-right corners: five tiny stars, two lines of 11px sans, name and title, each centred in its own narrow block. The centre bottom is left empty."
   },
   {
    "role": "work",
    "description": "Horizontal carousel of wide white slabs on the grey ground, the next slide peeking at the right edge. Left half: a two-line serif title top-left, then far below a red-dot label over a thin rule and two flat tiles side by side, a wide lime one and a narrower brushed-chrome one, each with a tiny caption and a 60px sans numeral. Right half: a grey panel with three vertical videos fanned like playing cards."
   },
   {
    "role": "features",
    "description": "On black, a centred serif section title, then service cards that pin and stack: a lime slab about 55% wide with serif title top-left, grey serif index number top-right, a small paragraph and black button bottom-left and a vertical video inset bottom-right. White and green slabs peek out beneath it, offset downward, and the top card tilts a degree or two as it scrolls."
   },
   {
    "role": "footer",
    "description": "A full brushed-silver gradient field. The chrome wordmark repeats at full width across the top. Bottom-left, a small serif label over two short link columns; bottom-right, two square translucent tiles each holding a chrome object (microphone, heart) with a serif label above and three tiny square social buttons below. A hairline and a legal row close it."
   }
  ],
  "steal": [
   "Render the wordmark in one physical material and reuse that material for small floating objects, so decoration and logo are the same thing.",
   "Leave a third of the hero empty between a top-edge wordmark and a bottom-third headline; the gap makes both read.",
   "Set a display serif with leading under 1.0 so lines interlock, and pair it with 13px sans for everything else."
  ]
 },
 {
  "id": "aww-px-push",
  "name": "PX PUSH",
  "url": "https://pxpush.com/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 8.2,
  "idea": "A design subscription presented as a retro broadcast: the entire site is seen through a CRT screen, with a chrome logo token floating in the sky as its mascot.",
  "mood": [
   "retro-futurist",
   "cool",
   "technical",
   "cinematic",
   "confident"
  ],
  "archetype": "product-object-centre",
  "hero": "Full-bleed photograph of deep-blue sky over a cloud bank, the whole viewport under a CRT treatment: horizontal scanlines, slight blur, dark vignette with rounded corners. Top row with 43px margins: thin techno wordmark left; three links and a start link with a green dot right, split by a vertical hairline; full-width hairline beneath. Then one marquee line at 12vw (173px) in off-white grotesk, cropped at both edges, words separated by a solid dot, closed by a second hairline. Dead centre: a chrome 3D ring token about 400px wide. Bottom-left: a 216×144px royal-blue rounded thumbnail with a two-line mono caption. Bottom-right: a four-line mono uppercase paragraph 450px wide.",
  "type": "A semi-condensed grotesk (digest name 'SemiSqueezed') at regular weight carries the 173px marquee, 28px paragraphs and 5vw statements; an uppercase monospace at 11–17px handles tags, captions and link rows. Ten-to-one jump between display and labels; no bold anywhere.",
  "colour": "#03049c #71737d #1a1a1a #788ca4 #d9dde6 #c8f31d — Each section is a full colour field: sky photo, mid grey, near-black, then saturated royal blue. Text is off-white or pale lavender; acid lime appears only in small thumbnails, green only as a status dot.",
  "imagery": "Sky photograph, a chrome 3D logo token, and client work shown as phone UIs on a blue ground and a poster photographed in a street lightbox. Everything sits under the same scanline filter; tiles have small radii.",
  "layout": "A narrow left rail (about 17% wide) carries a bullet, a mono section tag and a small pinned thumbnail; copy starts at 35% and runs to the right margin. Hairline rules and arrow link rows divide content. Each section switches the full background colour.",
  "sections": [
   {
    "role": "intro",
    "description": "Mid-grey field. In the left rail: a bullet and mono tag at the top, and a 115×75px acid-lime thumbnail with a black glyph pinned lower-left that swaps as you scroll. The right 60% holds one long paragraph at about 28px with tight leading, opened by an arrow and a deep first-line indent; words go from white to grey with scroll progress. It ends with two full-width hairline rows in mono, arrow at the far right."
   },
   {
    "role": "work",
    "description": "Near-black field. A horizontal strip of large tiles about 500px tall with narrow gaps, bleeding off the left edge: a royal-blue tile with three phone screens in a row, then a photograph of a poster in a street lightbox. Below, the left rail shows a bullet and tag while a four-line mono caption sits in the content column."
   },
   {
    "role": "features",
    "description": "Saturated royal-blue field. A three-line statement in pale lavender at roughly 5vw sits left-aligned at the 35% column, vertically centred in an otherwise empty screen. Below a full-width hairline, each benefit is a row: mono number in the rail, a 3vw title, a narrow mono paragraph under it, and a small photo (a windsock against sky) pinned to the right margin."
   },
   {
    "role": "footer",
    "description": "Same blue. The wordmark is enlarged to 95% of the width in pale lavender with a slit-scan echo: horizontal slices of the letter tops repeat upward in fading bands. Underneath, a mono address block sits in the rail, and two columns of hairline link rows with corner arrows fill the content area."
   }
  ],
  "steal": [
   "Apply one global post-effect (scanlines plus a rounded vignette) over the whole viewport so photos, UI mocks and type all belong to the same screen.",
   "Run the headline as a single cropped marquee line boxed between two hairlines under the nav, leaving the rest of the hero for one object.",
   "Keep a narrow left rail for a mono section tag and a small pinned thumbnail that swaps per section, with copy confined to the right 60%."
  ],
  "media": "A full-bleed sky photograph covers the whole first screen with a chrome 3D token about 20% of the width at the centre and a small 216x144 video card docked bottom-left that changes clip and shape per chapter. Then a looping strip of mixed-width work images at a fixed 576px height, sticky rows each with a 4:5 portrait docked right, and a split with a fixed 3D floppy disk in the left half as price sheets scroll in the right; everything passes under fixed CRT layers: scanlines, a sweeping bright bar and a vignette.",
  "motion": "No preloader was captured (load 15.2s): between 400 and 2500ms the token turns from face-on to side-on and the marquee drifts, and under Lenis paragraphs split into characters (2001 elements) brighten word by word with the scroll from about 25% to full opacity, benefit rows stack as 90px sticky tabs, and the disk turns from edge-on to face-on. No cubic-beziers anywhere, only ease, linear and steps: a 0.5s stepped grain, an 8s scanline sweep and opacity 0.3s ease on hover, with no reduced-motion rule."
 },
 {
  "id": "aww-illoca",
  "name": "Illoca",
  "url": "https://illoca.unseen.co/",
  "source": "Awwwards Site of the Day",
  "kind": "saas",
  "score": 8.2,
  "idea": "Software for architects sold as a drafting table: a two-colour illustrated studio on graph paper that the scroll camera pushes into until the drawing fills the screen.",
  "mood": [
   "drafted",
   "calm",
   "analogue",
   "confident",
   "graphic"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Captured on the preloader: a beige graph-paper field (12px grid) with a small cobalt logo tile dead centre, handwritten X/Y cursor coordinates top-left and an email in architect's hand lettering top-right. Loaded, a centred grotesk headline at 7.7vw in near-black sits at the top, breaking over two lines in the capture, with a tiny hand-lettered margin note and arrow beside its last word. Directly beneath, inset 12px from each side, a huge wide cel-shaded scene in only cobalt and beige: an architect at a drafting desk beside a window with a skyline. A small white nav capsule floats top-centre with logo, three mono links and a navy button.",
  "type": "F37 Analog medium at 111px for the headline, a warm grotesk with tight default spacing. Graphik for body at 15px, Geist Mono for nav links, and Architect Pro, a hand-lettered drafting face in caps, for coordinates, email and margin notes. Four faces, one job each.",
  "colour": "#e6dbc7 #0b3db8 #283f7d #cfc6b4 #2a2a2a #f25c1c — Paper beige and one cobalt blue do everything, including the whole illustration. Navy for the button, near-black for type, and a single small orange square inside the button as the only warm accent.",
  "imagery": "A real-time 3D interior flattened to two inks with a fine grain: light surfaces in beige, shadow in solid cobalt, thin pencil linework on the drawings. One square-cornered frame, inset 12px, containing the entire page's imagery.",
  "layout": "A single pinned viewport over graph paper. Centred headline, then one inset image frame with 12px margins taking 75% of the height; small persistent items at three top positions (left, centre capsule, right). The frame occasionally narrows to open a text gutter.",
  "sections": [
   {
    "role": "showcase",
    "description": "The page is one pinned scene. The inset illustration frame stays fixed while scroll moves a camera: a wide shot of the studio, a push-in over the architect's shoulder, then a top-down close-up where a translucent blueprint sheet and a pencil perspective sketch lying on the desk fill the frame. In one frame the image narrows to the right 70%, leaving a graph-paper gutter at left for text."
   },
   {
    "role": "other",
    "description": "Navigation is a compact white capsule about 280px wide, centred at the top with square corners: icon tile and wordmark, three mono links, and a navy button with a small orange square inside. Two corner items in hand lettering (live cursor coordinates top-left, email top-right) stay on screen over the graph paper throughout, like notes in a drawing's title block."
   }
  ],
  "steal": [
   "Restrict a detailed 3D scene to two flat colours (one ink, one paper) so it reads as a printed illustration rather than a render.",
   "Use scroll as a camera push from an establishing shot down to the object on the desk that the product actually makes.",
   "Reserve a handwritten drafting face for marginalia only (coordinates, arrows, a correction beside the headline) over a graph-paper ground."
  ],
  "media": "One fixed Three.js scene carries all the imagery, seen through a window cut by four animated paper masks: a letterbox under the title on about 56% of the fold, then 87-97% of the viewport from the first scroll step, then a two-thirds window docked right or left with text in the remaining third. A flat two-ink render (cobalt against greige, ink outlines, paper grain); no img and no video.",
  "motion": "A logo-on-graph-paper preloader holds past 4.5s with no progress, then headings fill character by character from outline to solid (406 split characters) and handwritten labels write on. Lenis drives a keyframed camera from a wide studio onto the sketch, the plan and an extruding massing model, while the masks morph between letterbox, immersive and split states; the only CSS easing is the default cubic-bezier(.4,0,.2,1) on 0.1s opacity changes, and there is no reduced-motion rule."
 },
 {
  "id": "aww-aspen-search",
  "name": "Aspen Search",
  "url": "https://www.aspensearch.com/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 8.2,
  "idea": "The page is a ruled tile system with no margins: the two-word name is split across cells that alternate type, dithered canvas, black and one mint green.",
  "mood": [
   "brutalist",
   "precise",
   "technical",
   "stark",
   "confident"
  ],
  "archetype": "giant-wordmark",
  "hero": "A 60px top bar ruled into cells: black logo square, local time, nav links starting at the centre line, a theme toggle and a black contact cell flush right. Below, the viewport is a two-by-two grid divided by 1px black lines, no outer margin. Top-left is white with the first word of the name at 12.5vw, weight 450, sitting bottom-left. Top-right and bottom-left cells hold a black-and-white dithered canvas crossed by large pale-grey blade shapes that ignore cell borders. The bottom-right quadrant splits into a black cell (24px white summary, mono caps action row at its base) and a mint cell (second statement, client-logo marquee along the bottom).",
  "type": "Suisse Intl at weight 450 for everything, tracking about -0.02em; Suisse Intl Mono in small caps for actions, bullet lists and footer. Wordmark 180px against 24px statements and 16px body. Later headings switch to all caps at about 9vw with leading near 0.9.",
  "colour": "#ffffff #232323 #d9d9d9 #a1ffcb #969797 — White, near-black and two greys fill the cells; a single mint green floods whole tiles (a statement, a stat, the closing call to action) as the only colour. Cool and flat.",
  "imagery": "A canvas of 1-bit ordered-dither dots with soft tonal blobs, overlaid with flat pale-grey shards taken from the logo; services get white wireframe line drawings of spheres. No photography anywhere.",
  "layout": "Zero page margin: everything is edge-to-edge cells on a two-column grid with halves subdivided, separated by 1px rules. Sections differ only by cell fill and cell height. Type always sits top-left or bottom-left in its cell with about 20px padding; some cells are left deliberately empty.",
  "sections": [
   {
    "role": "intro",
    "description": "The second screen continues the hero grid: a black cell carries a two-line all-caps slogan at about 9vw set hard against its left edge; a light grey cell top-right holds the second word of the name at the same giant size as the first, bottom-aligned; dither canvas fills the rest. Then a white row where the left half is empty and a 24px long-form text runs only in the right column."
   },
   {
    "role": "stats",
    "description": "Stair-stepped tiles instead of a row. A tall mint cell fills the left half with one figure at about 5vw in its top-left corner and nothing else. On the right, a shorter black tile starts higher with a white figure top-left and a small caption at its bottom edge; a grey tile sits to its right, stepped down, same internal layout. The tiles' unequal heights leave white notches."
   },
   {
    "role": "features",
    "description": "Left half: a light grey cell with a three-line all-caps heading whose middle line is pushed to the right edge, a small paragraph low in the cell and a black mono-caps button bottom-right. Right half: black, split by hairlines into stacked rows; each row has a tiny mono index, a 28px title, a short paragraph in a second column, a white wireframe drawing and a mono caps list with small mint square bullets."
   },
   {
    "role": "footer",
    "description": "A grid of cells: white cell with a short statement top-left; a cell with a plain nav list; a cell with two small analogue clock icons and city times; a hairline row with email left and a social link right. Below, a black cell with the logo and lowercase wordmark centred large, beside a mint cell with a heading top-left and a thin diagonal arrow drawn into its bottom-right corner."
   }
  ],
  "steal": [
   "Rule the whole viewport into cells with 1px lines and no page margin, then give the nav, the headline, the summary and the proof each its own cell with a flat fill.",
   "Split a two-word brand name across two cells on consecutive screens at the same giant size, so scrolling completes the name.",
   "Use a 1-bit ordered-dither texture as the picture in otherwise empty cells and let large flat logo fragments cross the cell borders to tie the grid together."
  ],
  "media": "One halftone canvas of the brand mark is seen only through chosen cells of the tile grid, about half the hero area, and returns in sticky half panels and as a full-bleed canvas behind knockout words. Portraits are high-key black and white in a staggered row with offset heights, client logos keep their brand colours inside their own tiles, and there is no video and no rounded corner anywhere.",
  "motion": "A dark screen gives way at about 1.2s to a small mark on a 20s coin spin, the white grid arrives by 2.5s with the name rising through a mask, and the dither resolves by 4.5s. Lenis drives CSS sticky stacking (12 sticky elements, no pins): hero rows slide over each other and stat tiles lock under the header one by one; text fades in by line over 1000ms cubic-bezier(0.23,1,0.32,1) in 100ms steps (193 WAAPI calls), and a theme toggle wipes the page with a 1.2s clip-path sweep."
 },
 {
  "id": "aww-dragonfly-redux",
  "name": "Dragonfly Redux",
  "url": "https://dragonfly2.studiofreight.dev/",
  "source": "Awwwards Site of the Day",
  "kind": "finance",
  "score": 8.2,
  "idea": "A crypto fund presented as a terminal artefact: every picture is rendered in ASCII characters, framed by four letters of the name pinned to the viewport corners.",
  "mood": [
   "technical",
   "nocturnal",
   "austere",
   "cryptic",
   "editorial"
  ],
  "archetype": "giant-wordmark",
  "hero": "Pure black viewport. A live canvas draws a dragonfly and foliage out of grey ASCII glyphs, running diagonally across the whole screen and fading toward the bottom. Dead centre, the fund's name in orange uppercase grotesk at about 11vw spans the middle 65% of the width on one line, overlapping the insect's body. A small dark-grey bar, 380px wide, is centred at the top holding a logo glyph, a five-dot orange progress indicator and a mono menu label. One white serif capital sits in each viewport corner (one mirrored), with tiny plus-shaped crop marks just inside them. No tagline and no button.",
  "type": "NON Natural Grotesk, regular, uppercase, tracking −0.04em for the wordmark and section titles; FK Roman Standard serif for 16px body and for 14vw scroll words; NON Natural Mono at 8–9px for tags and labels. The scale jumps straight from 16px to 160px and beyond.",
  "colour": "#000000 #8c8c8c #f2f2f2 #ff4d17 #2a2a2a — Black throughout with grey ASCII texture and white text; one hot orange marks the wordmark, section numerals, the active filter and tiny arrow glyphs. No section changes background.",
  "imagery": "3D forms (dragonfly, branches, abstract meshes) rendered live as grey ASCII characters; article thumbnails get the same dithered-glyph treatment in wide strips. No photographs anywhere.",
  "layout": "A fixed frame (corner letters, top bar, bottom bar, crop marks) surrounds everything. Inside: 8px side margins, full-width hairline tables, centred numbered section titles and staggered serif paragraphs. Long black pauses holding one giant word alternate with dense list rows.",
  "sections": [
   {
    "role": "intro",
    "description": "An orange numeral is stacked directly over a white uppercase grotesk title, both centred, with a hairline running the full width beneath and a tiny mono section code at far left. Two serif paragraphs follow in a stagger: the first starts at the left edge and is about 35% wide; the second starts a quarter of the way in and runs wider. Below, the ASCII insect returns and single serif words at 14vw blur into focus, one per line, centred."
   },
   {
    "role": "work",
    "description": "Writing section: a two-up carousel, each item a wide ASCII-textured strip, an uppercase grotesk title and two lines of grey serif excerpt, with orange square pagination centred below. Then a centred title, a row of small square mono filter chips (active one filled orange), and a table of hairline-divided rows: title in a 30% column at left, grey excerpt in the middle, mono category at 75%, an orange dotted arrow at far right."
   },
   {
    "role": "footer",
    "description": "Three equal columns of uppercase links, each headed by a grey mono label centred above and divided row by row with hairlines; the columns occupy only the top third. A small ASCII asterisk floats alone in the middle of the black. A two-line serif statement sits bottom-left at about 22px, the copyright runs vertically up the right edge, and a small bar mirrors the top navigation at bottom centre."
   }
  ],
  "steal": [
   "Pin one letter of the brand in each viewport corner as a permanent frame, so even an empty black screen feels composed.",
   "Run every image through one filter (here ASCII glyphs) so hero 3D art and article thumbnails belong to the same world.",
   "Pair an uppercase grotesk for titles with a bookish serif used for both small body text and the very largest words, skipping all the middle sizes."
  ],
  "media": "One fixed WebGL point-cloud scene covers 100% of every frame and draws every illustrative object in grey dots on black, its subject changing as you scroll (the dragonfly in several poses, an orb, a sculpture, card objects, a world map, the logo); the insect takes 60-70% of the first screen as sparse points behind the orange wordmark. Photographs are only low-key portraits in quarter-column cards and 88px staff thumbnails; no video.",
  "motion": "Black until about 2.5s, then the wordmark and the top bar, then the dot dragonfly fades in by 4.5s. Lenis drives the fixed scene like a scrubbed camera move with no pins; manifesto characters resolve from blur to sharp, headings near the bottom edge blur and fade in, reveals use opacity and transform .85s ease-out-quint, and 178 links fade over 0.6s cubic-bezier(0.215,0.61,0.355,1)."
 },
 {
  "id": "aww-monolog",
  "name": "MONOLOG",
  "url": "https://bymonolog.com/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 8.2,
  "idea": "A studio pitch run as an asymmetric sheet: a narrow left column carries the sales talk while a wide right column stacks a very heavy headline and the proof, all on grainy paper-grey.",
  "mood": [
   "confident",
   "grainy",
   "heavy",
   "editorial",
   "warm"
  ],
  "archetype": "type-poster",
  "hero": "Grainy warm-grey ground with a giant tone-on-tone logo shape ghosted behind the left third. Columns split at 34% of the width. Left column: logo top-left, a six-line 22px paragraph, a black rectangular button with an arrow tile, and a short parenthetical line at the very bottom. Right column: four small nav links aligned to the column's left edge, a mute tile and a black button at far right; then the headline in four lines of very heavy grotesk at 140px (nearly 10% of viewport width), line pitch about 0.8, filling the column. A square-cornered photo starts at 71% height with two overlapping result cards on its top-left corner.",
  "type": "Khteka bold with -0.03em tracking and very tight leading for the 140px headline; the same face at medium for 22px lead text and 18px body. Suisse Mono in small grey uppercase captions. A condensed heavy caps face appears once for a slogan. Headline to body is roughly 8x.",
  "colour": "#e8e8e3 #181715 #d3d4ce #080807 #bfb21a — Warm paper-grey with near-black type, flipping to near-black sections with off-white type lower down. No brand accent; colour comes only from client photos and logo tiles. Film grain over everything.",
  "imagery": "Client-work photography: an architecture exterior, a laptop on olive velvet, a portrait, a mural. Square corners, warm grade, visible grain. Photos fill the right column or appear as one small centred tile, with flat translucent result cards overlaid.",
  "layout": "24px outer margins. A fixed 34/66 split recurs: small labels, stats and captions in the narrow left column, large statements and media in the wide right one. Sections alternate light and dark; one centred full-width slogan breaks the grid.",
  "sections": [
   {
    "role": "proof",
    "description": "Inside the wide right column, under a full-column photo: a small dot-and-label line, then client logos in a 4x2 grid with no cell borders. Each logo is rendered black and large, roughly 80px tall, far bigger than a usual logo strip, with a tiny mono uppercase caption centred beneath. The narrow left column stays empty apart from the ghosted logo shape and the pinned parenthetical line."
   },
   {
    "role": "intro",
    "description": "Near-black section on the same split. Left column: tiny previous and next arrows with a mono counter, a large numeral with a plus sign and three lines of small grey caption. Right column: two paragraphs set as one continuous statement at about 34px bold with tight leading in off-white, followed by a small round avatar with name and role in grey. The lower half of the screen is left empty."
   },
   {
    "role": "other",
    "description": "Full-viewport black panel with a four-word slogan in condensed heavy off-white capitals about 110px tall on one centred line. The line is split in the middle by a small portrait-format photo tile roughly 170px wide; a frame later the two halves have closed together over a different, larger image so the letters overlap the picture. A four-line centred caption in small text sits near the bottom."
   },
   {
    "role": "footer",
    "description": "Dark footer in two columns: left, section names as a list at about 36px bold, each row closed by a hairline; right, a small bracketed mono label above a row of five square icon tiles. A three-part baseline row carries local time and date, a back-to-top link with booking status, and copyright. Beneath, a full-width band of black-and-white halftone waves holds the small logo and a one-line sign-off."
   }
  ],
  "steal": [
   "Split the hero at one third: paragraph and button in the narrow column, a four-line heavy headline filling the wide one, with nav links aligned to the headline's left edge.",
   "Show client logos large (around 80px tall) in a borderless 4x2 grid with tiny mono captions instead of a small grey strip.",
   "Lay two stacked client-result cards over the top-left corner of the hero photo so proof arrives before the first scroll."
  ]
 },
 {
  "id": "opl-the-queue",
  "name": "The Queue",
  "url": "https://sheets.works/data-viz/the-queue/",
  "source": "One Page Love",
  "kind": "culture",
  "score": 8.1,
  "idea": "An essay on queueing where the queue is the ornament: a line of drawn figures stands along the bottom of the hero and returns between chapters in changing period dress.",
  "mood": [
   "literary",
   "quiet",
   "wry",
   "bookish"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Pinkish warm-grey page. A 12px mono breadcrumb sits top-left; there is no other navigation. The two-word title is set in a light serif at 200px (14vw), centred, its middle slightly above the viewport centre, spanning about 60% of the width with tight tracking. One centred line of grey 20px serif sits 40px beneath. The lower third stays empty until a single row of about 25 small greyscale drawn figures, each around 110px tall, stands on a hairline rule 20px above the bottom edge and runs the full width like a frieze.",
  "type": "Newsreader does everything: Light at 200px with -0.05em tracking for the title, regular near 30px for chapter headings, 18px body with open leading, and pale ghost numerals around 22vw. A monospace appears only in the breadcrumb and footer labels.",
  "colour": "#ebe4e0 #2b2622 #6f6763 #d9d2ce #16a05a — One warm rosy-grey ground throughout, brown-black text, mid-grey secondary lines, greyscale drawings. A single green appears only in the breadcrumb and one footer button.",
  "imagery": "Hand-drawn greyscale figures with fine outlines, standing in single file on a hairline; each band changes era costume and spacing. No boxes or backgrounds: figures sit directly on the page colour, full width.",
  "layout": "After the centred hero, text runs in one narrow column about 40% of the viewport wide, starting 30% from the left; the right third holds only a huge pale chapter numeral. Chapters are separated by full-width bands of figures on hairlines.",
  "sections": [
   {
    "role": "other",
    "description": "Chapter block. A 30px serif question heads a text column about 590px wide, offset 30% from the left. Behind it in the top-right corner sits a chapter numeral roughly 22vw tall in a tint barely darker than the page, cropped by the section's top edge. Body is 18px serif at about 1.8 leading; bold run-in phrases open key paragraphs in place of subheads. No pull quotes, side notes or images inside the text."
   },
   {
    "role": "gallery",
    "description": "Divider band between chapters: a full-width strip about 180px tall in which 10 to 15 drawn figures stand at uneven intervals on a 1px rule, with 120px of empty page above. The number and spacing of figures follow the story (few and scattered early, an evenly spaced orderly line later), so the divider carries part of the argument instead of acting as a spacer."
   },
   {
    "role": "footer",
    "description": "The ending switches voice. A white rounded promo bar with a blue pill button, then a heavy sans heading with a short grey paragraph and one green button, then a hairline, a mono uppercase label, and four small white cards in a row (thumbnail, mono number, bold title). It is narrower than the page and sits on a different axis from the essay column, so it reads as site furniture attached afterwards."
   }
  ],
  "steal": [
   "Turn the subject into the section divider: a frieze of small figures on a hairline, redrawn for each chapter, in place of rules or spacers.",
   "Set one serif family at three far-apart sizes (200px title, 30px heading, 18px body) and mark chapters with a pale 22vw numeral cropped off the corner.",
   "Hold body text to a narrow column offset left of centre and leave the right third empty instead of filling it with sidebars."
  ]
 },
 {
  "id": "aww-paul-kalkbrenner",
  "name": "Paul Kalkbrenner",
  "url": "https://www.paulkalkbrenner.net/",
  "source": "Awwwards Site of the Day",
  "kind": "music",
  "score": 8.1,
  "idea": "Swiss poster typography for a techno artist: the name as one black line with a photo set inside it like a glyph, then every chapter gets its own flat colour and visible grid.",
  "mood": [
   "stark",
   "graphic",
   "confident",
   "rhythmic",
   "modernist"
  ],
  "archetype": "giant-wordmark",
  "hero": "Pure white viewport. The artist's name sits on one line at exact vertical centre in bold black neo-grotesk, about 10.4vw, spanning roughly 78% of the width with equal side margins. The space between first and last name is replaced by a small landscape black-and-white photo, x-height tall and resting on the baseline. Top-left is a tiny circular monogram; eight nav links in 13px bold are spread at even intervals across the right half of the top edge. Bottom edge: equaliser bars with a grey label over a track title at left, a three-line bold blurb starting just left of centre, a sound toggle hard right. About 85% is empty.",
  "type": "ABC Diatype Plus Variable only: bold at -0.05em tracking for display and 13.5px bold for everything functional. Display runs from 150px in the hero to about 44vw elsewhere per the digest. Tiny uppercase labels inside boxed cells; no second face, no italics.",
  "colour": "#ffffff #000000 #c5c5c5 #a7ff9c #ff6831 — Black on white to start, then whole sections flood with flat mid-grey, acid mint and orange. Photos inside coloured sections are tinted to the section hue or kept black-and-white.",
  "imagery": "Portraits and live shots of the artist: full-bleed colour images between sections, a grainy monochrome portrait marked up as a vinyl disc, a green duotone car portrait, and a strip of small mixed-ratio thumbnails. Square corners throughout.",
  "layout": "Outer margins of only 4-8px; content hangs on a visible column grid with hairlines and boxed cells. Sections alternate between full-bleed photographs and flat colour fields, each arranged differently, so the rhythm is one poster after another.",
  "sections": [
   {
    "role": "intro",
    "description": "Two words stacked in bold grotesk at roughly 8vw, each preceded by a solid black circle about the height of the lowercase, the second line indented further right than the first. Thin horizontal and vertical hairlines cross the white field at baselines and column edges like a construction grid. Directly beneath is a single row of streaming-service logos spaced evenly edge to edge, then a full-bleed photograph."
   },
   {
    "role": "showcase",
    "description": "Flat mid-grey field split in two. Left half: a square grainy monochrome portrait with a large thin circle drawn on it and a small grey dot at the centre, so the photo reads as a record. Right half: a row of three year tabs and a small link above a hairline, the album title in small bold caps, a short description lower down, and along the bottom two wide outlined cells side by side acting as buttons."
   },
   {
    "role": "other",
    "description": "Acid-mint field introducing the tour list. A large photograph, recoloured as a green-and-black duotone, occupies only the top-right quadrant; the left half is left empty. Along the bottom a table header with three tiny uppercase column labels sits on a hairline spanning the full width, where the list of dates begins."
   },
   {
    "role": "contact",
    "description": "Orange field. A horizontally scrolling strip of small photographs of differing widths runs across the top, cropped by both edges. Below it one outlined rectangle spans the width, divided into three equal cells: two inputs and a submit action, each identified only by tiny centred uppercase text. Small-print lines sit under the left and right cells."
   }
  ],
  "steal": [
   "Replace the space between the two words of a giant name with a small photo cropped to x-height.",
   "Flood each chapter with one flat colour and tint its photograph to match as a duotone.",
   "Build forms and button pairs as adjoining outlined cells with tiny uppercase labels instead of filled buttons."
  ],
  "media": "The hero is almost pure type: the only picture is a 113x75 chip set inside the name, under 1% of the fold, that changes photo every 1-1.5s. Later, full-bleed bands with scrubbed parallax between sections, a square cover in one half beside an info column, a green duotone portrait docked right, a full-bleed photograph that exits through a pixel-block mask, a receding stack of square photos, and an auto marquee of small thumbnails; one YouTube embed, no native video, square corners and an 8s grain overlay.",
  "motion": "There is no preloader, only the name chip cycling and the equaliser bars bouncing, and Lenis and Barba run 12 ScrollTriggers with no pins: media wrappers parallax by yPercent, a ruled statement drifts sideways, full-bleed photo sections scrub at 0.3 to drive the pixel-block dissolve, and year digits roll like an odometer. Link characters roll over 0.5s with a per-character delay on the house curve cubic-bezier(.625,.05,0,1) (.7s and .35s tokens)."
 },
 {
  "id": "aww-vero-new-york",
  "name": "Vero New-York",
  "url": "https://verostudio.com/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 8.1,
  "idea": "Treat a keepsake like couture: a slow close-up film opens, then a white 3D sculpture of a dress stays pinned at centre while one sentence in mixed capitals and italics passes over it.",
  "mood": [
   "luxurious",
   "intimate",
   "warm",
   "serene",
   "sculptural"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed video with no scrim: an extreme close-up of a woman's profile against a burnt-orange wall, a blurred pale sculpture occupying the right 40% of the frame in the foreground. Exactly at centre sits the four-letter wordmark in white serif capitals, about 240px wide; 25px beneath it a one-line tagline at 20px alternates italic lowercase connectives with roman capitals. Two translucent frosted rectangles with square corners float 30px from the top corners: a 130px menu button left, a 250px commission button right, both in small capitals. A tiny chevron marks the bottom centre. Nothing else; the image carries the screen.",
  "type": "Louize Display at 120px (8.3vw), centred: nouns in roman capitals, connective words in lowercase italic at the same size within the same line. Beausite Classic grotesk appears only for a bold 17px lead and footer links. Serif body runs 11–16px; the footer wordmark fills the width.",
  "colour": "#f3f0ed #181615 #b4521f #c6a788 #ffffff #97775a — Burnt orange and skin tones in the opening film, then warm off-white pages with near-black type and a plaster-white sculpture; orange returns only inside one small photograph.",
  "imagery": "Shallow-focus warm video up top; a real-time 3D plaster-white bust and lace dress on off-white, cropped at neck and hem and fading into the page; one small square-cornered photo of the dress on a plinth against orange.",
  "layout": "Everything sits on one centre axis with wide empty flanks. Two fixed corner buttons persist as soft-shadowed white tiles. Headlines take two lines each and share the screen with the pinned 3D object; body text is confined to a 240px centred column.",
  "sections": [
   {
    "role": "showcase",
    "description": "Off-white screen. The sentence is delivered in halves: first two centred lines at 8.3vw in the upper third, with a small diamond glyph beside the italic word, while a white 3D bust rises from the bottom centre at about 30% of the width. Scrolling turns the sculpture to show the laced back, now filling the full height of the centre column, and the second half of the sentence lands over the skirt in the lower third."
   },
   {
    "role": "intro",
    "description": "The skirt's hem dissolves into the off-white at the top of the screen. Beneath it is a centred text stack only about 240px wide: a three-line lead in bold grotesk at 17px, four lines of serif body at 11px, and a small white rectangular button with a diffuse shadow carrying the same italic-plus-capitals label as the header button. The lower half of the viewport is left empty."
   },
   {
    "role": "other",
    "description": "A tiny centred eyebrow in the italic-plus-capitals style, then a two-line headline at about 8vw where each line begins with a lowercase italic word and ends in capitals, the lines offset so the block reads as a stagger. Under it, centred, one small photo about 330×290px with square corners: saturated orange backdrop, white dress on a plinth. The image is deliberately much smaller than the type."
   },
   {
    "role": "footer",
    "description": "Off-white. Top-left, a five-item vertical link list in small grotesk; under it a newsletter field drawn as a single underline with an arrow; three social links right-aligned at the same level. Then the wordmark in near-black serif capitals stretches across the full width, about 45% of the viewport tall. A final row of tiny grey legal links sits beneath."
   }
  ],
  "steal": [
   "Within one serif headline, set the nouns in roman capitals and the small connective words in lowercase italic at the same size.",
   "Pin a single white 3D object on an off-white page and deliver one sentence in two halves over its front and back as it turns.",
   "Follow a huge two-line headline with one deliberately small, saturated photograph centred beneath it instead of a full-width image."
  ],
  "media": "A full-bleed 10s studio film covers the whole first screen with no scrim, the wordmark centred on it. Then a fixed render of the dress sculpture that the camera travels down while headlines rise over it, an inset window under a headline that grows to full bleed, a pinned full-bleed stepper with right-to-left wipes, a sticky picture beside parallax pictures, a grid of 4:5 thumbnails in columns at different speeds, and a 3D coin passing through a typographic wall; 0px corners and two strict photo families, brides on burnt orange and white resin on grey.",
  "motion": "A preloader of about 3.5-4s: a centred serif statement with a small photo window between its lines that opens by clip-path into the hero film over 1.4s cubic-bezier(.83,0,.17,1), then the wordmark fades in. Native scroll driven by script: the beige page slides up over the fixed hero, a 3840px sticky stepper advances three photographs, and headline words rise out of line masks over 1.2-1.4s cubic-bezier(.19,1,.22,1) at 0.1s steps; images clip in over 1.6s cubic-bezier(.22,1,.36,1)."
 },
 {
  "id": "aww-depo-luxe",
  "name": "Depo Luxe",
  "url": "https://depoluxe.xyz/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 8.1,
  "idea": "A film production roster shown as a full-screen reel in which every step is one film with only a quoted italic title, a director and a client, set like credits at body size.",
  "mood": [
   "cinematic",
   "restrained",
   "luxurious",
   "dark",
   "quiet"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Video fills the viewport edge to edge with no scrim beyond the footage's own darkness. All text is white serif at near-body size. A 305px-wide header block sits top-centre: the two words of the name pushed to its left and right edges, an italic one-line descriptor beneath, then five nav links spread across the same width with the current one underlined. Dead centre: the film title in italic with quotation marks at 40px (under 3% of viewport width), the director's name 60px below. The client name stands alone at the right edge on the title's line. A roman numeral above a thin vertical line marks the left edge.",
  "type": "EB Garamond only, regular and italic, always white. The largest text on the page is the 40px italic title; names and nav are about 17px. Two sizes, no capitals, no bold, slight negative tracking; the wordmark is simply two words set far apart.",
  "colour": "#070c0b #081514 #16120d #1f3fd6 #f0f0f0 — Black ground; all colour comes from the footage: teal-black interiors, blue-tinted lenses, one saturated cobalt frame. Type stays white throughout, with no accent colour or UI tint.",
  "imagery": "Full-bleed commercial film footage: tight faces, extreme close-ups, underwater shots, heavy cinema grade and grain. One per screen, never framed or rounded, with text laid directly on top.",
  "layout": "One screen equals one project: no margins, cards or grid. Three fixed text anchors repeat on every screen (centre title, right-edge client, left-edge numeral) so only the footage changes. The page is a single viewport that swaps its contents.",
  "sections": [
   {
    "role": "work",
    "description": "Each project is a full-viewport slide that keeps the hero's three anchors: quoted italic title dead centre with the director beneath, client name hard against the right edge at the same height, and a roman numeral on the left edge that moves down a thin vertical track as you advance, doubling as progress indicator. Between slides the frame goes fully black with the next title already in place before its footage fades in."
   },
   {
    "role": "other",
    "description": "The header is a compact credit block rather than a bar: a fixed column about a fifth of the viewport wide, centred at the top, holding three justified lines (name split to both ends, italic descriptor, five links). It has no background and stays over the footage on every slide. On mobile the same block widens to the text column and the client name moves above the title."
   }
  ],
  "steal": [
   "Keep every piece of text at body size over full-bleed footage and let position alone (dead centre, right edge, left edge) create the hierarchy.",
   "Build the header as a narrow centred block of three justified lines, with the two-word name pushed to opposite ends of the first line.",
   "Use a roman numeral sliding along a thin vertical edge line as both project index and scroll progress."
  ]
 },
 {
  "id": "aww-longbow",
  "name": "longbow",
  "url": "https://db-longbow.webflow.io/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 8.1,
  "idea": "The page is built on a visible four-column construction grid with square handles at every intersection, and cars, glass cards and a giant condensed marquee are slotted into its cells like objects on a designer's artboard.",
  "mood": [
   "engineered",
   "cinematic",
   "restrained",
   "luxurious",
   "precise"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Mid-grey studio video of two roadsters fills the viewport inside a thin outer frame. White hairlines split it into four equal columns and two rows, with small white square nodes at each crossing. A frosted-glass nav bar sits top centre spanning the two middle columns: hamburger left, condensed wordmark centre, a mono models link right. Bottom left, a white condensed marquee of the brand name at 21vw, a third of viewport height, runs off the left edge and stops at the centre line. The bottom-right cell holds a small glass tag, a two-line serif headline with the second line italic, and a six-line uppercase mono paragraph.",
  "type": "Bebas Neue at 21vw with -0.06em tracking for marquee words; EB Garamond near 28px, light, with italic second lines for headings; Geist Mono 13px uppercase for all body and labels. Three faces with strict roles and a roughly 23-times jump from body to display.",
  "colour": "#888c8f #a8a7a9 #ffffff #1b1b1c #1f5c49 #b5552e — One mid grey for both page and studio backdrop with white type throughout; colour comes only from the product: racing-green paint, tan leather, red tail lamps. One black video band late in the page.",
  "imagery": "Studio renders and video of cars on a seamless grey backdrop that matches the page colour, cropped tight to noses, tails and badges; images are square-cornered and sized exactly to grid cells or run full bleed.",
  "layout": "Four equal columns with visible hairlines and node markers persist down the whole 18-screen page. Content occupies one or two cells at a time and leaves the others as flat grey; giant marquee words and full-bleed car frames alternate with small serif-plus-mono text cells.",
  "sections": [
   {
    "role": "showcase",
    "description": "A full-bleed close-up of one car fills the viewport. A dark frosted-glass card exactly one column wide and about half the viewport tall sits over the image in the second column: centred serif model name with an italic edition line, a mono price line, a small landscape thumbnail of the car and a white square-cornered button. The next model repeats the layout with the card shifted to the third column."
   },
   {
    "role": "intro",
    "description": "Flat grey screen. A giant white condensed marquee line runs across the top, partly behind the nav. In the first column: a tiny rounded index tag, a two-line serif heading with italic second line, then after a gap a ten-line uppercase mono paragraph. In the third column a tall portrait crop of bodywork and badge fills one cell from the marquee down. The other two columns stay empty."
   },
   {
    "role": "other",
    "description": "Between sections, three condensed white words about a third of the viewport high are distributed across the grid columns with wide gaps between them and cropped by the viewport bottom, acting as a divider between a full-bleed car frame and the next text block. Grid lines and nodes run over the letters."
   },
   {
    "role": "gallery",
    "description": "A black band holds a wide video frame inset from left and right by black bars, showing a motion-blurred car head-on on a road in a cool teal grade; the grid lines and nodes continue over it and the grey page resumes below. A single-line uppercase mono legal ticker runs along the very bottom edge of the page."
   }
  ],
  "steal": [
   "Draw the layout grid as visible hairlines with small square nodes at intersections and size every image and card to exact cells.",
   "Match the page background to the photo backdrop colour so product shots merge with the page and only the product carries colour.",
   "Give three faces fixed jobs: a condensed sans only at 20vw for marquees, a light serif with an italic second line for headings, uppercase mono for all body text."
  ],
  "media": "A full-bleed studio film of two cars covers the whole first screen with a slow push-in, shot on a grey cyclorama tuned to the page grey so pictures melt into the ground. Then a single-cell product card with a looping thumbnail over a full-bleed render, a checkerboard of image and text cells snapped to a 4-column grid, a driving film that grows from a 710px inset to full bleed, and portrait cells beside signature cells; 38 images and 14 videos, all square-cornered.",
  "motion": "No preloader: the page is alive at 400ms with the wordmark marquee moving and the hero film dollying in about 10% by 4.5s. Lenis with Webflow Interactions scrubs a sticky stage for the whole page: giant split words and their copies slide sideways at different rates, the inset film grows to full bleed, the ground switches grey, black, grey, black, and images reveal by mask-size and opacity over 1.25s ease-in-out while marquees loop at 9-90s."
 },
 {
  "id": "aww-mosbys-files",
  "name": "Mosby’s Files",
  "url": "https://www.mosbyfiles.com/",
  "source": "Awwwards Site of the Day",
  "kind": "culture",
  "score": 8,
  "idea": "An archive of architects presented as a physical stack of coloured index-tab file folders that you flip through.",
  "mood": [
   "bold",
   "archival",
   "graphic",
   "playful",
   "scholarly"
  ],
  "archetype": "type-poster",
  "hero": "Charcoal background. A slim top bar over a hairline holds the condensed wordmark dead centre and one mono link far right. The headline is one centred line of heavy condensed uppercase at 10vw, about 71% of the width, in the upper quarter. Beneath it, a three-line centred serif paragraph in mid-grey, about 42% wide. From 51% down sits a stack of file folders 86% of the viewport wide: each is a flat colour band with one to three trapezoid tabs rising from its top-left edge, each tab a different colour holding a serif name. Mono category labels sit right-aligned. The front red folder is open, running off the bottom.",
  "type": "Founders Grotesk bold condensed uppercase at 144px for the title and wordmark; Signifier serif at about 22px for the intro and 28px for tab names; IBM Plex Mono 12px for labels and body. Three unrelated faces, each with one job, and a twelve-to-one size jump.",
  "colour": "#191919 #d71e1e #1e4bd7 #0c7866 #581e70 #ffe927 — Charcoal ground with five flat poster primaries assigned to folders and tabs; each tab deliberately differs from the folder behind it. No tints, gradients or photos; white type except black on yellow.",
  "imagery": "No photographs on the index. The folder shapes are the imagery, plus a row of seven small white line-drawn north-arrow and compass symbols and a drawing scale bar borrowed from architectural plans.",
  "layout": "Centred title block over an 86%-wide folder stack with equal dark margins. Folders overlap at a fixed 60px step so only the tab rows show; the open folder expands into a tall single-colour panel with mono text top-left and plan symbols near the bottom. Under two screens.",
  "sections": [
   {
    "role": "work",
    "description": "Four full-width colour bands stacked with a 60px reveal, each with trapezoid tabs growing from its top-left edge. Tabs are about 44px tall with S-curved shoulders, sit side by side with small gaps, and each takes a contrasting flat colour: yellow and black tabs on a green folder, red and blue on purple. Names are white serif at 28px inside the tabs. A mono category label with a small chevron is right-aligned in each band's visible strip."
   },
   {
    "role": "other",
    "description": "The front folder opens into a solid red panel nearly two viewports tall. Top-right: its mono category label with a down chevron. Top-left, inset about 60px: a four-line mono paragraph in white, at most half the panel wide. The middle is left empty. Near the bottom, a centred row of seven small white plan symbols evenly spaced; beneath, a baseline row with a drawing scale bar left, year centre, credit and round logo right."
   }
  ],
  "steal": [
   "Build navigation as stacked full-width colour bands with trapezoid tabs, each tab coloured to clash with the folder behind it.",
   "Pair a heavy condensed grotesk title with a bookish serif for names and a mono for metadata, giving each face exactly one role.",
   "Borrow notation from the subject's own documents (scale bars, north arrows) as footer ornament instead of generic icons."
  ],
  "media": "The hero has no picture: its visual weight is a CSS stack of overlapping flat colour folders with sloped tabs covering the lower half of the fold (about 42% of the area), which doubles as the index; an open folder expands to 80vh as the content panel. The only drawings are seven small white plan symbols and a scale bar; no photographs or video on the index.",
  "motion": "A short entrance: readable at about 1.2s, with 17 title letter spans already in place, and settled by 2.5s as the stack rises about 13px into place and the subline fades up. Lenis on a page only 1.6 screens tall; the header slides away on scroll, and folders and tabs move on one house curve, cubic-bezier(.33,1,.68,1), at 0.65s, with the quicker moves at exactly half that, 0.325s."
 },
 {
  "id": "opl-sarah-matt-wedding",
  "name": "Sarah & Matt Wedding",
  "url": "https://sarahandmatt.wedding",
  "source": "One Page Love",
  "kind": "event",
  "score": 8,
  "idea": "The site is the invitation: a letterpress-style card rendered as a physical object opens the page, and its ornaments, rules and small typographic parts become the components for everything after it.",
  "mood": [
   "romantic",
   "crafted",
   "warm",
   "stationery-like",
   "intimate"
  ],
  "archetype": "product-object-centre",
  "hero": "A flat blush-pink field fills the viewport. Top-left sits a gold filigree monogram about 120px square; three plain nav links are centred on the same line; a solid gold rectangular RSVP button sits top-right. Below, centred, a portrait invitation card half the viewport wide starts 200px down and is cropped by the bottom edge, with a soft halo shadow and a debossed border with scalloped inner corners. On the card: the two names in a large italic swash serif, staggered left and right against two ornamental roundels, separated by hairline rules carrying tiny wide-tracked caps for date and time.",
  "type": "Card names in a high-contrast italic serif with swash capitals (drawn in canvas); section titles in a light roman serif around 5vw; Instrument Sans 18px for body and nav; Spezia Extended in tiny tracked caps for dates and addresses. Three clear tiers.",
  "colour": "#e9c4be #faf7f5 #0d0b0a #241c22 #9b7948 #4f5660 — Each section takes its own field: blush pink hero, warm cream story, dark plum venue details, black footer. Gold is reserved for ornament and the RSVP button; a coral button appears once on dark.",
  "imagery": "A canvas-rendered paper card with emboss and grain; a warm, grainy golden-field landscape as a full-bleed band behind it; candid couple snapshots in equal portrait cards with rounded corners; night venue photos overlapping at two sizes.",
  "layout": "Outer margins of about 50px. The hero is centred; the story is a horizontally scrolling row of text-above-photo columns; the details section splits roughly 45/55 between text and overlapping photos. Large vertical gaps separate sections, each on its own colour field.",
  "sections": [
   {
    "role": "other",
    "description": "A story timeline. A small sans heading sits at the left margin with two outlined circular arrow buttons at the right. Under it runs a full-width ruler of fine vertical tick marks acting as a scrubber. Below, a horizontally scrolling row of columns about 280px wide: each has a one-line bold caption, three lines of small grey text, a large gap, then a portrait photo with 12px rounded corners. Columns bleed off both edges; one photo is black and white."
   },
   {
    "role": "intro",
    "description": "A cream field with a single light serif title at roughly 5vw on the left margin and a three-line small sans paragraph pushed to the far-right column on the same baseline, leaving the middle empty. Below, the date in medium sans introduces a row of large light-serif times divided by vertical hairlines, with a dark rounded image card starting in the right half."
   },
   {
    "role": "faq",
    "description": "On a dark plum field, split in two. Left 45%: small sans labels for arrival and ceremony, an outlined box holding venue, street and city in tiny tracked extended caps separated by slashes, then a five-row accordion with hairline dividers and chevrons, then a coral button beside a text link. Right 55%: a tall night photo of the venue facade bleeding off the top, with a smaller square photo overlapping its lower-right corner."
   },
   {
    "role": "footer",
    "description": "A band of grainy rose-brown texture, then black. A dim monogram at left, a four-link column at centre, and at right the date, boxed address and time lines repeated from the invitation in tracked extended caps with hairlines. The couple's names run across the full width at about 22vw in the italic swash serif, filled with a blue-gold glitter texture and cropped by the bottom edge."
   }
  ],
  "steal": [
   "Make a real-world object (an invitation, a ticket, a label) the hero and reuse its small typographic parts, such as a boxed address line with slashes, as recurring components down the page.",
   "Repeat the hero lettering in the footer at full-bleed scale with a material texture fill, cropped by the bottom edge.",
   "Place a section title at the left margin and its short paragraph in the far-right column on the same baseline, leaving the centre empty."
  ]
 },
 {
  "id": "opl-zara-webb",
  "name": "Zara Webb",
  "url": "https://zperinatal.com",
  "source": "One Page Love",
  "kind": "health",
  "score": 8,
  "idea": "A one-woman newborn-care practice presented like a hand-made keepsake: a mascot rabbit, scalloped and flower-shaped cut-outs, candid film photographs.",
  "mood": [
   "tender",
   "whimsical",
   "calm",
   "personal"
  ],
  "archetype": "split-text-media",
  "hero": "Split exactly in half. Left, on cream: two-line mono caps nav stacks sit at the column's top-left and top-right with a handwritten script logo centred between them. Centred below, a five-line headline in a condensed serif, each line broken to one to three words so the block forms a ragged lozenge; then a three-line 16px sans paragraph and an outlined pill button in mono caps. A line-drawn rabbit on a skateboard rides a hairline at the column's bottom-right. Right: a candid flash photograph bleeds off the top and right edges and stops at 92% height; a lilac pill button and a round chat icon overlay its top-right corner.",
  "type": "Instrument Serif Regular for headings (52 to 57px, plus a 9.4vw footer wordmark), its italic for subheads and service names; Inter Tight for small body copy; PT Mono uppercase for nav, buttons and tiny captions; a script logo. Parenthesised italic numerals number the services.",
  "colour": "#fffdf1 #403630 #ece4d2 #e2c9f7 #cfe195 #f6e7e4 — Warm cream page with cocoa-brown text and two brown panels. Lilac marks the main pill button and footer wordmark; a sage-green pill marks a secondary action. Warm throughout.",
  "imagery": "Candid flash and film photos of babies and carers, some grainy black-and-white, cropped into non-rectangular masks (four-petal flower, scalloped egg) or small rounded portraits; plus black line doodles with halftone-dot fills: a recurring rabbit, flowers, a rattle, a bottle.",
  "layout": "20px margins. Centred serif statements with small centred paragraphs alternate with split or inset blocks: a brown rounded panel, a half-photo half-beige block. Services run as a two-column hairline list. Doodles are tucked beside headlines; the footer's top edge is scalloped.",
  "sections": [
   {
    "role": "about",
    "description": "A dark brown panel with about 11px radius, inset 20px from the page. Left half: a three-line cream serif statement at about 56px and below it a photograph masked into a four-lobed flower about 540px across, cropped by the panel's bottom, with two tiny mono captions floating beside its lobes. Right, from 63%: two blocks, each an italic serif subhead over a four-line small paragraph, then two flower doodles, a caps line and a lilac pill button."
   },
   {
    "role": "list",
    "description": "A centred two-line serif heading and a four-line centred paragraph. Below, a two-column list inset to the middle 72% of the width; each item opens with a hairline, then a parenthesised italic numeral, the service name in italic serif at about 32px and a three-line small description. Rows are tall with generous empty space; the final cell swaps to a faded question prompt with the rabbit doodle."
   },
   {
    "role": "other",
    "description": "A half-and-half block. Left: a grainy black-and-white extreme close-up of a baby's eye and cheek, full-bleed, overlapped from the bottom by a cream cut-out shaped like an egg with a scalloped top; it holds an italic serif subhead, a five-line centred paragraph, a caps line and a sage pill button. Right: a flat beige field with a centred two-line serif heading and a small rounded portrait about 230px wide flanked by two tiny mono captions."
   },
   {
    "role": "footer",
    "description": "Dark brown, its top edge cut into a row of twelve semicircular scallops about 120px wide. A centred three-line serif statement in cream with bottle and flower doodles at its shoulders and a waving rabbit beneath; two small centred text blocks at far left and right; contact lines and four social icons; then the name in lilac serif at 9.4vw, cropped by the bottom edge, with tiny mono legal text in both corners."
   }
  ],
  "steal": [
   "Mask photographs into soft custom shapes (a four-petal flower, a scalloped egg) and let their container crop them.",
   "Cut a section's top edge into a row of semicircles so a plain colour change becomes a motif.",
   "Break a centred serif headline into very short lines so it forms a deliberate ragged shape, and anchor it with one small line drawing sitting on a hairline."
  ]
 },
 {
  "id": "aww-noho",
  "name": "Noho",
  "url": "https://noho.ink",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 8,
  "idea": "Furniture sold through people misusing it (wearing, balancing on, hiding behind chairs on flat colour backdrops) while the interface stays quiet beige.",
  "mood": [
   "playful",
   "warm",
   "clean",
   "confident",
   "humane"
  ],
  "archetype": "split-text-media",
  "hero": "The viewport splits exactly 50/50 by tone alone: left half warm off-white, right half a slightly darker greige, no rule. Left: a small lowercase logo top-left at 30px margin, then a four-line bold headline at 60px (4.2vw), tracking -0.04em and leading near 1.0, top-left aligned and filling the upper 40%; the lower half is empty except for a one-line 18px tagline pinned bottom-left. Right: a staggered mosaic of seven portrait photos, each about 175 by 230px with 15px gaps, on a four-column, three-row grid with several cells left empty and the rightmost image cropped by the viewport edge. A white square menu button sits top-right.",
  "type": "Switzer only. Headlines weight 600, tracking -0.04em, sentence case, charcoal rather than black; statements at 60px, body 13.5px, meta labels about 11px grey. The digest records one element at 15.6vw. Roughly four sizes, one family, no caps.",
  "colour": "#f1eee9 #e7e2dc #cdc0b0 #3c3c3c #b4a5db #f2e05a — The interface is three close warm beiges with charcoal type; saturated colour (lilac, yellow, olive, terracotta, sand) exists only in photo backdrops and the products themselves.",
  "imagery": "Studio shots of people interacting oddly with chairs on seamless single-colour backdrops, portrait 3:4, square corners; plus very large cut-out product shots on beige with a soft radial glow and contact shadow, cropped by the panel edge.",
  "layout": "Outer margins of 16-30px. Sections alternate between split halves, centred statements and left-aligned headings over card rows. Cards are flat rectangles one tone darker than the page with 8px gaps, content pinned to the top-left and bottom edges. Wide empty bands separate sections.",
  "sections": [
   {
    "role": "intro",
    "description": "A centred four-line statement at about 60px bold with tiny square photo thumbnails, roughly one cap-height tall, dropped inline between words like emoji. Directly beneath, the page splits into two full-width flat colour halves (light greige and tan), each with a small circled plus button in its top inner corner; these are the tops of the two product panels."
   },
   {
    "role": "showcase",
    "description": "Two side-by-side panels in different beiges, each dominated by one enormous cut-out chair (one yellow, one black) cropped at the top so mostly seat and legs show, with a soft radial highlight behind. Along the bottom of each panel: a tiny label and price at left, a row of colour-swatch dots, then two small rectangular buttons at right, one white and one charcoal."
   },
   {
    "role": "stats",
    "description": "Three equal flat tiles in a row with 8px gaps, each about 210px tall. One short claim is centred in each at roughly 18px, and an index number sits alone in the bottom-left corner in 11px. A small bulleted label hangs above each tile. After a large empty gap, another centred bold statement begins."
   },
   {
    "role": "testimonial",
    "description": "A horizontal strip of colour-backdrop photos bleeds off both edges at the top of the section. Below, a left-aligned bold heading at about 40px, then a row of beige cards overflowing to the right: each has an @name at top-left, a short paragraph in 11px, and a bottom row with star glyphs left and a small text link right."
   }
  ],
  "steal": [
   "Split the hero 50/50 by background tone alone, park the headline top-left and one tagline bottom-left, and fill the other half with a staggered photo mosaic that leaves grid cells empty.",
   "Keep the interface in three close beige tones and confine all saturated colour to photo backdrops and products, so the photography becomes the palette.",
   "Drop cap-height photo thumbnails inline between the words of a large centred statement."
  ],
  "media": "A stepped mosaic of seven 175x231 studio photographs (people doing odd things with a chair against one saturated backdrop each) covers about 22% of the fold on the darker right half, bleeding off the right edge; the left half is type. Below come photo chips between the words of a statement, two product halves each with a live 3D chair on its own tone, an auto-scrolling row of portrait tiles, a pinned card deck, and a sticky 3D chair card beside an accordion; square corners everywhere, no video.",
  "motion": "About 1s of entrance with no preloader: headline lines rise through masks while the mosaic tiles arrive one by one. Lenis holds sticky product halves and pins a story deck for +=400% (3600px), each step bringing the next card in from the right and compressing earlier ones into slivers, and the footer is uncovered by a scrubbed mask over a 728px runway as its slogan letters rise over 1.04s at a 0.04s stagger; micro-interactions are GSAP nudges of 0.2-0.4s on custom eases, and the 3D chairs turn on drag."
 },
 {
  "id": "opl-juggle",
  "name": "Juggle",
  "url": "https://www.joinjuggle.com",
  "source": "One Page Love",
  "kind": "saas",
  "score": 8,
  "idea": "The headline literally drowns: a flat blue field rises to half height and the lines below the waterline turn from red to submerged navy.",
  "mood": [
   "bold",
   "blunt",
   "graphic",
   "energetic"
  ],
  "archetype": "type-poster",
  "hero": "Two flat fields: white above, saturated blue below, meeting at exactly half height. A three-line all-caps headline in a black-weight grotesque at 8.4vw is centred across the seam, about 65% of the width, lines nearly touching. The first line sits on white in red-orange; the second is cut by the seam, and its lower half plus the whole third line render dark navy as if under water. Small red logo top-left, a rectangular red button with tracked caps top-right. Near the bottom, one line of white condensed caps names the audience. No image, no sub-paragraph.",
  "type": "Acme Gothic Black 900 caps at 122px, -0.03em, for the hero only. Section heads use Helvetica Now Display Condensed bold caps around 48 to 70px; body is Helvetica Now 17px; labels are small tracked caps. Roughly a 7:1 headline-to-body jump.",
  "colour": "#2e2eff #ffffff #ff3b1f #0a0a0a #f5f3ef #020156 — Three flat poster colours each own whole sections: electric blue, red-orange and black, with white and warm off-white for product areas. No tints, no gradients.",
  "imagery": "Simplified product UI on a cream rounded panel over black with a small video-call window; otherwise flat vector graphics: a pair of blinking eyes, a smiley cut into shuffled square tiles.",
  "layout": "Full-bleed colour blocks with one message each, mostly centred. Product sections switch to a two-column split on off-white with about 90px margins. Marquee strips separate blocks and a slim sticky bar carrying the CTA rides the bottom edge.",
  "sections": [
   {
    "role": "intro",
    "description": "Full-screen electric blue. Centred stack: a tiny tracked caps label, three lines of white condensed bold caps at about 5vw, a gap, then a single heavier, wider word at a larger size as the punchline, a faint blurred line of text beneath it and an outlined rectangular button. Wide empty margins left and right."
   },
   {
    "role": "other",
    "description": "Problem check on full-screen red-orange, under a white marquee strip of condensed caps with small red buttons repeating inside it. Centre: a two-line white condensed caps heading at about 5vw; below, a flat illustration of two white almond eyes with black pupils; a tracked caps instruction line; then three evenly spaced white outlined checkboxes, each with a two-line caption, one already ticked."
   },
   {
    "role": "how-it-works",
    "description": "Black section. A small tracked caps title centred, under it three numbered text tabs in a row with the active one underlined. Below, a cream rounded app window about 55% wide fills the rest of the viewport: mostly blank note area, a floating status chip, and a small dark video-call window with three faces overlapping its lower edge."
   },
   {
    "role": "footer",
    "description": "White. Left: a narrow column of small body text, two founder names with roles, then three link columns under tracked caps labels. Right: a blue square about 280px holding a white smiley face sliced into a three-by-three grid of tiles that are rotated and shuffled like a sliding puzzle. Tiny logo and copyright bottom-left."
   }
  ],
  "steal": [
   "Split the hero into two flat colour fields and recolour the headline where it crosses the seam, so the layout acts out the copy.",
   "Give each section one saturated flat colour and one sentence, and separate them with a thin marquee strip.",
   "Turn a pain-point list into a mock checklist with real checkboxes under a blunt question heading."
  ]
 },
 {
  "id": "aww-serotoninn",
  "name": "Serotoninn",
  "url": "https://serotoninn.com/",
  "source": "Awwwards Site of the Day",
  "kind": "fashion",
  "score": 7.9,
  "idea": "A torn-paper seam splits the page in two, colour on white against greyscale on grey paper, to stage the brand's glam-versus-grunge line, with ultra-condensed heavy type straddling the tear.",
  "mood": [
   "edgy",
   "editorial",
   "high-contrast",
   "theatrical"
  ],
  "archetype": "other: torn-split-portrait-centre",
  "hero": "The viewport is split by a vertical torn-paper edge at 50%: left half pure white, right half a grey paper texture. A cut-out model stands dead centre, about 28% wide, running from 15% down off the bottom edge; her left half is full colour, her right half greyscale, the tear passing through her. Type is ultra-condensed heavy uppercase: the brand name at about 5.5vw top-left beneath a three-line mono menu; a two-line tagline right-aligned at mid-height on the right; and at bottom centre a two-word line at 8.2vw, first word red and second white, overlapping the dress, with a bracketed link beneath. Small centred logo at top, three mono links top-right.",
  "type": "Thunder extra-bold in uppercase, set tight, for all display lines (118px in the hero, similar for category words, sometimes rotated 90 degrees). PP Fraktion Mono uppercase at about 11px for nav, labels and prices; Inter for small body. Square brackets and parentheses wrap secondary words and counts.",
  "colour": "#fdfdfd #d8d8d8 #0a0a0a #e8352b #fff9f7 #2a2fb0 — White, paper grey and black with red as the single interface accent (one headline word, section labels). Garment colour (cobalt, yellow, satin tan) supplies the rest. One full black campaign band.",
  "imagery": "Studio fashion photography of models, cut out or on white seamless, in tall portrait crops. The hero splits one image into colour and greyscale along a torn-paper edge, and the torn edge returns as a divider over the footer video.",
  "layout": "About 2.5% margins. Sections carry red numbered mono labels at top-left. The layout changes every time: a label column with a product trio; a full-bleed black video; a horizontal row of tall category cards; a two-up split with a torn seam; a footer laid over video.",
  "sections": [
   {
    "role": "showcase",
    "description": "New arrivals. The left 25% is a nearly empty column holding only a red numbered mono label at top, a bracketed link, and two tiny parenthesised notes further down. The right 60% holds three product images side by side with 4px gaps, each about 3:4, the middle one a tight crop of the same garment. Two carry a black brush-stroke tag with white condensed text in the top-left corner. Name and price sit under each in mono."
   },
   {
    "role": "list",
    "description": "Categories as a horizontally scrolling row of five tall white cards, about 2:3 with 8px gaps, each showing a full-length cut-out model. The category name is set in the heavy condensed face rotated 90 degrees, running up the card's left edge from the bottom; a bracketed item count sits bottom-right in mono. The fifth card is cropped by the viewport edge."
   },
   {
    "role": "gallery",
    "description": "Two-up split filling the viewport: two half-width photos of models on pale grounds, divided by a vertical torn-paper edge instead of a straight line. Each half has a category word in heavy condensed type at about 3.5vw bottom-left with a smaller parenthesised word attached like a suffix, and a bracketed count bottom-right."
   },
   {
    "role": "footer",
    "description": "A dark campaign video is cut off by a horizontal torn-paper edge, below which a taupe-grey ground holds the footer. Mono link clusters sit top-left and top-right. A cut-out model stands about 40% across, overlapping a very large condensed wordmark in darker grey so that letters pass behind her. Bottom-left, a subscribe line in white condensed type with a bracketed suffix; an underlined email field at right."
   }
  ],
  "steal": [
   "Split one photograph along a torn-paper edge into a colour half and a greyscale half on different grounds, and let a two-word headline change colour across the same seam.",
   "Run category names in heavy condensed type rotated 90 degrees up the edge of tall product cards, with a bracketed item count in mono at the opposite corner.",
   "Reuse a torn-paper edge as the divider between sections and over the footer instead of straight lines."
  ]
 },
 {
  "id": "aww-alethia",
  "name": "Alethia",
  "url": "https://www.alethia.earth/",
  "source": "Awwwards Site of the Day",
  "kind": "saas",
  "score": 7.9,
  "idea": "Nature as measured data: photoreal moss-covered rocks and terrain float in a dark field, annotated with instrument-style reticles and mono readouts.",
  "mood": [
   "scientific",
   "lush",
   "precise",
   "dark",
   "premium"
  ],
  "archetype": "product-object-centre",
  "hero": "Dark forest-green field. A photoreal 3D boulder covered in moss and small plants floats at centre, about 45% of the viewport wide, with three smaller rocks drifting at lower left, upper right and lower right, the last cropped by the edge. A three-line white headline at about 5vw, medium weight with tight tracking, is flush to a 30px left margin near the top and overlaps the rock's left side. Under it, an outlined button in mono caps with a lime arrow square. A hairline square reticle sits on the rock with a small mono data tag and three lines of readout. Bottom-left: a three-line 24px statement. Bottom-right: a scroll hint.",
  "type": "Geist Medium for headlines at about 70px with -0.05em tracking; Geist Regular at 24 to 40px for statements, also tight; Geist Mono in bold uppercase for navigation, buttons, tags, bracketed card labels and data readouts at 10 to 14px. The footer wordmark is drawn about 330px tall.",
  "colour": "#0f1f10 #ffffff #000000 #c6f19d #6d8b3a #9a9d9a — Forest green, black and white sections with a pale lime accent on arrow squares, tags, hotspots and the footer wordmark. Renders stay in moss greens and stone browns under grey fog.",
  "imagery": "Photoreal CG of mossy rocks, seedlings, soil and a weather-station mast, shown floating on flat colour or as full-bleed foggy macro landscapes; two nature photographs in rounded cards. Hairline reticles, lime hotspots and mono captions are laid over them.",
  "layout": "30px margins, with text habitually docked in the corners of full-viewport scenes: headline top-left, statement bottom-left or top-right. Full-bleed 3D scenes alternate with a white card section and a black centred statement; the page ends on a full-width wordmark.",
  "sections": [
   {
    "role": "intro",
    "description": "A full-bleed macro landscape of moss mounds, bare soil and one seedling under grey fog. A five-line statement at about 40px occupies the top-right, from 35% to 84% of the width, with a three-line mono micro-label at the far top-left. Four lime circular markers with a dotted glyph are pinned across the terrain, each followed by a three-line mono caption in white."
   },
   {
    "role": "features",
    "description": "A full-bleed foggy render of a weather-station mast among rocks and shrubs. Upper left, a three-line heading preceded by a small diagonal arrow. At left, a frosted-glass rounded card about 310px wide holds a small line chart under a large figure. Right of the mast, a stack of five translucent rows about 420px wide, each a mono index number, an uppercase mono label and a plus sign, works as an accordion over the image."
   },
   {
    "role": "showcase",
    "description": "White section. A lime rectangular mono tag sits above a two-line heading at about 53px, both flush left with the right half empty. Below, two image cards share the full width with a 20px gap and roughly 19px radius: a dewy leaf macro and an aerial of terraced fields. Each carries a bracketed mono label top-left, a lime circular arrow button top-right and a two-line white title over the image at bottom-left."
   },
   {
    "role": "footer",
    "description": "A blurred dark foliage photograph as background. The wordmark in pale lime spans the full width, letters about 330px tall and touching both margins. Then a hairline, office cities in lime at about 36px on the left and four columns of mono uppercase links on the right; a thin legal row with a back-to-top link at the very bottom."
   }
  ],
  "steal": [
   "Overlay hairline reticles and mono data tags on an organic 3D object so that measurement becomes the visual subject.",
   "Dock text in the corners of a full-viewport scene (headline top-left, statement bottom-left, hint bottom-right) and let the object own the centre.",
   "Confine one pale accent colour to small squares and tags, then spend it once at full scale on a footer wordmark."
  ],
  "media": "Cut-out specimen objects float on a flat green ground in the hero, about 35-40% of the area. Then oversized fixed footage scenes (150-160% of the viewport, so slow movement never shows an edge) crossfade under scroll for about 1.5 viewports with hotspots and cards over them before a white sheet rises over the pinned scene, and later come two-up rounded photo cards, product renders on black alternating sides and a scattered collage of small tiles round a centred heading, from 33 images and five muted ambient loops of 7-15s.",
  "motion": "A hexagon preloader is still up at 4.5s with scrolling locked, then fades over 600ms; the rock fades up from black and the headline rises 50px while fading in over 600ms cubic-bezier(0.44,0,0.33,1) after a 2.2s delay. Lenis with Framer scroll effects holds a pinned opening for about 1352px; blocks reveal whole with a fade and a 50px rise, with no split text and no reduced-motion rule."
 },
 {
  "id": "aww-made-with-gsap-1",
  "name": "Made With Gsap",
  "url": "https://madewithgsap.com/",
  "source": "Awwwards Site of the Day",
  "kind": "dev-tool",
  "score": 7.9,
  "idea": "The hero is the product: a draggable vertical reel of effect demos runs through the middle of the headline, which is split and pushed to both edges to make room.",
  "mood": [
   "crisp",
   "energetic",
   "technical",
   "confident",
   "playful"
  ],
  "archetype": "other: split-headline-flanking-centre-reel",
  "hero": "White viewport. A one-line headline at 3.3vw is broken in two: the first half flush to the left margin, the second flush to the right, both on the vertical centre line. Between them a black rounded video card, 35% of the width and 16:9, sits dead centre with a mono catalogue number under its left corner; the cards before and after it peek in from the top and bottom edges. Wordmark top-left; top-right a grey capsule of mono uppercase links with a count chip, a round account button and a lime capsule button. Bottom-left a two-line 18px statement; bottom-right a grey mono drag hint.",
  "type": "LayGrotesk medium, tracking −0.02em, sentence case, for headlines (47px in the hero, about 5.5vw mid-page, 17vw in the closing banner) and 22px body; PP Neue Montreal Mono uppercase at 12px for nav, buttons and labels. Statements emphasise by grey-versus-white words.",
  "colour": "#ffffff #0a0a0b #c9fe6e #f1f1f1 #8a8a8a #1f6bff — White hero and footer bracket a long near-black middle; acid lime is reserved for join buttons and a tiny arrow, with one blue button inside the product UI. Demo thumbnails add saturated orange and teal.",
  "imagery": "Looping recordings of the effects: black 16:9 cards with 4px corners holding clusters of small saturated photo tiles (portraits on orange, water, flowers, architecture). Product UI appears inside a large white rounded panel.",
  "layout": "24px margins, with text pinned to edges and centre rather than a column grid. White hero, then black full-viewport screens each holding one idea (statement, UI panel, logo strip, big number line), then a white rounded sheet rising over black as the footer.",
  "sections": [
   {
    "role": "intro",
    "description": "Black section. A mono eyebrow with a bullet dot is centred at the top; under it a three-line centred statement at about 2.6vw where most words are mid-grey and three key phrases are white. A two-line grey caption at 14px follows. Below, a white panel with 16px radius, 80% of the width, slides up from the bottom and contains a dark app window: effect preview at left, a methods list sidebar at right."
   },
   {
    "role": "proof",
    "description": "A row of seven overlapping circular avatars is centred, with a two-line mono uppercase caption beneath, then 60px lower a single line of white client logos runs edge to edge and is cropped at both sides as a marquee. Nothing else shares the black screen; the block sits in the lower half with a large empty area above it."
   },
   {
    "role": "stats",
    "description": "A full black viewport with one two-line statement centred at roughly 5.5vw, medium weight, tight leading: the count of effects, then the release cadence. Letters arrive individually, so mid-scroll the words are missing characters. A small dark capsule in the bottom-right corner shows which demo number is on screen, with a lime dot."
   },
   {
    "role": "footer",
    "description": "A white sheet with rounded top corners, inset 4px in the black page. The closing line is set at 17vw, centred, so large its first row is cut by the top edge; two capsule buttons (lime primary, grey secondary) sit centred beneath. The footer proper is one row: a newsletter heading and capsule input with inline submit on the left 40%, three small mono link columns on the right, and a legal line at the very bottom."
   }
  ],
  "steal": [
   "Split a single-line headline in two and pin the halves to the left and right edges so the media sits inside the sentence.",
   "Make the hero media a reel whose previous and next items peek from the top and bottom edges, signalling drag without arrows.",
   "End on a white rounded sheet rising over a black page, with the final call set so large it is cropped by the sheet's top edge."
  ],
  "media": "One live 16:9 demo card holds the centre at 35% of the width between the two halves of the headline, with neighbours of a vertical reel peeking at the top and bottom edges, so about 20% of the fold is picture. Later, a product screenshot in a white rounded panel, card rows and a carousel bleeding off the right edge, and portrait cards dealt into a fan on a pinned stage; 23 muted 5-8s loops started by script, 4px corners on the preview frames.",
  "motion": "No preloader: by 1.2s the one-line headline has split and slid to the two edges while the demo card opens between the halves, and Lenis then runs 48 ScrollTriggers with 4 pins: a 2700px pin switches a giant statement on character by character, a 3600px pin deals four cards into a fan, and a 3608px pin slides one line of huge letters sideways while each letter rotates and bounces. Headings rise from a mask over 1.2-1.31s expo.inOut at a 0.034 stagger and UI uses cubic-bezier(.9,0,.1,1) at .2-.4s; the elastic letters are a move the house layer does not use."
 },
 {
  "id": "opl-dialkit",
  "name": "DialKit",
  "url": "https://www.dialkit.dev/",
  "source": "One Page Love",
  "kind": "dev-tool",
  "score": 7.9,
  "idea": "The headline is the demo: three floating dial controls from the product sit on top of the sentence and change its weight, spacing and effects live.",
  "mood": [
   "dark",
   "precise",
   "tactile",
   "playful",
   "minimal"
  ],
  "archetype": "type-poster",
  "hero": "Near-black viewport with no logo and no nav beyond a two-word audience toggle (active white, inactive grey) in 13px at top-left. A three-line sentence, centred, white, about 9vw with leading near 1.0, occupies the middle 60% of the width and sits optically centred. Three dark glass control chips, each roughly 300 by 80px with large-radius corners, a label on a lighter tab and a monospace value, float over the text at different tilts: one above the first line, one overlapping the start of the last line at lower left, one a segmented off/on switch at lower right. The chips blur the letters beneath them. The bottom third is empty.",
  "type": "Mluvka at weight 450 for the 128px headline (-0.02em) and 16px body; system monospace for control values, code and prompts. Section headings are only ~18px semibold, so the scale is one giant sentence followed by documentation-size type.",
  "colour": "#111111 #0b0b0b #262626 #ffffff #8a8a8a — Almost pure greyscale: #111 ground, #262626 code panels, white text, grey secondary. Colour arrives only inside demo recordings and syntax highlighting; a faint warm glow rims the control chips.",
  "imagery": "Screen recordings of interfaces being tuned with the control panel, shown as rounded tiles bent around a 3D cylinder; plus one large embedded demo card pairing a photo stack with its control panel.",
  "layout": "A full-viewport centred hero and a full-width curved carousel, then everything collapses into one centred ~680px documentation column with left-aligned text: small headings, tab rows, code panels, prompt blocks. It reads like a well-set README.",
  "sections": [
   {
    "role": "gallery",
    "description": "A band of six or seven screen-recording tiles mapped onto the inside of a wide horizontal cylinder. Tiles in the centre face the viewer at full size; tiles toward the edges shrink, skew in perspective and fade into black, so the row reads as a curved cinema strip about 95% of the viewport wide and 150px tall, floating in empty black with nothing above or below it."
   },
   {
    "role": "showcase",
    "description": "A single rounded dark card, about 680px wide and 650px tall, split in two. Left: a live demo with a title, a date and two overlapping photographs. Right: a narrow control panel of stacked slider rows, a spring-curve graph and toggles. A text link sits in the card's bottom-left corner. Directly below, a small heading with a tab row of package managers and a one-line code strip."
   },
   {
    "role": "how-it-works",
    "description": "A docs-style stack in the same narrow column: a small semibold heading, a framework tab row (active white, others grey), one paragraph, then a rounded #262626 code panel with syntax colouring. A list of ready-made prompts follows, each a bold one-line label above a monospace prompt set in its own rounded panel, with about 30px between items."
   }
  ],
  "steal": [
   "Place the product's real controls on the headline and let them alter the headline's own type settings.",
   "Reduce navigation to a single audience toggle (human or agent) that swaps the page's content mode.",
   "Wrap a row of screen recordings around a 3D cylinder so the strip skews and fades at the edges instead of running as a flat marquee."
  ]
 },
 {
  "id": "opl-heyclicky",
  "name": "heyclicky",
  "url": "https://www.heyclicky.com",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.9,
  "idea": "The landing page is a messy Mac desktop: the nav is a menu bar with clock and battery, demo clips are open .mov windows, and stickers, folders and kaomoji lie scattered around a plain lowercase wordmark.",
  "mood": [
   "playful",
   "nostalgic",
   "scrappy",
   "internet-native",
   "affectionate"
  ],
  "archetype": "collage-scatter",
  "hero": "Off-white page with a faint dot grid. A thin top bar imitates a Mac menu bar: product name and five lowercase links at left, a glyph logo in the centre, status icons, a clock and a blue download link at right. The lowercase wordmark sits dead centre at 6.1vw in medium grotesk, with a one-line tagline and two glossy pill buttons (blue primary, grey secondary) beneath. Scattered around it: five small video windows with traffic-light title bars and filename captions, name-tag stickers, folder icons, a phone cut-out, a trash can and kaomoji. A large rounded video with a play pill rises from the bottom, cropped by the fold.",
  "type": "Inter at weight 500 with -0.03em tracking for the 88px wordmark; everything else is small lowercase Inter (16px body, 12-13px captions) with Geist Mono for a few tiny labels. All lowercase, including buttons and nav. Feature headings are barely larger than body.",
  "colour": "#f5f5f5 #111111 #3b8cf5 #6ec1f0 #e8e8e8 #f24fd0 — Light grey desktop with black text; folder blue is the recurring accent in the primary button, links, speech bubbles and footer. Rainbow appears once in 3D block arcs and softly in tweet title bars.",
  "imagery": "Lo-fi founder videos inside fake window chrome with traffic lights and filename captions; cut-out desktop ephemera (folders, trash can, old phone, name tags, memes); voxel-block arcs. Windows have small radii and soft shadows and are scattered rather than gridded.",
  "layout": "A centred content column about 60% wide with loose objects in the outer margins. Features pair a narrow text column with a large video window. Later come a centred letter card, a marquee line, a three-column tweet wall and a centred FAQ. Backgrounds never change.",
  "sections": [
   {
    "role": "features",
    "description": "Two-column feature block in the centred container. The left column, about 30% wide, stacks a row of dots and bars resembling a voice waveform, a chat-style blue speech bubble containing the spoken prompt with a typing cursor, then a small bold lowercase heading and three lines of grey text. The right column is a large video in a window frame with traffic lights, a thick dark outer border and rounded corners. The next feature shows faded below."
   },
   {
    "role": "intro",
    "description": "A white card one-third of the viewport wide, centred, with a soft shadow, holds a short founder letter in grey 15px text with one phrase highlighted in marker yellow, a tiny avatar with name and role at bottom-left and a handwritten signature at bottom-right. Behind it two arcs built from stacked 3D blocks sweep in from both sides, pink-to-lilac on the left and green-to-yellow on the right, with small pixel-art objects perched on them."
   },
   {
    "role": "testimonial",
    "description": "A marquee line repeats one phrase at about 2.3vw, the centre instance black and its neighbours grey, with a glossy rainbow sticker overlapping it at an angle and a tiny pill label above. Below, a three-column masonry of tweets, each styled as a mini window: pastel title bar with traffic lights, avatar, handle, lowercase text, tiny metrics. The wall fades to white at the bottom, where a floating bar states the user count with a link."
   },
   {
    "role": "footer",
    "description": "Four small lowercase link columns in grey, then the product name spelled across the full container width using rows of blue folder icons as pixels, with a trash-can icon at the left end and a single stray folder at the right. A tiny copyright line sits centred beneath."
   }
  ],
  "steal": [
   "Borrow an operating-system skin as the page's whole grammar: menu-bar nav with a live clock, media in title-bar windows with filename captions, icons as scattered decoration.",
   "Show the product's input as the feature headline: a chat speech bubble holding the spoken prompt with a blinking cursor, above a two-line explanation.",
   "Build the footer wordmark out of a repeated product-relevant icon used as pixels."
  ]
 },
 {
  "id": "opl-the-content-architecture",
  "name": "The Content Architecture",
  "url": "https://www.contentarchitecture.dev/",
  "source": "One Page Love",
  "kind": "dev-tool",
  "score": 7.9,
  "idea": "The product name becomes a rotating vortex of concentric text rings that you scroll into, and the sales argument is a ticking hours-lost counter beside an itemised receipt.",
  "mood": [
   "technical",
   "wry",
   "tactile",
   "precise"
  ],
  "archetype": "split-text-media",
  "hero": "Exact 50/50 vertical split. The left half is warm cream with a left-aligned stack starting a third of the way down at an 80px margin: one-line mono caps label, a two-line medium-weight sans headline at only 3vw, a four-line grey paragraph capped near 510px, then a black button notched into two joined halves beside a pale grey secondary. A mono scroll cue with a target glyph sits bottom-left. The right half is a charcoal canvas filled with concentric rings of white mono caps spiralling round a centre and cropped by the viewport. A dark boxed nav with a marquee strip floats top-centre across the seam; a minimap thumbnail sits top-right.",
  "type": "GeistMono carries two thirds of the page: caps labels, nav, buttons and receipt rows with dot leaders. GeistSans 500 sets quiet 43px sentence-case headlines with zero tracking. The only loud size is a counter numeral near 18vw, so three sizes in total.",
  "colour": "#f1eee7 #232323 #dedede #f28a1c #000000 — Warm cream and charcoal trade places section by section. A single small orange dot marks the paid action on the button and nav; no other hue appears.",
  "imagery": "No photographs. Canvas-drawn concentric rings of the product name in white mono over a faint dotted grid, later dissolving into scattered glyphs and inverted text fragments. Full-bleed and cropped by the viewport.",
  "layout": "An 80px left margin holds every text block. Headlines stay small at the top-left of tall cream sections while one oversized element (vortex, numeral, receipt) takes the opposite side. Floating nav, minimap and a help tab stay pinned throughout.",
  "sections": [
   {
    "role": "other",
    "description": "Scroll transition between hero and first section: the camera pushes into the text vortex, rings scaling until letters are hundreds of pixels tall and cropped at every edge, the dotted grid showing between them. A solid cream disc opens at the centre and grows until it becomes the next section's background. A full-screen wipe built from the hero's own artwork, with the nav still floating above."
   },
   {
    "role": "stats",
    "description": "Pinned cream section. Top-left, a three-line 43px headline with a two-line grey note. Bottom-left, a tilde-prefixed numeral about 18vw tall counts from 00 to 24 as you scroll, with a mono caption and small chip beneath. On the right a receipt column framed by dashed rules fills line by line: mono caps rows grouped by day, dot leaders running to right-aligned hour values, the newest row inverted white on black."
   },
   {
    "role": "footer",
    "description": "The cream page ends in a band where the vortex returns as debris: tiny mono fragments, some inverted in black boxes, scattered sparsely and thickening upward into the dark ring pattern. Below it a plain footer: logo mark with a stacked two-line name on the left, two short mono caps link columns on the right, and a builder credit bottom-right."
   }
  ],
  "steal": [
   "Split the primary button into two notched halves so a two-word action reads like a physical ticket, with one orange dot as the page's only accent.",
   "Argue the cost of doing nothing with a pinned counter: a huge numeral ticks up while itemised mono rows with dot leaders append beside it.",
   "Build the hero graphic from the brand name set on concentric rotating rings, then reuse it as the scroll transition and as footer debris."
  ]
 },
 {
  "id": "aww-trevor-noah",
  "name": "Trevor Noah",
  "url": "https://www.trevornoah.com/",
  "source": "Awwwards Site of the Day",
  "kind": "culture",
  "score": 7.8,
  "idea": "The comedian as a paper cut-out sticker: his head is torn open and the things he makes (stand-up, books, video) spill out and become the navigation.",
  "mood": [
   "playful",
   "bold",
   "collage",
   "warm",
   "cheeky"
  ],
  "archetype": "giant-wordmark",
  "hero": "The desktop capture caught a blank navy frame before the canvas painted; the next frame and the mobile shot show the scene. A deep navy field. The name runs across the top in bold pink grotesk on one line, sized to nearly touch both edges. Centred below is a photographic cut-out of the face with a thick white sticker outline and a torn top edge, from which glossy 3D objects (microphone, book, video player, brain, heart) erupt. Circular arrow buttons sit at the left and right edges; a torn-paper white label beneath the face names the current category. A hairline, a text ticker and a pink pill close the bottom.",
  "type": "Die Grotesk D bold for the wordmark (361px in the digest), Die Grotesk C for everything else with body near 19px. Tight tracking, title case. Statements run at about 4vw and emphasise words by switching them to pink, never by changing weight or face.",
  "colour": "#1d2440 #f78fb3 #f6f7ee #2b2b2b — One navy field for the entire page. Pink marks the wordmark, emphasised words and one pill; cream-white fills buttons and paper shapes. Photos bring the only other colour.",
  "imagery": "Photo cut-outs of the face with thick white die-cut outlines and torn edges, toy-like 3D objects, and small stage photos shaped as peeling stickers or rounded tiles, tilted a few degrees and loosely clustered.",
  "layout": "Centred, one idea per screen on an unbroken navy ground: statement, section title with drifting objects, a lone pill button. The fixed header has the pink name left and two cream pills right. Elements enter from the edges and overlap instead of sitting in columns.",
  "sections": [
   {
    "role": "intro",
    "description": "A centred four-line statement in white at about 4vw, the lines stepped and ragged instead of squared off, with one long word in pink on the first line. It occupies the lower half of the viewport while the upper half stays empty navy, and appears to build line by line."
   },
   {
    "role": "gallery",
    "description": "A two-line centred title, first line white and second pink, at about 2.5vw. Beneath it a loose cluster of tilted objects rises from the bottom edge: a 3D video-player tile in the middle, small rounded photo tiles and a 3D microphone to its left, all overlapping. On the next screen the objects have drifted upward past a single cream pill button centred in empty space."
   },
   {
    "role": "footer",
    "description": "Split footer. Left half: a second, larger cut-out of the face, tilted and cropped by the left and bottom edges, with a small white speech bubble above it. Right half: a five-row menu, each row a tiny index number at left and a bold label at about 2.5vw, separated by hairlines. Legal text is tiny along the bottom."
   }
  ],
  "steal": [
   "Cut the subject out of a photo with a thick white sticker border and a torn edge so photography behaves like illustration.",
   "Emphasise words in a statement by colour alone (pink within white) while keeping one face and one weight.",
   "Turn the footer into a large numbered menu beside a cropped portrait whose speech bubble addresses the departing visitor."
  ],
  "media": "Media covers essentially the whole first screen: a fixed WebGL layer behind everything, a photographic cut-out of the face with a torn top taking about a third of the width and the bottom two thirds of the height, props bursting out of it over the wordmark. Later the props re-form into a collage of tilted sticker photos round a 3D object and a stack of books, torn-paper strips mark the colour changes, and a giant cropped portrait peeks from the footer corner, every photo an alpha cut-out with an 8-10px white sticker outline and no video anywhere.",
  "motion": "A load of about 7.3s plays as a large counter to 100, the intact face sticker, the crown tearing away, props spilling out and the name last, and Lenis then drives the fixed WebGL stage as the props fly down and re-form per chapter, the ground changing navy, charcoal, navy at torn-paper dividers. Headline lines rise from translateY(120%) through a clip-path over 1.2s cubic-bezier(0.215,0.61,0.355,1) and stickers pop in from scale 0 on an overshoot curve the house layer does not use, while 11 reduced-motion rules zero every duration."
 },
 {
  "id": "opl-select26",
  "name": "Select26",
  "url": "https://select.supabase.com",
  "source": "One Page Love",
  "kind": "event",
  "score": 7.8,
  "idea": "A database conference dressed as terminal output: pixel-mono lettering in highlighted cells, a live band of ASCII glyph animation, and one-bit dithered speaker portraits.",
  "mood": [
   "technical",
   "terminal",
   "precise",
   "dark",
   "playful"
  ],
  "archetype": "other: info-columns-over-ascii-band",
  "hero": "Near-black page with 96px side margins and about 125px of empty space at the top. Three columns start on one line: at left the event name stacked in three rows of pixel-mono caps, each letter in its own filled cell (green, mint, white); at 36% a two-line description, a small green down-arrow, then date and address in grey; at 66% the ticket terms and an outlined mono-caps button. Below, a full-bleed band about 320px tall of animated glyphs: four rows of large mint and cream hex characters, a block of ASCII shading, a small symbol cluster. A plain section label and the tops of six portraits close the viewport.",
  "type": "departureMono (pixel mono) at only 34px for the wordmark and for button and table labels; Inter 14-18px with tight tracking for everything else; Manrope minor. Largest live text is 2.8vw: scale comes from the canvas glyphs, not from headings.",
  "colour": "#0b0e0d #95e5b8 #3ecf8e #e6fbd0 #ffffff #8b908d — One near-black field for the entire page. Three greens (brand green, mint, pale lime-cream) appear only in the wordmark cells, canvas glyphs, links and outlined buttons; all copy is white or grey.",
  "imagery": "Canvas-drawn ASCII and hex glyph fields in green tints; speaker headshots converted to coarse black-and-white dither, square-cornered, about 4:5, in a strict six-column grid with small name and role captions beneath.",
  "layout": "Fixed 96px side margins and one six-column grid: info columns, portraits, agenda table and sponsor tiles all snap to it. Sections are separated by space only, with small plain-sans headings; glyph bands at top and bottom bracket the page.",
  "sections": [
   {
    "role": "about",
    "description": "A plain 22px sans label, then a six-column grid of portrait tiles with 18px gutters running more than six rows. Every photo has the same 4:5 crop and is rendered as a black-and-white bitmap dither, so mixed-quality headshots look uniform. Beneath each: name in small white sans and role in grey, two or three lines, left-aligned. A leftover final tile sits alone at the left rather than being centred."
   },
   {
    "role": "list",
    "description": "The agenda heading reads as a sentence: the section word, a green arrow, then two text tabs, the active one underlined in green. Below, a three-column table: time ranges in small grey mono, session title in white sans, speakers in smaller white on two lines. Column headers are tiny mono caps over one hairline; rows are separated by space, with a single dotted line marking lunch."
   },
   {
    "role": "footer",
    "description": "The cell-highlighted wordmark repeats at small size above three grey lines and a three-state theme switch made of tiny square icons; an outlined mono button sits far right. Beneath, a full-width band of bracketed hex strings in mixed green fills, some characters inverted in solid cells, with a ticker line of digits running off both edges."
   }
  ],
  "steal": [
   "Set each letter of a wordmark in its own filled monospace cell, varying the fill tint per row.",
   "Dither all headshots to one-bit black and white so a mixed set of speaker photos becomes one consistent texture.",
   "Skip the big headline: put the practical facts in three quiet columns and let a full-bleed generative band carry the scale."
  ]
 },
 {
  "id": "opl-le-petit-bleu",
  "name": "Le Petit Bleu",
  "url": "https://www.lepetitbleucafe.com/",
  "source": "One Page Love",
  "kind": "restaurant",
  "score": 7.8,
  "idea": "The cafe's teal-and-white stripes become the whole system: one teal ink on cream, everything boxed in thin double outlines like printed menu cards, beside a permanently visible photo of the room.",
  "mood": [
   "cheerful",
   "charming",
   "retro",
   "tidy",
   "sunny"
  ],
  "archetype": "split-text-media",
  "hero": "Viewport split 50/50 with 12px gaps. Left: a cream panel with a thin pale-teal outline and rounded corners. Inside, a second outlined box is the nav bar: two-line hamburger left, teal brush-script logo about 300px wide centred, a caps order link right. Below, a two-line light serif headline at about 3.5vw, centred, in teal, then two centred stacks, each a bold caps label, a serif line and a solid teal button wrapped in a second thin outline. Right: a full-height rounded photo of a striped booth, with an outlined hours bar across its top, three slide dots bottom-left and a white address card bottom-right.",
  "type": "Self Modern, a light bookish serif, for headline and 15px body; Matter SQ bold caps for labels and buttons; Archive Mono Pro typewriter caps for menu rows; a brush-script logo. Section titles are tall condensed serif caps sized so four to seven letters fill the column.",
  "colour": "#fcfbf7 #13a7b2 #058599 #cfe5e7 #e9b81f — Cream paper and a single teal used for every word, rule, outline and button; no black anywhere. Yellow, floral reds and marble enter only through the interior photographs.",
  "imagery": "Bright, saturated interior and food photographs; the right-hand panel is a full-height slideshow with rounded corners. Small food shots sit in a horizontal strip, and a fine line drawing of the shopfront with one teal awning fills a card.",
  "layout": "The left half scrolls as a stack of outlined cream cards (full-width or two-up) with 12px gaps while the right half stays fixed. Card contents are centred. A sticky nav card rides over the stack. On mobile the photo becomes the hero card's background.",
  "sections": [
   {
    "role": "list",
    "description": "A card containing only the section word in tall condensed serif caps, teal, sized so its four letters fill the column edge to edge. Below it, a stack of full-width outlined rows about 36px high, each with a category name in typewriter mono caps at left and a thin plus sign at right, separated by 6px gaps. Above the title: a ticker row of tiny caps and a strip of four small food photos with rounded corners."
   },
   {
    "role": "about",
    "description": "The same giant condensed title treatment, then centred serif paragraphs in teal with underlined links in a narrow measure of about 280px. Further down, a landscape photo of the two proprietors with a centred two-line caption in tiny sans, followed by more centred paragraphs. All of it lives in the left half while the right photo panel has advanced to a shelf-wall image."
   },
   {
    "role": "gallery",
    "description": "A header row with a tiny bold caps label at left and a script follow-us link with arrow at right, then three portrait images (about 3:5) with 12px rounded corners in a row, the third cropped by the column edge to imply a carousel. Directly below, the next giant section title begins and is cropped by the viewport."
   }
  ],
  "steal": [
   "Print everything in one brand ink on cream, including body text, rules and buttons, and let photographs supply the other colours.",
   "Wrap buttons and panels in a second thin outline offset by a few pixels to get a printed-ticket feel.",
   "Keep a tall photo panel fixed on one half and scroll a stack of cards on the other, swapping the photo as sections change."
  ]
 },
 {
  "id": "opl-dabbit",
  "name": "Dabbit",
  "url": "https://dabbit.app",
  "source": "One Page Love",
  "kind": "dev-tool",
  "score": 7.8,
  "idea": "The colour picker demonstrates itself on the page: its loupe sits in the hero reading the site's own background hex, and every feature is shown as a real fragment of the app.",
  "mood": [
   "precise",
   "quiet",
   "nocturnal",
   "crafted"
  ],
  "archetype": "split-text-media",
  "hero": "Near-black viewport split exactly in half by a one-pixel vertical hairline. Left half: a small chrome four-petal logo top-left at a 40px margin, then two thirds of empty dark, then everything else anchored bottom-left: a one-line 30px medium-weight headline, three lines of grey 18px copy, a light pill button beside an outlined pill, and a tiny note. Right half: a 450px rounded square with a thin iridescent border, the app's loupe, empty except for a centre crosshair dot and a small chip reading the hex of the page's own background. Eight pastel dots and lozenges drift across the top-right like spilled swatches.",
  "type": "InterVariable only. Headline a modest 30px medium with -0.025em tracking; section heads about 22px; cell titles 15px; body 16px grey. Largest text is 3.3vw. Hierarchy comes from white against grey rather than size; hex values use tabular figures.",
  "colour": "#141416 #2b2b2e #f4f3f2 #9a9aa0 #f4a48c #d4c6e6 — Charcoal ground, off-white and grey text, no brand accent. All colour comes from the product: pastel swatches, tonal scales, and a thin prismatic edge on the loupe and logo. Neutral-cool.",
  "imagery": "Live-drawn UI fragments on canvas: swatch strips, eleven-step scales, contrast tables, a Figma plugin panel, each in a slightly lighter rounded panel. A chrome 3D logo and chrome price numerals are the only non-UI images.",
  "layout": "40px outer margins; the hero's centre hairline becomes a three-column then four-column hairline grid. No section changes background; rhythm is small eyebrow, heading, grid, repeat. Text sits top-left in every cell.",
  "sections": [
   {
    "role": "features",
    "description": "A three-column grid ruled by one-pixel hairlines with no card backgrounds. Each cell is over 400px tall: 15px white title and three lines of grey copy, plus a real UI fragment docked above or below (a swatch history strip, a tonal scale, a contrast table, a ten-by-ten colour matrix). Rows alternate text-over-mock and mock-over-text so the grid staggers. The loupe square from the hero reappears floating across cell boundaries."
   },
   {
    "role": "features",
    "description": "A four-column, three-row grid of minor features divided by hairlines. Each item is a 14px title prefixed by a tiny coloured glyph (dot, square, triangle or dash, one shape per column, in the app's pastel colours) and two lines of grey text. No icons, no cards, no hover chrome."
   },
   {
    "role": "pricing",
    "description": "Left third: small grey eyebrow, a 22px heading, one paragraph. Right: the price rendered as huge chrome 3D numerals about 150px tall with the loupe square overlapping them, a tiny qualifier beside, and a plain four-line checklist beneath. No pricing card, no border, no tiers."
   },
   {
    "role": "cta",
    "description": "Closing block centred on the same dark ground: the chrome four-petal logo enlarged to about 200px, pastel shapes scattered widely around it, a two-line 22px sentence, the same two pill buttons, then a one-line footer with copyright left and seven text links right."
   }
  ],
  "steal": [
   "Make the hero demo sample the page itself: the tool reports the site's own background value, proving the product without a screenshot.",
   "Build feature grids from hairlines and real UI fragments instead of bordered cards and icons, alternating text-above and mock-above per row.",
   "Keep the headline small (30px) and anchored bottom-left so the product object, not the slogan, owns the first viewport."
  ]
 },
 {
  "id": "aww-decathlon-yestalgia",
  "name": "Decathlon Yestalgia",
  "url": "https://decathlonyestalgia.com/",
  "source": "Awwwards Site of the Day",
  "kind": "fashion",
  "score": 7.8,
  "idea": "A full-commitment late-80s Memphis pastiche: sticker shapes with hard black shadows, ultra-condensed capitals and a glitching wordmark that flips nostalgia from no to yes.",
  "mood": [
   "retro",
   "loud",
   "joyful",
   "cartoonish",
   "sunny"
  ],
  "archetype": "collage-scatter",
  "hero": "Pale grey page. A portrait video card, 35% of the width and 75% of the height with square corners, sits dead centre showing a hand on a boombox; across its middle a slanted, extruded gradient wordmark is caught mid-glitch and overhangs the card's left edge. Five flat sticker shapes with speckle patterns and solid black offset shadows are scattered in the empty flanks: pink arc upper-left, lime lightning bolt lower-left, orange disc upper-right, blue arch lower-right, a teal triangle cropped by the top edge. The header is inset 8%: a chunky lime menu button left, the retro logo centred, language selector and shop button right, all with hard black shadows.",
  "type": "Roboto Flex throughout, pushed to its narrowest, heaviest setting for uppercase headlines at about 14vw with tight leading; 12–16px medium uppercase for buttons. Campaign wordmarks are custom lettering: slanted, extruded and gradient-filled.",
  "colour": "#f4f4f4 #eaa0cd #e9dae6 #d9e13f #0a0809 #f0923a — Starts neutral grey, shifts to pale pink then saturated bubblegum pink on scroll. Lime marks every control; orange, sky blue, green and purple appear in illustrations, always outlined in black.",
  "imagery": "Sun-drenched lifestyle video and photos (older skaters, a boombox) alongside thick-outlined cartoon illustration, palm trees, a striped sunset and speckled geometric stickers; photos appear as tilted white-bordered prints overlapping headlines.",
  "layout": "A centred axis for media and headlines with decoration scattered in the margins and cropped by viewport edges. Each scroll stage changes background colour and adds a pattern (grid paper, stripes, perspective grid). Headlines stay put while pictures and characters pass over them.",
  "sections": [
   {
    "role": "intro",
    "description": "Pale pink with faint grid-paper lines. A two-line ultra-condensed black headline, each line about 14vw tall, sits centre-left and takes 40% of the width. Decoration crowds the lower half: an orange half-sun with palm trees rising at the right, a pink speckled arc and a cartoon character peeking from the bottom-left, a four-point sparkle upper-left. White horizontal stripes of increasing thickness run across the bottom edge as the hand-off to the next colour."
   },
   {
    "role": "other",
    "description": "Bubblegum pink. A cartoon skater riding a cassette tape, with chrome numerals and a lightning bolt behind, is placed centre-right at about 40% of the viewport height and overlaps the headline. The three-line condensed headline is distorted mid-scroll: its second and third lines sink and shear toward the lower right as if printed on a curling poster. Pink and white stripe bands cap the top."
   },
   {
    "role": "gallery",
    "description": "Same pink field. A small condensed line is centred above the giant two-line headline. Two portrait photographs with thin white borders, each roughly 380×510px, are dropped on top of the headline's centre, tilted about −8 and +6 degrees and overlapping each other, hiding half the letters. One orange speckled disc sits alone at the right; a lime bolt is cropped by the top-left corner."
   },
   {
    "role": "footer",
    "description": "Pink field overlaid with a white wireframe grid plane tilted in perspective. A pennant-shaped campaign logo in purple, green, pink and yellow sits at centre; sticker shapes are pinned to the corners and cut off by the viewport; two 10px legal links are centred at the very bottom. There are no link columns at all."
   }
  ],
  "steal": [
   "Give every control and sticker a solid black offset shadow instead of a blurred one so flat shapes feel like die-cut objects.",
   "Start the hero video as a centred portrait card surrounded by scattered shapes, then scale it to full-bleed on first scroll.",
   "Drop tilted, white-bordered photos directly on top of a giant condensed headline so the type becomes background."
  ],
  "media": "A centred portrait video window of about 506x674 covers about 26% of the fold, with flat stickers in the corners, and opens to full bleed by clip-path over an 1800px runway, so by the second screen the video covers the whole screen. Later: an illustration scene rising over a statement, tilted photos rising over a headline, an edge-to-edge product grid of 3-up and 4-up rows mixing stills and 2-4s loops, a carousel of tilted portrait videos and a name index scrolling past a held square picture; 36 pictures and 16 muted looping videos, no radius.",
  "motion": "No preloader: the montage cuts through four shots in 4.5s while the half-ring stickers turn, and Lenis then runs two sticky frames, the first opening the hero inset from about 26% per side to 0, the second raising an illustration scene over the statement as the ground switches from lavender to hot pink. Images reveal by clip-path over 1.6s cubic-bezier(0.77,0,0.175,1) with an inner image move on the same ease, statement characters fade and move over 1s, and UI moves at 0.3s cubic-bezier(0.215,0.61,0.355,1)."
 },
 {
  "id": "opl-vessa",
  "name": "Vessa",
  "url": "https://vessa.design",
  "source": "One Page Love",
  "kind": "saas",
  "score": 7.8,
  "idea": "A brand-guidelines tool that frames its live demo inside an electric-blue dithered pixel field and marks the whole page with dashed artboard guides and corner handles.",
  "mood": [
   "crisp",
   "digital",
   "confident",
   "cool",
   "designerly"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Pale cool-grey page with dashed vertical guides about 2% in from each edge. A soft blue halftone arc of pixels glows behind the top nav: logo left, four links centre, sign-in and a blue button right. Centred below: a two-line medium-weight headline at 3.9vw with very tight tracking, about 43% of viewport width; three lines of 18px grey text with one bold phrase; a small blue button with 6px corners; a pill counter. At 58% down a full-width electric-blue block begins, its fill breaking into checker dither at the top, with small square handles at its corners; inside, a pill tab bar and the top of a black demo page.",
  "type": "Switzer only: weight 500 at 56px with -0.045em tracking for the headline, about 18px regular for lead text, 15px body, 13px nav. Section headings drop to roughly 28px, so the hero is the single large moment. Emphasis by bold or blue text, never capitals.",
  "colour": "#eef0f3 #1f2de6 #010101 #f5f6f8 #ffffff — Cool pale grey with one electric blue used for buttons, one highlighted sentence and large dithered frames; the embedded demo brings black and warm photographic tones.",
  "imagery": "Live product demo pages (a fictional sports brand with a dramatic runner photo, logo lockups on white and black) sit as rounded panels inside blue ordered-dither pixel frames; small grey-and-blue schematic diagrams elsewhere.",
  "layout": "A container of about 1300px bounded by dashed guide lines that continue down the page and split into dashed grid cells for features. Centred text sections alternate with left-aligned split rows and full-width blue dithered blocks, separated by generous vertical gaps.",
  "sections": [
   {
    "role": "intro",
    "description": "Centred column about 55% of viewport width set in roughly 22px regular text as three or four short paragraphs with wide gaps and no heading. The final one-line paragraph switches to the accent blue as the turn of the argument. No images, cards or rules; only the dashed side guides frame it."
   },
   {
    "role": "how-it-works",
    "description": "Two-column row. Left: a blue dithered rectangle about 45% of the width whose solid centre dissolves to pixels at the edges, containing a small white rounded card with a schematic of a URL turning into colour swatches and a font tag. Right: a pill stepper of three tabs with an arrow button, then a small bold title and four lines of 14px text placed mid-height. The section title sits far below at left in 28px."
   },
   {
    "role": "features",
    "description": "A grid drawn only with dashed lines. First a full-width cell with a centred diagram of five small bordered chips hanging from a blue tag by dashed connectors, title and text at bottom left. Below it two cells side by side, each with a grey-and-blue schematic (scattered rounded squares; an input wired to a browser strip) in the upper two thirds and a bold one-line title plus three lines of small text at the bottom left."
   },
   {
    "role": "cta",
    "description": "Full-width blue dithered block with corner handles; in its middle a solid blue rectangle about half the width holds a centred two-line white heading at 28px and a small white button. Directly below sits the footer: brand blurb and a directory badge at left, five link columns separated by dashed vertical rules, and a one-line legal strip under a dashed horizontal rule."
   }
  ],
  "steal": [
   "Replace gradient backgrounds with an ordered-dither pixel pattern in the accent colour that dissolves from solid to checkerboard at the edges.",
   "Use dashed guide lines and small square corner handles as the page's structural ornament, including as dividers between feature cells and footer columns.",
   "Embed the real product with its own tab bar directly under the hero copy instead of a static screenshot."
  ]
 },
 {
  "id": "opl-poetry-camera",
  "name": "poetry camera",
  "url": "https://poetry.camera/",
  "source": "One Page Love",
  "kind": "physical-product",
  "score": 7.7,
  "idea": "A camera that prints poems is sold through its own output: copy arrives as thermal-paper slips, and a soft-focus bitmap wordmark lies over handheld footage.",
  "mood": [
   "tender",
   "whimsical",
   "lo-fi",
   "dreamy"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed handheld video of two hands holding the white-and-red camera against out-of-focus blossom. The product name is centred over it in two lines of white lowercase bitmap lettering about 10vw tall, deliberately blurred so the pixels bloom into soft blobs; the block spans 70% of the width, from 25% to 70% of the height, directly on top of the camera. One text link sits top-left and two social icons top-right, all white. A yellow pill button about 165px wide with black lowercase text is centred near the bottom edge and stays fixed for the whole page. No tagline and no scrim.",
  "type": "BitMatrix A2, a dot-matrix face, blurred at 10vw for the wordmark and sharp at 12px on the paper slips; Exposure, a soft serif, in white lowercase near 32px for statements and about 10vw for the closing quote; DM Sans for links and button.",
  "colour": "#b7a590 #7a6f3e #f9fdf9 #ffde5b #c92a2a #1a1a1a — Colour comes from the footage: blossom pinks, moss greens, the camera's red base. White type and off-white paper slips sit over it; one yellow button repeats on every screen. The last screen turns plain white.",
  "imagery": "Soft, shallow-focus handheld video fills each screen: the camera outdoors, on a workbench, prototypes on a desk. Over it sit scanned-looking thermal slips with mono text and dithered halftone portraits, slightly rotated and overlapping.",
  "layout": "Each section is one full-height video with a block of large white serif text in a central column about 45% wide, left-aligned, and a row of paper slips rising from the bottom edge. The same yellow button floats bottom-centre throughout. The page ends on a type-only white screen.",
  "sections": [
   {
    "role": "showcase",
    "description": "Full-bleed video of the camera hanging among blossom. Two short paragraphs of white lowercase serif near 32px sit in the upper centre, left-aligned in a column starting 18% in. Along the bottom, six off-white paper slips of differing heights stand side by side across the full width, each tilted a degree or two, each headed by a lowercase mono label and a typed divider of dashes or crosses, then a short poem in mono. The bottom edge crops them."
   },
   {
    "role": "testimonial",
    "description": "Same structure over a different clip. Three tall receipt-like slips fan out beneath a three-line serif statement, each tilted differently and overlapping slightly. A slip carries a name between rows of asterisks, a one-line role, a typed rule, a circular dithered black-and-white portrait, then the quote in 12px mono. The slips run off the bottom of the screen."
   },
   {
    "role": "footer",
    "description": "Plain off-white screen with no image. A quotation is set in black lowercase serif at about 10vw with the words of each line spread to the full width: one hard left, one centred, one hard right. Two lines are visible with 150px between them, and the attribution is spaced the same way. Beneath, four small sans links centred in a row, then the yellow button."
   }
  ],
  "steal": [
   "Blur a bitmap wordmark until the pixels bloom, turning a hard retro face into something soft enough to sit on video without a scrim.",
   "Present feature copy and testimonials as the product's own printed artefact (tilted receipt slips with typed dividers and dithered portraits) rather than cards.",
   "Close on a type-only screen with a quote spread word by word across the full width, as a change of tempo after continuous video."
  ]
 },
 {
  "id": "aww-sstr-friction-reduction",
  "name": "SSTR - Friction Reduction",
  "url": "https://sstr.tech/en/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 7.7,
  "idea": "Drilling hardware treated like precision consumer tech: a chamfered octagon taken from the tool's cross-section drives the buttons, icons and loader.",
  "mood": [
   "industrial",
   "precise",
   "dark",
   "engineered"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "The captured first viewport is the preloader: a 2 by 2 grid with hairline dividers, top-left quadrant solid orange with the slash-prefixed name at 5.6vw in black bold grotesk; top-right dark with a plus-sign dot grid and an orange square beside a percentage; bottom quadrants hold wireframe octagon stacks under small labels. The real hero is a full-bleed grey 3D render of a steel downhole tool rising from bottom centre. A two-line uppercase headline at about 3.5vw in light grotesk sits left-anchored at mid-height, with a short paragraph and an orange chamfered-corner button below. A slim bar holds logo left, five small caps links, globe and contact right.",
  "type": "ABC Monument Grotesk: bold for the loader mark, but headlines are regular or light uppercase with tight tracking at roughly 36 to 50px over 14px body. Uppercase labels at 10 to 11px carry a square orange bullet. Statistic numerals jump to about 6.7vw in a thin weight.",
  "colour": "#18191b #eff0f1 #ff5a2a #2f3032 #c3c4c8 — Graphite and cool light-grey sections alternate; one safety orange marks buttons, bullets, the loader block and the highlighted chart series. Renders are desaturated steel so orange never competes.",
  "imagery": "Desaturated 3D renders of drilling tools, full-bleed in the hero and as a long drill string bending along a well path; thin wireframe octagon line drawings as service icons; a chart drawn in dots.",
  "layout": "Content sits inside vertical hairline rails about 35px in from each edge, with sections subdivided into two or three bordered cells. Dark and light sections alternate. Text blocks are left-aligned and narrow; a pinned well-path sequence breaks the grid with a full-bleed scene.",
  "sections": [
   {
    "role": "features",
    "description": "Light grey section inside vertical hairline rails. An uppercase two-line heading at about 2.4vw sits top-left with an orange chamfered button under it. Below, three equal columns divided by hairlines, each about 230px tall: a wireframe line drawing of stacked octagons in the upper half, then an uppercase title at 13px and three lines of small grey body. No fills, no icon circles, no shadows."
   },
   {
    "role": "stats",
    "description": "Graphite section split into two bordered cells. Left cell, vertically centred: a tiny bracketed before-and-after range in caps, a statistic at about 6.7vw in thin grotesk, a one-word label and an orange chamfered button. Right cell: a line chart drawn entirely in dots, white for the baseline and orange for the improved run, with faint axis labels and a two-item legend using short colour bars."
   },
   {
    "role": "how-it-works",
    "description": "Pinned full-viewport dark scene. A 3D drill string enters at top-left, runs down, bends through ninety degrees and continues along the bottom to the right edge, with bright tool segments spaced along it. A text block right of centre holds a small orange-bulleted label, a four-line uppercase statement at about 2vw and two lines of body. Bottom edge: a back-to-start link left, a chevron scroll cue centre, a skip link right."
   }
  ],
  "steal": [
   "Derive one shape from the product (here a chamfered octagon) and reuse it for button corners, icons and loader graphics.",
   "Draw charts with dots rather than lines and reserve the accent colour for the one data series you want read.",
   "Turn the preloader into a branded four-cell grid that previews the site's colour blocks and wireframe icons."
  ],
  "media": "A full-bleed 13s monochrome loop of a drilling tool descending over grey sand covers the whole fold with the text straight on it at the left, oversized for parallax. Below: a full-bleed WebGL chapter with the caption right of centre and a depth gauge at the edge, line-drawn icons in three equal cells, dot-plot charts beside big figures zigzagging per row, a 4:1 product strip under a giant product-code heading, and 3:2 case photographs in a right-hand column; 33 images and 3 videos, 0px radius.",
  "motion": "On desktop the video plays from 400ms while every text line shows as a solid orange bar the size of the line, like redaction, and the type replaces the bars by 1.2s. Under Lenis the hero video parallaxes at scrub 2, heads rise as masked lines over 0.6-0.82s expo.out at a 0.04-0.06 stagger, chart dots switch on one by one (1004 rects at 0.15s), stats roll digit columns, the WebGL chapter is step-locked with skip controls, and buttons fill with a clip-path sweep over 0.375s; there are 10 reduced-motion rules."
 },
 {
  "id": "aww-no-art",
  "name": "No Art",
  "url": "https://www.noartmusic.com/",
  "source": "Awwwards Site of the Day",
  "kind": "music",
  "score": 7.7,
  "idea": "The page is a camera viewfinder: crop-mark brackets frame the viewport and the scrawled logo, and all text is typewriter-mono capitals like a caption burned onto footage.",
  "mood": [
   "raw",
   "technical",
   "festive",
   "irreverent"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Aerial festival footage (crowd, trees, an iridescent gate structure) fills the screen. Dead centre sits a hand-scrawled logo about 280px wide in a lilac chrome texture, tilted upward, with four small white corner brackets marking its bounding box. Matching brackets sit in the viewport corners, with tick marks at the mid-left and mid-right edges. Top-left: a small white copy of the scrawl. Across the top right: four mono caps links, each led by a small white square. Bottom-left: a grey mono label and a five-line fully justified mono caps paragraph only 210px wide. Bottom-right: a small dark card with a poster thumbnail, event name and date.",
  "type": "Chivo Mono in bold capitals at 11-12px for nearly everything, fully justified so word gaps open up; Neue Haas Grotesk bold caps at about 48px (3.3vw), also justified, for the few section statements. The logo is handwriting. Two real sizes.",
  "colour": "#ffffff #000000 #1b240b #b9b4f0 #e23b1e #8b2a52 — Dark green footage up top, then stark white with black text. Colour comes only from event posters in flat primaries, maroon flight cases in the shop photos and red dots on the globe.",
  "imagery": "Aerial video; naive hand-drawn figure posters used as wide banners; a grey wireframe globe; full-length merchandise portraits shot against stacked flight cases in woodland, 3:4, square corners, five across.",
  "layout": "Wide white margins inside a persistent bracket frame. Content sits on a multi-column grid: headings in the left third, justified paragraphs in the right third, carousels spanning the full width. A small square-bulleted label heads each block.",
  "sections": [
   {
    "role": "intro",
    "description": "White screen inside the bracket frame. A tiny square-bulleted mono label, then a four-line statement in 48px bold grotesk caps, fully justified to a 430px measure so the words are pushed apart, starting 11% from the left. Opposite, starting at 58%, two justified mono caps paragraphs about 440px wide and a small text link. The middle third is left empty."
   },
   {
    "role": "other",
    "description": "Events carousel. A label row with a text link at the far right, then a horizontal row of wide poster banners (about 2.2:1) showing hand-drawn dancing figures in flat primaries, 20px gaps, the fourth cut by the edge. Under each: a bracketed index number and event name in mono, date on a second line. Centred below, a prev and next control with a row of thin vertical tick marks between them as the progress indicator."
   },
   {
    "role": "other",
    "description": "Globe locator. Left: a four-line justified bold caps heading with a two-option text filter under it. Centre: a pale-grey wireframe globe about 550px across, cropped by the section's bottom edge, with a few red location dots. Around it sit tiny mono readouts: latitude and longitude above left, local time and time zone to the right, each anchored by a small corner bracket."
   },
   {
    "role": "showcase",
    "description": "Five equal 3:4 portraits edge to edge with 20px gaps, each a model standing square to camera in front of maroon flight cases among trees. Under each a plus sign, product name and price in mono. The same prev, tick-marks, next control sits centred beneath. The footer follows as a thin outlined box split into a logo cell and six link columns with bracketed mono headings."
   }
  ],
  "steal": [
   "Put small corner brackets at the viewport corners and around the logo's bounding box so the whole page reads as a viewfinder.",
   "Fully justify short bold caps headings to a narrow measure so the uneven word gaps become the texture.",
   "Replace carousel dots with a row of thin vertical tick marks between plain-text prev and next."
  ],
  "media": "A full-bleed 13s aerial festival video is meant to fill the first screen under a centred framed logo, with copy and a 107x80 next-up thumbnail docked in the bottom corners; it did not paint on desktop. Below, a swiper strip of illustrated event posters from the left margin bleeding off the right edge, a product strip of 2:3 portraits that swap to a second image on hover, and a WebGL globe between a heading and a live readout; fixed viewfinder corner marks sit over every section.",
  "motion": "A preloader of about 4.5s reads as an aperture opening from a point: a dot grows into a black square, then a 470x250 frame holding the logo, then full bleed. Lenis with a single scrubbed trigger on the hero and nothing pinned; product images scale over 0.6s cubic-bezier(0.16,1,0.3,1) (the dominant curve, 14 uses) and swap in 0.3s, a custom cursor follows on 0.4s power3.out, and accordions open by grid-template-rows over 0.4-0.5s."
 },
 {
  "id": "aww-cerebrium",
  "name": "Cerebrium",
  "url": "https://cerebrium.ai/",
  "source": "Awwwards Site of the Day",
  "kind": "ai-product",
  "score": 7.7,
  "idea": "Infrastructure speed expressed as glossy magenta ribbons sweeping through a near-black field, with the technical proof delivered underneath on a white sheet of mono-labelled demo panels.",
  "mood": [
   "technical",
   "nocturnal",
   "glossy",
   "confident"
  ],
  "archetype": "bottom-anchored-type",
  "hero": "Full-bleed near-black canvas with fine grain; thick glossy magenta-plum 3D ribbons arc up from the bottom and right, one edge catching a white highlight. Top bar: logo left; at right a dark rounded rectangle holding five uppercase mono links, then two squarish buttons (pale lavender log-in, hot-pink sign-up). The upper 60% of the left side is empty. The headline is three lines of light-weight grotesk at about 5.5vw, flush left on a 3% margin, ending about 10% above the bottom edge, with one word in a pink gradient. At two-thirds across, level with the headline's lower lines, a five-line paragraph and two mono-labelled buttons.",
  "type": "ABC Favorit in a light weight for large headlines, Suisse Intl for 18px body, Suisse Intl Mono in uppercase for every nav item, button and tag. Sentence case, default tracking. Hero headline to body is about 4.5:1; feature titles stay near 1.6vw. The digest's 144px line is not in the captured frames.",
  "colour": "#040102 #470c35 #ffffff #eef2f5 #ff488b #101421 — Near-black and plum hero and footer bracket a white middle with navy-ink text. Hot pink is reserved for primary buttons, one gradient headline word, benchmark bars and map markers.",
  "imagery": "WebGL ribbon sculpture in plum with glossy highlights behind hero, logo strip and footer; below, schematic product vignettes (benchmark bars on a frosted card, hex-dot world map, terminal output, line chart) inside pale-grey or navy panels with 8px corners.",
  "layout": "3% side margins. Hero and footer are full-bleed dark; the middle is a white sheet with rounded top corners that slides up over the ribbons. Inside it, a pinned two-column layout: narrow list at left, a wide right column of stacked panels each followed by a short title and paragraph.",
  "sections": [
   {
    "role": "proof",
    "description": "Directly under the hero the ribbon canvas continues behind one row of white client logos running edge to edge, cut off at both sides, over a faint dot grid. A white panel with large rounded top corners rises over it and opens with a two-column row: a small two-line statement at the left margin, and from 50% across a two-line headline at about 2.8vw whose words fade from grey to navy, the second line in pink."
   },
   {
    "role": "features",
    "description": "Pinned feature list. Left column, about 25% wide: a tiny mono label with a bullet, then four stacked feature names at about 1.6vw in light weight; the active one is navy and the other three pale grey, the active state stepping down as you scroll. Right column from 50% to the margin: a tall stack of roughly 4:3 demo panels, each followed by a one-line title and a four-line paragraph. Panel grounds alternate between ribbon render, pale grey and navy."
   },
   {
    "role": "footer",
    "description": "The footer returns to the dark ribbon canvas at full viewport height. Social icons sit top-left and two small link columns start about 75% across. In the lower right, a two-line closing statement at about 1.5vw with a pink and a dark button beneath; ribbons sweep in from the bottom-left to fill the empty half. A hairline and one row of legal links in mono capitals close the page."
   }
  ],
  "steal": [
   "Pin a short list of feature names on the left and let only the active name hold full ink while the others drop to pale grey, as a stack of demo panels scrolls past on the right.",
   "Set every interactive label (nav, buttons, tags) in uppercase mono and everything else in a light grotesk, so controls read as a separate system from the copy.",
   "Make the light content area a sheet with rounded top corners that slides up over the dark hero art, then bring the same art back for the footer."
  ],
  "media": "One fixed 3D canvas covers 100% of the first screen, its ribbon mass in the lower-right 55% with the text straight on the render, and stays behind every section, seen through windows between rounded sheets that slide over it; the scene changes by section (ribbons, an orb, ribbons). Product pictures are working mini interfaces (a chart, a map, a terminal) on cards; no photographs and no video on desktop.",
  "motion": "A small logo-bar preloader, then the headline words reveal out of reading order over about 2.5s and the 3D ribbon fades in last. Lenis with script-driven parallax on 54 data-scroll elements; a sticky feature list highlights the item whose card is in view, blocks reveal with a 14px rise over 0.8s cubic-bezier(.645,.045,.355,1), and benchmark bars fill over 0.25 to 4s so each bar's fill time follows the value it shows; there is a reduced-motion rule."
 },
 {
  "id": "opl-spatial",
  "name": "Spatial",
  "url": "https://spatial-festival.com/",
  "source": "One Page Love",
  "kind": "event",
  "score": 7.7,
  "idea": "Typography behaves like sound in a room: plain black statements swell, stretch and bend through an empty white viewport as you scroll.",
  "mood": [
   "stark",
   "experimental",
   "precise",
   "kinetic"
  ],
  "archetype": "type-poster",
  "hero": "A white viewport holding only the festival dates: two centred lines in Neue Haas Grotesk Roman at roughly 6.7vw, black, tight leading, sitting at the exact vertical middle and spanning about half the width. Large empty fields above and below; no image, no button, no supporting copy. The header is the only other element: a light uppercase wordmark with tight tracking flush to the top-left corner at a 20px inset, and nine small bold uppercase links in a row across the top right. Mobile is the same poster at 40px with a two-line hamburger.",
  "type": "One face, Neue Haas Grotesk Display 55 Roman, for everything: statements from 56px up to about 10vw, 13px body, bold 13px uppercase navigation, a timetable at about 16px with tight leading. Statement lines are distorted per glyph, each letter scaled to a different width and height.",
  "colour": "#ffffff #000000 #e8a25c — Pure black on pure white; the programme section inverts to white on black. The only colour is the amber haze of a single photograph.",
  "imagery": "Almost none. The images are canvas-rendered text statements warped and magnified until letter fragments become abstract black shapes cropped by the viewport. One warm, hazy venue photograph sits inset at half width beside body copy, square-cornered.",
  "layout": "Full width with 10 to 20px margins. Opens with one centred statement per screen, then drops into left-aligned two-column copy and, further down, edge-to-edge four-column timetables. The swing between empty poster screens and tightly packed listings is the page's rhythm.",
  "sections": [
   {
    "role": "intro",
    "description": "A run of full-viewport white screens, each carrying one centred two-line sentence. The text is drawn on canvas and deformed: letters within a word have different widths and heights and baselines wobble. Between screens the type is magnified so far that only the strokes and counters of a few letters cross the frame, cropped on every side, while a small readable version of the next sentence appears inside the wreckage of the previous one."
   },
   {
    "role": "other",
    "description": "A calm reset: a three-line centred statement at about 5vw in undistorted type fills the top half. At the bottom, a column of 16px body copy about 650px wide sits flush to the left margin, and an amber-toned photograph starts at the horizontal centre and runs to the right margin with square corners, cropped by the fold."
   },
   {
    "role": "list",
    "description": "Black full-bleed section. Day headings are single small lines above a hairline; under each, a four-column table spans the full width: artist flush left, format at one third, room at two thirds, time range right-aligned at the far edge. Rows are about 35px high with a hairline between each, all in the same 30px grotesk with no bold; changeovers are marked by rows in capitals."
   }
  ],
  "steal": [
   "Open with a single factual line (the dates) centred on an otherwise empty white screen instead of a branded hero.",
   "Scale each letter of a statement independently in width and height so plain grotesk type looks as if it is resonating.",
   "Set a programme as a full-width four-column hairline table in one size and weight, times right-aligned, on an inverted background."
  ]
 },
 {
  "id": "aww-aardvark-book-club",
  "name": "Aardvark Book Club",
  "url": "https://aardvarkbookclub.com",
  "source": "Awwwards Site of the Day",
  "kind": "ecommerce",
  "score": 7.7,
  "idea": "A book club dressed as a sweet shop: fat black type, tumbling 3D books and boxes on wavy colour fields, annotated with handwritten asides.",
  "mood": [
   "playful",
   "loud",
   "bookish",
   "warm"
  ],
  "archetype": "split-text-media",
  "hero": "A saturated yellow field with two large wavy blobs, pale yellow then orange, rising from the bottom. A three-line headline in Champ Bold, black, at about 8.3vw with leading under 0.85, is flush to a 15px left margin and reaches 60% across. Beneath it: a four-line paragraph 310px wide and a magenta split button (label plus arrow square). Right of centre a 3D hardback in navy and pink tilts 20 degrees, 600px tall; another book is cropped by the top-left corner, a third by the bottom edge. A purple handwritten note sits rotated at far right. Nav: pale-yellow pill links centred, an orange login button, black round social icons.",
  "type": "Champ Bold, an ultra-heavy wide sans with a looped g, for headings at 120px with tight tracking and leading; Degular for 18px body and pill labels; a purple handwritten script (Hello Organichand) for rotated margin notes and step labels. Three distinct voices.",
  "colour": "#ffd249 #faed8f #f9a21f #ffdbfd #a4f6f8 #fd48f2 — Each section owns one flat candy colour: yellow hero, white shelf, pink steps, cyan unboxing, deep violet footer. Type stays black; buttons are magenta.",
  "imagery": "3D-rendered hardbacks and a patterned shipping box, cut out and tilted, floating over flat wavy vector shapes; real book covers on tilted coloured cards; black line drawings of figures on step cards. Nothing sits square to the grid.",
  "layout": "Sections are full-width panels with roughly 80px corner radius inset about 20px from the viewport, each a different colour. Headings alternate left and centre; cards overlap and rotate a few degrees; handwritten notes are tucked beside headings at an angle.",
  "sections": [
   {
    "role": "showcase",
    "description": "White band. A centred black heading at 5.5vw over a two-line subline, with a rotated handwritten note at its upper left. Below, a horizontal row of book covers, each on a rounded colour-matched card with a small tag pill at top-left; cards tilt alternately by 3 degrees at staggered heights, the last cropped by the right edge, with two round arrow buttons above at right. Later, covers give way to same-coloured info cards with genre pills, heavy title and blurb."
   },
   {
    "role": "how-it-works",
    "description": "A pale-pink rounded panel with lighter wavy shapes inside. Heavy black heading at left with a handwritten aside beside it; a small round logo stamp and a magenta split button at right. Along the bottom, four portrait cards about 250px wide in cyan, magenta, yellow and violet overlap like a fanned hand, each rotated a few degrees, with a handwritten step label at top, a black line drawing in the middle and a heavy caption at the foot."
   },
   {
    "role": "other",
    "description": "A full-viewport cyan rounded panel containing only a 3D shipping box wrapped in a wavy magenta, violet and black pattern, centred. Across the scroll it goes from closed and tilted to lid open, growing to about 57% of the viewport width, with a single handwritten note at its right. No heading and no button."
   },
   {
    "role": "footer",
    "description": "The preceding white section ends in large rounded bottom corners over a deep violet footer. Left: white logo, two store badges, two magenta round social icons. Centre: the patterned box again, cropped by the bottom edge. Right: a small heavy heading, a white rounded email field and a magenta split button. A black legal strip closes the page."
   }
  ],
  "steal": [
   "Give each section one flat saturated colour inside a large-radius inset panel and keep the type black across all of them.",
   "Add rotated handwritten margin notes beside headings to carry secondary facts in a second voice.",
   "Fan step cards so they overlap and tilt instead of sitting in an even grid."
  ],
  "media": "About 60% of the first screen is picture: a 3D book and cropped book corners over a full-bleed illustrated wave field. Below come a sticky image-sequence of a box opening inside a rounded panel, a slider of tilted cards bleeding off the right edge, covers fanned like a hand of cards, a sticker collage round a circular badge and a cut-out box rising out of the footer: 37 images and two scroll-scrubbed canvases, no video.",
  "motion": "An indigo transition panel wipes away by 1.2s while the headline arrives word by word (515 split characters), and Lenis then drives the scrubbed scenes: the hero book turns through an image sequence, a sticky stage scrubs the box opening over 2745px, a headline slides along a curved path at scrub 0.5, and the footer is uncovered from under the rounded page. Buttons squash to 0.955 by 0.925 in 0.15s on press, the main ease is cubic-bezier(0.32,0.72,0,1), and the bounce overshoots are ones the house motion layer does not use, though the site ships 32 reduced-motion rules."
 },
 {
  "id": "opl-rendez-vous-franceclat",
  "name": "Rendez-vous Francéclat",
  "url": "https://rendez-vous.franceclat.fr",
  "source": "One Page Love",
  "kind": "event",
  "score": 7.7,
  "idea": "A hot gradient sliced into three glass panes that double as the column grid for navigation and content.",
  "mood": [
   "radiant",
   "graphic",
   "precise",
   "contemporary"
  ],
  "archetype": "left-statement-quiet",
  "hero": "A full-viewport gradient runs from white at the far left through orange to crimson on the right, sliced into three equal vertical panes that each restart the gradient, like fluted glass. There is no nav bar: mono uppercase links sit as plain stacks (3, 3, 2) at the top-left of each pane, 24px in; an outlined language select top-right. At 37–63% height on the left: a stacked light-caps programme logo, then the event name in heavy lowercase grotesk on two lines, about 7vw, with two mono metadata blocks above aligned to column starts and a sponsor logo below. The right half is empty colour. A black rectangular CTA sits bottom-right.",
  "type": "ABC Diatype throughout: heavy, tightly tracked lowercase for the event name and 68px section heads (-0.03em), medium 22–28px for statements and paragraphs. A monospaced cut in uppercase 14px handles nav, dates and numbered labels. A stacked light-caps logo adds a third voice.",
  "colour": "#f8652b #de194b #ffffff #000000 #fcd9c8 #6f7478 — Orange-to-crimson gradient for hero and footer, fading out to pure white for the informational middle; one desaturated grey photo section. Text black on gradient and white, pale peach in the footer. Warm throughout.",
  "imagery": "The paned gradient is the main image. One full-bleed grey architectural photo with a blurred figure; a pale isometric line drawing of the venue; logos. No product photography visible.",
  "layout": "Built on thirds and a visible column grid: nav stacks, metadata and text blocks all start on column lines, and white sections expose the vertical hairlines. Left-anchored; large empty areas on the right. Gradient, photo and white sections alternate over 20 screens.",
  "sections": [
   {
    "role": "intro",
    "description": "As the hero scrolls, the gradient pales to white at the bottom and a two-line bold 28px statement sits in the right third, aligned to the third pane's edge. Next, a full-bleed grey architectural photo carries two paragraphs of white 22px text across the full width with 16px margins, the second at reduced opacity. The event lockup reappears ghosted at the bottom with mono practical details and a white rectangular CTA."
   },
   {
    "role": "features",
    "description": "White field with the column grid exposed as vertical hairlines. A bold 40px heading resolves from blur at lower-left. Then a pale isometric line drawing of the venue spans the left four columns, a narrow paragraph about 230px wide sits mid-page, and along the bottom numbered items step down column by column: mono index above an underlined mono uppercase link."
   },
   {
    "role": "contact",
    "description": "Footer. The paned gradient returns. A partner name top-left; a two-line bold 36px sign-off in pale peach; a newsletter heading with a white input joined to a black button and a consent checkbox. The right two panes hold small bold link lists under mono labels. A hairline and a mono legal row close it."
   }
  ],
  "steal": [
   "Slice a full-bleed gradient into three vertical panes that each restart the gradient to get a fluted-glass look from colour alone.",
   "Distribute the navigation as plain mono text stacks at the top of each pane instead of a nav bar, so the grid is the header.",
   "Leave the layout grid's vertical hairlines visible in white sections and step numbered items down along the columns."
  ]
 },
 {
  "id": "opl-when-you-wish-upon-a-starboy",
  "name": "starboy",
  "url": "https://lilguy.net/",
  "source": "One Page Love",
  "kind": "physical-product",
  "score": 7.7,
  "idea": "A tiny gadget shown enormous: product renders so large the screen crops them, wrapped around a nursery-rhyme headline in fat lowercase.",
  "mood": [
   "playful",
   "glossy",
   "loud",
   "toy-like",
   "deadpan"
  ],
  "archetype": "split-text-media",
  "hero": "No nav, logo or button. Off-white ground. The right half holds the headline: five stacked lines of very bold rounded lowercase at 13vw (187px), right-aligned and almost touching the right edge, with tight negative tracking and leading under 0.9, so the stack runs from 5% below the top to past the fold and the last line's descenders are cut off. The left 60% is one transparent-shelled, star-shaped device rendered at huge scale (yellow circuit board, round black screen), rotated and cropped by the top, left and bottom edges, its right-hand points tucking behind the letters. A chrome keyring loop peeks in at bottom-right.",
  "type": "Milling Triplex 1mm, bold, for the headline at 187px in lowercase with -0.055em tracking, one or two words per line over eleven lines; the same family at about 13px for body copy, product names and footer links, all lowercase. Two sizes only, a 14:1 jump.",
  "colour": "#f9f9f9 #2a2b2d #f5d900 #8d8e96 #b8a45c #2f6fe0 — Off-white page with charcoal type. Colour lives in the objects: circuit-board yellow, chrome, matte black, brass. A small blue logo in the footer is the only interface colour.",
  "imagery": "Photoreal renders of star-shaped devices in four materials, cut out with no background or cast shadow, scaled well beyond the viewport, each rotated differently and cropped by the edges. Accessories are shown small and centred in grid cells.",
  "layout": "Three acts: three screens of oversized renders tumbling diagonally with the headline set right, then left; one screen holding a single narrow text column and nothing else; then a three-column hairline-divided product grid running edge to edge with no outer margin.",
  "sections": [
   {
    "role": "gallery",
    "description": "The second and third screens are only renders: a matte-black star and a chrome star overlap on a diagonal, each wider than half the viewport and cropped by two edges. The second half of the headline then appears left-aligned at the same 13vw, left of centre, while a brass star fills the right half and bleeds off the top and right. No captions or interface."
   },
   {
    "role": "intro",
    "description": "A single column of 13px lowercase text about 290px wide, placed roughly 15% from the left and starting at the top of the viewport: five short paragraphs, the first in medium weight. The remaining three-quarters of the screen is blank off-white. No heading, image or button accompanies it."
   },
   {
    "role": "showcase",
    "description": "Three equal columns span the full viewport width, separated by faint 1px vertical and horizontal lines. Each cell holds one cut-out render centred with generous air and a caption row along its bottom edge: product name at left, price with stock count or a coming-soon note in grey at right, all 13px lowercase. The footer is one row: small blue logo left, five text links right."
   }
  ],
  "steal": [
   "Scale the product until two or three viewport edges crop it, and let its silhouette tuck behind the headline letters.",
   "Break a sentence into one or two words per line at 13vw, right-aligned for the first half and left-aligned for the second, so the headline spans several screens.",
   "Follow a loud hero with one tiny text column on an otherwise empty screen; the drop in scale does the pacing."
  ]
 },
 {
  "id": "aww-warm-fuzzy",
  "name": "Warm & Fuzzy",
  "url": "https://www.warmnfuzzy.tv/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.7,
  "idea": "A showreel-first studio site in which every section takes one flat, loud colour (blue, black, yellow) under heavy grotesk type and a chunky custom wordmark.",
  "mood": [
   "loud",
   "playful",
   "saturated",
   "confident"
  ],
  "archetype": "video-reel",
  "hero": "The showreel plays full-bleed with a visible film-grain overlay and no scrim. A chunky hand-cut wordmark sits top left, 16px from the edges; the same top line continues with a one-sentence status link, a tiny thumbnail beside the latest project's name, and three caps links at the far right, all white over the footage. A small green caps play label floats at dead centre. The tagline is anchored bottom left, 16px from both edges, in white grotesk caps at 47px (3.3vw) on one line spanning 56% of the width. A tiny square pause control sits bottom right.",
  "type": "SuisseIntl throughout, rendering heavy, tracked -0.027em: a 47px caps tagline, a caps section title at 9.4vw, statement paragraphs around 5vw with tight leading, and 10 to 11px caps captions. The logo is custom chunky lettering with wobbly cut-paper counters.",
  "colour": "#000000 #190bb6 #f7dd47 #ffffff #e9479f #1fc27a — Each section is a flat field: ultramarine blue, black, yellow, then blue again. White type on blue and black, black on yellow; a green play label is the only small accent.",
  "imagery": "Commercial stills and video (candy-coloured CG worlds, product renders, live-action frames) in square-cornered thumbnails of mixed aspect ratios, with a grain layer over the whole page and floating glossy 3D sticker objects.",
  "layout": "Tight 16px outer margins and edge-to-edge type. Sections are told apart by background colour rather than spacing: a blue statement set in the right two-thirds, a black packed work wall, a yellow full-width paragraph, a blue footer.",
  "sections": [
   {
    "role": "work",
    "description": "On black, a tiny caps motto sits top left, then a caps section title at about 9vw flush left with a small underlined link at the far right on its baseline. Beneath, thumbnails pack into an uneven wall: widths vary from one-sixth to one-half of the page, heights differ, gaps are about 8px and rows do not align. Under each image a 10px caps line gives the project name left and the year in grey right."
   },
   {
    "role": "intro",
    "description": "A yellow field filled edge to edge by one paragraph in black heavy grotesk at roughly 5vw with very tight leading, left-aligned at the 16px margin. Several lines contain deliberate word-sized gaps, as if the text flowed around something, and a small tilted image chip floats over the first lines, covering parts of words."
   },
   {
    "role": "footer",
    "description": "A full-screen blue field. A top row of tiny caps, email left and three links right, sits above a hairline. A glossy 3D sticker object hangs near the top centre. The chunky wordmark runs the full page width at the bottom in white, about a fifth of the viewport tall, above a bar of tiny caps links divided by vertical hairlines."
   }
  ],
  "steal": [
   "Give every section one flat saturated background and change it at each section break, keeping type strictly black or white.",
   "Pack work thumbnails at mixed widths and heights with 8px gaps and a two-part micro caption (name left, year right) under each.",
   "End with the wordmark at full page width on a colour field, with all utility links reduced to a tiny caps bar split by vertical hairlines."
  ],
  "media": "A 6s muted showreel covers the whole first screen with the nav and title on it and no scrim. Below: an asymmetric top-aligned mosaic of three tile widths (5, 7 and 12 of 24 columns) reshuffled each row with captions under, small inline thumbnails between words of a large paragraph, clips cut into geometric clip-path shapes, a full-bleed photo band with a marquee across its lower edge, and a glossy 3D cube drifting over text and the footer, all at 0px radius under a grain layer that steps every second.",
  "motion": "A brief ultramarine preloader with a tilted card, then the header and title slide and scale in over 0.5s after a 0.75s delay while the reel carries the motion. Lenis with CSS scroll-driven animations reveals blocks on the scroll timeline, parallaxes figures by 5 to 25svh, translates stacked assets in over 0.75s with a per-item delay and slides a giant sentence left with the scroll, all on one house ease, cubic-bezier(.26,1,.48,1), at 0.5s, with 29 reduced-motion rules."
 },
 {
  "id": "opl-the-sapphic-bar-index",
  "name": "The Sapphic Bar Index",
  "url": "https://sapphicindex.com",
  "source": "One Page Love",
  "kind": "culture",
  "score": 7.7,
  "idea": "A nightlife guide dressed as a mock research dossier: taped snapshots, field notes, sticker stamps and a big numeric score for every bar.",
  "mood": [
   "cheeky",
   "scrapbook",
   "warm",
   "editorial",
   "tongue-in-cheek"
  ],
  "archetype": "split-text-media",
  "hero": "The desktop capture caught the hero before it animated in (only an empty two-cell box and a black bar show); the mobile capture, which is the desktop layout scaled down, reveals it. On cream: a two-cell outlined masthead box top-left, then the title in black ultra-condensed caps on three lines filling the left 45%, with a pink boarding-pass ticket and a round stamp overlapping it at angles. Small text and a black rounded button sit beneath. The right half holds a tall torn-edge photograph of a hand raising a cocktail, taped at the top, tilted about 8 degrees and running off the top edge, a paper-clipped note on its corner.",
  "type": "Three custom faces per the digest: a tall heavy condensed grotesque for the 119px title, a typewriter-style mono (61% of text) for bar names in bold caps, labels and notes, and a small sans for intro copy at 12px. Scores are heavy rounded numerals near 48px.",
  "colour": "#f4efe9 #000000 #f5a3b7 #2f62d6 #f2622a #f2b632 — Cream paper and black ink carry the page. Saturated colour arrives only as sticker badges (pink, orange, yellow, blue, sage) and neon-lit photos, then a pink form card, black about panel and cobalt footer strip.",
  "imagery": "Flash-lit nightlife snapshots with magenta and red neon casts, cropped near-square with torn or deckled edges and a strip of masking tape, each tilted a few degrees; plus die-cut sticker illustrations (stamps, tickets, lips, scissors) with thick outlines.",
  "layout": "Cream page with roughly 6% side margins. After the collage hero, a row of five stickers, then a ruled table where each entry is a four-column row between full-width hairlines. It ends with a coupon-style form, a black rounded about panel and a marquee strip.",
  "sections": [
   {
    "role": "list",
    "description": "Full-width rows separated by 1px rules, each about 210px tall. Column one: a tilted taped snapshot about 150px square. Column two: a small index number, the bar name in bold mono caps, a pin icon with underlined district and a social handle, three lines of small mono description, then one or two small coloured sticker tags. Column three: a bold label over five bullet lines. Column four: a small label above a two-digit score in heavy numerals inside a thin circle."
   },
   {
    "role": "other",
    "description": "A legend row of five die-cut badges spaced evenly across the column directly under the hero, each a different silhouette and colour: pink oval, orange rounded rectangle with notched corners, yellow ticket, blue star, sage triangle. Each has a thick dark outline, a slight rotation and two lines of condensed caps inside. Smaller rectangular versions are reused as category tags in the list rows."
   },
   {
    "role": "contact",
    "description": "Submission form as a clip-out coupon: a pink rounded card inside a thin outlined frame, with a large beige paper cut-out of scissors overlapping the top-left corner. Left half holds a three-line mono caps heading and one line of text; a vertical dashed line divides it from the right half, which has four underline-only inputs with grey placeholders and a full-width black submit bar."
   },
   {
    "role": "about",
    "description": "Black full-width panel with a large top radius. The left third holds a small bold mono label and four short white mono paragraphs with an icon link. The right half shows a selfie photograph with torn paper edges and tape, tilted clockwise, a pink lips sticker overlapping its top-left corner. A cobalt strip beneath repeats a one-line credit across the full width."
   }
  ],
  "steal": [
   "Give every list row a large circled numeric score in its own right-hand column so a directory reads as a ranking.",
   "Present photos as taped, torn-edge snapshots rotated a few degrees, repeating the same tape detail on every image for consistency.",
   "Define a small set of die-cut sticker badges once as a legend, then reuse them in miniature as category tags in the rows."
  ]
 },
 {
  "id": "opl-textmode-overlay",
  "name": "Textmode Overlay",
  "url": "https://extension.textmode.art",
  "source": "One Page Love",
  "kind": "dev-tool",
  "score": 7.7,
  "idea": "The whole site is rendered in the product's medium: one bitmap face and live character-art fields, laid out like a terminal instrument panel with a numbered rail.",
  "mood": [
   "retro-terminal",
   "dark",
   "precise",
   "dense",
   "technical"
  ],
  "archetype": "type-poster",
  "hero": "Black viewport framed like an instrument panel. A 60px top bar with a hairline beneath: wordmark and version left, four small caps links right, a cream block button filling the bar's right end. A narrow right-edge rail lists 01 to 10 vertically; the active number extends leftward as an outlined label tab. The main area is a canvas of dim grey character marks with a few red ones, small caps captions in its top corners. The headline, two lines of cream pixel caps at 11vw, is left-aligned at mid-height, its last word in a slanted variant. Below a hairline, a bottom strip holds a short description left and two wide rectangular buttons.",
  "type": "Monogram Extended, a bitmap face, for 96% of text: 160px headline caps, 24px body, small caps labels, one weight, with a slanted variant for the accent word. Inter appears only in the cookie dialog. Hierarchy comes from size and case alone.",
  "colour": "#0a0a0a #f2f2ec #3b3b3b #b11226 #9a9a95 — Black with cream text and mid-grey glyph texture. Deep crimson appears as scattered characters, soft radial glows behind panels and slider fills. The last two sections invert to cream with black type.",
  "imagery": "Live canvas renderings: a swirling white, grey and red brush-stroke animation shown beside its character-art conversion, plus ambient character fields as backgrounds. Square corners, hairline frames, no photographs.",
  "layout": "Full-width panel grid drawn with 1px lines: 32px margins, a persistent right rail, sections built from bordered cells (three equal columns, a two-by-three spec table beside a wide panel, control strips). Each section starts with a small slash-separated caption and a large caps heading.",
  "sections": [
   {
    "role": "showcase",
    "description": "A wide bordered frame split vertically by a draggable handle: the left half shows the source animation (thick white, grey and crimson swirls on black), the right half the same frame converted to scattered characters, with small outlined tags in the top corners naming each side. Beneath, a control strip of bordered cells offers segmented options (cell size in four steps with the active one filled cream, glyph set, invert, motion), like a hardware panel."
   },
   {
    "role": "how-it-works",
    "description": "Three equal tall columns divided by hairlines inside one outer frame, each about 300px high. A single caps word sits at mid-left of each column in roughly 36px pixel type and two lines of small text sit at the bottom-left. A soft crimson radial glow is centred behind the middle column and fades into the outer two, the only shading in the section."
   },
   {
    "role": "features",
    "description": "Left 40%: a two-by-three table of bordered cells, each with a tiny index number top-left, a caps feature name at mid-left and a small grey quantity bottom-right. Right 60%: one large cell with a two-line caps heading upper-left, a crimson glow in the top-right corner and two lines of description along the bottom. The rail tab at the right edge names the section."
   },
   {
    "role": "cta",
    "description": "The close inverts to cream: a pale character field with a faint red cluster at upper right, a slash-separated caption, then a two-line black pixel-caps headline at about 8vw that echoes the hero and reuses the slanted last word, and one small outlined rectangular button. Footer links follow in three small columns on the same cream ground."
   }
  ],
  "steal": [
   "Add a fixed right-edge rail of section numbers where the active number sprouts a labelled tab into the content area.",
   "Draw the page as bordered cells with 1px lines and put a tiny index top-left and a small quantity bottom-right in each feature cell.",
   "End on an inverted, light-ground repeat of the hero headline so the close mirrors the opening in the opposite palette."
  ]
 },
 {
  "id": "opl-hebbia",
  "name": "Hebbia",
  "url": "https://design.hebbia.com",
  "source": "One Page Love",
  "kind": "studio-portfolio",
  "score": 7.7,
  "idea": "An AI-finance company's in-house design team presents itself as a luxury print house: inscriptional serif capitals on near-black, a ledger-ruled specimen table of its output, and a paper invitation card to recruit.",
  "mood": [
   "opulent",
   "nocturnal",
   "editorial",
   "deadpan",
   "crafted"
  ],
  "archetype": "type-poster",
  "hero": "Near-black viewport, roughly 90% empty. A tiny sans wordmark sits top-centre and one text link top-right; there is no other navigation. The statement is three centred lines of white serif capitals stacked in the middle of the screen: a seven-letter word, a two-letter word, then a long word in italic with a full stop, giving a wide, narrow, wider silhouette about 55% of the viewport across at its widest. Capital height is roughly a tenth of the viewport height with tight leading. Along the bottom edge a full-width framed strip shows the top 60px of a chrome 3D render, announcing the next section.",
  "type": "Edict carries nearly everything: roman capitals for statements, a swash italic with flourished terminals for the second half of the section title, small caps for credits. Selecta, a grotesk, only for the wordmark, nav link and tiny tracked uppercase labels. Body copy is small, centred and sparse.",
  "colour": "#0a0a0a #ffffff #1c1818 #efebe2 #2a35c9 #b0703c — Near-black field with pure white type. Colour arrives only through thumbnails (electric blue, copper, amber sunsets) and one cream paper card; the footer warms to a brown-black.",
  "imagery": "Chrome and copper 3D 'ingot' renders, line-screen and ASCII portraits, dark product-UI crops, warm cinematic photographs and a film-still video. All are small square-cornered tiles floating in ruled cells; only the hero render strip runs full width.",
  "layout": "One centred axis with thin full-width frames a few pixels inside the viewport edge. Sequence: type poster, letterboxed video, centred title ringed by tiny labels, four-column ruled table of tiles, tilted paper card, sparse credits footer. Large empty gaps separate every section.",
  "sections": [
   {
    "role": "intro",
    "description": "Section title set as four centred lines at one size: two in roman capitals, two in swash italic, with a small inline image chip tucked between two words and a red wax-seal-like dot beside the colon. Six tiny tracked uppercase labels sit in a 3x2 arrangement above and below the block at left, centre and right, like plate captions. A two-line sans paragraph is centred well below, after a gap as tall as the title."
   },
   {
    "role": "gallery",
    "description": "A four-column table bounded by hairlines. Each column is headed by a serif label in a cell with a soft coloured glow behind it (grey-blue, neutral, warm, bronze). Under each header runs a vertical stack of one tile per row, centred in its cell with generous padding; tile sizes and aspect ratios vary (portrait, landscape, square) so the grid reads as a specimen sheet. The header row appears to stay pinned while rows scroll beneath it."
   },
   {
    "role": "cta",
    "description": "A cream textured-paper card about 70% of the page width, rotated a degree or two, with a thin inset keyline border. Inside: an underlined serif small-caps heading centred at the top, a group photograph, and a list of names in small caps separated by middots. It sits on the black field like a printed invitation and is cropped by the fold rather than framed whole."
   },
   {
    "role": "footer",
    "description": "A mostly empty warm-black screen: a small folder icon centred at 60% height, three lines of tiny serif caps credit beneath it, and at the very bottom a one-line ticker of small-caps facts separated by dots, with an oversized italic two-word phrase overlapping the ticker's centre."
   }
  ],
  "steal": [
   "Set a three-line statement in serif capitals and italicise only the last word, so emphasis comes from slant rather than colour or weight.",
   "Present mixed work as a ruled table: named columns divided by hairlines, one tile per cell at varying aspect ratios, header row pinned.",
   "Break a dark page with one physical object, a slightly rotated textured-paper card with an inset keyline, and put the call to action on it."
  ]
 },
 {
  "id": "aww-revelatio-studio",
  "name": "Revelatio Studio",
  "url": "https://revelatio.studio/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.6,
  "idea": "The team photograph is the hero: it starts as a small CRT-curved mosaic of typographic glyphs and resolves into a full-bleed group portrait as you scroll.",
  "mood": [
   "dark",
   "restrained",
   "technical",
   "human"
  ],
  "archetype": "bottom-anchored-type",
  "hero": "Pure black viewport. Centred, about 58% of the width and 57% of the height, is a canvas showing a group photo rebuilt from tiny coloured glyphs, its edges barrel-distorted like a CRT tube; it is dim, so black dominates. The headline is modest: two lines at 2.5vw in regular-weight grotesk, flush to the bottom-left corner with a 30px margin. Navigation is split into two small dark-grey rounded rectangles: logo mark plus four links top-left, language switch and contact top-right. Nothing else; roughly 80% of the screen is black.",
  "type": "Neue Haas Grotesk Text 55 Roman is the only face and weight. Headline just 36px with -0.03em tracking against 15px body; hierarchy comes from position and grey value. The footer city list jumps to roughly 5vw; the digest records a 12.5vw maximum.",
  "colour": "#000000 #ffffff #2b2b2b #8a8a8a — Black intro and footer, white work and capabilities sections. The interface has no accent; all colour comes from project thumbnails and the faint tints inside the glyph mosaic.",
  "imagery": "A studio group portrait rendered as a glyph mosaic on canvas, then as a dim near-full-bleed photograph; project tiles are square-cornered brand visuals in saturated flat colours, set on white with caption rows beneath.",
  "layout": "About 30px side margins throughout. Black full-screen opening, then a white work grid mixing one large tile with a narrow companion and a three-up row, a three-column plain-text capabilities list, and a black footer of oversized dim text. Captions sit under images, tags right-aligned.",
  "sections": [
   {
    "role": "intro",
    "description": "Pinned for about two viewports: the hero canvas grows with scroll from a centred 58%-wide mosaic to a near full-bleed image with a thin black margin, while the glyph cells shrink until the picture reads as a dim photograph of about twenty people. The headline scrolls away and only the two nav boxes remain in the top corners."
   },
   {
    "role": "work",
    "description": "White background. First row: one large landscape tile spanning roughly two-thirds of the width beside a narrower tile about one-third wide and half as tall, top-aligned. Second row: three equal tiles. All square-cornered with about 16px gutters. Beneath each: project name at left, two tiny grey tags right-aligned on the same line, then a two-line grey description at about 11px. A small underlined see-all link with an arrow sits below the grid at left."
   },
   {
    "role": "features",
    "description": "White section opened by a hairline and a tiny label. Three text columns, each with a small grey category title and beneath it a tight stack of eight to ten service names in 15px regular grotesk at about 1.2 line-height, with no bullets, icons or cards. Columns share the work grid's left edges, leaving the right third partly empty."
   },
   {
    "role": "footer",
    "description": "Black full-viewport block filled with a run-on, comma-separated list of client cities set at about 5vw in very dark grey, barely visible against black, wrapping over seven flush-left lines. Exactly one city, the last, is lit white, which implies a cycling highlight. The nav boxes stay fixed at the top corners."
   }
  ],
  "steal": [
   "Render a photograph as a grid of small coloured glyphs on canvas and let scroll increase its size and resolution until it becomes the real photo.",
   "Hold the hero headline at 2.5vw in a bottom corner and let a dim central image and empty black carry the scale.",
   "Set a long list in near-invisible dark grey at display size and light one item at a time."
  ],
  "media": "A centred 16:10 canvas covering 60% of the width and height plays the team film as a dot matrix with a curved, tube-like outline, and grows to cover the whole screen over three screens of scroll. Below: an asymmetric two-plus-one then three-up grid of 16:9 work cards (video players scaled to 133% of the card so the letterboxing is cropped), a cursor image trail over a pinned city list, a draggable marquee of result cards, and a slider of cards with staggered image heights bleeding off the right edge; square corners.",
  "motion": "No preloader was seen and the hero is composed at 400ms (load 23s); Lenis then holds two sticky 900px stages, the hero screen scaling from 60% to full bleed over 2700px and one city at a time lighting up over 3600px. The ground flips black, white, black by section with a 0.35s ease on colour across about 11,000 nodes, stat numerals roll like an odometer, and transforms run 0.4s on cubic-bezier(0.625,0.05,0,1) with 0.8s exits on (0.625,0,0.875,0)."
 },
 {
  "id": "aww-haoqi-design",
  "name": "HAOQI.DESIGN",
  "url": "https://haoqi.design",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.6,
  "idea": "A design engineer's page built like an instrumented canvas: visible construction grid with crosshairs, live coordinates and clock, and a glossy 3D greeting that plays with the cursor.",
  "mood": [
   "playful",
   "technical",
   "glossy",
   "confident"
  ],
  "archetype": "bottom-anchored-type",
  "hero": "Deep cobalt field with soft darker diagonal blurs. Faint guide lines divide the screen into three columns and three rows, with small plus marks at intersections. Top row: wordmark left, four mono nav items right. Second row: a two-line role title left, a two-line mono motto centre, a four-line mono bio right. Centre: glossy inflated 3D script reading hello, about 60% of viewport width, with a 3D cursor arrow lower right. The headline, three uppercase lines of wide bold sans at 5.6vw, is flush left in the lower third and tucks under the lettering. Bottom edge: mono time and weather left, cursor coordinates centre, globe icon right.",
  "type": "A wide bold sans (digest name 'tiktok') in uppercase for the 80px headline and closing statement; a regular cut at about 34px for the about text; tronica-mono and a system mono at 12 to 16px for nav, bio, captions and readouts. Three clear sizes; mono does half the talking.",
  "colour": "#0f1111 #07144a #ffffff #2a3fe0 #c6f432 — The hero is a saturated cobalt field with tone-on-tone blue 3D; everything after sits on blue-black with white text. Lime appears only as tiny tags and scramble glyphs; project tiles bring their own colours.",
  "imagery": "Glossy tone-on-tone 3D lettering and cursor in the hero; a square portrait with teal rim light; project thumbnails as square-cornered tiles of UI shots, icon sheets and posters; a neon radial line burst in the footer.",
  "layout": "A fixed frame of hairline columns with crosshair ticks persists behind every section, as do the corner readouts. Content snaps to those columns: about text spans the right two-thirds, work tiles occupy one or two columns at irregular heights with deliberately empty cells.",
  "sections": [
   {
    "role": "about",
    "description": "Blue-black background with the guide grid showing. A square portrait about 12% of viewport width sits at the top of the first column, with a handwritten lime signature scrawled across its top-left corner. Starting at the second column line, a paragraph at about 2.4vw in regular sans runs four lines in white, followed by a second paragraph in mid-grey where only linked product names are white and underlined. No heading or label."
   },
   {
    "role": "work",
    "description": "Tiles snap to the guide grid but vary in span and height: one wide tile covering two columns, then pairs of single-column tiles, with whole cells left empty so rows stagger. Tiles are square-cornered images on black or pastel grounds. Under each, a mono caption row at about 10px: project name left, year and a category with arrow right. Some tiles carry a small lime tag flush to the top-right corner."
   },
   {
    "role": "cta",
    "description": "Full-viewport black panel filled with a radial burst of thin neon lines in cyan, violet and magenta streaking outward from centre like a warp tunnel. Centred on top, a three-line uppercase statement in the wide bold sans at about 5.5vw, white, tightly leaded. The grid lines, nav and corner readouts remain overlaid at the edges."
   }
  ],
  "steal": [
   "Leave the layout grid visible as hairlines with plus marks at intersections and snap every block to it, so the scaffolding becomes the ornament.",
   "Put live readouts (local time, temperature, cursor x and y) in the corners in mono to make a static page feel instrumented.",
   "Render the hero object in the same hue as the background so it reads through gloss and shadow rather than colour contrast."
  ],
  "media": "One fixed Three.js canvas covers 100% of the fold and stays behind the whole page, its scene changing by chapter: blue silk with an inflated 3D word about 60% of the width and a 3D pointer, a near-black ground under the work, a warp-speed tunnel for the manifesto. The pictures are a square portrait with a signature drawn over its corner and about twelve project images in a staggered mosaic of 315, 537 and 870px cards hung from either side of a grid column; no video.",
  "motion": "After a 6.6s load the claim decodes line by line from random lime glyphs into white letters, still unfinished at 4.5s, and the bio types in at 0.23s per character behind a blinking caret. Lenis moves the DOM over the fixed canvas: the pointer moves to a new place per chapter, the signature draws stroke by stroke on cubic-bezier(0.65,0,0.35,1), work cards fade up from a grey placeholder over 0.5s, and the manifesto title holds while its last line swaps; 4 reduced-motion rules."
 },
 {
  "id": "aww-pensatori-irrazionali",
  "name": "Pensatori Irrazionali",
  "url": "https://pensatori-irrazionali.com/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.6,
  "idea": "The client roster becomes the hero object, a 3D sheaf of logo-printed fabric ribbons, and classical Italian ornament (copperplate script, engravings, tricolour) is collided with plain Helvetica.",
  "mood": [
   "flamboyant",
   "confident",
   "ornamental",
   "tactile"
  ],
  "archetype": "other: offset 3d object with bottom-left statement",
  "hero": "Flat pale-grey field (#f5f5f5). A 3D-rendered bundle of woven fabric ribbons, each a different saturated colour and printed with a client logo, streams diagonally from beyond the top-right corner down to about centre-left, covering roughly the right two-thirds and bleeding off the top and right edges. Top-left: a small engraved lion crest with serif wordmark and a green-white-red bar. Top-right: two dark square icon buttons with chamfered corners. Bottom-left, in the lowest fifth: a tiny '+ (Atelier)' label above a three-line grey intro paragraph at about 36px, half the viewport wide. No headline and no call to action; the left third is empty.",
  "type": "Helvetica Now at regular weight does nearly everything, tracking -0.025em, sentence case, from 14px body to 60px menu links. Section titles pair it with huge hairline copperplate script words, and the footer wordmark is a heavy high-contrast serif at about 18vw.",
  "colour": "#f5f5f5 #434343 #292828 #e9e9e9 #e3342a #2bd92b — One pale grey ground throughout with charcoal rather than black text. Saturated colour is confined to the ribbon render and project images, plus a green and red flag underline and one neon-green dot.",
  "imagery": "Hero 3D render of logo-printed textile ribbons; black engraved illustrations (angel, Pegasus, lion) cut out and placed inside headings; dark-grey map silhouettes; square-cornered project stills in a horizontal row.",
  "layout": "Narrow 48px side margins with content hung on a loose two-column split at 50%. Sections alternate between oversized title bands that bleed off both edges and small hairline-ruled tabular lists, with generous blank grey between blocks.",
  "sections": [
   {
    "role": "work",
    "description": "A title band runs edge to edge as one line: a hairline copperplate script word about 250px tall cropped by the left edge, a tiny superscript '(01)', a black engraving of an angel dropped in like an inline glyph, then a grotesk phrase at 90px running off the right edge. Beneath, two columns of client rows: name at about 40px, a tiny grey category label, the client's logo mark, a small arrow, each row closed by a hairline."
   },
   {
    "role": "proof",
    "description": "A grid of five columns by two rows of equal cells with faint 1px borders, each holding one small monochrome client logo, centred. Directly below, a wide empty band works as a map: a dark-grey country silhouette crops in at each side edge, with a two-line place name at 32px bottom-left and another bottom-right, each with tiny coordinates in parentheses underneath."
   },
   {
    "role": "features",
    "description": "The same script-plus-engraving title band, now with a Pegasus and '(02)'. Below, a two-column table headed by tiny 'Number' and 'Service' labels over a hairline: the left column shows a giant hairline script numeral about 200px tall; the right holds a small '+ (Branding)' label, a service name with a neon-green dot, and ruled rows pairing a term at left with a grey descriptor right-aligned."
   },
   {
    "role": "footer",
    "description": "The first word of the name in a heavy high-contrast serif spans the full width and crops at the right edge (about 18vw), with a green underline under its left half and red under its right. Behind and below, the second word in giant pale-grey gradient script overlaps the serif letters. Under that, small columns: menu links at 18px, contact details at 11px, legal links at right."
   }
  ],
  "steal": [
   "Turn the client-logo list into one physical object (logos printed on a rendered bundle of ribbons) so proof becomes the hero image instead of a logo strip.",
   "Build section titles as one edge-to-edge line mixing a hairline script word, an inline engraved illustration and a plain grotesk phrase at similar height.",
   "Keep the page on one pale grey with charcoal text and let colour enter only through imagery and a single flag-coloured underline on the footer wordmark."
  ],
  "media": "A 3D cluster of logo-printed fabric ribbons covers about 60% of the first screen, bleeding off the top and right with the statement docked bottom-left. Below: engravings inserted between the words of a title marquee, hidden 16:9 previews behind a client index, three-up 16:9 tile rows overflowing the right edge as carousels, a single centred 16:9 video with wide ground either side, a staggered two-row collage bleeding off both edges, and map silhouettes cropped at the page edges; 39 images and 9 muted 16:9 videos, never under text.",
  "motion": "About 3-4s of intro after a 13.3s load: an inset crest card where a 2.25s fill keyframe runs, a white flash, the ribbons, then the copy de-blurring. Lenis with no pins: titles run as endless marquees, media rows are carousels, and content fades back in over 0.3s cubic-bezier(0.4,0,0.2,1) after each scroll step; coordinates roll digit by digit over 900ms on a spring-shaped linear() curve (157 WAAPI calls), and the manifesto letters roll up from doubled glyphs."
 },
 {
  "id": "opl-belgrade-architecture",
  "name": "Architecture of Socialist-Era Belgrade",
  "url": "https://belgrade.klmln.com",
  "source": "One Page Love",
  "kind": "culture",
  "score": 7.6,
  "idea": "A two-colour printed guidebook on screen: signal-red type over greyscale concrete, with one modular display face as the only ornament.",
  "mood": [
   "austere",
   "graphic",
   "archival",
   "bold"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed greyscale photograph of brutalist housing towers; pale sky fills the top half, concrete the bottom. The title is set over the sky, flush left at a 32px margin, three lines in a wide modular display face at 102px (7.1vw) in flat red, the longest line reaching 92% of the width, leading so tight that the lines almost touch. Under it, one row at 24px: a red one-line descriptor at left, and two paler-red facts right-aligned (an object count and a date range). Top-right, the word 'Index' with a diagonal arrow. No logo, no button, nothing else. Red and grey only.",
  "type": "IntraNet, a wide modular display face with rounded, notched corners, used only for the title and its footer repeat. Funnel Sans carries the rest: about 50px for the long intro, 40px bold uppercase entry titles, 24px meta, 13px credits. Four sizes, two faces.",
  "colour": "#f53843 #d1d1d1 #c7c7c7 #777777 #f1a7ab — Strictly red and grey: red text on grey photo or grey paper, then pale grey text on a solid red field for the essay and footer. Photographs are desaturated so nothing breaks the pair.",
  "imagery": "Contemporary black-and-white architectural photographs of concrete towers and complexes, frontal or looking up, with big skies and visible grain; full-bleed in the hero, full column width and square-cornered in entries.",
  "layout": "16 to 32px margins, everything flush left. A long red essay block in very large text, then twenty repeated entry blocks on grey: a two-column header split by a vertical red hairline, a meta row, then a wide photo. 81 screens of the same rhythm.",
  "sections": [
   {
    "role": "intro",
    "description": "Immediately under the hero photo a solid red field begins with no gap. The essay runs as one full-width column in pale grey sans at roughly 50px with tight leading, about 50 characters per line, paragraphs separated by one blank line, with no headings, pull-quotes or images for several screens. The photo's bottom edge butts straight against the red."
   },
   {
    "role": "list",
    "description": "Each building entry sits on light grey paper: a thin red rule across the top, then two columns divided by a vertical red hairline at the 50% mark. Left: the building's name in red bold uppercase at 40px over two lines. Right: its dates in pale red at the same size. Below, a small meta row with 'Credits' and 'Address' labels and values in 13px red, then a full-width greyscale photograph."
   },
   {
    "role": "footer",
    "description": "Solid red. At the top, two short 13px notes side by side in pale grey occupy the left 60%, a back-to-top link sits far right, and a third note runs beneath. A tall empty red gap follows. Then the full title is repeated in the display face at hero size but in pale grey, flush left, above a single row of small meta: sources link left, font credits centre, city and year right."
   }
  ],
  "steal": [
   "Limit the page to one saturated colour and one grey, desaturate all photos, and invert the pair (grey on red) for long reading blocks.",
   "Set the title in a distinctive modular display face directly on the sky area of a photo and repeat it in the footer in the inverse colour.",
   "Put facts in the hero as a right-aligned row of paler-tint figures (count, date range) on the same baseline as the subtitle."
  ]
 },
 {
  "id": "aww-tengile-malamala-collection",
  "name": "Tengile Malamala Collection",
  "url": "https://tengilemalamala.com/",
  "source": "Awwwards Site of the Day",
  "kind": "hospitality",
  "score": 7.6,
  "idea": "Let the land and animals carry everything: one staggered hairline-serif headline over aerial footage, then cream pages of olive-green serif text with photographs placed at uneven sizes.",
  "mood": [
   "serene",
   "luxurious",
   "earthy",
   "editorial"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Aerial river footage fills the viewport, slightly darkened. Three small white caps items sit on the top edge: an enquiry link hard left, a stacked three-line wordmark centred, 'menu' hard right. The headline is two words on two lines in thin serif capitals about 8.3vw tall: the first line starts 10% from the left, the second is indented to 40% and ends near 90%, so the pair steps diagonally across the middle third. Below, starting at the 50% line, a three-line serif sentence at about 20px and a small white square-cornered button with a separate arrow square beside it. The lower third is left to the water.",
  "type": "PP Fragment at hairline weight (220): capitals for the 120px headline, sentence case for 28-36px olive statements. Inter at 11-16px for labels, nav and small paragraphs. Three serif sizes, two sans sizes; the serif never goes bold.",
  "colour": "#f5eee9 #5c6e21 #181608 #e3e1d4 #ffffff — Warm cream page with every word, large or small, in one olive green; the footer inverts to a solid olive field with cream text. Photography supplies all other colour.",
  "imagery": "Wildlife and lodge photography, natural and saturated, square corners, no overlays. Mixed aspect ratios placed at different widths and vertical offsets; lodge listings use equal landscape triplets; hero and closing band are full-bleed aerials.",
  "layout": "Narrow 16px outer margins and a twelve-column grid used asymmetrically: label and small paragraph in the left columns, the large statement starting at the midpoint. Sections alternate between loosely scattered image pairs and tidy three-up rows.",
  "sections": [
   {
    "role": "intro",
    "description": "Cream field. A tiny sans caps label top-left. A 28px olive serif paragraph of eight lines occupies only the right half, starting at the midpoint. Far below on the left, a five-line 12px sans paragraph about 180px wide. Images are placed loose: a landscape elephant photo under the right text, a tall leopard portrait lower at the left margin, a wide crop of elephant legs upper right of the next screen. No two share a top edge or width."
   },
   {
    "role": "showcase",
    "description": "A tiny caps label, then an olive serif statement at about 36px running the full width for four lines. Beneath: a sub-label, a 12px paragraph held to a third of the width, then three equal landscape photos with 8px gutters spanning margin to margin, each captioned below in small serif. The same block repeats for a second category; one tile is dimmed with a short caps line laid over it to mark it as not yet open."
   },
   {
    "role": "cta",
    "description": "A full-bleed aerial of an elephant crossing a sandbank with a short serif statement, a small sans paragraph and the white button-plus-arrow pair set in the right half only. It butts directly against a solid olive footer: five columns of small cream links under tiny caps headings in the top third, a large empty green area beneath, and a legal line along the bottom edge."
   }
  ],
  "steal": [
   "Stagger a two-line headline: first line from the left margin, second indented by 30% so the pair steps diagonally across the image.",
   "Set every piece of text in a single brand colour on cream and make the footer that same colour as a solid field.",
   "Split the button into two adjacent squares, label and arrow, with a 4px gap, small and square-cornered, instead of one pill."
  ],
  "media": "A 10s muted aerial montage covers the whole first screen with type set on it and no visible scrim. Below: a split with an image and paragraph in the right half from the centre line, staggered image pairs with uneven heights and offsets, a three-up card row with captions, an inset full-width slider, a constellation of thumbnails round a centred heading, a slow portrait marquee, and a sticky full-bleed landscape with the closing call scrolling over it; 33 images, pictures oversized about 110% in their masks for drift.",
  "motion": "There is no preloader and only the montage cuts after 400ms, but under Lenis content stays hidden until each reveal fires: blocks rise and sharpen from a blur over 1.6s cubic-bezier(0.19,1,0.22,1), others fade with a filter over 1s cubic-bezier(0.165,0.84,0.44,1), pictures drift inside their masks, and the closing landscape holds on a sticky root. The ground steps from cream to sage-beige to olive, and the marquee loops on 120s."
 },
 {
  "id": "aww-boc-studio",
  "name": "Boc.Studio",
  "url": "https://boc.studio/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7.6,
  "idea": "A strip of orange tape: the logo ticker crosses a 3D glass-sphere film as a mid-screen band, then moves to the top edge and becomes the header of a filmstrip work index.",
  "mood": [
   "glossy",
   "bold",
   "organised",
   "playful"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A full-bleed 3D-rendered film: two large frosted-glass spheres with pink and lilac refractions on a dusty rose backdrop, one cropped by the left edge, the other filling most of the right half. The only overlay is a flat orange-red band, 60px tall, spanning the full width exactly at mid-height. Inside it a marquee repeats in black: the wordmark at about 34px, then two tiny two-line captions (what the studio is; coordinates and city), about two and a half repeats across the screen. No navigation, headline or button on desktop; mobile adds a small outlined 'click to enter' pill near the bottom.",
  "type": "PP Mori only, regular weight, -0.02em. The largest text on the site is 28px (2vw): the wordmark and the sidebar words. Captions run 11-12px. The scale is deliberately tiny; images, not type, carry size.",
  "colour": "#181d21 #f04a23 #b48c85 #ffffff #6b7278 — Dark blue-slate page with one hot orange-red used only as a solid bar: the ticker band in the intro, then a 20px header strip. Project imagery supplies all other colour.",
  "imagery": "The intro is a glossy 3D glass render. Work appears as rows of same-height, mixed-width thumbnails (posters, photos, packaging, type specimens) butted with 8px gaps, square corners, the last one cut by the right edge.",
  "layout": "A fixed left sidebar about 190px wide holds the section name and filter; the remaining width is a stack of horizontal filmstrips, one per project, each about 190px tall and separated only by a one-line caption. No section breaks.",
  "sections": [
   {
    "role": "work",
    "description": "Dark slate page. The left 13% is a fixed column: the section name at 28px, under it 'All' in white and 'Filter +' in grey. To the right each project is one horizontal strip of four to six images, all 190px tall at their own widths, 8px apart, the last cut by the right edge. Under each strip one 11px line: project name flush left, a short descriptor at centre, a link flush right. About 45px separates strips, so four projects fit per screen."
   },
   {
    "role": "other",
    "description": "Header strip. After the intro the orange band shrinks to a 20px bar fixed to the top edge: wordmark at the left, an 'info' link with a circled plus a quarter of the way across, and local time plus a one-word status at the far right, all at 10px in black. It is the page's only chrome and the only flat colour that is not an image."
   }
  ],
  "steal": [
   "Run the logo and descriptor as a marquee inside one solid-colour band across the middle of a full-bleed video, then reuse that band as the fixed header.",
   "Show each project as a filmstrip: several images at one fixed height and natural widths in a single row, with a three-part caption line (name left, descriptor centre, link right) beneath.",
   "Cap all type at 28px and let image rows carry the scale; a small fixed filter sidebar removes the need for any heading."
  ],
  "media": "A gate of one full-bleed project key visual (the whole viewport) crossed by a 60px orange marquee band, then one horizontal film strip per project: same-height, mixed-width stills at 189px with 15px gutters, drifting on time-based loops and masked to the content column beside a sticky rail. 406 img elements from duplicated tracks; no video or canvas.",
  "motion": "A flat orange screen for about 4.5s, then the gate; on entry the band thins to a stripe, traces the frame edge and settles as the 38px sticky nav, and the rows fade in over 0.35s cubic-bezier(0.16,1,0.3,1). The movement is time-based rather than scroll-based: each strip is a CSS marquee of a duplicated track at its own speed, from 18s to 123s per loop; 9 reduced-motion rules."
 },
 {
  "id": "aww-gil-huybrecht",
  "name": "Gil Huybrecht",
  "url": "https://gilhuybrecht.com/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.6,
  "idea": "A portfolio as a contact sheet: every project is a numbered run of miniature page screenshots on black, and all text is set at one small size.",
  "mood": [
   "austere",
   "archival",
   "confident",
   "dense"
  ],
  "archetype": "grid-index",
  "hero": "Black field on a seven-column grid with 14px margins. The top band is plain white text at one size, about 16px: name in column one, availability in column two, a services list from column three, a longer awards list from column five, then 'Profile' and 'Email me' at the right. List items are indented one step under their label. Below the lists roughly 300px of black is left empty. At mid-height the thumbnail grid begins: one small website screenshot per column, about 190px wide, each topped by a number at its right corner, with the project name over the first of each run. Two tiny toggle chips sit in the bottom corners.",
  "type": "One neo-grotesk at a single size, about 16px (1.1vw), medium-bold with tight tracking, white on black, for everything: name, lists, labels, numbers, footer. There is no headline; hierarchy comes only from column position and indentation.",
  "colour": "#000000 #fcfcfc #272727 #8a8a8a — Pure black with white text; the only colour is whatever appears inside the screenshot thumbnails. Inactive toggle words drop to mid-grey on a dark grey chip.",
  "imagery": "Miniature full-page captures of the designer's client sites, uncropped at natural aspect ratios, square corners, no frames or shadows, about 190px wide, sitting directly on black.",
  "layout": "Seven equal columns with 14px gutters and margins for the whole page. Thumbnails align to columns but not to rows: each hangs from its own label at its own height, so bottoms are ragged. Projects flow continuously and wrap across rows.",
  "sections": [
   {
    "role": "work",
    "description": "A seven-column field of screenshot thumbnails on black. Each project is a consecutive run of four to six thumbnails; the project name sits above the first, and every thumbnail carries its sequence number right-aligned above it in the same 16px white. Thumbnails keep their real proportions, so a row mixes 100px-tall and 280px-tall items with ragged bottoms and about 90px of black between rows. Runs break mid-row and continue on the next line with no divider."
   },
   {
    "role": "other",
    "description": "View toggles. Two fixed chip pairs sit in the viewport's bottom corners: the left switches between a grid and a gallery view, the right between a normal and a novelty perspective mode. Each pair is a small dark-grey rounded rectangle containing two words, the active one white and the inactive grey, at the same 16px as all other text."
   },
   {
    "role": "footer",
    "description": "After about a screen of empty black, one band of text on the same seven columns: year and privacy link stacked at the left, then two columns of stacked social links, then two single links toward the right edge. Same size and weight as the header, no rule, no logo."
   }
  ],
  "steal": [
   "Set every piece of text on the page at one size and weight and build hierarchy only from column position and a one-step indent under labels.",
   "Show projects as numbered runs of uncropped page screenshots at natural heights on a strict column grid, leaving the bottoms ragged.",
   "Leave a deliberate 300px void between the text header and the first row of work so the lists read as a letterhead."
  ],
  "media": "A contact-sheet wall: one fixed WebGL canvas draws about 84 full-page screenshots of client sites at a single 190px width and their native ratios, every page of each project in reading order. Once scrolled, every screen is about three rows, roughly 48% picture and 52% black, with text under 1% and the labels above each frame, never on it; there is no video.",
  "motion": "The preloader counts at about 13% a second for some 7-8s while the screenshot textures load, although the document loaded in 1.66s; then the first-row thumbnails rise into their slots in random order and a dark veil lifts. Lenis over a 4440px scroll proxy redraws the fixed wall with no pins or reveals; panel and hover moves use transform .75s cubic-bezier(.19,1,.22,1), and pictures fade over 1s ease-out on the phone."
 },
 {
  "id": "opl-city-of-angels",
  "name": "City of Angels",
  "url": "https://cityxofxangels.com",
  "source": "One Page Love",
  "kind": "culture",
  "score": 7.6,
  "idea": "A fixed poster: the book title stays pinned across the viewport while portraits and press quotes swap underneath it, so every scroll step is a new cover.",
  "mood": [
   "bold",
   "sunny",
   "street",
   "editorial",
   "direct"
  ],
  "archetype": "giant-wordmark",
  "hero": "Pale icy-blue page. The title runs as one line of extra-bold uppercase grotesk at 10vw, centred, spanning about 82% of the width in saturated cyan, 120px from the top. A single portrait photograph, 37% of the viewport wide and nearly full height, is centred beneath; the title crosses over its upper quarter, so the middle letters sit on the image. The author name sits top-centre in small bold caps, a two-bar menu icon top-right. Bottom-left, a 13-line bold paragraph in a narrow 340px column; bottom-right, a solid black five-point star about 70px wide.",
  "type": "ABC Diatype throughout: weight 800 uppercase for the 144px title, bold copy around 20-24px with leading near 1.0; Founders Grotesk Mono in tiny caps for quote attributions. Two sizes plus a label. The final frame catches title letters slanting to oblique.",
  "colour": "#e4f8fd #06aeef #0a0a0a #c8b59d — The page colour is a pale tint of the title's cyan; cyan appears only on the title, the opening words and quotation marks. Text and star are black. The digest records one solid cyan section.",
  "imagery": "Full-length street-style portraits, all vertical at about 2:3, saturated natural light, subject standing centre. One image at a time, square corners, centred on the page with the title overprinting it.",
  "layout": "One pinned composition repeated for seven screens: central image column, fixed title, and a single text block that alternates between the left and right gutters and shifts height each step. Margins about 46px; nothing else on screen.",
  "sections": [
   {
    "role": "proof",
    "description": "Each scroll step keeps the pinned title and swaps the central portrait. One press quote sits in a column 180-340px wide in an outer gutter, alternating right, left, right, and placed at a different height each time (upper, middle, lower). Quotes are bold black with tight leading and cyan quotation marks; the source follows in tiny underlined or mono caps. The black star stays bottom-right and is caught at different rotation angles."
   },
   {
    "role": "list",
    "description": "Not captured in the shots, but the digest records four stacked, centred, uppercase links at 144px (10vw) in the same extra-bold grotesk, plus a solid cyan section: navigation reuses the title's exact type size, one link per line, so the menu is another poster rather than a small list."
   }
  ],
  "steal": [
   "Pin one giant title across the viewport and let a single centred image change beneath it, with the type overprinting the photo's top quarter.",
   "Use a pale tint of the accent colour as the page background so the saturated title and the background read as one hue.",
   "Give each scroll step one text block and move it between left and right gutters at varying heights instead of stacking sections."
  ]
 },
 {
  "id": "aww-era-residence",
  "name": "ERA Residence",
  "url": "https://www.era-residence.com/",
  "source": "Awwwards Site of the Day",
  "kind": "real-estate",
  "score": 7.6,
  "idea": "One continuous 3D render of the estate that the scroll flies through, titled like a perfume label with condensed didone capitals and an overlapping script signature.",
  "mood": [
   "luxurious",
   "sunlit",
   "theatrical",
   "Mediterranean"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "The captured first viewport is an intro curtain: a deep aubergine field with a hairline frame inset 22px and chamfered corners. At centre, a two-line title in tall condensed didone caps at about 6vw, with a thin script place-name overlapping its lower edge at an upward angle. On the same line, two wide-letterspaced caps words sit a third of the way in from each side. A ghost script word, barely lighter than the field, spans the full width behind. Flower mark top-centre; a 90px vertical hairline and two lines of tiny extended caps bottom-centre. It opens onto a full-bleed render with the same lockup at 12vw across the sky.",
  "type": "ambroise-francois, a tall condensed didone, in uppercase from 6vw to 12vw with slightly negative tracking; a thin flourished script overlapping it for the place-name; Maison Neue Extended in tiny bold caps for labels and nav. Extreme jump: 170px titles against 9-10px labels.",
  "colour": "#340c24 #1e4fa3 #f3f3ec #b5cedb #58b5c2 #ffffff — Aubergine bookends the page (intro and footer); in between, the render's saturated sky blue is the field and all type is white. The digest also records pale blue and off-white sections.",
  "imagery": "Full-bleed architectural visualisation of white terraced houses, bougainvillea, palms and a pool with staged figures, heavily saturated. Small circular hotspots sit on buildings; a strip of render appears as an inset crop above the footer.",
  "layout": "Stage-like: fixed corner furniture (rotating-text seal top-left, three-line text menu top-right, vertical progress line with a number at the left edge, scroll cue bottom-left) surrounds a centred title while the picture moves for many screens.",
  "sections": [
   {
    "role": "showcase",
    "description": "The scroll pushes the camera forward through the same scene: the title lockup slides up and off the top edge, the terrace row grows, and a turquoise pool with figures enters the foreground, ending with sun loungers cropped by the bottom edge. Thin circular hotspot rings mark buildings. A two-line tiny-caps call to action sits centred near the bottom inside a large hairline circle, about 250px wide on mobile."
   },
   {
    "role": "footer",
    "description": "Back on aubergine. The flower mark is centred, and under it the sales phone number is set as the headline in condensed didone figures at about 9vw, centred. Three lines of tiny extended caps give the address beneath. Legal lines sit lower left of centre and a credit at lower right, all at label size; the fixed seal, text menu and a vertical line with a back-to-top label stay at the edges."
   }
  ],
  "steal": [
   "Overlap a thin script word across the bottom edge of condensed didone capitals, angled upward, like a signature on a label.",
   "Split a tagline into two halves and place them left and right of the centred title on one baseline.",
   "Set the phone number as the footer's headline in the display face instead of a slogan."
  ],
  "media": "A photoreal render of the development covers the whole first screen once an arched window, rising from the preloader, has opened to full bleed. Below, a pinned full-bleed render with a slow drift, a flat-colour arch panel rising over it, cut-out bougainvillea video sprays bleeding off the corners of text screens, a portrait in a horizontal track, a cloud band that parts into an aerial photograph and a staggered two-column mosaic; 27 images and 8 square muted loops, 0px radius.",
  "motion": "The intro runs about 6-7s: an aubergine curtain, an arched window rising at 4.5s and widening, title letters dropping in with a stagger and a script word writing itself. Lenis with sticky pins: the hero holds for 4320px while the render travels from sky to pool, statement paragraphs fill from grey to navy word by word, the location chapter is a pinned horizontal track of about 3400px at scrub 0.25, and colour changes run 0.4s on cubic-bezier(0.25,1,0.5,1); 986 split characters."
 },
 {
  "id": "aww-sharplink",
  "name": "Sharplink",
  "url": "https://www.sharplink.com/",
  "source": "Awwwards Site of the Day",
  "kind": "finance",
  "score": 7.6,
  "idea": "A crypto treasury presented as precision hardware: chrome machined parts and glass capsules rendered in 3D on deep blue, overlaid with dashed machine-vision tracking boxes.",
  "mood": [
   "institutional",
   "engineered",
   "cool",
   "cinematic"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed video of exploded brushed-metal components floating on a navy-to-cobalt gradient, covered by a web of thin white dashed lines and small square tracking markers. Logo top-left on a 2% margin; top-right a segmented strip of five dark rectangular tabs in narrow uppercase plus an arrow square. The headline is top-left, two lines at 6.1vw in regular weight with -0.03em tracking, starting 18% down. Under it two stacked rectangular buttons: white with a blue arrow square attached, then a translucent dark one. Bottom row: a stock-exchange badge at left, a three-line lead paragraph at about 1.3vw starting 26% across, and bottom-right a translucent dark news card about 30% wide.",
  "type": "Archivo regular for headlines (88px in the hero, about 3vw in sections) and 16px body; Archivo Narrow in bold uppercase with wide tracking for nav, buttons and tiny labels. Headlines never go bold: hierarchy comes from size and from fading inactive items to grey.",
  "colour": "#050c17 #0e3f97 #e6edf7 #a7a8ab #1f6bff #ffffff — One blue family from near-black navy through cobalt to icy white; sections are vertical blue gradients, light or dark. Bright blue appears only as tiny square markers and arrow buttons; chrome grey from the renders.",
  "imagery": "Chrome and glass 3D objects (exploded device parts, a spike-tipped capsule holding icons) lit coolly, often with dashed annotation lines or shown as dotted wireframes; full-bleed in the hero, floating free at the right in later sections.",
  "layout": "2% margins and square corners everywhere. Sections are full-viewport gradient fields with a headline at left and a 3D object or data card at right; lists run as label, title and paragraph in two columns. Tiny blue square bullets mark section starts.",
  "sections": [
   {
    "role": "stats",
    "description": "Light icy-gradient section. A two-line headline in grey-blue at about 3vw at the left, with a small paragraph far below it at bottom-left. Centre: a tall 3:4 card with a navy-to-cobalt vertical gradient, a tiny uppercase label, a rising line chart over a faint dotted grid, and a full-width dark button at its base. Right third: three faint, nearly transparent rows, each with a small numbered tag, one line of text and a ghosted line drawing."
   },
   {
    "role": "features",
    "description": "Pinned list beside a 3D object. Left 60%: stacked rows, each with a tiny uppercase label, a two-line title at about 1.3vw in a first column and a short paragraph in a second column starting 26% across. Only the active row is at full contrast; the rest are dimmed to roughly 40%. Right 40%: a chrome-and-glass capsule about 80% of the viewport tall whose interior icon changes per row. The ground shifts from icy white to deep cobalt partway through."
   },
   {
    "role": "cta",
    "description": "A black panel inset by 2% on a navy ground with small blue square markers at its corners. Logo mark top-left; a two-line statement at about 2vw at the left, first line white and second line grey; two rectangular buttons below. A dotted wireframe version of the capsule fills the right half. Under the panel, a tiny uppercase label at left and a small button at right."
   },
   {
    "role": "footer",
    "description": "Cobalt gradient footer: a newsletter line with an underlined email field at left, three small link columns across the middle and right, exchange badge and legal microtext below. The wordmark closes the page in letters spanning the full width, cropped by the bottom edge and fading from white at the top to transparent."
   }
  ],
  "steal": [
   "Overlay a 3D render with thin dashed lines and tiny square markers linking its parts, as if a vision system were tracking the object.",
   "Build buttons as square-cornered rectangles with a separate coloured arrow square attached to the right edge.",
   "In a pinned list beside a 3D object, dim every row except the active one and change what sits inside the object for each row."
  ],
  "media": "A full-bleed 12s loop of 3D chrome and glass objects covers the whole fold, with text docked in the four corners straight on it. Below: a 3D capsule pinned in the right third while a list of claims scrolls on the left, its inner emblem swapping per row, a dark card sliding over it that turns the covered part into a dashed wireframe, a sticky portrait video of chrome pipes at the right edge, and a full-width wordmark canvas cropped by the bottom of the viewport; square corners throughout.",
  "motion": "The hero is composed at 400ms with the video playing and no preloader (load 21.3s), and Lenis runs four pins over fixed layers: one fixed gradient layer behind everything crossfades the grounds, the capsule stays pinned across three sections as each claim brightens from about 40% to full, and the manifesto fills character by character (423 split characters). The workhorse ease is cubic-bezier(.455,.03,.515,.955), on 57 observed opacity, background and colour transitions at .25-.3s."
 },
 {
  "id": "aww-leo-parpeix-portfolio-2026",
  "name": "Léo Parpeix - Portfolio 2026",
  "url": "https://leoparpeix.com/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.6,
  "idea": "A soft clay-rendered 3D world, a smiling flower in a sunlit gallery and a bee you can feed, carries the designer's personality while the type stays blunt and heavy.",
  "mood": [
   "playful",
   "soft",
   "confident",
   "warm",
   "tactile"
  ],
  "archetype": "immersive-webgl",
  "hero": "Opens on an empty off-white field with one object: a nearly square card about 28% of the viewport wide, centred, with rounded corners and tilted in 3D perspective, showing a grainy beige render of a smiling clay flower in front of a gridded window. There is no text at all. The card then scales up and flattens into a full-bleed 3D gallery room (flower on a plinth, pale wood floor, sky through tall windows) with a one-line 14px nav laid over it: name far left, role about one-eighth across, three links and a dots menu far right.",
  "type": "One family (digest name 'text') does everything: 14px regular for nav, captions and metadata, about 24px for intro sentences, and a bold geometric uppercase at 6 to 11vw with leading near 0.9 for centred three-line statements. Almost nothing sits between caption size and display size.",
  "colour": "#f7f7f7 #0d2a1c #e3d9ca #babeb7 #f6e016 #000000 — Off-white ground with display type in a near-black bottle green rather than black. The 3D scenes are beige and sky blue; the bee's yellow is the only saturated note; one later section turns fully yellow.",
  "imagery": "Custom clay-like 3D renders with film grain (flower, plinths, bee) and case-study mock-ups of laptops shot on stone or steel. Project images are square-cornered and laid edge to edge in a horizontal strip, with neighbours cut off by the viewport.",
  "layout": "Alternates full-bleed 3D, centred giant type on blank off-white, and an editorial block where intro text starts past the midpoint and the left half stays empty. The project strip bleeds off both edges; metadata sits beneath in widely spaced small columns.",
  "sections": [
   {
    "role": "intro",
    "description": "Blank off-white screen with three centred lines of bold uppercase in bottle green, each about 6vw tall with tight leading, the block about 60% of the viewport wide. A small glossy 3D bee hovers over the first line, overlapping the letters, with a soft grey shadow blob cast onto the second line. A tiny parenthesised instruction at 10px sits centred under the block. Nothing else on screen."
   },
   {
    "role": "about",
    "description": "Text begins around 55% across: a three-line sentence at about 24px, then two short paragraphs at 14px indented further right, with an asterisk hanging alone in the margin to their left. A white square card carrying a stacked two-line logo sits at the far right, top-aligned with the sentence. The whole left half of the screen stays empty."
   },
   {
    "role": "work",
    "description": "Under a small sentence-case label, a horizontal strip of images spans the full viewport: one wide central image, about 73% of the width, flanked by narrow slivers of the previous and next slides cropped by the edges, with 10px gaps. Below, one row of 12 to 14px metadata: index number and client far left, year at centre, team and roles in a right-hand column, and an underlined project link lower left."
   },
   {
    "role": "footer",
    "description": "Full-screen off-white closing. Three centred lines of the same bold uppercase green type at about 11vw fill three-quarters of the width, with the bee and its detached shadow floating above the first line. A single line of tiny text runs along the bottom edge: credits left, three contact links separated by bullets at centre, copyright right."
   }
  ],
  "steal": [
   "Start with one small tilted card on an empty page and scale it into the full-bleed hero scene, so loader and hero are the same object.",
   "Set display type in a near-black green instead of black; it still reads as ink but ties the type to the imagery.",
   "Let a small 3D mascot overlap giant flat type and cast a soft shadow onto it to give a purely typographic screen depth."
  ],
  "media": "The hero is a real-time 3D interior seen through a rounded rhombus mask that starts as a 165px tip at the bottom of a blank fold and grows to cover the whole viewport by about 900px of scroll. Below: full-width project slider strips with neighbours peeking at both edges, a full-bleed 3D room as an interlude under a statement, a small 47s reel beside a left-aligned intro, and an archive index with hover previews; two fixed WebGL canvases, square-cornered frames, laptops staged on stone and steel.",
  "motion": "A blank screen, then a 14px loader line from 1.2s past 4.5s, ending on an empty fold with only the rhombus tip. Lenis with canvas-driven pinning: the rhombus grows and turns to full bleed over about 900-1800px, the 3D interlude holds over a 2616px runway while its statement lines brighten from about 20% to 100%, and display words swap between two three-line sets; the house ease is cubic-bezier(.16,1,.1,1), 43 uses, mostly at .75s and 1s."
 },
 {
  "id": "opl-anidachi",
  "name": "Anidachi",
  "url": "https://anidachi.com",
  "source": "One Page Love",
  "kind": "physical-product",
  "score": 7.6,
  "idea": "A toy brand built from one custom modular wordmark and one 3D device, both of which change colour with each full-bleed candy-coloured section.",
  "mood": [
   "toy-like",
   "saturated",
   "cheerful",
   "retro-digital",
   "bold"
  ],
  "archetype": "giant-wordmark",
  "hero": "A saturated sky-blue field covering the top 92% of the viewport. The custom modular wordmark is repeated in four stacked rows, each spanning the full width inside 30px margins, drawn tone-on-tone in a slightly lighter blue that brightens row by row toward the bottom, so the name works as wallpaper. A tiny white pixel-cat mark sits top-left; a white rounded button with blue text top-right. A 3D flower-shaped toy device hangs on a carabiner from the top edge at centre, barely entered on desktop and fully visible on mobile, where it covers the pattern. A pale ice section starts at the bottom edge.",
  "type": "AnidachiDisplay is custom modular lettering: monoline rounded strokes on a square grid, unicase forms, used at 7-10vw. Body and UI in Ease, a soft rounded geometric sans, at 20px. Text is always coloured to its section, never black.",
  "colour": "#24c0fe #eff9fb #b6c814 #ff6b2b #ffffff #000000 — Each section is one flat saturated field (sky blue, ice, chartreuse, orange) with type in a single contrasting tint of the same family or white. The 3D device is recoloured to match its section.",
  "imagery": "A glossy flower-shaped handheld with cream buttons and a small black screen showing pixel-art animal characters, hung from a metal clasp. Pixel sprites also appear loose on the page and as a giant low-contrast watermark.",
  "layout": "Full-bleed colour sections of one to two screens with 30px margins. Each holds one giant display phrase at an edge, one small text block, and the 3D device crossing section boundaries. Alignment shifts section to section: centred, left column, bottom-left.",
  "sections": [
   {
    "role": "intro",
    "description": "Pale ice section. Centred: the small mascot mark and wordmark in sky blue at about 9vw, followed by a two-line statement in the rounded sans at 7vw in the same blue. Below, a left column 370px wide holds a three-line 24px lead and small paragraphs, all blue on ice; a pixel-art cat sprite stands in the right half, and a pill-outlined email field with a round arrow button ends the block."
   },
   {
    "role": "showcase",
    "description": "Chartreuse full-bleed section. A title in the modular display face runs edge to edge in white at about 10vw across the top. The 3D device, recoloured olive to match, hangs from its clasp at left-centre and overlaps a diagonal ribbon of translucent rounded-square tiles, each holding a tinted character, running from lower-left to upper-right and off the edge."
   },
   {
    "role": "features",
    "description": "Solid orange section, almost empty. A three-line 14px white paragraph sits near the top, right of centre; the bottom-left holds a two-line hyphenated phrase in the display face at roughly 9vw, white, hugging the left margin and the bottom edge. The lower edge of the device intrudes from the section above."
   },
   {
    "role": "footer",
    "description": "Ice ground with an enormous pixel-art face in a barely darker green tint as a watermark filling the frame. Lime wordmark lower-left at about 300px wide, three stacked lime links at centre, one link at right, tiny copyright beneath the logo."
   }
  ],
  "steal": [
   "Repeat the wordmark as tone-on-tone rows filling the hero, stepping the tint row by row, so the brand name is the background pattern.",
   "Give every section one saturated colour, set all its text in a single contrasting tint, and recolour the 3D product to match.",
   "Anchor a giant two-line display phrase to the bottom-left corner of an otherwise empty colour field, with one small paragraph far away at the top."
  ]
 },
 {
  "id": "aww-butter",
  "name": "Butter",
  "url": "https://www.butter.video/",
  "source": "Awwwards Site of the Day",
  "kind": "saas",
  "score": 7.6,
  "idea": "A video editor presented as a bunch of collectable objects: 3D keychain charms in the hero and squircle effect tiles that behave like app icons everywhere else.",
  "mood": [
   "playful",
   "glossy",
   "confident",
   "minimal",
   "tactile"
  ],
  "archetype": "other: hanging-object-above-centred-statement",
  "hero": "Soft grey vertical gradient, darker at the top, fading to near-white. Two floating light-grey rounded capsules form the nav: the left holds the script logo, five links and a kebab; the right holds Login and a black button. A 3D bunch of keychain charms (orange carabiner, black letter keycap, chrome ring, magenta disc, steel key, green script tag) hangs from the top edge at centre, overlapping the nav and stopping just above the headline. The headline is one centred line at 7.5vw in regular-weight grotesk spanning 75% of the width, with a 24px sub-line and a black rounded-rectangle button beneath. The bottom 35% is empty.",
  "type": "DieGrotesk regular at 107px for the one-line headline, near-zero tracking, mixed case; the same face at 24px and 16px below, so a 4.5x then 1.5x step. ABC Diatype for tiny labels inside product panels. The logo is brush-script lettering used as an image.",
  "colour": "#e8e8e8 #f5f5f5 #1e1e1e #0a0909 #ff3fd8 #19e319 — Grey-to-white ground with black type and black product panels. Saturated colour (magenta, green, orange, holographic pastels) appears only on 3D objects, effect tiles and the footer wordmark.",
  "imagery": "Live 3D charms with chrome and plastic materials; black editor UI panels with 24px radius; many small squircle video tiles showing halftone, glitch and type-poster effects; a full-width extruded script wordmark.",
  "layout": "96px side margins for the nav capsules, a centred content column and very large vertical gaps between blocks. Light grey throughout, with black product panels sliding in from below; ends on a full-bleed wordmark.",
  "sections": [
   {
    "role": "intro",
    "description": "A single row of seven client logos in black spans the full width, then a long gap, then a centred three-line statement at about 32px, roughly 580px wide, with five small squircle thumbnails (app-icon sized, each a different texture or brand tile) set inline between words like emoji. Words resolve from blurred pale grey to sharp black with scroll, so the last line is still soft and tinted."
   },
   {
    "role": "showcase",
    "description": "A black rounded panel about 690px wide slides up from below: a timeline with timecode, ruler ticks and a track of squircle clips, each clip a vivid texture (halftone horse, glitch stripes, red type poster). One clip is lifted out of the track, enlarged and rotated a few degrees, overlapping the panel's top edge. A second black panel shows a labelled library grid of the same tiles."
   },
   {
    "role": "footer",
    "description": "Text link columns sit at the top; below them the script wordmark is blown up to the full width and cropped by the bottom edge, drawn in solid black with a thick extruded underside in a holographic pink, blue and cyan gradient and a registered mark at its top right."
   }
  ],
  "steal": [
   "Hang a cluster of 3D branded charms from the top edge so it overlaps the nav and points down at a one-line headline.",
   "Set small squircle thumbnails inline between the words of a statement and resolve the words from blurred to sharp on scroll.",
   "End on the script wordmark at full width with a holographic extruded underside, cropped by the bottom edge."
  ],
  "media": "A 3D keyring about 380x340 hangs from the top edge over the centred headline, about 15% of the fold. After that video is the main medium, 45 muted looping product recordings and client clips in 32px-radius frames: 641px splits alternating sides, a dark app window that pans in from the right in a pinned section, stacked videos swapped by a tab list, and a rail of 9:16 clips bleeding off both edges; no video in the hero.",
  "motion": "About 2-2.5s of empty grey before the nav, keyring and headline arrive, the headline split into characters that fade and rise. Lenis; one 1800px pinned section slides the statement off left while the app window grows to nearly full width; word spans rise over 0.8s cubic-bezier(0,0,0,1) on 100 elements, four cards stagger in at 0.2-0.5s delays, and the ground steps from #fafafa to #ededed over 1s."
 },
 {
  "id": "aww-lxl-creative",
  "name": "LxL Creative",
  "url": "https://www.lxlcreative.co.uk/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.6,
  "idea": "A film-marketing studio's identity as two hands at once: blunt cream grotesque type and an orange looping handwritten monogram that physically overlaps the photography.",
  "mood": [
   "warm",
   "cinematic",
   "bold",
   "stylish",
   "confident"
  ],
  "archetype": "split-text-media",
  "hero": "Espresso-brown field. A tall portrait photo with 12px rounded corners fills the left 47% of the viewport, 20px in from the top, left and bottom. Five cream nav links sit top-right; no logo. In the right half, vertically centred, a small three-line lock-up: two lines of heavy extended caps at about 28px with an orange script line overlapping the gap between them, all centre-aligned. Along the bottom runs the wordmark: an orange handwritten monogram about 300px tall whose loops climb over the photo's lower-right corner, followed by the studio word in cream lowercase grotesque at roughly 12vw, ending flush with the right margin, baseline about 40px above the bottom edge.",
  "type": "Owners Wide, heavy and uppercase with leading near 1.0, for statements; Scribo script in orange laid over the caps as an accent line or single word; Manrope 17px for nav and body. The wordmark is a plain lowercase grotesque. Three distinct voices and a large size jump.",
  "colour": "#27201d #fdf3c4 #ff4a1c #36302d #d2e1eb #055dff — Warm espresso brown with cream type and one vivid orange-red for script, squiggles and buttons. The digest also records a pale blue and a cobalt section that the captures do not show.",
  "imagery": "Film stills, key-art posters and behind-the-scenes footage with a cinematic grade, held in frames with 12-16px rounded corners: portrait crops for stills and posters, 16:9 for video that scales to full-bleed under a dark scrim.",
  "layout": "Margins of 20px. Asymmetric splits alternate with centred statements over video. Each section holds one media object and one short text lock-up, and a thick orange hand-drawn line snakes between sections as a connector. A small logo top-left and nav top-right persist.",
  "sections": [
   {
    "role": "intro",
    "description": "A 16:9 behind-the-scenes video begins as an inset rounded card about 87% of the viewport wide, centred, then expands to full-bleed. A brown scrim fades over it and a centred eight-line statement in heavy extended caps at about 3.3vw, cream, scrolls up across it, with one word replaced by orange script set at a slight upward angle. A tiny sound toggle sits bottom-centre."
   },
   {
    "role": "features",
    "description": "Two columns on brown. Left: a centred lock-up with an orange script word overlapping the top-left of an extended caps heading, four short lines of small centred copy and a small orange rounded button. Right: a portrait poster card about 15% of viewport width with rounded corners, a caps label and arrow along its bottom edge and more cards peeking out beneath. A thick orange squiggle emerges from behind the card and exits the right edge."
   },
   {
    "role": "cta",
    "description": "A small rounded video thumbnail with an orange play button is centred above a four-line question in extended caps, one word swapped for orange script, with an orange button beneath. The squiggle sweeps in from the left edge and loops down through the bottom of the page. The footer is only a copyright line bottom-left and two small social icons bottom-right."
   }
  ],
  "steal": [
   "Lay a handwritten script line in the accent colour across two lines of heavy extended caps so the lock-up reads as print with a signature over it.",
   "Seat the oversized logo at the bottom of the hero and let part of it overlap the photo's corner, tying the image half and the text half together.",
   "Run one thick hand-drawn line in the accent colour behind cards and across section boundaries as the page's only connective ornament."
  ],
  "media": "One inset portrait photograph covers 47% of the width and 96% of the height, and the wordmark bridges both halves along the bottom, so media and mark fill about 60% of the fold. Below, a 48s showreel grows from a 549x366 inset to full bleed and then sits darkened behind the manifesto, a sticky card deck runs beside a fixed text column, a full-bleed sticky still holds behind the featured projects, and a 2x2 film contact sheet cycles in place; 12px corners on cards and frames.",
  "motion": "The hero is settled at 400ms with no entrance, and Lenis runs 25 ScrollTriggers over CSS sticky stages: the video frame's width, height, position and radius scrub to full bleed, the card deck scrubs at 0.5 with each card leaving on rotation, scale and y with power4.in, nav colour flips per section over 1s, and the footer line draws on at 'top 90%'. The house curve is cubic-bezier(0.65,0,0,1), hand-drawn marks boil on 0.3s steps, and there are 11 reduced-motion rules."
 },
 {
  "id": "opl-screentune",
  "name": "ScreenTune",
  "url": "https://screentune.app",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.6,
  "idea": "The page records itself: on scroll the cream hero shrinks into a screenshot inside the app's dark editor, so the site becomes the demo material.",
  "mood": [
   "warm",
   "polished",
   "calm",
   "premium"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Warm cream page with a faint peach wash. The nav is a compact centred cluster: app icon, name and three links within about 320px. The headline sits high, two centred lines in a light-weight display sans at 4.9vw spanning 42% of the width, tightly leaded. One grey line of subtext, a near-black 225px button with 10px radius, an Apple glyph and soft shadow, then a small grey note. From 52% down, a charcoal panel 940px wide with 24px top corners rises and is cropped by the fold; inside, the app's editor shows a captured notes window on a metallic backdrop and a settings sidebar. An amber glow warms its lower corners.",
  "type": "Stack Sans Headline at weight 300 for headings (70px, tracking -0.022em); Stack Sans Text for body at 16-20px in grey. Light weight at large size is the signature; section headings are set two-tone, grey then white. About four sizes.",
  "colour": "#f6f0eb #0a0a0a #1b1b1a #fcfcfb #b9794a #9cc3ea — Warm cream opening, a long near-black middle and a near-white close. The accent is light rather than hue: amber and steel-blue flare streaks glowing at panel edges.",
  "imagery": "The app's editor shown large in dark rounded panels, containing screenshots on brushed-metal and sky-blue backdrops; later, device mockups on swirling chrome wallpapers in rounded tiles. Glows and streaks of light bleed from panel corners.",
  "layout": "Centred column of about 940px. Three colour acts: cream hero, black pinned product sequence followed by wide feature panels that split text left and interface right, then a near-white section of three image-topped columns. A floating pill nav appears after the hero.",
  "sections": [
   {
    "role": "showcase",
    "description": "Pinned transition: the page turns black and the entire cream hero, headline, button and panel included, is reduced to a rounded thumbnail about 245px wide glowing at centre. In the next frame that thumbnail is the captured image inside the app's editor window, now on a sky-blue padded backdrop with the settings sidebar beside it and a timeline below, under a centred two-tone heading whose first half is grey and second half white."
   },
   {
    "role": "features",
    "description": "Stacked dark panels at full column width, about 270px tall with 16px radius, charcoal with a diagonal light streak and an amber flare at one corner. Left third: a tiny label, a two-line light-weight heading near 28px and one line of text. Right two-thirds: an inset darker pane showing a plain checklist being marked up by a cursor, with a floating toolbar pill of small icons along its bottom edge."
   },
   {
    "role": "features",
    "description": "On near-white, a centred heading and two grey lines, then three equal columns. Each column has a 4:3 rounded tile with a device mockup (laptop, browser window, phone) floating on a swirling chrome or dark-teal abstract wallpaper; beneath it, a tiny grey category label, a two-line 20px heading and two lines of grey text, all left-aligned to the tile edge."
   }
  ],
  "steal": [
   "Use the page's own hero as the sample content in the product demo: scale the first viewport down on scroll until it lands as an image inside the app interface.",
   "Set large headlines in a light weight with tight leading, and colour the first half of a two-part heading grey and the second half white.",
   "Replace colour accents with light: a flare streak and warm glow at the corner of otherwise flat dark panels."
  ]
 },
 {
  "id": "opl-adam-ho",
  "name": "Adam Ho, I.S.P.",
  "url": "https://www.adamho.com/",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.6,
  "idea": "A portfolio treated as a self-shuffling information system: fifty oversized coloured index numbers are scattered across the layout on each load, on top of a rigorously labelled archive.",
  "mood": [
   "chaotic",
   "systematic",
   "colourful",
   "experimental"
  ],
  "archetype": "collage-scatter",
  "hero": "White page, 8px margins. A layer of about fifty numerals at 86px (6vw) in a grotesk, each a different colour or a faint grey, is spread over the whole viewport in a rough six-column grid, overlapping everything. Beneath it: top-left a dot, the name and a three-line serif descriptor at 12px; a 200px column of small notes; top-right, filling 45% of the width, the project list set as vertical lines of text rotated 90 degrees, each tag highlighted in a marker colour under a row of coloured dots. From 36% height a hairline starts the first project: tiny labels, then square image tiles running to the right edge.",
  "type": "ABC Oracle Plus for names, notes and the 86px numerals; AS Thermal, a dot-matrix receipt face, in uppercase for descriptions and metadata; Herbik serif for small headings. Body sizes are 10 to 13px, so the only large type is the number overlay and the about paragraph.",
  "colour": "#fefefe #161616 #f5320b #ffee00 #1e8fff #ff8fd0 — White ground with black text; colour is applied as data: highlighter backgrounds on tags, a coloured dot per project, rainbow numerals. One flat orange-red block the full width closes the page.",
  "imagery": "Brand identity artefacts (logos, badges on lanyards, type specimens, posters) as square or portrait tiles with square corners, butted nearly edge to edge in a row; photography, flat graphics and line drawings mixed.",
  "layout": "Each project is a full-width band opened by a hairline and a row of tiny labels, with a narrow text column at left and three or four image tiles of equal height to the right. Bands repeat for twelve screens; an about paragraph in large grey type breaks them.",
  "sections": [
   {
    "role": "work",
    "description": "Top-right block about 650px wide. Thirty-odd project names with their discipline tags are set as single lines rotated 90 degrees to read top to bottom, packed side by side like book spines. Each tag has its own highlighter-colour background (yellow, green, pink, lilac, red), and a row of matching 12px dots runs along the top, one per line. It is a complete index in the footprint of a banner."
   },
   {
    "role": "work",
    "description": "A hairline, then a label row: an input code and a category in tiny grey bold at left, the year at far right in dot-matrix type. Next line: a coloured dot, the client name in serif, its tags on a highlighter background, and a one-sentence description starting at a second column. Below, tiles of equal height: a narrow column of dot-matrix text under a small serif numbered heading, then two or three large image squares reaching the right edge."
   },
   {
    "role": "about",
    "description": "Two justified columns of grey grotesk text at about 30px with tight leading fill the full width, far larger than anything else on the page. The name at the start is black; six or seven individual words carry pastel highlighter backgrounds in green, pink, lilac and blue, and the final short sentence is fully highlighted in bright blue like a selected link."
   },
   {
    "role": "footer",
    "description": "A solid orange-red rectangle spans the full width, about 300px tall, with the header's name and dot row printed over it in darker tones. Below on white, two short stacks of links in grey 28px grotesk under 9px labels, flush left, with most of the width left empty; a small pixel-art status widget with a blue progress bar stays pinned bottom-right."
   }
  ],
  "steal": [
   "Set an index as vertical lines of rotated text packed like book spines, each with a highlighter-colour tag, to fit thirty items into a banner-sized block.",
   "Use highlighter backgrounds on single words inside a large grey paragraph as the only emphasis.",
   "Open every project with the same tiny label row (code, category, year) above a hairline so a dense archive stays scannable."
  ]
 },
 {
  "id": "opl-postaway",
  "name": "Postaway",
  "url": "https://www.postaway.space",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.6,
  "idea": "A spilled pile of real vintage postcards and stamps under a huge monospaced wordmark explains the product before any copy does.",
  "mood": [
   "nostalgic",
   "warm",
   "graphic",
   "tactile",
   "simple"
  ],
  "archetype": "collage-scatter",
  "hero": "Warm off-white fills the top 82% of the viewport; a flat orange band crosses the bottom 18%. The wordmark, orange uppercase monospace at ~19vw, spans margin to margin with its top edge at 18% height. About seven postcards and six postage stamps, each rotated 5 to 20 degrees with soft drop shadows, tumble across the lower two thirds: some slide behind the letters, others overlap them, and three cards straddle the off-white/orange seam. A small orange post-horn logo sits top-left; two orange mono links and an outlined pill language select sit top-right. No headline copy or button appears in the first viewport.",
  "type": "Fragment Mono only: the wordmark at 280px, weight 600, -0.01em tracking, then a centred two-line heading near 20px and 13px body in the same monospace. A fifteen-fold jump from wordmark to copy with nothing in between.",
  "colour": "#ece7e1 #ff4800 #ffffff #f5d800 #3d6ea8 — Orange on off-white up top, white on orange below; the page flips at a hard horizontal seam. Every other colour comes from the postcards and stamps themselves.",
  "imagery": "Scanned vintage postcards and postage stamps as cut-outs with paper edges and perforations intact, rotated, overlapping, with soft shadows; a mix of black-and-white, hand-tinted and saturated mid-century print.",
  "layout": "Two stacked panels only (1.6 screens). Panel one is a free collage under a full-width wordmark; panel two is a centred text stack about 480px wide on orange: heading, explainer, pill button, legal line, badge. No grid, no cards.",
  "sections": [
   {
    "role": "cta",
    "description": "An orange full-width panel continues the hero's bottom band, with the last postcards hanging over its top edge. A centred stack roughly 480px wide holds a two-line white mono heading near 20px, a two-line explanation at ~13px, a white pill button with an orange label, then a one-line legal row in tiny bold caps and a small dark badge. A faint lighter-orange diagonal gradient sweeps one corner."
   }
  ],
  "steal": [
   "Let the product's raw material (scanned cards and stamps) be the hero, rotated and overlapping, instead of an interface mockup.",
   "Interleave a collage with the wordmark, some objects behind the letters and some in front, so type and image share one depth.",
   "Split the viewport into two flat colour fields and let objects straddle the seam to tie the hero to the call to action."
  ]
 },
 {
  "id": "opl-samuel-raikkonen-portfolio",
  "name": "Samuel Räikkönen Portfolio",
  "url": "https://honest.fi/",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.6,
  "idea": "The whole portfolio is one centred column of campaign titles; whichever title is active turns white and its film fills the screen behind the list.",
  "mood": [
   "cinematic",
   "quiet",
   "dark",
   "literary"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A dark full-bleed video fills the viewport (first frame: a deep-blue particle render of a sleeping figure). At top centre sit two 14px lines in white, the name in sans and the role in serif. At bottom centre sits a single 13px link. Between them a centred stack of project titles in a 56px serif (~3.9vw), leading near 1.1, starts at mid-height and runs off the bottom edge. The active title is pure white; all others are about 35% white so the footage shows through, and the list fades out toward the edge. Nothing is left- or right-aligned: the outer thirds of the screen carry only footage.",
  "type": "Hedvig Letters Serif regular at 56px, -0.015em, sentence case, for every project title; the same serif at 15px for body. Inter semibold 14px only for the name and one link. Effectively two sizes, a fourfold jump.",
  "colour": "#041527 #08243a #050505 #ffffff #8a97a5 — Colour comes entirely from the active film, darkened by a scrim; type is white at two opacities over a near-black base.",
  "imagery": "Full-bleed campaign films, one per project, swapping as the active title changes and heavily darkened so white serif text stays legible. No thumbnails, frames or cards anywhere.",
  "layout": "A single fixed viewport built on the centre axis only. The name is pinned at the top, one link at the bottom, and the title list scrolls through the middle like film credits while the background swaps. No sections, no footer.",
  "sections": [
   {
    "role": "work",
    "description": "Scrolling moves the title stack upward like end credits: about seven dimmed titles sit above the active one, the white active title holds near 50% height, and that title's film plays full-bleed behind. Titles nearest the top edge dissolve under a fade mask and pass beneath the pinned name. There are fourteen entries; the list simply ends with the last title active and empty footage below it."
   }
  ],
  "steal": [
   "Make the navigation the content: a centred list of evocative project titles at display size, with media appearing only for the active one.",
   "Mark the active item with opacity alone (100% against ~35% white) and let footage show through the inactive lines.",
   "Pin just two tiny anchors, name at top centre and one link at bottom centre, and leave everything else to a single axis."
  ]
 },
 {
  "id": "opl-lovably",
  "name": "Lovably",
  "url": "https://www.lovably.com",
  "source": "One Page Love",
  "kind": "studio-portfolio",
  "score": 7.6,
  "idea": "Extreme restraint: one 25px sentence in an otherwise empty white viewport, then a strict four-column journal of work whose captions read as tiny headlines.",
  "mood": [
   "restrained",
   "quiet",
   "precise",
   "gallery-like"
  ],
  "archetype": "left-statement-quiet",
  "hero": "White viewport, about 90% empty, on an implied four-column grid with 50px margins. Top row at 44px: the wordmark as 15px text at the left margin, a grey information link at the start of column three (the exact centre line), a 12px outlined circle at the right margin. The only statement is one line at 25px regular (1.7vw) starting on the centre line at 42% height. Between 81% and 89% height, two four-line 15px paragraphs fill columns three and four. A tiny orange down-arrow sits at the left margin beside their last line. Four thumbnail tops peek 50px above the fold, one per column. The left half is blank.",
  "type": "Scto Grotesk A regular throughout: a 25px statement, 15px body, ~11px captions with a bold lead-in phrase and grey date codes. No display size exists until the footer, where a serif wordmark image spans the full width, the only large type on the page.",
  "colour": "#ffffff #111111 #9a9a9a #e7e7e7 #e8501e — White ground, black text, grey for secondary links and dates; a single tiny orange arrow is the only accent. All other colour comes from project thumbnails.",
  "imagery": "Project thumbnails mixing interior and architecture photography with flat logo plates on solid colour. Square in most rows, taller portrait in others, square corners, ~22px gutters, one ratio per row.",
  "layout": "A strict four-column grid with 50px margins and ~22px gutters. Every row is image, then a caption block of varying length, then about 70px before the next row. The hero uses only the right two columns. A thin sticky header; no section breaks until the wordmark footer.",
  "sections": [
   {
    "role": "work",
    "description": "Four equal columns of square thumbnails with small captions directly beneath: a bold two-to-four-word lead-in running straight into a regular-weight description of four to eight lines at ~11px, then a grey month-and-year code and, on some, a visit link with an arrow. Captions vary in length so each row's bottom edge is ragged; the next row starts on a shared top line. Some rows switch all four images to portrait."
   },
   {
    "role": "footer",
    "description": "After the last row comes a mostly empty white viewport. At its bottom the studio name appears as a black high-contrast serif wordmark stretched from margin to margin, roughly 13vw tall, with a small registered mark at its lower right. Under it a hairline and a single 10px row: copyright at left, three text links on the centre line, a privacy link at right."
   }
  ],
  "steal": [
   "Start the statement and a nav link on the exact centre line of a four-column grid and leave the left half blank.",
   "Write each caption as a bold mini-headline running straight into a regular description, so a grid of thumbnails reads like a journal.",
   "Hold all large type back until the footer and release it as one full-width serif wordmark, the only contrast on a small-grotesk page."
  ]
 },
 {
  "id": "opl-marina-rachello",
  "name": "Marina Rachello",
  "url": "https://www.marinarachello.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.6,
  "idea": "The surname is broken with a hyphen so its tail becomes a greeting, set huge in a soft bookish serif on a red field, and the page signs off with an even larger goodbye.",
  "mood": [
   "warm",
   "cheeky",
   "bold",
   "handmade"
  ],
  "archetype": "type-poster",
  "hero": "Solid red-orange viewport with no navigation: only two tiny pale labels in the top corners (role at left, employer at right). The name starts about 15% down, left-aligned from a 3% margin, in a soft, slightly blobby bold serif at roughly 14vw. Line one, in cream, breaks the surname with a hyphen about 84% across; line two, in near-black, completes it as a greeting with an exclamation mark, leaded so tightly the lines nearly touch. Together they fill the top 55% of the screen. A right-aligned two-paragraph bio in small white sans, about 24% wide, sits in the bottom-right corner. The bottom-left is empty.",
  "type": "Averia Serif Libre bold, a soft-edged averaged serif, at about 14vw in the hero and 26vw in the footer marquee; DM Sans 18px for the bio and the tiny corner labels. Only three sizes exist, with a display-to-body jump above 10x. Mixed case, default tracking.",
  "colour": "#e84025 #2a2a2a #f3ede4 #1a1919 #d5d5d5 — Hot red-orange bookends the page as hero and footer; the work area between is flat charcoal so the project boards supply their own colour. Type is cream and near-black on red.",
  "imagery": "Project presentation boards: composed collages of UI screens on coloured grounds, plus one photo of a device in use. Landscape tiles around 16:10 with square corners, lined up in a single horizontal row with narrow gaps on charcoal.",
  "layout": "Three acts: a red type poster, a long charcoal stretch where one row of large landscape boards travels sideways with empty charcoal above and below, then a red footer. Outer margins are tight at about 3%; there are no headings between acts.",
  "sections": [
   {
    "role": "gallery",
    "description": "On flat charcoal, a single horizontal strip of project boards is vertically centred with about 20% empty space above and below. Each board is roughly 62% of the viewport wide and 58% tall with 24px gaps, so one full board and the cropped edge of the next are always in view. No captions, titles or buttons accompany them; the strip slides sideways while the page scrolls for about ten screens."
   },
   {
    "role": "footer",
    "description": "A red block rises from the charcoal with a hard straight edge. A farewell phrase in the same serif at 26vw runs as one cream line far wider than the viewport, cropped at the right edge. Beneath it three small white text links with arrow glyphs are stacked and centred, and a tiny copyright line sits at the very bottom."
   }
  ],
  "steal": [
   "Find a word hiding inside the name and split it across two lines with a hyphen and a colour change, so the headline is both the name and a greeting.",
   "Park the bio as a small right-aligned paragraph in the bottom-right corner, diagonally opposite the giant left-aligned name, and leave the other two corners empty.",
   "Bookend a neutral dark work area with the same saturated colour field and the same display face, set even larger for the goodbye than for the hello."
  ]
 },
 {
  "id": "aww-21-hrs-on-the-moon",
  "name": "21 Hrs On The Moon",
  "url": "https://www.21hrs.space/",
  "source": "Awwwards Site of the Day",
  "kind": "culture",
  "score": 7.6,
  "idea": "An explorable Apollo 11 landing site: a title screen where the word MOON sets behind the lunar horizon, then a draggable top-down surface map with hotspots and a mission timeline.",
  "mood": [
   "cinematic",
   "archival",
   "dark",
   "reverent",
   "technical"
  ],
  "archetype": "immersive-webgl",
  "hero": "Black starfield framed by thin bronze corner brackets; three small round icon buttons top-left. A centred composition 72% wide sits between two thin rules. The upper rule is interrupted by a small bold caps kicker; beneath it the four-letter title in bold geometric caps at 20.8vw spans the full width, light grey fading to transparent at its base. A grey cratered sphere rises from the bottom, its curved horizon overlapping the lower quarter of the letters. On the sphere: a two-line centred white sentence, with a mono-labelled mission name at far left and year at far right above the lower rule. A bracketed mono button sits centred at 82% height.",
  "type": "Futura Std Bold in uppercase at 300px with -0.03em tracking for the title, the same face near 28px for the kicker and 20px for the sentence; Akkurat Mono in tiny uppercase for labels, the button and map annotations. Roughly a 15x jump from title to sentence.",
  "colour": "#020202 #262626 #d8d8d8 #8a7361 #ffffff — Black and lunar greys with white type. A muted bronze appears only in the HUD brackets and translucent wedge markers on the map; archival photo thumbnails add small spots of colour.",
  "imagery": "A real-time 3D moon: curved horizon on the title screen, then a full-screen top-down cratered surface lit from one side. Small archival photos appear as thumbnail hotspots with bracketed corners; icons sit in outlined circles and squares.",
  "layout": "A single-screen application rather than a scrolling page: a centred title card, then a draggable map filling the viewport with hotspots at fixed coordinates. HUD brackets, icon buttons at top-left and a timeline ruler along the bottom persist throughout.",
  "sections": [
   {
    "role": "other",
    "description": "Full-viewport top-down lunar surface in dark grey with fine crater relief. About ten hotspots are scattered over it: outlined circular icons for panoramas, each with a translucent bronze wedge showing the camera's field of view; small square icons for experiments; two photo thumbnails with corner brackets. Each has a tiny mono caps label to its right. One landmark gets a larger bold geometric caps label with a small triangle above it. A tiny mono hint sits top-centre."
   },
   {
    "role": "other",
    "description": "Pinned along the bottom, a horizontal ruler spanning about 75% of the width: a thin baseline with short vertical ticks dividing eight equal segments, each labelled in two lines of tiny mono caps, a small triangle marking the current position and a clock readout at the left end. The current landmark's name in bold caps sits beneath it, half-cropped by the bottom edge of the screen."
   }
  ],
  "steal": [
   "Let a 3D or photographic object physically overlap the bottom of giant title letters and fade the letters to transparent there, so the type sits inside the scene rather than on top of it.",
   "Interrupt a thin horizontal rule with the small first line of the title, then close the block with a second rule carrying two labelled facts at its left and right ends.",
   "Frame the viewport with four thin corner brackets in a muted metallic colour to turn a full-screen scene into a viewfinder."
  ],
  "media": "The hero is all picture: a starfield and a rising moon sphere over the lower ~55%, with the title sunk into its horizon. After landing, a draggable top-down terrain map fills the whole screen, with 120x90 archival photo thumbnails as pins and translucent field-of-view wedges; no video on the surface, as footage and panoramas open from the hotspots.",
  "motion": "There is no document scroll: the first wheel step plays a landing in which the terrain lights up and the hotspots arrive in a stagger, labels after their icons, and from then on the wheel does nothing and the map is dragged instead. HUD items fade in and out on a uniform 400ms, with one opacity .3s cubic-bezier(.61,1,.88,1); no GSAP, and the page took 38s to reach network idle."
 },
 {
  "id": "opl-transport",
  "name": "Transport",
  "url": "https://usb.club/transport",
  "source": "One Page Love",
  "kind": "physical-product",
  "score": 7.6,
  "idea": "Present a USB stick as a luxury object: one studio render on charcoal above a chrome custom wordmark, then let moody macro photography carry the rest.",
  "mood": [
   "nocturnal",
   "luxurious",
   "retro-futurist",
   "tactile"
  ],
  "archetype": "product-object-centre",
  "hero": "Flat charcoal field. Centred slightly above the midline, a cut-out render of the drive about 31% of viewport width with its steel arm swung up at 30 degrees. Under it a chrome, ultra-wide custom wordmark spans 72% of the width on one line yet is only 45px tall. Then a centred serif tagline at 2.6vw and a single row: mono spec, a dark pill showing price and sold-out state, mono spec. Logo top-left, a grey centred nav prompt, a small pill with a glowing dot top-right. Carousel chevrons sit at the far left and right edges at product height. The bottom fifth is empty.",
  "type": "Three voices: a chrome extended techno wordmark as image; Untitled Serif 400 at 38px with -0.026em tracking for taglines and body; ISO mono for specs and caps eyebrows. Section heads switch to a tight heavy Untitled Sans near 36px. Nothing exceeds 3.6vw.",
  "colour": "#1c1c1c #c8c5ba #6e6f6a #5b5d45 #f1f1ef #2d2d2d — Charcoal base with white text; colour comes only from photographs in grey-olive, concrete and amber. One section flips to dark text over a pale blurred photo.",
  "imagery": "One clean product render, then shallow-focus macro photographs of the translucent drive on cutting mats, concrete and fabric, graded olive-grey with grain. Full-bleed bands with feathered edges, plus a row of rounded cards of unequal widths.",
  "layout": "Centred hero, then full-bleed photo bands each carrying one short text group placed differently: top-left, centre-right over a card, bottom-left, centred. Band edges dissolve through heavy blur instead of hard cuts. About 160 words across eleven screens.",
  "sections": [
   {
    "role": "features",
    "description": "Full-bleed pale out-of-focus photograph with the drive in sharp focus in the lower half. Dark text overlays the top: a heavy tight grotesk heading at about 36px, left-aligned 8% in from the edge, then three equal columns, each a tiny glyph plus mono caps label over two lines of serif copy. No cards or dividers; the photo's soft blur is the only background."
   },
   {
    "role": "gallery",
    "description": "A full-width macro photo band fades out through a blurred lower edge. On charcoal beneath it, one row of four rounded-corner image cards of unequal widths (one double-width, three single) with narrow gaps, each a tightly cropped lifestyle shot in a different colour temperature. The row is cut by the viewport bottom; further down one card grows taller and pins beside a short text group."
   },
   {
    "role": "showcase",
    "description": "Dark band over a concrete-wall photograph. The drive render floats at top centre, half out of frame, with a horizontal motion streak smeared across the wall behind it. Text sits bottom-left: mono caps eyebrow, heavy grotesk heading, two lines of serif. The band cross-dissolves into an olive bokeh photo holding a centred mono equation, heading and one serif line whose quantities are joined by italic conjunctions."
   },
   {
    "role": "footer",
    "description": "Two small white script-lettered badges side by side at top centre, like garment labels, with a tiny pill link beneath, then a mostly empty charcoal field. Bottom-left, three tiny stacked mono link groups; bottom-right, white card-suit icons above a two-line italic mono credit, right-aligned."
   }
  ],
  "steal": [
   "Pair one centred product cut-out with a very wide, very short metallic wordmark so the logo reads as an engraved nameplate.",
   "Give three typefaces strict jobs: serif for sentences, mono for specs and eyebrows, heavy grotesk for section heads.",
   "Blur the top and bottom edges of full-bleed photo bands so sections melt into each other with no hard seams."
  ]
 },
 {
  "id": "opl-the-deep-end",
  "name": "The Deep End",
  "url": "https://thedeepend.space",
  "source": "One Page Love",
  "kind": "event",
  "score": 7.5,
  "idea": "The whole site is one invitation card floating over ambient footage, which shrinks into a pinned corner ticket as scattered stills scroll past.",
  "mood": [
   "warm",
   "intimate",
   "hushed",
   "analog"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed, dim, amber-toned video of a listening room: a modular synth and speaker at top, a person lying on a silk cushion in soft focus. Centred over it is a square-cornered panel about 55% of the viewport wide and 62% tall, a blurred brown-to-taupe wash. Inside, the three words of the title are spread along the top edge at left, centre and right in bold condensed caps. A small line-diagram logo sits below. Two left-aligned text blocks at 2.5vw in the same heavy condensed face, tightly leaded: five lines of event details, four of description. Bottom edge: credits left, an RSVP box centre, a small link right. No navigation.",
  "type": "PP Neue York extra-bold condensed is the only face, used at essentially one size, 36px, in white with very tight leading; credits drop to about 12px. Mixed case with occasional all-caps lines and a raised underlined ordinal. Hierarchy comes from spacing and position alone.",
  "colour": "#2b2216 #bda38b #c8874a #f1f1e9 #181818 — Warm browns and ambers lifted straight from the footage: dark walnut video, a taupe translucent card, then a flat tan page with honey-lit photos. White type only; no accent colour.",
  "imagery": "Low-light cinematic video and stills of people lying with eyes closed, shallow focus, amber backlight, wood panelling. Square-cornered and at very different sizes, from small thumbnails to near full-height frames, placed off-grid on flat tan.",
  "layout": "After the full-bleed opener the page becomes a flat tan field where photos are placed irregularly, one small at left, one mid-size near centre, one tall at right, with wide gaps. The invitation card stays pinned top-left. About four screens, no headings or sections.",
  "sections": [
   {
    "role": "gallery",
    "description": "Flat tan background. Images sit at irregular positions and scales with no shared grid: a small landscape still about 14% wide near the left edge, a mid-sized one about 16% wide lower and nearer the centre, then a large portrait frame about 26% wide and a full viewport tall near the right. One video frame returns nearly full-bleed between them. No captions; all text lives in the pinned card, which partly overlaps the images."
   },
   {
    "role": "contact",
    "description": "On scroll the invitation panel collapses to a card pinned in the top-left corner, about half the viewport wide and 22% tall, flush with the edges. It keeps the three-word title spread along its top, the logo, five lines of date and address, and the RSVP box centred on its bottom edge. Its fill is semi-transparent taupe with a blurred dark vignette, so photos passing beneath tint it."
   }
  ],
  "steal": [
   "Spread the words of a short title to the left, centre and right of a card's top edge so the name becomes its frame.",
   "Set every line of an invitation in one heavy condensed face at one size and let line breaks and gaps create the hierarchy.",
   "Shrink the hero card into a pinned corner ticket that keeps date, place and the RSVP button visible for the whole scroll."
  ]
 },
 {
  "id": "aww-jesper-landberg-4",
  "name": "Jesper Landberg",
  "url": "http://jesperlandberg.com",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.5,
  "idea": "Project screenshots become bent, rippling panels on a horizontal WebGL strip floating above a perspective grid floor in the dark.",
  "mood": [
   "dark",
   "spatial",
   "sleek",
   "minimal"
  ],
  "archetype": "immersive-webgl",
  "hero": "Black viewport. Four tiny bold uppercase labels sit in the corners with 77px side and 44px vertical margins: name top-left, profile top-right, a view toggle bottom-left, newsletter bottom-right. Across the middle runs a horizontal strip of project panels rendered in WebGL: the centre panel is about 47% of the viewport wide and 52% tall with rounded corners, its top and bottom edges rippling as if the sheet were flexing; neighbours are cropped by the screen edges and angled away. Each panel carries a white project title bottom-left and a round arrow button bottom-right. Below, a white-line perspective grid floor recedes to a dark horizon. The top quarter is empty.",
  "type": "A single grotesk (digest reports only 'sans'): bold uppercase corner labels at about 11px and project titles at roughly 18 to 27px with tight tracking. No headline at all; the largest type on screen belongs to the project screenshots themselves.",
  "colour": "#000000 #181818 #373637 #ffffff — Pure black stage with white micro-labels and faint grey grid lines; all colour comes from the project panels, which glow like screens in a dark room.",
  "imagery": "Website screenshots and videos used as textures on curved, wavy, rounded-corner panels in a 3D scene, with soft vignette shading at panel edges and a wireframe grid floor beneath.",
  "layout": "A single-screen stage: corner labels frame a horizontal band of panels through the vertical centre, and scroll moves the strip sideways rather than the page down. A toggle switches to a full list. On mobile the projects become a vertical stack of rounded cards.",
  "sections": [
   {
    "role": "work",
    "description": "As the strip advances each panel bends differently: the one nearest centre faces the viewer and is largest, panels toward the edges rotate away and shrink, and all share a sine-wave distortion along their top and bottom edges. Gaps between panels are about 10px. Panels whose media has not loaded show as flat pink or starfield fills, still carrying title and arrow button."
   },
   {
    "role": "gallery",
    "description": "On a 390px screen the 3D strip is replaced by a vertical feed: full-width cards with 30px side margins and about 20px radius, each roughly 300px tall, stacked with 30px gaps. The project title sits bottom-left inside the card over a dark gradient scrim, with a black circular arrow button bottom-right. The four corner labels remain fixed over the feed."
   }
  ],
  "steal": [
   "Reduce all chrome to four tiny uppercase labels pinned in the corners so the work fills the stage.",
   "Distort carousel panels with a wave tied to scroll velocity so the gallery feels like flexible sheets rather than rigid slides.",
   "Ground a floating gallery with a faint perspective grid floor to give depth on an otherwise black screen."
  ],
  "media": "One fixed canvas covers the screen and holds about eight project cards on a ring around the camera, each textured with a muted looping screen recording of the site; the cards fill the band from y≈220 to y≈690 edge to edge, the centre one about 670x463 (24% of the area), with neighbours bleeding off both edges over a perspective floor grid. No img or video elements on desktop.",
  "motion": "A short segmented loader, then the whole ring cuts in by 2.5s with no fly-through (load 844ms). The document does not scroll: the wheel turns the ring about one card per step in an endless loop, as a smooth inertial lerp, and fast steps put an extra wave into the card edges that relaxes when the ring stops; DOM transitions are only .15-.5s on cubic-bezier(.23,1,.32,1)."
 },
 {
  "id": "opl-eagles-nest",
  "name": "Eagle’s Nest",
  "url": "https://eaglesnest.webflow.io/",
  "source": "One Page Love",
  "kind": "hospitality",
  "score": 7.5,
  "idea": "Let the lake view do the selling: full-bleed footage of the volcano horizon with the name set as a monumental cream serif along the bottom edge.",
  "mood": [
   "serene",
   "earthy",
   "grand",
   "warm"
  ],
  "archetype": "bottom-anchored-type",
  "hero": "Full-bleed video of a silhouetted figure meditating before a lake and volcanoes, with no scrim. The name is set in a high-contrast cream serif, uppercase, about 15vw, spanning the full width between 34px margins and sitting on the bottom edge so it covers the lower fifth of the frame. Directly above its left and right ends sit two pairs of small white labels (what it is, where it is). Top row: a round emblem far left, eight plain text links grouped right of centre and an outlined pill button far right. A small black vertical awards tab hangs on the right edge.",
  "type": "PP Pangaia medium: uppercase at 216px for the wordmark, mixed case with uncial-flavoured alternates for section titles. PP Neue Montreal for nav and body at 16px, with a lead paragraph near 22px. Two faces and about four sizes.",
  "colour": "#fffae7 #0e2404 #3f6f8c #2d5c8a #5d9aa3 #040303 — Photography supplies lake blues and timber browns. Content sits on warm cream with deep green or lake-blue serif headings, and the footer inverts to very dark forest green with cream type.",
  "imagery": "Wide landscape video and saturated photos of the lake, bamboo structures and yoga; full-bleed for scene-setters, otherwise inset cards with a small radius. A flat teal vector map of Central America sits beside the main photo.",
  "layout": "Thirty screens alternating pinned full-bleed photographs with cream content bands. Tight 17-34px outer margins; content is left-anchored with images running to the right margin, and value chapters use centred titles. The recurring serif holds the long page together.",
  "sections": [
   {
    "role": "about",
    "description": "A cream band slides up over the hero. A dark green serif heading at about 4vw sits top-left, followed by a three-line lead paragraph near 22px across half the width. Below, a wide landscape photo card takes about 70% of the width with a short white paragraph overlaid in its top-right corner. To its right is a narrower teal map card with one location dot, and beneath it four tiny label and value pairs, including live local time."
   },
   {
    "role": "features",
    "description": "A large blue serif title centred on cream shrinks into a small centred label pinned just above a full-bleed photograph. The photo stays fixed while single value words appear one at a time at its centre in white serif at about 4vw, each with two lines of small centred text beneath. One image carries several sequential captions."
   },
   {
    "role": "footer",
    "description": "Very dark green field. The top row is split in three: postal address in small sans at left, the section menu as a column of serif links at about 24px starting at the centre line, and social links right-aligned at the far right. The wordmark repeats at full width along the bottom edge at hero size, caught rising letter by letter. Tiny credits sit beneath."
   }
  ],
  "steal": [
   "Anchor the name at full width on the bottom edge of a full-bleed video and tuck two tiny descriptor pairs above its left and right ends.",
   "Pin one photograph and cycle one-word captions over it instead of building a card for each value.",
   "Place a small facts stack (elevation, temperature, live local time) beside a flat map to ground a destination."
  ]
 },
 {
  "id": "aww-glitch-grit",
  "name": "Glitch&Grit",
  "url": "https://glitchandgrit.com/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.5,
  "idea": "Every screen is one project: two half-width footage columns with the project name stacked dead centre across their seam in a single flat pastel that changes per project.",
  "mood": [
   "loud",
   "cinematic",
   "confident",
   "nocturnal"
  ],
  "archetype": "type-poster",
  "hero": "Black viewport split down its vertical centre. The left half holds a huge flat grey flower silhouette bleeding off the left and bottom edges; the right half is black with a few tiny video thumbnails drifting through. Dead centre, straddling the split, sits a two-line uppercase title in mint green, about 11vw per line, lines almost touching, spanning roughly 70% of the width. Two tiny category lines sit directly above it and a tiny 'view full project' link directly below, all in the same green. Navigation is six small bold white words pinned to the frame: three links across the top edge, the three-part studio name across the bottom edge.",
  "type": "Elza only, weight 900, uppercase, tracking -0.05em so letters nearly collide, line-height under 1. Just two sizes exist: roughly 158px project titles and 12px bold caps for nav, tags and links, a 13:1 jump with nothing in between.",
  "colour": "#000000 #999999 #9ae187 #93f1f7 #dcc8ff #fbb060 — Black ground and dark-graded footage. The only flat colour is the title lock-up, which takes a new candy pastel per project: mint, cyan, lilac, cornflower, lemon, orange.",
  "imagery": "Client film footage in two half-width columns per screen, cropped tight, graded dark, square edges, the two columns vertically offset against each other. One flat grey cut-out flower shape opens the sequence.",
  "layout": "No margins or containers. Each project is a full viewport cut into two equal media columns with one centred title lock-up. Fixed corner navigation frames every screen; fourteen screens repeat the same slide with different footage and title colour.",
  "sections": [
   {
    "role": "work",
    "description": "Each scroll stop is a project slide. Two half-width media columns fill the viewport edge to edge and travel vertically at different offsets, so their top and bottom seams never align. Centred over the join: a two-line 11vw uppercase title in one flat pastel, with two or three 12px tag lines stacked above and a 12px 'view full project' or 'coming soon' line beneath. Title colour changes on every slide; nothing else does."
   },
   {
    "role": "footer",
    "description": "There is no footer block. The last screen is simply another project slide, and the studio name fixed along the bottom edge in three pieces (first word bottom-left, ampersand bottom-centre, last word bottom-right) does the footer's job on every screen, mirroring the three nav words fixed along the top edge at the same size and weight."
   }
  ],
  "steal": [
   "Break the studio name into three words pinned bottom-left, bottom-centre and bottom-right, mirroring three nav links across the top, so the viewport frame itself is the logo.",
   "Give each project slide one flat pastel used only for its title and tags, so a colour change is the sole signal that the project changed.",
   "Split the viewport into two media columns that scroll at different offsets and set the title across the seam so the type stitches the halves together."
  ],
  "media": "Media fills the whole first screen: a flat grey cut-out flower on the left half and a scatter of small thumbnails on the right that grows into a collage round the title. Then video is the main medium: each project is two full 720x900 half panes of muted, looping footage moving in opposite directions, with the title straddling the seam; about 24 pieces of footage or illustration across twelve projects.",
  "motion": "After a 10.7s load the thumbnail grid fills the right half by 1.2s and scales into a cluster by 4.5s, and Lenis then runs 40 scrubbed ScrollTriggers on empty 855px track divs: per project the left pane and half-title travel one way and the right ones the other (titles ±270px, panes ±180px), lining up only at the centre, and the scroll resets for an endless loop. Panes grow from an edge by scaleY over 0.5s, tags slide on y over 0.5s power2, and there is no reduced-motion rule."
 },
 {
  "id": "aww-bleibtgleich26",
  "name": "bleibtgleich’26",
  "url": "https://bleibtgleich.dev",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.5,
  "idea": "One thin vertical rule runs down the page and a tight bold grotesk sentence wraps around it, words stepping from one side of the line to the other.",
  "mood": [
   "stark",
   "typographic",
   "Swiss",
   "witty"
  ],
  "archetype": "type-poster",
  "hero": "White page, black type. Content sits in a narrow band between 26% and 68% of the width. A 1px vertical rule drops from the top edge at 37% for two-thirds of the height. Left of it: a black blob avatar at the top, a tiny role caption at its foot. Right of it: a tiny location note at the top, the name in two lines of 90px medium grotesk at the bottom. The tagline continues below at the same size, flush to the band's left edge, running past the fold. The upper half is otherwise blank. The handle is split into two pale-grey words fixed in the bottom corners; a black menu pill sits top-right.",
  "type": "Akzidenz Grotesk Pro medium only, -0.05em tracking, line-height about 0.9. Two sizes: 90px (6.3vw) for every statement and 11-13px for captions and table rows, a 7:1 jump. Long words are hyphenated and stepped across lines on purpose.",
  "colour": "#ffffff #000000 #e4e4e4 #f2f2f2 — Black on white with no accent. Pale grey is used for the ghosted corner wordmark and a few small square tiles; tiny coloured rings inside those tiles are the only hue.",
  "imagery": "Almost none: a black blob avatar, a few 85px grey tiles each with a coloured ring, and a canvas dome of small tilted project thumbnails floating between two words.",
  "layout": "Everything hangs off one vertical axis at 37%: lines start either at the axis or one indent to its left, giving a stepped rag. Very wide white margins. Sections are separated by a full screen of white rather than rules or colour.",
  "sections": [
   {
    "role": "intro",
    "description": "A 90px sentence is typeset word by word around the vertical rule: one word ends just left of the rule, the next starts just right of it, and the following line is centred beneath both. Above the sentence a row of five 85px pale-grey squares, each with a small coloured ring at its centre, is spaced unevenly along one baseline, with a three-line 13px description under the second."
   },
   {
    "role": "work",
    "description": "The heading first appears as one centred line near the bottom of an empty screen, then its two halves separate to the far left and far right edges at mid-height. In the gap a WebGL dome of fifteen or so small project thumbnails, mostly black and white, tilts in perspective like tiles on a sphere. Nothing else is on the screen."
   },
   {
    "role": "proof",
    "description": "The heading is broken into an ampersand alone in the left margin and two words stepped over three lines with a hyphen break and a growing indent. Below it a four-column table at 11px: year, site name, awarding body, award. Hairline rules sit under every row, columns align to the hero's band, and year groups are separated by a blank row."
   },
   {
    "role": "contact",
    "description": "The closing sentence is stepped over four lines with shifting indents, right of centre. To its left two tiny grey captions and an email address at 11px. Under it three 36px outlined circles with social initials, centred, then the handle at about 44px centred on the bottom edge with tiny legal text in the two corners."
   }
  ],
  "steal": [
   "Draw one 1px vertical rule and typeset a large sentence around it, alternating words to either side so the line becomes the text's spine.",
   "Split the logotype into two words, ghost them at about 10% grey, and fix one in each bottom corner of the viewport.",
   "Leave the top half of the hero blank and start the name at 50% height so the headline runs off the fold and pulls the scroll."
  ],
  "media": "No picture on the first screen, which is all type plus a small black mark. Pictures arrive later as a WebGL sphere of project thumbnails flanked by two words that slide apart on scroll, square tiles placed on separate grid cells with empty cells between them, hover thumbnails behind a text index, and one small image used as a glyph in a row of numerals; no video.",
  "motion": "A 2.5s progress counter runs although the page loaded in 1.5s, while a vertical line draws down with the role label at its tip. Lenis and 15 ScrollTriggers with nothing pinned: display lines rise by yPercent over 0.47s in-out at a 0.075s stagger, the globe's rotation is scrubbed across its 1178px block, the flanking words are pulled apart on a scrub, and underlines wipe in by background-size over 0.6s cubic-bezier(0.76,0,0.24,1)."
 },
 {
  "id": "opl-lorenzo-bocchi-photography",
  "name": "Lorenzo Bocchi – Shot on iPhone",
  "url": "https://shotoniphone.lorenzobocchi.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.5,
  "idea": "Black-and-white phone photographs fly through dark 3D space as a twisting ribbon, and the viewer chooses how the archive is arranged (reel, wall, trail, drift; flow, grid, map).",
  "mood": [
   "dark",
   "cinematic",
   "quiet",
   "spatial"
  ],
  "archetype": "immersive-webgl",
  "hero": "Pure black canvas filling the viewport. A diagonal helix of portrait photo cards runs from upper-left to lower-right: four cards near the centre are lit and legible (each about 200 by 280px, slightly rounded corners, each rotated a little further around the axis), while cards above and below fade to dark grey blanks curling away. Behind them a single word in ultra-bold condensed caps spans 80% of the width, its letters half the viewport tall, in a grey only a few points lighter than the background. Four pill-shaped control groups sit in the corners: menu label top-left, three view modes top-right, two round icon buttons bottom-left, four layout modes bottom-right.",
  "type": "GeistSans around 14px inside the pill controls is the only readable text. The giant background word is ultra-bold condensed caps roughly 440px tall, used as texture at near-zero contrast. No headings or captions.",
  "colour": "#000000 #191919 #262626 #383838 #e6e6e6 — Black and greys only; the photographs are all monochrome, so the brightest values on the page are image highlights. Controls are dark grey capsules with a black active segment.",
  "imagery": "Black-and-white travel and street photographs, all portrait, with a soft vignette, mapped onto slightly curved cards in WebGL; only cards near the focal plane are lit, the rest fall into darkness.",
  "layout": "One fixed viewport with no document flow. Content floats in the centre 50% of the screen; interface is pushed to the four corners with 16px insets, leaving edges and middle free for the image stream.",
  "sections": [
   {
    "role": "gallery",
    "description": "Scrolling does not move a page; it advances the ribbon. In each frame three or four cards occupy a diagonal band through the centre, the middle one facing the viewer and neighbours rotated progressively edge-on, like prints on a spiral staircase. Cards leaving focus darken to charcoal silhouettes that continue the curve toward the top-left and bottom-right corners, so the path stays readable even when the images are not."
   },
   {
    "role": "other",
    "description": "Navigation is four floating capsules rather than a bar. Each is a dark-grey rounded container; multi-option ones hold a black pill behind the active word, giving three view modes and four layout modes as segmented switches. On mobile the two top capsules sit side by side, the bottom ones merge into one row, and their text scales up to thumb size."
   }
  ],
  "steal": [
   "Set a single giant word behind the content at two or three percent contrast so it reads as depth, not as a headline.",
   "Light only the items near the focal point and let the rest fall to dark silhouettes that still trace the path.",
   "Put controls in four corner capsules with a sliding active pill, keeping the whole centre free for content."
  ]
 },
 {
  "id": "aww-obys-r-experiment-space",
  "name": "Obys® Experiment Space",
  "url": "https://experiment.obys.agency/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7.5,
  "idea": "An archive of experiments as a 3D object the visitor can reshape, framed by an almost empty ruled white sheet.",
  "mood": [
   "austere",
   "experimental",
   "precise",
   "spatial"
  ],
  "archetype": "immersive-webgl",
  "hero": "White field. One line of 13px text at the top with 10px margins: two view links far left, a theme pair at 9%, a clock at 83%, Contact far right. Three full-width hairlines at 9%, 18% and 27% height form an empty ruled band; on the third sit a short phrase flush left and its completion flush right. The middle 55% is a WebGL ring of about twenty flat rectangular cards seen in perspective — project screenshots, desaturated to grey except one in colour, far-side cards mirrored and faded. Bottom line: two tiny swatches left, four layout-mode words centred with the active one underlined, grey copyright right.",
  "type": "One custom grotesk (OTF Obys NG), one weight, two sizes only: 13px for every label and 94px (6.5vw) uppercase at -0.055em for the three-line stacked title and the bottom caption. Hierarchy comes entirely from that seven-to-one jump.",
  "colour": "#ffffff #000000 #686868 #dadada #b08d6a — White field, black text, hairlines in light grey. Thumbnails are desaturated and faded; only the focused card shows its real colours. A swatch toggle inverts to black.",
  "imagery": "Screenshots of the studio's experiments mapped onto flat planes in 3D, portrait rectangles of mixed sizes, square corners, greyscale and partly transparent until focused; back faces appear mirrored.",
  "layout": "A fixed frame — text nav at the top, three hairlines, controls on the bottom line — surrounds one interactive canvas. No scrolling page; scroll drives the carousel. Corners hold the small text, the centre axis holds title, thumbnails and caption.",
  "sections": [
   {
    "role": "work",
    "description": "On scroll the ring flattens into one horizontal row of small thumbnails, about 95px wide and 230px apart, at mid-height. All are grey except the centred one, which grows 1.4× and takes full contrast. The title sits in three stacked centred uppercase lines at 94px, clipped by the top edge and sliced by the hairlines. Bottom-centre, a 94px caption with a category code and year changes with the focused item."
   },
   {
    "role": "other",
    "description": "Layout switcher: a comma-separated list of four arrangement names on the bottom line re-flows the same cards into a ring, flower, sphere or cylinder; the active name is underlined. Two small rectangles bottom-left toggle a black or white theme. On phones the site shows only a centred two-line notice framed by four corner squares on black."
   }
  ],
  "steal": [
   "Limit the type system to two sizes — 13px for every label and one 6.5vw size for title and caption — so scale contrast does all the hierarchy.",
   "Keep every thumbnail greyscale and faded except the focused one, so colour itself is the selection state.",
   "Offer the gallery's arrangement as a user choice through a plain comma-separated text list rather than fixing one layout."
  ],
  "media": "One fullscreen canvas holds every project cover as a texture: in the opening state a 3D ring of covers fills a full-width band about 43% of the height, fogged at the far side; after the first wheel step it unrolls into a thin horizontal strip of seven small greyscale covers on only 5-6% of the screen, the one nearest the centre scaling to 1.5x and regaining its colour, with its caption docked at the bottom centre. No video.",
  "motion": "A black screen with a progress hairline across the middle splits open like a letterbox at about 2.5s, and the masthead lines rise into their bands after 4.5s. The wheel drives the canvas, with no document scroll: the ring unrolls, then the strip slides about one item per step with no snapping, and captions change letter by letter, outgoing letters dropping and turning grey while incoming ones rise, on transform 0.3s cubic-bezier(0.16,1,0.3,1) across 3441 pre-split characters; no reduced-motion rule."
 },
 {
  "id": "aww-squarespace-foundations",
  "name": "Squarespace Foundations",
  "url": "https://brand.squarespace.com/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 7.5,
  "idea": "Brand guidelines presented as an orbit: six chapter tiles tilted in 3D circle a single sentence, and each one opens into a full-screen slide.",
  "mood": [
   "minimal",
   "dark",
   "precise",
   "gallery-like"
  ],
  "archetype": "other: orbiting-3d-tiles-around-statement",
  "hero": "Charcoal field. The site name top-left and an index link top-right, both at 24px and 40px from the edges, are the only chrome. Dead centre sits a three-line centred statement at about 26px, medium weight, roughly 30% of the width. Around it six small image tiles, each about 10% of viewport width, are spaced on an ellipse at roughly 10, 1, 3, 5, 7 and 9 o'clock; each is skewed as if turned about its vertical axis so it reads as a parallelogram. Tiles show photographs, a white logo card and glyph crops. About 80% of the screen is empty. A cookie notice sits bottom-right in the capture.",
  "type": "Clarkson and Clarkson Light only. Nav, statement and slide captions all sit near 24px with -0.04em tracking; captions pair a two-digit number with the chapter name in parentheses. Effectively one size across the whole site, with no display type.",
  "colour": "#111111 #000000 #ffffff #d9d9d9 — Charcoal and pure black with white type; one slide inverts to a white field with black logo and black chrome. No accent: colour appears only inside the photographs on the tiles.",
  "imagery": "Brand assets as full-screen slides: a studio render of a sphere hovering between two lit discs, a giant white numeral with vector anchor points visible, the logo with a construction overlay. In the index they are tiny skewed tiles.",
  "layout": "A single-screen application rather than a scrolling page. Chrome is anchored to the four corners: title top-left, index top-right, slide number and parenthesised chapter name bottom-left, arrows bottom-right. The middle holds either the ring of tiles or one full-bleed asset.",
  "sections": [
   {
    "role": "gallery",
    "description": "A slide fills the viewport edge to edge with one asset on black, or sits as a black panel inset about 75px from the sides on charcoal. Fixed captions in 24px white: a two-digit slide number at the far bottom-left, the chapter name in parentheses about 10% in from the left, and a pair of thin left and right arrows bottom-right. Header text remains in the top corners."
   },
   {
    "role": "other",
    "description": "The logo slide flips the background to pure white and all chrome to black. The mark sits centred at about 15% of viewport width, overlaid by a rotated solid square that exposes its construction geometry. The same corner system applies: number and parenthesised label bottom-left, arrows bottom-right, title and index link at the top."
   }
  ],
  "steal": [
   "Arrange chapter thumbnails on an ellipse around a centred sentence and skew each tile in 3D so the index reads as objects in space rather than a grid.",
   "Use one type size for everything and give each corner of the viewport a fixed job: title, index, counter plus label, arrows.",
   "Caption slides with a two-digit number followed by the chapter name in parentheses."
  ],
  "media": "The fold is type only, and the first real stage is an orbit of six small skewed chapter cards round the centred sentence, about 32% of the screen. Chapters then open as full scenes at 61-79% media on desktop and 100% on the phone (a centred 3:4 portrait at 75% of the viewport height on a ground sampled from the photograph, an inset colour panel growing to full bleed, a collage of looping interface clips, one glyph scaled past the viewport with its vector nodes visible, a full-bleed 3D render), all square-cornered, with a single 12s clip.",
  "motion": "About 5s pass before anything useful: a 14vw loader line rises through a mask, then counts from 0 to 100%, then the title words rise through a line mask in sequence. Lenis is present but the page never scrolls: the wheel turns the card ring and opens chapters, the ground shifts from #111 to #000 to a deep brown over 0.6s, UI moves on cubic-bezier(0.215,0.61,0.355,1) at 0.5s, and big scene moves take 2s on cubic-bezier(0.645,0.045,0.355,1)."
 },
 {
  "id": "aww-milledollars",
  "name": "Milledollars",
  "url": "https://milledollars.fr/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7.5,
  "idea": "The site is the reel: one full-screen film at a time inside a rounded frame, with client and title pinned to opposite ends of the horizon line.",
  "mood": [
   "cinematic",
   "restrained",
   "luxurious",
   "quiet"
  ],
  "archetype": "video-reel",
  "hero": "A full-viewport video inset about 14px from every edge with roughly 24px rounded corners, on a pale lilac-grey page so a thin band of page colour frames it. All text is white and about 16px. Top row inside the frame: the first half of the name at far left and the second half at far right, with a one-line tagline in a tiny tight display serif centred between them. On the vertical centre line: slide number at the far left, client name about 10% across, film title about 80% across, year at the far right. Bottom-left: a four-line stacked nav with a dot marking the current item.",
  "type": "ABC Diatype in uppercase at 16px for names and titles, with numbers and nav near 10px; Migra, a sharp display serif, appears once in the centred tagline in tiny tightly set capitals. No large type anywhere: the biggest text is 1.3vw.",
  "colour": "#e0dee1 #565857 #3f5a2f #c8891b #3d8fc4 #0c0b0a — The page is pale lilac-grey, visible only as a thin frame. Everything else is film: each slide brings its own grade, from palm green to amber, night teal, sky blue and ember orange. White type.",
  "imagery": "Full-frame footage from luxury commercials: macro foliage, an animated shopfront, liquid amber abstraction, a night street, an athlete against blue sky, a car in an orange spotlight. One per screen, uncropped, with rounded outer corners and light film grain.",
  "layout": "Not a scrolling page but a stack of full-screen slides. A fixed overlay places text at the four corners and along the horizontal midline, leaving the image centre clear. A tiny line-drawn mascot sits in the bottom-right corner on most slides.",
  "sections": [
   {
    "role": "work",
    "description": "Each project is one full-screen slide in the same rounded frame. The midline carries four pieces of text as if it were one table row stretched across the image: a two-digit index at the far left edge, client name about 10% in, film title about 80 to 88% across, year at the far right. Scrolling swaps the footage underneath while the overlay text changes in place."
   },
   {
    "role": "other",
    "description": "Mobile variant: the video fills the whole screen with no frame or rounded corners, cropped to a vertical slice of the footage. Chrome disappears; only three pieces of small text remain at mid-height on the left, with the index number at the edge, the film title beside it and the client name on a second line beneath, all in translucent white."
   }
  ],
  "steal": [
   "Inset the full-screen video 12 to 16px with rounded corners on a pale page colour so the film looks mounted rather than bled.",
   "Split the wordmark across the top-left and top-right corners and split client and title across the two ends of the midline, keeping the image centre empty.",
   "Keep every label at body size; with strong footage, 16px white capitals are enough hierarchy."
  ],
  "media": "Video is the entire content: seven project films play as silent loops inside one full-viewport WebGL canvas, framed about 14px from every edge with about 24px rounded corners on a pale lilac-grey wall, so footage covers about 97-98% of the first screen and text about 4.4%. One caption rail runs across the vertical centre over the film; no img or video elements in the DOM.",
  "motion": "A 2.5s choreography follows a 12.2s load: a tiny name lockup, a vertical reel of rounded 760x540 film cards sliding up like a strip, then one card growing into the frame. The wheel is hijacked: each step swaps to the next film by a fast cut or fade in an endless loop of seven, momentum sometimes skips two, captions rise about 2rem over .8s, and transforms run 1-1.5s on cubic-bezier(0.19,1,0.22,1) and cubic-bezier(.38,.005,.215,1)."
 },
 {
  "id": "aww-2xa-studio",
  "name": "2xA Studio",
  "url": "https://2xa.studio/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7.5,
  "idea": "Computation is the aesthetic: the grid, the loader, the lettering and the body text all behave like running code rather than a finished layout.",
  "mood": [
   "technical",
   "austere",
   "glitchy",
   "nocturnal",
   "experimental"
  ],
  "archetype": "other: loader-as-hero, then giant-wordmark",
  "hero": "Captured in its loading state, which is itself designed. A fixed top bar and matching bottom bar in a condensed pixel-flavoured mono at 1.7vw: studio name far left, two city clocks (Athens, Amsterdam) at the one-sixth and one-third marks, three nav words flush right; socials, email and a sound toggle along the bottom. Between the bars, a pure-black panel inset about 16px is cut into four equal columns by heavy white vertical bars, each column filled top to bottom with the word LOADING repeated some 36 times in small mono. Once loaded, the panel holds a dot-and-dash wordmark spanning the full width with two small square generative canvases beneath.",
  "type": "2XAMONOVF, a custom condensed pixel-edged mono, carries nav, labels and body at 19-24px. Helvetica appears only for the 10vw statement and project titles. The wordmark is a third voice: modular lettering built from rounded dots and dashes. Extreme jump, 10vw against 12px columns.",
  "colour": "#0f0f0f #030303 #fdfdfd #e6e6e6 #d4372c #f2cf1d — Near-black and white only for the interface; sections flip between them. Colour arrives solely inside generative canvases and project images (red marks, a yellow-pink gradient solid).",
  "imagery": "Small square live canvases: ASCII noise fields, red brush-like marks on white, a low-poly gradient solid. Project media is full-width and square-cornered, showing pixelated mosaic objects photographed on stone.",
  "layout": "A four-column grid stated literally by white bars, then reused for clocks, body columns and canvas placement. Margins about 16px. Sections flip between near-black and white; dense 12px text columns alternate with near-empty dark stretches. Fixed bars top and bottom throughout.",
  "sections": [
   {
    "role": "intro",
    "description": "White section. Four equal columns of tiny grey mono body text run the full width as texture, some lines visibly scrambled mid-decode. Over them, a statement in black Helvetica at about 10vw steps diagonally across the columns: one word top-left, one top-right, one centre, one left, the last pair right, each overlapping the body copy. A row of seven single mono words is justified across the bottom edge like a spaced-out sentence."
   },
   {
    "role": "gallery",
    "description": "On the dark ground, square generative canvases about 13% of viewport width sit at irregular column positions with large black gaps between them: a white tile with red marks, a black-and-white ASCII noise field, a low-poly gradient form, an ASCII rendering of a paragraph. They read as lab specimens rather than portfolio thumbnails; nothing is captioned."
   },
   {
    "role": "work",
    "description": "On white, the studio description sits in a narrow 250px mono column at far left, leaving three quarters of the row empty. Each project then opens with a bracketed index number and a title in small Helvetica, flush left, followed by an edge-to-edge image about 16:9 with square corners."
   },
   {
    "role": "footer",
    "description": "Dark ground; the wordmark rebuilt from rounded dots and dashes on a coarse grid, the full width and about 20% of the viewport tall, sitting directly above the persistent bottom bar. The same lettering opens the page, so the site begins and ends on one object."
   }
  ],
  "steal": [
   "Design the loading state as a composition: the status word repeated in ruled columns that fill the stage.",
   "Lay a huge display statement diagonally over columns of tiny body text, so the copy becomes texture and the statement becomes structure.",
   "Frame the page with fixed top and bottom bars in one mono face carrying live data (two city clocks) instead of a conventional nav and footer."
  ],
  "media": "Video is the main medium: a 16:9 reel inset 16px at the sides fills 98% of the width and 88% of the height between two fixed bars, then six generative loops sit in a gutterless quarter-width checkerboard with display words dropped into the empty cells. Eight muted looping videos with posters, each fading in over 0.5s, and a giant dot-matrix wordmark band after the hero and again on the footer.",
  "motion": "A 3.8s preloader slides the wordmark off to the right in two bands while a tagline decodes behind blue block cursors (82 split characters). Lenis then runs the checkerboard columns at different scroll speeds, smoothed by a 0.1s transform transition on 60 elements, canvas manifesto columns decode as they enter, hover fills scale in from the left over 0.3-0.6s on cubic-bezier(0,1,0,1), and a grain layer jumps on 2s steps."
 },
 {
  "id": "opl-locker-land",
  "name": "Locker Land",
  "url": "https://www.lockerland.com.au/",
  "source": "One Page Love",
  "kind": "other",
  "score": 7.5,
  "idea": "A dry B2B parcel-locker pitch dressed as a fairground of die-cut stickers, where the main navigation is a fan of five tilted illustrated cards.",
  "mood": [
   "playful",
   "retro",
   "bold",
   "friendly",
   "graphic"
  ],
  "archetype": "illustration-led",
  "hero": "Post-red field overlaid with a faint lighter-red square grid. Small white brand lock-up top-left; a white pill button with a hard dark-red offset shadow top-right. Top-centre, a two-line sticker-style logo (cream letters, thick cream outline, small locker drawing) about 20% of viewport width. Beneath it a two-line centred white sentence at 18px; no larger headline. The lower half is a fan of five portrait cards with thick coloured frames and rounded corners: centre card upright, neighbours rotated about 8 degrees, the outer pair about 18 degrees and cropped by the viewport edges, each with a label tab overlapping its bottom edge. A two-line caption sits centred below.",
  "type": "apDisplay, a brand grotesque, is the only family: weight 500, sentence case, slightly tight. Body 16-18px; section headings in dark red reach about 5.9vw. The hero has no typographic headline, the sticker logo plays that role. Labels inside sticker tabs go bold.",
  "colour": "#dc1928 #fdf3db #952625 #e0a912 #5b7a94 #d46831 — Post red and cream alternate as full section fields; mustard, slate blue, burnt orange and maroon are reserved for card frames and badges. Warm, flat, no gradients.",
  "imagery": "Flat vector drawings (parcel, locker, hand holding a card) with thick cream die-cut outlines and hard offset shadows, plus candid photos of people at lockers placed inside arch-shaped cut-outs and wide rounded video tiles.",
  "layout": "Every section is a centre-stacked composition on a full-width colour field, with a pill-shaped sticky sub-nav top-centre after the hero. Sections are separated by ornament rather than whitespace: a red and cream checkerboard strip, a scalloped awning edge. Cards come in tilted rows of three or five.",
  "sections": [
   {
    "role": "stats",
    "description": "On red beneath a checkerboard strip, a dark-red pill with a dotted inner border holds the heading. Three statistics are scattered as tilted stickers instead of a row: a mustard circle, a maroon starburst seal with a cursor-arrow sticker overlapping it, and a slate-blue tag shape, each with a small parcel or locker illustration tucked onto a corner. Figures are large; captions are tiny and centred inside each shape."
   },
   {
    "role": "features",
    "description": "On cream, the heading sits in a white rounded box with dark-red outline and offset shadow, hanging directly under the sticky nav. Below, three equal portrait cards in mustard, slate blue and orange, each with a dark-red border and hard offset shadow, containing an arch-shaped photo cut-out of people, a tilted name-tag sticker, a starburst date badge, two centred lines of copy and a small white pill button."
   },
   {
    "role": "gallery",
    "description": "A centred locker illustration with icon stickers orbiting it, a centred heading and two-line intro, then a full-width two-by-two mosaic of video stills with no gaps and rounded outer corners. Each tile carries one large white rounded chip with a bold red word, placed low and off-centre. A hand-drawn orange arrow sticker overlaps the mosaic's top-left corner, pointing in."
   },
   {
    "role": "faq",
    "description": "Five stacked white pill-shaped rows in a centred column about 65% of the page wide, each with dark-red outline, hard offset shadow, question at left and chevron at right. A checkerboard strip then returns the page to red, where an oversized version of the sticker logo sits centred with a one-line copyright beneath."
   }
  ],
  "steal": [
   "Turn the primary navigation into a fan of tilted illustrated cards in the hero, centre card upright and the outer ones rotated and cropped by the viewport edges.",
   "Give every element the same die-cut sticker treatment (thick cream outline plus a hard, unblurred offset shadow in a darker shade of the background) so buttons, cards and badges read as one family.",
   "Present statistics as differently shaped badges (circle, starburst, tag) scattered at angles rather than as three equal columns."
  ]
 },
 {
  "id": "opl-rows",
  "name": "Rows",
  "url": "https://rows.gg/",
  "source": "One Page Love",
  "kind": "saas",
  "score": 7.5,
  "idea": "Radical understatement: a product about simple lists is sold with a 27px headline, 12px copy and a column of small live demos, each proving one interaction.",
  "mood": [
   "quiet",
   "dry",
   "precise",
   "warm",
   "confident"
  ],
  "archetype": "left-statement-quiet",
  "hero": "Warm off-white page, almost empty. Everything hangs on one vertical line 27% in from the left. A small striped-letter logo mark sits there near the top; 220px lower comes a two-line headline at only 27px (under 2vw), then three lines of 13px body about 370px wide, then a near-black rectangular button with 4px corners beside a text link with an arrow. A single grey sign-in link sits in the top-right corner; there is no navigation bar. More than 80% of the viewport is blank. At the bottom edge the first feature module peeks in: grey demo panel left, short text column right.",
  "type": "Suisse Intl only, weight 450–500, tracking −0.04em. Headline 27px, feature headings about 16px on two lines, body 12px. Three sizes in total, no uppercase and no display moment; hierarchy comes from weight and empty space alone.",
  "colour": "#f5f6f1 #e6e7e1 #1a191d #ffffff #c7372f #3aa56a — Warm paper off-white with slightly darker grey-green demo panels and near-black type; colour appears only inside the UI as priority dots, outlined status pills and one green or red action button.",
  "imagery": "No pictures: small live-rendered fragments of the app (two or three white list rows with dots, status pills, avatars and a visible cursor) sit in flat grey panels of fixed 368px width with barely rounded corners.",
  "layout": "One content block about 650px wide, offset left of centre, repeated down the page: 368px demo panel plus a 245px text column, top-aligned, separated by 200px or more of empty space. The logo mark sticks to the top-left corner on scroll. Footer is one line.",
  "sections": [
   {
    "role": "features",
    "description": "The repeating module: a flat grey panel roughly 368px wide and 120–190px tall holding a tiny mock list (white rows with 6px radius, a coloured numbered dot at left, task title, an outlined status pill, an avatar, a chevron) and often a cursor mid-action. To its right, 20px away and top-aligned, a medium-weight heading of one or two lines and two short paragraphs at 11–12px in a column only 245px wide. Modules never alternate sides; they stack with large gaps."
   },
   {
    "role": "cta",
    "description": "The closing block keeps the same narrow measure: a three-line paragraph at 13px, then the identical button and arrow-link pair from the hero, left-aligned on the text column's axis. After a long gap a single hairline spans the 650px block and under it sits one row of tiny footer text: brand line at left, six links and a copyright strung along the right."
   }
  ],
  "steal": [
   "Set the headline at near-body size (under 2vw) and let empty space, not scale, give it importance.",
   "Explain each feature with a tiny cropped fragment of real UI in a fixed-width flat panel, one interaction per panel, with the cursor left visible.",
   "Hang the whole page on one off-centre left edge and never break it, logo and footer included."
  ]
 },
 {
  "id": "opl-shawn-golden",
  "name": "Shawn Golden",
  "url": "https://shawngolden.org/",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.5,
  "idea": "A personal homepage as a lovingly broken desktop: browser-default Times, 1px table borders and a giant pixel-serif name frame a set of working toys (paint program, clock, joke button, character generator).",
  "mood": [
   "absurd",
   "lo-fi",
   "warm",
   "cluttered",
   "funny"
  ],
  "archetype": "giant-wordmark",
  "hero": "The whole site is one viewport divided by 1px black lines with no outer margin. Across the top, the name in a brown pixel serif at 14.4vw is cropped by both side edges in a band 170px tall. Under it: four equal bordered link cells with icons, a one-line text ticker, and a bio row with a round portrait and three lines of uppercase Times. The lower 65% is three columns: a 235px left rail (character drawing, work list, a button), a wide centre (large italic email ticker above a dark green paint canvas, dingbats beneath), and a 235px right rail (flipping word, analogue clock, weather line, navy flower panel).",
  "type": "PP Mondwest pixel serif for the name only, at 207px. Everything else is unstyled Times New Roman: 13px for links and lists, uppercase 13px for the bio, italic uppercase at about 44px for the email ticker. Links are default blue with underlines.",
  "colour": "#ffffff #023627 #ececec #8a6c50 #1f2638 #1a4be0 — White cells with black hairlines; colour arrives as isolated blocks: brown name, dark green canvas, navy flower panel with a pink bloom, pale yellow paper, browser-default link blue.",
  "imagery": "Scratchy hand-drawn characters on yellow paper, a flat vector flower animation, a round caricature avatar and the visitor's own pixel doodles; each sits in its own bordered, square-cornered cell.",
  "layout": "No scroll and no margins: a table-like grid of bordered cells fills the viewport, 235px rails either side of a wide centre, with full-width strips stacked above. Every cell holds a different widget; hierarchy comes from the oversized name and the central canvas. Mobile stacks cells full-width.",
  "sections": [
   {
    "role": "other",
    "description": "Centre cell on light grey: a dark green rectangle about 745×420px is a pixel paint canvas, centred, with a two-by-four grid of 40px square tool buttons (pencil, eraser, spray, hand, two swatches, zoom, fullscreen, trash) plus save and gallery buttons docked at its left edge. Above it a bordered strip scrolls the email address in 44px italic uppercase, link parts in dotted-underline blue; below it a strip of sixteen evenly spaced dingbat glyphs ends in an arrow."
   },
   {
    "role": "work",
    "description": "Left rail. A tall cell shows a randomly generated character drawing on a pale yellow rectangle with an underlined text control beneath to request another. Below a rule, a small uppercase heading and four entries: project name as a blue underlined link, client in black Times on the next line, a tiny double arrow at the right edge. At the bottom, a full-width outlined button with centred text."
   },
   {
    "role": "other",
    "description": "Right rail stacks four cells: a word that flips vertically between short apologies in 22px Times; a hairline analogue clock about 230px across with the city and digital time printed inside the face; a one-line temperature reading; and a tall navy cell where a pink illustrated flower sways, its stem cropped by the bottom edge."
   }
  ],
  "steal": [
   "Divide the viewport into bordered cells with 1px black lines and zero margin, and give each cell one live widget instead of a content section.",
   "Contrast one enormous bitmap-style display word against otherwise completely unstyled default serif text.",
   "Put a small working toy (a paint canvas, a random character generator) at the centre of a personal site so visitors make something before they read anything."
  ]
 },
 {
  "id": "opl-medium-rare",
  "name": "Medium Rare",
  "url": "https://www.mediumrare.site",
  "source": "One Page Love",
  "kind": "studio-portfolio",
  "score": 7.5,
  "idea": "A project index as a messy pile of coloured index cards, each slightly rotated and overlapping the last, stacked under a wordmark that fills the column.",
  "mood": [
   "playful",
   "punchy",
   "handmade",
   "bright"
  ],
  "archetype": "giant-wordmark",
  "hero": "Warm off-white paper-textured page; all content sits in a 920px centred column. A tiny header row: a struck-through-then-corrected tagline left, a small magenta diamond logo centre, a magenta email and a slider-like toggle right. Directly below, the name in black ultra-condensed heavy caps spans the full column width, about 190px tall, its baseline cut by the first card. Four full-column cards follow, each roughly 160px tall with 12px radius and a soft shadow, rotated between -1.5 and +1.5 degrees and overlapping the one above: periwinkle, lime, amber, white. Each carries a 64px condensed title top-left and a faint mono number top-right.",
  "type": "Oswald medium at 64px, mixed case, tracking -0.037em, for card titles; a heavier compressed grotesque for the wordmark (probably an image); Inter 14px for the small caps header and card subtitles; a mono for three-digit card numbers. Extreme jump from 190px wordmark to 12px labels.",
  "colour": "#f7f7f5 #000000 #97aaf6 #bbf697 #fed878 #6ef8fb — Neutral paper ground and black type; each card gets its own flat pastel or highlighter colour (periwinkle, lime, amber, cyan, yellow, lilac). Hot magenta is reserved for the logo, email and links.",
  "imagery": "No images in the list; coloured cards with type are the imagery. A subtle paper grain covers the background and the cards cast soft shadows like physical objects.",
  "layout": "One 920px column centred on the page, content left-aligned inside it. Wordmark, then about fifteen overlapping cards in one continuous stack with no section breaks, then a wide gap and a sparse three-column footer. Rhythm comes only from card colour and alternating tilt.",
  "sections": [
   {
    "role": "work",
    "description": "Fifteen full-column cards, each around 160px tall with 12px radius, a 1px darker edge and soft shadow, alternating slight clockwise and anticlockwise rotation so edges never align, each overlapping the previous by about 20px like papers dropped on a desk. Title in 64px condensed type top-left with 28px padding, a descending three-digit number in faint mono top-right, and on mobile a one-line grey description under the title. Adjacent colours never repeat."
   },
   {
    "role": "contact",
    "description": "After about 200px of empty paper, a single row: the wordmark at 30px tall on the left, a small-caps question in the middle, and a grey input with an outlined button on the right. A faint dotted rule follows, then three tiny question-and-answer columns in 10px text with magenta names, and a last line with copyright left and a live clock right."
   }
  ],
  "steal": [
   "Rotate each list row by a degree or two in alternating directions and overlap it onto the previous one, turning a plain link list into a pile of cards.",
   "Let the first card overlap and cut the baseline of the giant wordmark so heading and list read as one object.",
   "Number items in descending order with faint mono digits in the corner so the newest sits on top of the stack."
  ]
 },
 {
  "id": "opl-berd",
  "name": "Berd",
  "url": "https://berd.xyz/",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.5,
  "idea": "The page types its own headlines into an empty app window, then hands over to toy-like 3D characters and ends on a giant red face delivering a joke testimonial.",
  "mood": [
   "playful",
   "deadpan",
   "sparse",
   "toy-like"
  ],
  "archetype": "other: typed statement in empty window frame",
  "hero": "A warm light-grey field covered by a faint dot grid, with no navigation at first. Centred, a single rounded rectangle 1000px wide and 710px tall (70% of the width, 79% of the height) in a lighter grey, with three tiny traffic-light dots in its top-left corner: an empty application window. In its exact centre a headline at about 42px is typed one character at a time; the capture shows only its first letter. Nothing else is on screen. On scroll the window gives way to 90px words typing onto the bare grid with a cursor line, and a small logo and a black download tag pin to the top corners.",
  "type": "Cash Sans at regular weight with -0.04em tracking for everything from 13px body to 90px typed statements; Cash Sans Mono in tiny uppercase for card headers and labels. Body copy is unusually small, so type is either huge or tiny.",
  "colour": "#e4e4e0 #f4f4f4 #000000 #c23e29 #fff200 — Grey on grey with black type for most of the page; colour arrives late and at full strength: glossy toy characters, then a red full-bleed close with yellow type and a yellow cursor disc.",
  "imagery": "Glossy 3D toy characters (jelly, cube, rock) as cut-outs on cards; looping demo videos inside black tiles with chamfered corners; a macro close-up of a red character's face filling the last screens.",
  "layout": "Each screen holds one thing: a window, a typed phrase, a horizontal row of square demo tiles bleeding off both edges, a fanned stack of cards with a small text block at left, a full-bleed face. Large empty grey intervals sit between them.",
  "sections": [
   {
    "role": "gallery",
    "description": "A small centred title, then a single row of roughly 390px-square black tiles running off both sides of the page. Each tile has its four corners cut at 45 degrees, making an octagon, and holds a small inset demo video on black. Under each tile sit a centred one-line caption and a two-line grey quotation of the prompt at about 11px. The row scrolls sideways."
   },
   {
    "role": "features",
    "description": "Left third: a tiny monospaced uppercase label, a two-line 24px heading and five lines of small grey text, vertically centred. Right: three portrait cards overlapping like a hand of trading cards, the middle one larger and in front. Each card is off-white with a mono header and serial number, a 3D character cut-out in the upper half, a name at 28px, a short description and two small columns divided by vertical rules."
   },
   {
    "role": "testimonial",
    "description": "The grey page ends and a macro video of a shiny red character's face fills the full width for more than a screen of height, eyes at the top and smile at the bottom. Across the nose a two-line quotation in bright yellow at about 90px types itself out, centred. A yellow disc with tiny text follows the pointer. Footer links run in small type along the bottom edge of the footage."
   }
  ],
  "steal": [
   "Open on an empty application window and type the headline into it, so the first screen demonstrates the product's premise instead of describing it.",
   "Cut the corners of square media tiles at 45 degrees to give a plain video row its own silhouette.",
   "Save all saturated colour for the final screen: a full-bleed close-up with one oversized quotation set over it."
  ]
 },
 {
  "id": "opl-davesocozy",
  "name": "davesocozy",
  "url": "https://davesocozy.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.5,
  "idea": "A collage artist introduces himself by building a collage: each scroll step changes one caption and drops more paper cut-outs onto a green cutting mat.",
  "mood": [
   "cozy",
   "handmade",
   "playful",
   "warm"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Cream page with a single centred object: a green cutting mat 776px wide by 582px tall (54% of viewport width), printed with a white grid, an inner border and diagonal guide lines, casting a soft shadow. One small portrait photo lies at its exact centre, tilted about three degrees. A one-line greeting in bold monospace at 32px sits 30px above the mat. The four viewport corners hold fixed controls: a glossy green flower logo top-left and three dark brown bevelled buttons in uppercase mono (shop top-right, Instagram bottom-left, enter studio bottom-right). A small scroll cue sits under the mat.",
  "type": "Martian Mono everywhere. Bold 32px for the changing caption (one or two centred lines); 12px tracked uppercase for buttons and hints. Only two sizes, and the mono face gives a label-maker feel that suits a workbench.",
  "colour": "#ede6d4 #5c894e #241a15 #3d2b22 #ffffff — Warm cream ground, mat green as the one large colour block, chocolate brown for text and buttons. Other colour arrives only through the collage scraps.",
  "imagery": "Cut-out vintage imagery (twin-lens camera, game console, microphone, globe, fox, fish, crumpled paper) and one portrait photo, each rotated a few degrees with a slight shadow, scattered on the mat like paper scraps. A 3D room follows.",
  "layout": "A single fixed stage: nothing scrolls away, the mat stays centred while its contents and the caption above change. Corner-pinned buttons replace a nav bar. Empty cream margins of about 23% of the width on each side.",
  "sections": [
   {
    "role": "intro",
    "description": "Scroll-driven introduction on the pinned stage. The caption above the mat is replaced sentence by sentence, each as two centred lines of bold mono, and with every sentence two or three more cut-outs land on the mat around the portrait at loose angles, some overlapping it and a few flying in from outside. By the last caption the mat holds about ten scraps and a line of tiny uppercase instructions appears beneath the caption."
   },
   {
    "role": "other",
    "description": "After the intro the mat hands over to a canvas-rendered studio room that the visitor looks around with the mouse and clicks into (the page's own text lists a desk of collages, a wall of framed pieces and a television). The four corner buttons persist as the only chrome. The room itself is not in the captured frames, so its composition is unknown."
   }
  ],
  "steal": [
   "Pin one physical work surface in the centre and let scrolling add objects to it while a single caption line above changes, instead of stacking sections.",
   "Put navigation in the four viewport corners as small tactile buttons so the centre stays free.",
   "Rotate every cut-out by a different few degrees and give each a small shadow so flat images read as paper."
  ]
 },
 {
  "id": "opl-nodeck",
  "name": "Nodeck",
  "url": "https://www.nodeck.online",
  "source": "One Page Love",
  "kind": "agency",
  "score": 7.5,
  "idea": "A consultancy that claims to sell thinking rather than slides builds its site as a slide deck anyway, complete with prev/next buttons, a slide counter and presenter notes.",
  "mood": [
   "cheeky",
   "loud",
   "pop",
   "tactile",
   "ironic"
  ],
  "archetype": "giant-wordmark",
  "hero": "Flat bubblegum-pink viewport. Centre: the name as a sticker, white ultra-heavy caps with a thick black outline and offset black extrusion, bent along a gentle arc and slightly rotated, about 72% wide and 30% tall. A two-word caps label sits 80px above it; a two-line caps tagline at ~1.1vw sits below, two of its words swiped in fluorescent yellow. Photographic props crop off the corners: a yellow sticky note top-left and a highlighter pen entering top-right whose tip touches the last letter. Bottom edge is deck chrome: notes link left; previous, round lime menu and next buttons with hard black offset shadows centred; mute icon and slide counter right.",
  "type": "The wordmark is an SVG sticker in ultra-black caps. Slide titles use BN Dime Display, a fat irregular display sans, uppercase at ~7vw. Everything else is DM Sans uppercase at 14 to 16px regular. Two sizes, a sevenfold jump.",
  "colour": "#ff87ab #f5e4d6 #000000 #ffffff #def915 #e9d68b — Each slide is a flat field, pink then cream, with black type; fluorescent lime-yellow is the action and highlight colour (menu button, highlighter swipes, transition wipes). Warm and saturated.",
  "imagery": "Top-down cut-out photos of desk stationery (sticky note, highlighter, pink eraser) with soft shadows, cropped by the viewport corners and positioned to touch the type. Otherwise type only.",
  "layout": "One fixed full-viewport stage per slide rather than a scrolling page: a centred title or statement in the middle, a small logo sticker pinned top-centre after slide one, and a persistent control bar along the bottom edge. Ten slides.",
  "sections": [
   {
    "role": "other",
    "description": "Every slide opens on a cream full-viewport title card carrying only a tiny caps slide-number label and, about 20px beneath it, the slide's title in fat black display caps at ~7vw, centred slightly above the middle. The title rises from behind a mask, then gives way to the slide body on the same stage. A fluorescent yellow brush-stroke band wipes across the screen between slides."
   },
   {
    "role": "intro",
    "description": "A pink stage with the small sticker logo pinned top-centre and a pink eraser photograph cropped near the top-right corner. A tiny caps slide label sits at one third height; body copy then builds in word by word in heavy caps starting from the left margin at mid-height. The deck controls stay fixed along the bottom edge throughout, with the counter advancing."
   }
  ],
  "steal": [
   "Borrow another medium's chrome (deck controls, slide counter, presenter notes) as the site's navigation to make the brand's argument.",
   "Crop real desk objects off the viewport corners and let one physically touch the wordmark so photo and type share a scene.",
   "Use a highlighter swipe both as text emphasis and as the full-screen transition wipe, tying a small detail to the large motion."
  ]
 },
 {
  "id": "opl-vestris",
  "name": "Vestris",
  "url": "https://vestris.ai",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.5,
  "idea": "Dry title-settlement software wrapped in a calm painted countryside: gouache-style foliage and skies frame the product so paperwork feels pastoral.",
  "mood": [
   "calm",
   "pastoral",
   "editorial",
   "warm",
   "polished"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Cream field. Nav in a ~1150px container: serif-italic wordmark with a compass icon left, three links centred, sign-in and an olive rounded button right. A centred stack begins at 17% height: a small bordered backer badge, then a one-line serif headline at ~6.7vw, its last two words italic, flanked by oversized parentheses pushed about 100px away from the words so the line spans 60% of the width. A three-line grey sans paragraph (~570px) and an olive button follow. From 62% height a sky-painted panel rises, holding a browser-framed app screenshot ~900px wide, cropped by the fold. Painted leafy branches grow in from both viewport edges, overlapping cream and panel.",
  "type": "Instrument Serif regular at 96px (-0.03em) for headlines, typically one roman line and one italic line; Geist 18px grey for body and 14px for interface text. Section heads sit near 56px. About four sizes; headings are always centred.",
  "colour": "#f2efe5 #62654e #bcd3e6 #3f5a2a #fafaf8 #2a2a26 — Warm cream ground, olive buttons, charcoal serif type; sky blue and leaf green arrive only through the painted illustrations. Sections stay cream apart from illustrated panels and the landscape footer.",
  "imagery": "Painterly gouache-style illustrations (foliage, clouds, a bee, a handshake framed as a perforated postage stamp, a farmhouse landscape) combined with clean app screenshots in rounded browser frames sitting on the painted skies.",
  "layout": "Centred throughout in a ~1150px container: headline, short paragraph, button, then media. Bare cream screens alternate with large rounded sky-painted panels inset about 20px from the viewport edges; three-column card rows hang off the panels. Vertical gaps exceed 150px.",
  "sections": [
   {
    "role": "features",
    "description": "A rounded-corner panel inset about 20px from the viewport sides, filled with a soft painted sky and a leaf branch entering bottom-left. Centred inside: a two-line serif heading at ~4vw (roman line, then italic line) and a two-line grey sentence. Three white rounded cards in a row overlap the lower part of the panel, each with a bold sans title and three lines of small copy."
   },
   {
    "role": "intro",
    "description": "A bare cream screen with a small painted bee inside a faint circle, centred above a two-line serif heading whose first line is roman and second italic. The letters fill from pale grey to charcoal as the reader scrolls (caught mid-word in the capture). A two-line grey sentence sits beneath. Nothing else occupies the viewport."
   },
   {
    "role": "features",
    "description": "Three columns. The outer two each hold a centred two-line serif subhead near 28px, four lines of grey copy and a proof line with a small tick icon. The middle column holds a handshake painting cropped as a postage stamp with a perforated white edge, tilted about ten degrees, breaking the row's symmetry of text."
   },
   {
    "role": "footer",
    "description": "A full-bleed painted landscape (hills, a white farmhouse, a fenced path) about one viewport tall, with a dark green scrim rising from the bottom. Two buttons float over the sky at top centre. The wordmark and a one-line descriptor sit bottom-left, two short link columns bottom-right, and a legal row runs along the base, all in cream."
   }
  ],
  "steal": [
   "Widen a short headline by setting it between oversized parentheses spaced far from the words.",
   "Commission one painted illustration style and use it for section backgrounds, spot icons and the footer, with clean interface screenshots sitting on top.",
   "Crop a spot illustration as a perforated postage stamp and tilt it between two text columns to break a three-column row."
  ]
 },
 {
  "id": "opl-rsquad",
  "name": "RSquad",
  "url": "https://rsquad.io",
  "source": "One Page Love",
  "kind": "agency",
  "score": 7.5,
  "idea": "The six letters of the name are detached red monospace glyphs that float over the whole page and reshuffle their constellation as you scroll, while the actual content sits quietly underneath in tiny mono.",
  "mood": [
   "irreverent",
   "stark",
   "cryptic",
   "playful",
   "confident"
  ],
  "archetype": "type-poster",
  "hero": "White viewport with no imagery. Three tiny uppercase mono nav words sit on the top edge at far left, exact centre and far right, the active one underlined. The wordmark is exploded into six red monospace capitals, each about 12% of viewport height, placed on a loose ring roughly 45% of the viewport wide: R alone at top centre, S and D at mid-left and mid-right, Q and A lower, U at bottom centre, with three small red vertical blocks as punctuation between them. Inside the ring sits a two-line 20px mono tagline, a small hooked arrow and one underlined text link. The outer thirds are empty.",
  "type": "Elma Mono Variable at weight 300, uppercase, 20px for nav, taglines and body; the red letters are the same mono enlarged about six times. Cortese Trial, a light flared serif in tight capitals, sets pull quotes at about 4.4vw; Inter for small link captions. Three sizes in total.",
  "colour": "#ffffff #fa2420 #111111 #000000 #d9d9d9 — White ground with thin black text and one saturated signal red reserved for the floating letters and blocks; the closing screen inverts to black with white and red line ornaments.",
  "imagery": "No photographs. The red letters are the imagery, plus small engraved-style ornamental roman numerals inside dotted selection boxes and, on the last black screen, white line-drawn vines with red star flowers.",
  "layout": "One centred column about a third of the viewport wide with huge side margins. Sections are short centred stacks: ornamental numeral, two-word title, mono paragraph, then two or three columns of underlined links with one-line captions. Wide serif quotes break the narrow rhythm.",
  "sections": [
   {
    "role": "features",
    "description": "Chapter block: at top centre a tall dotted-outline box with tiny square corner handles, like a selected frame in a design tool, holds an engraved roman numeral and a two-word stacked title; dotted diagonals fan out beneath it like a tent. Below comes a centred two-line mono paragraph, then a row of two or three underlined project names, each marked by a small black square above and a one-line sans caption below."
   },
   {
    "role": "testimonial",
    "description": "Pull quote in light serif capitals at roughly 4.4vw, centred, five tightly leaded lines about 60% of viewport width, wrapped in guillemets and filling the top half of the screen. Red mono letters and blocks pass over and between the words, deliberately colliding with the text. No attribution, rule or card; the next numbered chapter box starts directly below."
   },
   {
    "role": "intro",
    "description": "A three-line mono paragraph centred at the top, then three short sans statements arranged as a triangle (two side by side, one below centre), each topped by a small black square. The block ends with a two-line serif-capitals sign-off at about 4vw, centred, with the red letters clustered directly on top of it."
   },
   {
    "role": "cta",
    "description": "Closing screen flips to solid black: a second serif-capitals quote in white, centred, with one small mono line above it. White line-drawn vines and red star flowers creep in from the lower corners and right edge, and the red letters now run in a loose vertical chain through the quote. The three-word nav stays pinned in white."
   }
  ],
  "steal": [
   "Break the wordmark into single glyphs and place them as a loose ring around the tagline, keeping the centre for a two-line statement and one text link.",
   "Use one typeface at only two extremes (20px mono for everything, the same mono at six times the size in the accent colour) and bring in a serif-capitals face solely for quotes.",
   "Mark chapters with a dotted selection box with corner handles around an ornamental numeral instead of a heading bar or eyebrow."
  ]
 },
 {
  "id": "opl-nia-creative",
  "name": "Nia Creative",
  "url": "https://niacreative.co",
  "source": "One Page Love",
  "kind": "agency",
  "score": 7.4,
  "idea": "The three-letter wordmark becomes a slot-machine reel: the name repeats vertically and its middle letter is swapped for a square of client photography or video.",
  "mood": [
   "warm",
   "confident",
   "social",
   "polished"
  ],
  "archetype": "giant-wordmark",
  "hero": "Pale grey field with a slim nav: bracketed lowercase logo top-left, four uppercase mono links centred, a black pill button top-right. The centre 43% of the width holds a vertical reel of the wordmark stacked three times in very heavy black grotesk, each row about 230px tall; in every row the middle letter is replaced by a square photo or video tile (surfers, a woman holding glasses over her eyes, a burger). The middle row is sharp; rows above and below fade out through gradient masks. A bottom strip carries a mono descriptor at left and city plus live clock at right. A plum band starts at the fold.",
  "type": "A heavy, tightly tracked grotesk (xgnl) carries the wordmark, a 70px lowercase section word and bold 20 to 34px statements; body is the same face at 14px, bold. Geist Mono in small capitals handles nav, categories, bracketed indexes and the clock.",
  "colour": "#f3f3f3 #574d56 #515144 #1c1c1c #b9aebd #b3b586 — Pale grey base with black type. Two muted full-width bands, dusty plum and olive, set their text in a lighter tint of the band colour rather than white. Photography supplies the saturation.",
  "imagery": "Flash-lit hospitality and lifestyle photography plus short video: cocktails, hotel rooms, food, trail runners. Portrait tiles with one or two large rounded corners, square tiles inside the wordmark, and an edge-to-edge three-up strip.",
  "layout": "28px side margins and a three-column grid for work. Big lowercase section words sit flush left with a small paragraph flush right. Sections alternate pale grey grids, coloured statement bands and full-bleed image strips; a black rounded nav bar pins to the top after the hero.",
  "sections": [
   {
    "role": "intro",
    "description": "Dusty plum band about one viewport tall. A bold 34px statement in pale lilac sits top-left across half the width, one phrase underlined with a hand-drawn stroke. Lower left, a small heading and eight industries in tiny uppercase mono split into two bulleted columns. At the right margin a tall portrait photo, about 20% of the width, with large rounded corners, overlaps the band's top edge and leaves the middle of the band empty."
   },
   {
    "role": "work",
    "description": "A 70px heavy lowercase word flush left with a three-line 14px paragraph flush right on the same baseline. Below, three equal columns with wide gutters: each has a portrait image narrower than its column with a large radius on the bottom-right corner only, then a 20px project name, a mono uppercase category and a four-line bold description. Rows repeat with no dividers or card backgrounds."
   },
   {
    "role": "cta",
    "description": "Three photographs or clips butt together edge to edge with no gaps, each a third of the viewport wide and about 40% of a screen tall. Immediately below, an olive band: a three-line 26px statement in pale olive at left with one underlined phrase, two lines of small copy beneath it, and a small rounded portrait image tucked into the lower right corner."
   },
   {
    "role": "features",
    "description": "Services as stacked sheets. Each is a full-width panel with a 1px outline and large top-corner radius that slides up over the previous one. The left half is empty except for a centred column: a bracketed mono index, a 26px bold title and four centred lines of sub-services. The right half is one photograph with rounded corners filling the panel height."
   }
  ],
  "steal": [
   "Drop a photo tile into the wordmark in place of one letter and run the lockup as a vertical reel with masked top and bottom rows.",
   "On coloured bands, set type in a lighter tint of the band's own hue instead of white to keep the band calm.",
   "Round only one corner of each image tile, the same corner every time, as a quiet signature shape."
  ]
 },
 {
  "id": "opl-uglycash",
  "name": "UGLYCASH",
  "url": "https://ugly.cash/",
  "source": "One Page Love",
  "kind": "finance",
  "score": 7.4,
  "idea": "A money app sold like streetwear: one shouted condensed headline over the phone, then sticker-covered 3D props where feature icons would normally go.",
  "mood": [
   "loud",
   "irreverent",
   "glossy",
   "youthful"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Near-white page. A floating light-grey nav bar only 35% of the viewport wide sits centred 20px from the top: condensed wordmark left, two social icons in the middle, an app button with a glowing magenta outline right. Directly beneath, a two-line uppercase headline in bold condensed grotesque at 11.4vw, centred, leading under 0.9, about 60% of the width, with a faint cyan and magenta fringe on the letter edges; it fills the band from 12% to 43% of the height. A single phone mockup 27% of the viewport wide rises immediately under the headline, centred, cut off by the bottom edge. Its magenta screen glow is the only colour.",
  "type": "Helvetica Now Display Condensed Bold in capitals at 164px with -0.033em tracking and very tight leading; the same face in mixed case near 34px for section headings. Inter at 14px, semi-bold, for captions. Two faces and a roughly 12:1 jump.",
  "colour": "#f7f7f7 #000000 #ffffff #ff00e6 #b6ff00 #00aeef — Off-white ground, white cards, black type. Neon magenta, lime and cyan appear only as whole-card fills, glows and stickers, never in text. Cool and synthetic overall.",
  "imagery": "Phone mockups with real app screens, plus glossy 3D props (money bags, a holographic card, an eagle, a wet-floor sign, banknotes) covered in die-cut stickers, each centred in a rounded card; some cards have grainy neon gradients.",
  "layout": "Content sits in a centred column about 60% of the viewport wide. Sections open with a left-aligned condensed heading, then rows of two or three rounded cards with captions placed outside and below. A horizontal carousel and a centred uppercase statement break the rhythm.",
  "sections": [
   {
    "role": "features",
    "description": "A left-aligned two-line condensed heading near 34px above a row of three equal cards with 8px gaps and small radius: one pale grey with a cropped balance readout and tilted stickers, one white with two 3D money bags, one solid cyan with a phone cropped at the bottom. Captions sit beneath each card rather than inside: a bold one-word title and two short 13px lines."
   },
   {
    "role": "showcase",
    "description": "Two near-square cards side by side, each half the column. Left: a grainy lime-to-lilac gradient with a white floating panel listing three rows, each with a flag, a label and a small pill button. Right: a white card with a black holographic payment card tilted about 25 degrees, stickers stuck to it. A later pair repeats the pattern with a solid magenta card holding a white icon-grid panel."
   },
   {
    "role": "other",
    "description": "Trust carousel: a horizontal row of tall cards, each showing one 3D object centred (a chrome eagle on white, a banknote on solid lime, a yellow wet-floor sign with hand-lettered warning). The title sits inside the first card and below the others. A tiny two-dot pager is centred underneath and the next card peeks in orange at the right edge of the column."
   },
   {
    "role": "footer",
    "description": "A white rounded panel the width of the column in which the wordmark is scaled to fill the panel edge to edge, about 55% of the viewport, in black ultra-condensed capitals. Beneath it, one row with a small parent-brand credit at left and two store badges at right, then legal small print in 11px at left and four right-aligned links."
   }
  ],
  "steal": [
   "Make the nav a short floating bar a third of the viewport wide so the headline can start almost at the top edge.",
   "Replace feature icons with one photoreal 3D prop per card, each covered in die-cut stickers, and keep captions outside the card.",
   "End with the wordmark scaled to exactly fill a white footer card, with all legal text beneath it at 11px."
  ]
 },
 {
  "id": "aww-united-carriers",
  "name": "United Carriers",
  "url": "https://unitedcarriers.com/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 7.4,
  "idea": "One operator covering every route, shown literally as a dot-matrix globe with route arcs and country tags beside a blunt three-line promise.",
  "mood": [
   "technical",
   "nocturnal",
   "confident",
   "industrial"
  ],
  "archetype": "split-text-media",
  "hero": "Near-black starfield fills the viewport. A huge dot-matrix globe sits right of centre, about 90% of viewport height, bleeding off the right and bottom edges, rimmed orange on top and electric blue below, with small black country tags and orange pins. Wordmark top-left; the nav is a vertical stack of six mono links starting 29% from the left, the same x as the headline. A white pill button sits top-right under a hairline utility strip. The headline is three uppercase lines at 5.6vw in the lower half, overlapping the globe edge, with a small label above and a paragraph and two pill buttons below. The left quarter stays empty.",
  "type": "BT Steinhart bold uppercase, zero tracking, squared techno letterforms, for 80px headlines and statistic numerals over 100px. BT Steinhart Mono uppercase at about 11px for nav, tags and buttons. Helvetica Neue 13 to 16px for body. Emphasis comes from grey versus black lines, not weight changes.",
  "colour": "#060503 #ffffff #1e4bff #f26a1b #9a9a9a — Black hero and footer band, pure white body, no mid-tones. Orange and electric blue live only in the globe rim, pins and the cut-out machinery, so colour always belongs to an object.",
  "imagery": "WebGL dot-matrix globe with glowing rim and route arcs; below, a cut-out teal reach-stacker and stacked shipping containers standing on pure white; one small square-cornered aerial road thumbnail; a dot-matrix world map in the footer.",
  "layout": "An offset column about 29% from the left carries nav, headline and body, leaving the far left for the logo or small thumbnails. White sections use two columns: statement left, stacked oversized statistics right split by hairlines. Very long scroll with generous voids.",
  "sections": [
   {
    "role": "stats",
    "description": "White field, two columns. The left column holds a small square-cornered thumbnail at mid-height and, below it, a four-line uppercase statement at about 3vw whose first two lines are mid-grey and last two black. The right column stacks statistics: a one-line caption over a hairline, then a numeral around 7vw tall in heavy squared caps with a small label under it, another hairline, then the next numeral. Numerals align to the column's left edge."
   },
   {
    "role": "showcase",
    "description": "Pure white section about one viewport tall containing only cut-out objects right of centre: a teal reach-stacker with its boom raised diagonally and three stacked containers in grey, navy and orange. The objects stand on the section's bottom edge, which meets a full-width black band, so the black reads as ground. No caption, card or shadow."
   },
   {
    "role": "footer",
    "description": "White footer on a faint hairline grid: tagline top-left, then a row with round social icons at left, three link columns in the middle and payment logos at right. Below, a horizontally running line of industry names in pale grey at about 1.5vw with two tiny mono tabs above it, then address blocks beside a small monochrome photo and a dot-matrix world map that echoes the hero globe."
   }
  ],
  "steal": [
   "Replace the horizontal nav bar with a vertical stack of links aligned to the headline's left edge, so nav and headline form one column.",
   "Split a statement into grey lines and black lines instead of using bold or an accent colour for emphasis.",
   "Stand cut-out machinery on the bottom edge of a white section so the dark band that follows becomes the ground."
  ],
  "media": "A WebGL dot-matrix globe covers the right 63% of the first screen, bleeding off the right and top edges on a black starfield, with the headline column overlapping its limb. Then a sticky stage dives through its atmosphere into the white page, and scroll-scrubbed cut-out machinery and containers stand on pure white above a black ground band that rises to become the next background, a truck holds on the seam while services scroll beneath it, and a top-down road map zooms as the vehicle turns; 34 pictures, mostly cut-outs, no video.",
  "motion": "No preloader; the hero is complete at 400ms and only the globe turns (load 11.5s in the background). Lenis and Barba drive a chain of CSS-sticky stages (16 sticky elements, no pins) scrubbed by script: the reach stacker lifts and swings, the ground band grows from 40px to 80% of the screen, the dark band moves sideways at about 1.4x scroll speed, and titles type on letter by letter with the newest letters in brand blue, mostly at .4s on the house curve cubic-bezier(.445,.05,.55,.95)."
 },
 {
  "id": "aww-l-i-s-a",
  "name": "L.I.S.A.",
  "url": "https://lisa.locomotive.ca/en",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.4,
  "idea": "The agency site is replaced by a conversation with a TV-headed 3D character whose CRT face draws expressions while she types to you.",
  "mood": [
   "deadpan",
   "retro-futurist",
   "minimal",
   "characterful"
  ],
  "archetype": "immersive-webgl",
  "hero": "A grey studio backdrop with a soft radial light fills the viewport; the whole site is this one screen. Right of centre, a 3D bust in a lilac turtleneck wears a boxy CRT television for a head, cables looping around the neck; the figure is about 83% of viewport height, cropped at the chest by the bottom edge. The TV screen shows a changing glowing shape. At left mid-height, three lines of 26px regular grotesk in black are the only copy. Top-left: wordmark and a small star-like glyph; top-right: one text link. Bottom-right: a black capsule with two sound toggles. A thin progress bar sits on the bottom edge.",
  "type": "HelveticaNowDisplay regular at one size, 26px, for wordmark, link and dialogue; earlier lines fade to pale grey and blur rather than shrinking. A block cursor follows typed text. Reply options are about 11px labels in white pills. No headline in the usual sense.",
  "colour": "#979797 #c9c9c9 #000000 #cdbfd0 #3b5bff #ffffff — A mid-grey studio gradient with black text; the only colour is the lilac sweater, blue indicator lights on the TV and chromatic fringing in the CRT glow.",
  "imagery": "One real-time 3D character: a CRT-television head with tangled cables on a mannequin torso, lit like a product shot on seamless grey. The screen displays brush-drawn white line faces, glitches and glowing eyes.",
  "layout": "A single non-scrolling screen. Text column fixed at left mid-height, character fixed at right, small utilities in the four corners. Content changes in place as the dialogue advances; mobile moves the text into a white sheet with rounded top corners rising from the bottom edge.",
  "sections": [
   {
    "role": "other",
    "description": "Same frame, next state: the greeting stays where it was but turns pale grey and slightly blurred, and a new three-line message types in directly below it in black at the same 26px size, ending in a solid block cursor. The TV face switches to a white brush-drawn glyph, two asterisks joined by an arc, that reads as squinting eyes. A small black circular restart button appears at bottom-left."
   },
   {
    "role": "cta",
    "description": "When the message finishes, four small white pill buttons appear beneath it in two rows of two, left-aligned with the text, each roughly 110px wide with 11px labels, followed by a single line containing an underlined email address. The TV face changes to two large soft glowing circles as eyes. Nothing else enters; these pills are the entire navigation of the site."
   }
  ],
  "steal": [
   "Demote earlier lines of a conversation by fading and blurring them in place instead of scrolling them away, keeping one type size throughout.",
   "Give a 3D mascot a screen for a face so expressions can be cheap 2D line drawings rather than rigged facial animation.",
   "Offer navigation as three or four small reply pills that appear only after the character finishes speaking."
  ],
  "media": "One fixed full-bleed WebGL scene is the whole page: a 3D bust right of centre, about 60% of the height with the shoulders cropped by the bottom edge, whose CRT-screen face plays short clips with scanlines and glow. Corner controls sit over the render, there are no img or video elements, and on the phone the canvas sits above a white chat sheet that grows upward.",
  "motion": "Preloader lines scramble through random characters into agency descriptors, then a hard cut at about 2.5s reveals the studio scene, where the greeting types in behind random-glyph previews and a block cursor blinking on a hard 1s step. There is no document scroll: older chat lines rise and blur over 0.3s and reply pills fade and rise, mostly at .3s on the dominant ease cubic-bezier(0.215,0.61,0.355,1) (46 uses), with 5 reduced-motion rules."
 },
 {
  "id": "aww-risk",
  "name": "RISK",
  "url": "https://www.risk.film",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7.4,
  "idea": "The site is a camera viewfinder: full-bleed film frames cut by glass-shard transitions, with credits, timecode and a small HUD laid over like on-monitor data.",
  "mood": [
   "kinetic",
   "cinematic",
   "technical",
   "daring"
  ],
  "archetype": "video-reel",
  "hero": "Full-bleed film frame (an athlete mid-leap against teal sky beside a stone church), sliced by faint diagonal facets that offset parts of the image. At exact centre the wordmark, heavy italic extended capitals about 270px wide, is rendered as embossed refractive glass. All text is 9 to 13px uppercase cream: three nav words top-centre; client name at the mid-left edge and project title at the mid-right edge, level with the logo; director credit bottom-left; timecode bottom-right. Two dotted vertical hairlines divide the frame into thirds. Bottom-centre, a 295x95px outlined box split into cells holds a monogram, a motto, chevrons and line glyphs, with two links joined by a rule above.",
  "type": "Syncopate bold, uppercase, slightly negative tracking, at just 9 to 13px for every label; Red Hat Display for the smallest credits. No text exceeds 0.9vw, so the only large letterforms are the glass logo. Effectively one size tier.",
  "colour": "#2c5357 #776b45 #1d3a66 #c9a06f #e8e0cc #000000 — Colour is whatever the current film frame supplies (teal skies, sandstone, skin, deep blue) under a consistent filmic grade; overlay text and lines are a single warm cream.",
  "imagery": "Full-bleed commercial film footage: sport, close-up skin, domestic interiors; low angles, motion blur, teal-and-amber grade. Transitions break the frame into angular mirrored shards. No inset images.",
  "layout": "One full-viewport frame per project in an endless vertical loop; overlay elements sit at fixed anchors (four corners, mid-left, mid-right, top-centre, bottom-centre) on a symmetric three-column guide. The layout never changes; only footage and labels swap.",
  "sections": [
   {
    "role": "work",
    "description": "Each project reuses the hero frame exactly: new footage fills the screen, the mid-left label changes to the client, the mid-right to the film title, bottom-left to the director, and the timecode keeps counting. The glass logo stays centred and picks up the colours of whatever is behind it, rust over skin or grey-white over an interior. The outlined HUD box and nav never move."
   },
   {
    "role": "other",
    "description": "Transition state. Between projects the image fractures into large triangular and parallelogram shards along 45-degree lines: some shards show the outgoing film, others the incoming one, slightly displaced and mirrored, so two frames coexist for a moment like light through a cut prism. The dotted verticals and cream labels stay perfectly still on top, which makes the overlay read as a fixed lens."
   }
  ],
  "steal": [
   "Overlay a film reel with fixed viewfinder data (credits at the edges, timecode in a corner, dotted third-lines) so project metadata feels like camera information.",
   "Render the logo as transparent refractive glass over the footage so it takes its colour from every frame instead of having one.",
   "Keep every overlay element at one tiny size and anchor each to a corner or edge midpoint, leaving the centre of the frame to the picture."
  ],
  "media": "Footage is the whole site: one fixed full-screen WebGL stage plays six commercial films in turn, each covering 100% of the screen under a uniform dark overlay, with a glass wordmark about 20% of the width at dead centre refracting the film and 45-degree glass shards cutting into the frame. No img or video elements; labels sit at the four edges.",
  "motion": "An intro of about 2s: a moving gradient field with the wordmark and a counter that travels from the bottom-right to the top-right corner as it reaches 100. Lenis drives an endless reel over a document about 540,000px tall that starts in the middle, each 900px wheel step cutting to the next film with no pins or section changes, while labels rise 30px when they change (twelve GSAP y tweens) and the CSS has no cubic-beziers at all."
 },
 {
  "id": "opl-proooof",
  "name": "PROOOOF",
  "url": "https://proooof.app",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.4,
  "idea": "The product's output is the page: a wall of photos each wearing its coloured EXIF strip, with all the copy folded into one small floating card.",
  "mood": [
   "playful",
   "photographic",
   "compact",
   "nerdy"
  ],
  "archetype": "other: floating-card-over-image-wall",
  "hero": "The whole viewport is a six-column masonry of photographs on a warm off-white ground with about 15px gutters, columns offset vertically so rows never line up. Each photo has a flat strip fused to its bottom edge carrying tiny monospaced capture data, every strip a different solid colour (black, red, orange, yellow, violet, green). Dead centre floats a white card about 380px wide and 410px tall with roughly 28px corner radius and a soft shadow. It contains an extended wordmark with chained O's, a two-row accordion with the first row open, an App Store badge and a monospaced line of links. There is no navigation.",
  "type": "An extended, heavy wordmark with interlocked O's is the only display type. Card text is Wintyr VF at about 14-16px, medium weight for accordion headings. EXIF strips and footer links are monospace at roughly 8-13px. No headline anywhere.",
  "colour": "#f3eee9 #fafafa #191818 #ff6a2b #f7c531 #5a4fcf — Colour comes from the photographs and the saturated caption strips, one hue per photo. Card and gutters stay off-white; a final panel flips to near-black with grey characters.",
  "imagery": "Casual travel, food, pet and concert photos in mixed portrait and landscape crops, square corners, ungraded, tiled edge to edge. The page ends on an ASCII-art rendering of a hand holding a camera.",
  "layout": "Effectively a single screen: the photo wall sits behind a centred card that carries every word. Six columns on desktop, two on mobile where the card widens to nearly full width. The only second scene is a dark, inset ASCII panel.",
  "sections": [
   {
    "role": "features",
    "description": "All product copy lives in the centred card as an accordion: a row with heading left and chevron right, a hairline divider, the open panel's four-line paragraph, a centred store badge, another divider, a collapsed second row, then a small monospaced line with a version number and underlined links. The card stays put while the wall remains visible on all four sides."
   },
   {
    "role": "gallery",
    "description": "Each tile is a photo with a data strip attached below: two or three rows of monospaced text, four values spread evenly across the first row, date and time at opposite ends of the second, maker and model on the third. Strip and text colours change per tile, for example yellow on black, black on yellow, white on violet, so a uniform grid looks varied."
   },
   {
    "role": "cta",
    "description": "The closing panel is a near-black rectangle inset with wide margins and filled edge to edge with rows of grey ASCII characters that resolve into a picture of a hand gripping a camera. One line of tiny monospaced uppercase text sits at the exact centre as the call to action. No button and no logo."
   }
  ],
  "steal": [
   "Show the product's output at wall scale as the background and confine all copy to one small card on top of it.",
   "Give every repeated tile its own flat accent colour for the caption strip so a strict grid reads as lively.",
   "Hold the explanatory copy in an accordion inside the hero card so the page needs no scrolling."
  ]
 },
 {
  "id": "aww-artem-shcherbakov",
  "name": "Artem Shcherbakov",
  "url": "https://artemartemartem.com/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.4,
  "idea": "A director's reel hides behind a small pill-shaped window that scrolls open to fill the screen, while neon-green marker scribbles deface the polite typography.",
  "mood": [
   "irreverent",
   "raw",
   "playful",
   "lo-fi",
   "energetic"
  ],
  "archetype": "other: three-part-row-with-video-portal",
  "hero": "White page. Three nav words are pinned to the very top: one hard left, the name centred, one hard right, in bold condensed lowercase about 28px, touching the edges. The content is a single horizontal row at mid-height in three equal parts. Left: a two-line greeting in an ultra-heavy rounded sans at about 6vw, with a neon-green hand-scrawled word and underline drawn over it. Centre: a vertical rounded-rectangle window about 180 by 300px showing zoomed, pixelated video. Right: a green doodle face above a centred six-line bio at about 22px. A tiny grey scroll cue sits bottom-centre. More than 60% is white.",
  "type": "EaseDouble at weight 900 with -0.08em tracking, letters nearly fused, for display; plain Arial Narrow for nav and body, bold in the nav. About 88px display against roughly 22px body. Display type melts into soft blobs between states.",
  "colour": "#ffffff #0e0e0e #17e84a #ff2ecb — Black on white, inverting to white on near-black for the footer. One neon green is reserved for hand-drawn scribbles and doodles, with a single touch of magenta.",
  "imagery": "CG character footage treated with scanlines, colour fringing and heavy pixelation, shown first inside a small pill mask and then full-bleed. Crude marker doodles (faces, robot, clapperboard) in green outline are scattered around it.",
  "layout": "A short single-scroll sequence: three-part intro row, full-bleed video with a stacked project list, a centred paragraph in display type, a dark contact panel. Nav words stay in the top corners throughout. No grid lines, no cards, no section headings.",
  "sections": [
   {
    "role": "work",
    "description": "The video fills the viewport edge to edge. Project names are stacked bottom-left in the heavy rounded face at about 5vw, lowercase with tight leading, in translucent white so footage shows through; the active name turns solid white and gets a green scribble across it. The list runs off the bottom edge. In a later state the video shrinks to a rounded rectangle about two-thirds of the viewport wide."
   },
   {
    "role": "intro",
    "description": "A centred five-line paragraph set entirely in the 900-weight rounded display face at about 4.5vw on white, tracked so tightly the letters touch. The last line is caught mid-reveal as soft black blobs, showing that each line condenses from a blurred, gooey state into legible type."
   },
   {
    "role": "contact",
    "description": "Near-black panel. A two-line centred heading in white display type sits at the top with green and magenta scribbles over a few letters. Below, a narrow centred column lists contact details in small plain sans, each preceded by a tiny grey label. Five or six green line doodles are scattered around the edges, some cropped by the viewport."
   }
  ],
  "steal": [
   "Start the showreel as a small pill-shaped mask in the hero and let scrolling grow it to full-bleed.",
   "Overdraw clean display type with a single-colour hand scribble to add personality without a second typeface.",
   "Pair one extravagant display face with a deliberately default system face (Arial Narrow) for everything functional."
  ],
  "media": "The first screen is white type with almost no picture. From the first scroll step a project reel drawn into a WebGL canvas with a scanline and colour-fringe shader covers the whole screen behind a giant credit list, then shrinks to a centred rounded card of about 720x880, and later a black pill rises and grows into a full dark panel ringed by green line doodles, all without a video element in the DOM.",
  "motion": "A tiny percentage counter runs about 4.5s, stalling at 54 for over a second, then the nav and role line sharpen from blur (filter .7s, opacity 1.2s, cubic-bezier(.33,1,.68,1)). Custom smooth scroll pins the footage while the credit list rises over it, the frame contracts into a card, manifesto words go from blur to sharp in scroll order, and a pill expands by clip-path into the contact panel; display type melts through a goo threshold before it sets."
 },
 {
  "id": "opl-builders-table",
  "name": "Builders Table",
  "url": "https://builderstable.net",
  "source": "One Page Love",
  "kind": "event",
  "score": 7.4,
  "idea": "A conference page laid out like a creative-coding workspace: generative canvases sit on a dot grid inside selection boxes with file-name tags and a live control panel.",
  "mood": [
   "technical",
   "energetic",
   "dark",
   "tool-like"
  ],
  "archetype": "other: left-statement-over-scattered-canvas-frames",
  "hero": "Charcoal page with a faint dot grid. A hairline-underlined tab bar with two text tabs runs across the top. Next row: stacked-caps wordmark at the 40px left margin, date and venue in two grey lines at 55% with a small lime square bullet, a lime rectangular button far right. The headline is two lines of uppercase grotesk at about 5.5vw, left-aligned, first line white, second mid-grey, followed by a two-line grey paragraph and two buttons. The lower 40% holds four outlined canvases at different sizes and heights, each with white corner handles and a tiny coloured mono tag: a plus-sign field, green smoke, a cyan dot-matrix portrait, a slider panel.",
  "type": "Laygrotesk at weight 400 for everything: uppercase headlines between 5.5vw and 7vw with very tight leading and a white/grey split per line, 20px body with a tight letterfit, plus tiny mono caps for file tags, label rows and footer links.",
  "colour": "#111111 #ffffff #dafa9c #000000 #5fb6d9 #8f8f8f — Charcoal hero, white middle sections, black footer. Pale lime is the single action colour on every button and tag; cyan, magenta and green appear only inside the generative canvases.",
  "imagery": "Shader and dither canvases: grids of plus signs, green noise clouds, portraits rebuilt from coloured dots. Framed with one-pixel outlines, square corner handles and file-name labels, as if selected in a design tool.",
  "layout": "40px margins, everything hung from the left edge. Dark hero with scattered frames, then orderly white sections, each opened by a three-part mono label row over a hairline and a two-line two-tone heading; schedule and speaker lists use a sidebar-plus-rows structure.",
  "sections": [
   {
    "role": "features",
    "description": "Three equal dark tiles in a row, about 310px tall with 8px gaps, each filled with a different generative texture (plus-sign grid, magenta dither, blurred blue-grey bars). Each carries three lines of small white text anchored bottom-left with 16px padding. No icons or headings: the texture is the differentiator. The row sits directly under a white intro block with a large left paragraph and small right paragraph."
   },
   {
    "role": "list",
    "description": "A label row of three tiny mono words (left, centre, right) over a hairline, then a two-line uppercase heading, first line grey, second black, with a lime button on the same row at far right. Below: a 130px left column of two stacked day tabs, the active one black, and a right column of pale-grey rows, each with time at 20px, a small grey meta line, the title in a second column and overlapping round avatars far right."
   },
   {
    "role": "footer",
    "description": "A black panel set over the last strip of dot grid, with canvas frames peeking above it. Top-left a short-form wordmark with the year at about 6vw; top-right a three-row accordion with bracketed mono numbers, 20px labels and plus signs, separated by hairlines. Bottom-left a two-line tagline; bottom-right a column of tiny mono legal links; a final mono caps line spans the base."
   }
  ],
  "steal": [
   "Frame generative visuals with selection handles and a tiny file-name tag so decoration reads as work in progress.",
   "Split a two-line uppercase headline into two tones, one line full strength and one grey, instead of changing size or weight.",
   "Replace icon feature cards with tiles whose only differentiator is a distinct generative texture, text pinned bottom-left."
  ]
 },
 {
  "id": "aww-nothin",
  "name": "NOTHIN’",
  "url": "https://www.noth.in",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.4,
  "idea": "The studio's name set as a wordmark so large it is the whole hero, repeated in inverted colours as the footer, so 'nothing' is literally the only content on screen.",
  "mood": [
   "stark",
   "confident",
   "minimal",
   "wry"
  ],
  "archetype": "giant-wordmark",
  "hero": "The captured hero frame is a black preloader wipe; this describes the loaded state. White field. A custom heavy geometric wordmark in black spans the full width between 1% margins, vertically centred, about 30% of the viewport tall, its apostrophe hanging at the top-right. Top-left: a two-line statement at about 1.6vw with a small black pill button under it. Top-right: a tiny menu label with a four-dot icon. Along the bottom edge: a one-line studio descriptor at left, two social links and a language chip at right. Everything else is empty white, with no image and no colour.",
  "type": "PP Neue Montreal medium for statements at up to about 5vw, sentence case, tight tracking and leading; the Book cut for small text; IBM Plex Mono for tiny grey project labels. The wordmark is custom heavy geometric lettering at close to 100vw. Only three text sizes: statement, caption, micro-label.",
  "colour": "#ffffff #000000 #2b47e6 #2f5d33 #bfbfbf — Strict black and white that flips by section: white hero and intro, black works and footer. The only colour comes from inside the imagery, chiefly electric-blue foil and fern green.",
  "imagery": "3D renders of inflated chrome, crumpled blue foil and bubble-wrap hearts on black; project shots are brand mock-ups photographed in settings (a card among ferns, a laptop on a dark desk). Hard-edged rectangles of varied size, square corners.",
  "layout": "Margins of about 1%, so content runs nearly edge to edge. The intro is a left headline over a full-width black media panel; the works section places images at irregular widths and horizontal offsets with wide black gaps, each with a mono label and one-line caption above.",
  "sections": [
   {
    "role": "intro",
    "description": "White section. A two-line statement at about 5vw sits flush left under a small logo mark, filling the top quarter. Below it a black rectangle spans the full content width and runs off the bottom of the viewport, holding a 3D still life clustered at centre. On further scroll the panel shrinks to a small thumbnail docked top-right, while a parenthesised label and a four-line paragraph at caption size appear in two narrow columns at the left."
   },
   {
    "role": "work",
    "description": "Black section headed by one bold uppercase word top-left. Project images are placed as a loose scatter: one at about 48% width hugging the left margin, the next narrow and hugging the right margin lower down, the next inset to start 18% across. Above each image sits a tiny grey mono project name, then a one-line white caption at about 1.1vw. A two-line aphorism floats alone at the right between projects. Long stretches of empty black separate items."
   },
   {
    "role": "footer",
    "description": "Black, full viewport. A two-line invitation at about 5vw at the left in the upper third, with two outlined pill buttons under it; three social links stacked at about 78% across. The wordmark repeats in white at full width, anchored to the bottom, with a single row of micro-text credits beneath it."
   }
  ],
  "steal": [
   "Make the hero nothing but the name: a wordmark scaled to the full viewport width on a blank field, with only a two-line statement and one small button in a corner.",
   "Repeat the hero wordmark in inverted colours as the footer so the page opens and closes on the same shape.",
   "Place case-study images at different widths and horizontal offsets on a black field, each with a micro mono label and a single-line caption above it instead of a card."
  ],
  "media": "No picture on the desktop first screen: a full-width black wordmark on white covers about 30% of the height. Then an inset showreel with 18px gutters scrubs down into a box in the right third as text arrives on the left, a staggered two-column mosaic of 48, 32 and 65% widths, a pinned full-bleed brand film with a blurred copy behind it as a halo, cut-out 3D objects on black with letters tumbling between them, and the wordmark again, inverted, as the footer; 17 images and 4 muted looping videos.",
  "motion": "The preloader (on the phone capture) morphs a 3D inflatable through three forms while a counter runs down to 000, then white rises in a hard-edged mask to reveal the wordmark. Lenis: the showreel scrubs at 3, works cards drift at their own speeds (y scrub 1.5, yPercent scrub 3), the film pins for one screen, heading letters split and scatter, and services letters and objects tumble in on power2.in at random 0.25-0.69s durations; the house ease is cubic-bezier(.22,1,.36,1) at 0.5-0.6s."
 },
 {
  "id": "opl-superlocal-2026",
  "name": "Superlocal 2026",
  "url": "https://www.superlocaldesign.com/",
  "source": "One Page Love",
  "kind": "event",
  "score": 7.4,
  "idea": "Everything is a circle: a dot-matrix logotype whose dots become floating photo circles and glowing orbs across a grey-to-orange field.",
  "mood": [
   "playful",
   "experimental",
   "warm",
   "kinetic"
  ],
  "archetype": "immersive-webgl",
  "hero": "Mid-grey field with a faint dot grid (one dot every 33px) that fades through the lower half into saturated orange at the bottom edge. The captured first paint contains one element: a 270×80px logotype dead centre, built from black ellipses of varying size, its letters progressively compressed to the right. No nav or text yet. After loading, a cluster of four small pills (one black, three white) appears top-centre; the logo turns white inside a 330px ring of about fifty tiny circles — round photo crops, glowing orbs, coins; and the bottom edge carries the event name left and dates right in an outlined dot-matrix face 40px tall.",
  "type": "Display text is an outlined dot-matrix face drawn on canvas, about 40px caps, modules flickering. All other text is one tight bold grotesk ('fontSans') from 12 to 24px with negative tracking. The logotype is built from ellipses on the same matrix.",
  "colour": "#bcbcbc #ff641e #1a1302 #ffb740 #c13bff #ffffff — Every screen repeats a vertical fade from flat grey to hot orange. Orbs add magenta-violet cores; the footer swaps to a soft yellow glow. Text is near-black, nav pills black and white.",
  "imagery": "Event photographs cropped to circles from 60 to 240px, floating without a grid alongside hard-edged radial-gradient orbs and coin images; some pairs overlap. The logo and footer art are generated dot matrices.",
  "layout": "No visible grid: circles drift across each screen while text locks to the bottom corners (statement bottom-left, description bottom-right). A four-pill nav stays top-centre. The footer resolves into three text columns over a screen-filling dot-matrix glow.",
  "sections": [
   {
    "role": "gallery",
    "description": "No grid. Circular photo crops between 60 and 240px across float over the grey-to-orange field, a few overlapping in pairs. A flat radial orb (orange rim, magenta-violet core, about 160px) sits among them and others are cut by the viewport edges. The pill nav stays top-centre; nothing else is fixed."
   },
   {
    "role": "intro",
    "description": "Bottom-left: a small bold date line, then a two-line statement in the outlined dot-matrix face at about 36px, some modules lit orange mid-animation. Bottom-right: a two-line 12px bold description. Above them three photo circles (190px portrait near centre, poster collage left, stage shot right) and a large orb top-right."
   },
   {
    "role": "footer",
    "description": "Grey field with a huge soft yellow radial glow. The dot-matrix logo is enlarged to fill the screen, its ellipses knocked out of the yellow in grey. On top: three columns of bold 18px text (contact message and email left, press list centre, socials right), a tiny credits list, and a bottom line with dates, year and city in the same three columns."
   }
  ],
  "steal": [
   "Build the logotype from a dot matrix of ellipses of varying size, then reuse the same matrix at screen-filling scale as the footer background.",
   "Crop every photo to a circle at wildly different diameters and let them float with coloured orbs instead of sitting in a gallery grid.",
   "Fade each screen from flat grey into one saturated colour at its bottom edge so the viewport itself carries the brand colour."
  ]
 },
 {
  "id": "aww-produx-design",
  "name": "Produx Design",
  "url": "https://www.produx.design",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.4,
  "idea": "The wordmark is the hero, and the showreel image assembles itself from scattered square fragments as you scroll.",
  "mood": [
   "dark",
   "confident",
   "technical",
   "spare"
  ],
  "archetype": "giant-wordmark",
  "hero": "Near-black field with 80px side margins. The wordmark, in a wide, light-weight uppercase sans with a slashed O, runs margin to margin (about 89% of the width) with a cap height near 20% of the viewport, starting 9% from the top. A large empty gap follows. In the lower half a two-line statement at 5.1vw sits flush left; opposite it, bottom-aligned to the statement and flush to the right margin, is a three-line paragraph in small monospace about a quarter of the width. No nav bar, button or image in the first viewport; the bottom quarter is empty.",
  "type": "At Aero in light-to-medium weight for the wordmark, the 74px statement and project titles; DM Mono for the hero paragraph, bracketed nav items and uppercase project blurbs at about 11px. Three sizes; the statement is roughly five times the mono text.",
  "colour": "#0e0e0e #e4e4e4 #545e54 #303930 #6f8f3a — Near-black page with off-white type and no accent colour. Colour arrives only through imagery: moss green and sage in the showreel render, then each case-study thumbnail brings its own palette.",
  "imagery": "A 3D render of a moss-covered boulder on a sage background, first broken into scattered square tiles, then whole as a 16:9 inset. Work thumbnails are square-cornered stills and video in mixed ratios, including one vivid orange-violet gradient card.",
  "layout": "80px margins. After the hero, a small logo top-left and four bracketed mono links spread across the right half. Hero is all type, the next three screens are a pinned image assembly, then a work grid with unequal column widths and mono captions under each thumbnail.",
  "sections": [
   {
    "role": "other",
    "description": "Pinned showreel reveal on black. Eight to ten small square tiles, 60 to 100px, each a different crop of the same image, float scattered around the centre at different depths, some blurred. As scroll advances they multiply, enlarge and lock together until they form one 16:9 image inset at about 70% of viewport width, with the wordmark centred on it in white and tiny captions overlaid at left and lower right."
   },
   {
    "role": "work",
    "description": "Two unequal columns on black, roughly 52% and 30% of the width with a wide gutter. Each item is a square-cornered thumbnail with a row of small rectangular mono tags along its bottom edge; beneath it a small square bullet, the project name in the sans at about 16px and a two-line uppercase mono blurb. The next item breaks the grid: a single thumbnail centred at about 75% width."
   }
  ],
  "steal": [
   "Run the wordmark margin to margin in a light weight rather than a heavy one; thin strokes at huge size read as assured instead of loud.",
   "Pair one large sans statement with a tiny monospace paragraph bottom-aligned on the opposite margin and leave the middle of the row empty.",
   "Introduce the hero image as scattered square crops of itself that converge into the full frame on scroll."
  ],
  "media": "The fold has no media at all; the first picture is the 40s showreel, which arrives on the second screen as scattered square tiles at different depths that converge into an inset 16:9 frame, then fills 56-96% of each screen until it is full-bleed at about 4850px. Below: a staggered two-column mosaic with a centred wide interlude, a logo strip bleeding off both edges, and a pinned 3D stone centre-right with the statement docked bottom-left; zero radius everywhere.",
  "motion": "Black at 400ms, then wordmark letters rise one by one out of a baseline mask, tagline words rise in masked lines and the small blurb types itself out, settled by about 2.2s. Lenis drives a sticky, scrubbed hero in which tiles fly in from depth, blurred to sharp, assemble the frame and scale it to full bleed, then headings resolve through a pixel-slice glitch, work frames reveal by inset clip, the manifesto colours word by word and the closing stone grows moss as the ground turns from black to moss green, all as per-frame script (44,246 style mutations) with no GSAP exposed."
 },
 {
  "id": "aww-kononenko-architectural-bureau",
  "name": "Kononenko Architectural Bureau",
  "url": "https://kononenkogroup.com",
  "source": "Awwwards Site of the Day",
  "kind": "architecture",
  "score": 7.4,
  "idea": "Let the renders do the talking: one full-bleed visualisation, a name set half in grotesk and half in serif, then alternating oversized sans and serif statements on white.",
  "mood": [
   "calm",
   "rational",
   "refined",
   "spacious",
   "cool"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A single architectural render fills the viewport edge to edge: a low grey metal-clad building under a large overcast sky, wild grass across the bottom third. Type is white and tiny except for the name. Top-left at a 24px margin, the bureau name is stacked on three lines at 13px. Top-right, four links run inline separated by commas, the current one underlined. Bottom-left, the name repeats at 60px (4.2vw) on two tight lines, the first two words in grotesk and the last word in a serif at the same size. No button, no scrim, no tagline; the sky takes the upper 45% untouched.",
  "type": "Two faces (digest names are obfuscated): a tight neo-grotesk at −0.03em and a soft high-contrast serif, mixed inside one line in the name. Section statements alternate: centred sans at about 6.5vw, then left-aligned serif at 4.5vw with a first-line indent. Labels are 9px.",
  "colour": "#ffffff #000000 #b7b7b9 #7c8050 #3d3a36 #9a9a9a — White pages with black type; colour comes only from the renders' overcast greys, greens and dark timber. The footer inverts to solid black with white letters.",
  "imagery": "Photoreal architectural visualisations in muted natural light, shown full-bleed at wide panoramic crops with square corners and no overlays; one loose black ink sketch on white stands in for process.",
  "layout": "24px outer margins. Full-bleed image bands alternate with white type-only screens. Big statements either centre or run the full width; small data sits in narrow columns with tiny serif labels left of sans values, and hairline tables are inset to the right-hand third.",
  "sections": [
   {
    "role": "intro",
    "description": "White screen with a two-line sans heading centred at roughly 6.5vw, tight leading, taking the top third. Directly beneath, two tiny grey captions of two lines each sit side by side, each about 130px wide, centred as a pair. A full-bleed panoramic render starts immediately below and runs off the bottom, so the heading reads as a caption to the picture."
   },
   {
    "role": "about",
    "description": "Far left, three label and value pairs at 9px (serif label, sans value) stack in a 150px column. From 34% across, a five-line serif paragraph at about 22px runs to 90% of the width. 120px lower a second row repeats the logic for achievements: a label at far left, then two narrow list columns of awards and publications at 9px with generous gaps between them."
   },
   {
    "role": "list",
    "description": "A four-line serif statement at 4.5vw spans the full width, left-aligned with the first line indented about 3% and leading under 1. Below it, pushed into the right-hand 35% of the page, an offices table: a tiny label hangs to its left, and each row holds office type, country and city in grey, an address, and a small arrow, divided by hairlines at 18px row height."
   },
   {
    "role": "footer",
    "description": "Solid black. A top band of five tiny columns (name, navigation, media, address, hours), each a grey label beside a white list. Then a four-letter abbreviation of the name in white grotesk fills the entire width, letters about 45% of the viewport tall and touching both edges, with a single 8px legal line squeezed beneath."
   }
  ],
  "steal": [
   "Set the last word of a sans headline in an upright serif of the same size to give a plain name a signature without any graphic device.",
   "Alternate statement voices down the page: a centred grotesk heading, then a full-width left-aligned serif paragraph at display size with a first-line indent.",
   "Close with an abbreviation of the name scaled until it touches both edges of a black footer, with all practical links shrunk to 9px above it."
  ],
  "media": "One photoreal render covers the whole first screen with only the title docked bottom-left and no scrim. Below: a full-bleed 2:1 band under a centred headline, overscanned 32px per side for parallax, a staggered two-column scatter of landscape and portrait frames at uneven offsets, hand sketches drawn into the white page between statements, and a ring of small rotated square team photographs round a centred headline on black; 27 images and a fixed WebGL layer, no video.",
  "motion": "A white preloader with a progress line along the top and a counter stalled near 60 for 2.5s; by 4.5s the hero is in and the title rises out of a mask line by line. Lenis over the fixed WebGL layer: sketches build stroke by stroke on a scrub, the ground flips white to black over 0.3s at the values chapter, paragraph lines rise over 0.5s, and team photographs spiral in and settle into a ring; one ease for everything, cubic-bezier(.17,.84,.44,1), 34 uses."
 },
 {
  "id": "aww-studio-k95-3",
  "name": "Studio K95",
  "url": "https://k95.it",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7.4,
  "idea": "The whole portfolio is one WebGL room: project images orbit in rings around a chrome voxel rose inside an electric-blue gridded cylinder.",
  "mood": [
   "electric",
   "playful",
   "spatial",
   "bold"
  ],
  "archetype": "immersive-webgl",
  "hero": "A saturated ultramarine field covers the viewport, drawn with a faint dark grid that curves as if seen from inside a cylinder. At centre floats a chrome, stair-stepped 3D rose about 57% of the viewport height. Around it some twenty project images sit as upright planes on three horizontal rings: stamp-sized along the top and bottom, two large portrait ones flanking the rose, each angled toward the centre. Interface text is tiny and pinned to the edges with 58px margins: logo top left, a pill layout toggle top centre, three caps links and a language switch top right; a discipline line, a works counter and the year along the bottom.",
  "type": "One wide-set grotesk ('adaptive' in the digest) at a single small size, roughly 14 to 16px, bold, caps for nav and labels. No display headline is shown; the digest's 32px heading is not visible. The blocky geometric logo is the only large letterform.",
  "colour": "#0800b7 #1500e1 #c8ccd4 #ffffff #e9e34a #e23a28 — One electric blue fills everything; white type and chrome geometry sit on it, and every other colour arrives through the project thumbnails. A single yellow dot marks the cursor.",
  "imagery": "Project stills (posters, packaging, furniture, brand marks) as square-cornered portrait planes in 3D perspective, uncropped and ungraded, plus a reflective chrome voxel rose as the centre object.",
  "layout": "A single non-scrolling screen. Content lives in 3D space while a thin heads-up frame holds three items across the top and three across the bottom, with nothing between them but the canvas. Scrolling rotates the scene rather than moving the page.",
  "sections": [
   {
    "role": "work",
    "description": "The index is the scene itself. Scrolling or dragging spins the rings so different thumbnails swing to the front and scale up to roughly 40% of viewport height, while the rest recede to stamp size at the edges and corners. Hovering a plane attaches a small translucent pill to the cursor with an arrow, the project name and its discipline. A segmented pill at top centre switches the arrangement between rings and a spiral."
   },
   {
    "role": "footer",
    "description": "There is no footer block, only a single baseline 30px above the bottom edge carrying three items in the same small bold type: the studio's discipline flush left, a counter of shown versus total projects at centre with one underlined word linking to the full list, and the copyright year flush right. Thumbnails pass behind this line as the scene turns."
   }
  ],
  "steal": [
   "Let a single saturated colour field be the whole page and take every other colour from the work thumbnails.",
   "Offer two named arrangements of the same index through a small segmented toggle, so the layout itself becomes a control.",
   "Keep interface text to one small size pinned at the corners and centre edges, including a live count of shown versus total projects."
  ],
  "media": "WebGL covers the whole fold: about 25-30 portrait project cards (3:4, square corners, shown as photographed) on three rings round the camera, roughly 35-40% of the pixels, round a central chrome rose (about 15%), on a gridded ultramarine field. The focused card is pulled to the front at about 3x its neighbours' size, and a glass label beside the cursor names it; no DOM images and no video.",
  "motion": "Readable in about 1.2s with no preloader: the canvas fades in over 0.7s ease and the label switches from a scroll prompt to the focused project by 2.5s. The page never scrolls: the wheel, smoothed by Lenis, turns the card rings round the camera while the rose spins from face-on to edge-on about every two steps, as continuous inertial rotation with no reveals, and label lines enter over 0.95s cubic-bezier(0.16,1,0.3,1), with cubic-bezier(.22,1,.36,1) and (.4,0,.2,1) as the house eases and 9 reduced-motion queries."
 },
 {
  "id": "aww-julien-calot",
  "name": "Julien Calot",
  "url": "https://www.juliencalot.com",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.4,
  "idea": "Each series of paintings is a full-screen close crop of one canvas, with the series title, year and piece count strung along a single line at mid-height like a museum wall label.",
  "mood": [
   "vivid",
   "immersive",
   "naive",
   "gallery-like"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A painting detail fills the viewport edge to edge, a face in the centre with saturated landscape shapes around it and the canvas weave visible. All text is white and small, with no scrim. Top-left: the artist's name in bold condensed capitals about 45px tall, the largest type on screen. The same top row holds a two-item filter at 29% across and two small stacked link groups at 75% and 95%. On the vertical midline a single row reads: year at the far left, series title in condensed black caps at 1.6vw about 10% in, and a piece count preceded by a short dash at the far right. No button.",
  "type": "FF DIN Pro Condensed Black in uppercase with +0.02em tracking for the wordmark and series titles (23px); Doner, a wide bold sans, for tiny uppercase nav and meta at about 9-10px. Only two text sizes besides the wordmark; type is kept deliberately small against the art.",
  "colour": "#c76802 #2f7fc9 #2e7d3a #7a4fa0 #fafafa #bdbdbd — The interface has no colour of its own: white type over whichever painting is on screen, so each panel takes the painting's oranges, blues, greens or violets. The single-series view switches to flat light grey.",
  "imagery": "Photographed paintings in a saturated naive style, used two ways: enormous full-bleed crops showing brushwork and weave, and small complete canvases with linen edges and soft drop shadows in a horizontal row on grey.",
  "layout": "A stack of full-viewport panels, one per series, identical in structure: fixed header along the top, one label row at mid-height, nothing else. Margins are about 20px. Opening a series swaps the crop for a grey wall with one row of evenly spaced small canvases.",
  "sections": [
   {
    "role": "work",
    "description": "Six or more consecutive full-screen panels, each a different painting cropped far tighter than its frame so a detail fills the screen. The same three-part label row sits at exactly 50% height on every panel: date range at the left edge, series title in condensed caps starting about 10% in, count of pieces at the right edge. The fixed header overlays all of them unchanged, so scrolling reads like turning plates in a book."
   },
   {
    "role": "gallery",
    "description": "Flat light-grey viewport. A single horizontal row of small portrait canvases, each about 11% of the viewport wide and 24% tall, photographed with their fabric edges and a soft shadow, spaced roughly 5% apart and vertically centred; the row runs off both sides. The series label row overlaps the first canvas. About 70% of the screen is empty grey."
   }
  ],
  "steal": [
   "Crop artwork far past its edges to fill the screen and keep all text under 2vw, so the image does the shouting and the type behaves like a wall label.",
   "Run a panel's metadata along one horizontal line at mid-height: date at the far left, title a tenth in, count at the far right, repeated identically on every panel.",
   "Contrast full-bleed immersion with a sparse detail view: tiny complete works in a single row on flat grey with 70% of the screen left empty."
  ]
 },
 {
  "id": "aww-cominvi",
  "name": "CoMinVi",
  "url": "https://www.cominvi.com.mx/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 7.3,
  "idea": "A heavy-industry contractor presented with a cinematic CG mine scene and survey-style monospace annotations, then a clean white corporate report beneath.",
  "mood": [
   "industrial",
   "cinematic",
   "sober",
   "precise"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed dark blue-black CG scene of an underground cavern: rock in the foreground, haze, and a mining truck with lit headlamps right of centre. The headline is flush left at a 32px margin, vertically centred, two lines of bold white grotesk at 56px (3.9vw), filling about 40% of the width. Top-left a small boxed logo; top-right the word 'Menu' beside a 48px outlined circle with two bars. A tiny two-line mono annotation is pinned to the truck. Bottom-right, two bordered image cards about 215x140px, each with a white label strip inside its lower edge carrying mono caps and a black triangle.",
  "type": "Helvetica Now Display, bold for the hero and medium at about 28 to 32px for long statement paragraphs with tight leading, sentence case; 16px body. PP Supply Mono in 9 to 11px uppercase for labels, stat captions and buttons.",
  "colour": "#ffffff #ebf0ed #151515 #0b0d13 #293647 #e8552b — Midnight-blue hero, then alternating white and pale sage-grey (#ebf0ed) sections with near-black text. Colour comes only from photos: orange hi-vis suits and blue headlamp beams.",
  "imagery": "CG cavern scene in the hero; dark documentary photos of miners with headlamps and orange suits in landscape crops with 4px corners; a cut-out ore rock centred inside a dotted circular ring.",
  "layout": "32px margins. Each section opens with a large statement paragraph spanning about 70% of the width, prefixed by a small stacked mono tag, followed by a media-plus-data row. Backgrounds alternate white and sage-grey, with plenty of empty space below statements.",
  "sections": [
   {
    "role": "stats",
    "description": "Below a 32px statement paragraph, a row split roughly 48/52: a landscape photo at left with slightly rounded corners, and at right a grid of figures, two columns by three rows. Each cell has a hairline on top, a small line icon at left, a bold 36px number and a 9px mono uppercase caption under it. The body paragraph and a small black button sit further down at the 75% column."
   },
   {
    "role": "features",
    "description": "On pale sage-grey: a statement paragraph whose words fade from black to light grey mid-sentence, prefixed by a tiny stacked mono tag (an index code over a black label). Then a three-column grid of flat white square cards with 8px gaps: a small line icon top-left, the service name at 28px bottom-left, and nothing between, so the middle of each card is empty."
   },
   {
    "role": "showcase",
    "description": "White section. A cut-out photo of a rough ore rock stands centred inside a large circle drawn with short radial tick marks, like a gauge. Bottom-left, a vertical list of mineral names at 40px where the active one is black and the rest pale grey, with a tiny mono caption above the list and a chemical-symbol tag at the right edge of the ring."
   }
  ],
  "steal": [
   "Pin a tiny monospace data annotation to an object inside the hero image so the picture reads like a labelled survey.",
   "Start each section's large statement paragraph with a small two-line mono tag (index over section name) set inline as its first word.",
   "Use small image cards in the hero's bottom-right corner as shortcuts to key pages, each with a white label strip and arrow inside the frame."
  ],
  "media": "A real-time 3D cavern scene covers 100% of the first screen, with two small photo link cards docked bottom-right at about 15% of the width each. Below come half-grid 4:5 photographs beside stats or a short paragraph, a pinned stage with a 3D ore specimen inside a tick-mark ring, cut-out machines contained on near-black cards, and a sticky name list ending in a full-bleed photograph, all in frames with about 8px corners where the pictures sit at 1.2 scale for a scroll zoom; there is no video.",
  "motion": "No entrance was captured (the load event took 24.6s), but under Lenis long statements are split into characters (1,066) whose colour is scrubbed from pale grey to ink, headings rise over 0.8s cubic-bezier(0.5,0,0,1) on 90 spans, and the minerals section pins for five steps, each adding a fifth of dark ticks to the ring as the specimen turns. Button labels roll to a longer phrase while an arrow box slides in over .5s cubic-bezier(.32,.01,0,1)."
 },
 {
  "id": "opl-kereliott",
  "name": "Kereliott",
  "url": "https://kereliott.com/",
  "source": "One Page Love",
  "kind": "hospitality",
  "score": 7.3,
  "idea": "A quiet house gets a quiet page: one dark field, one typeface, the name set as wide as the screen and photographs left to drift in generous darkness.",
  "mood": [
   "calm",
   "understated",
   "nocturnal",
   "refined"
  ],
  "archetype": "giant-wordmark",
  "hero": "Very dark green-black field with cream type. A two-line introductory sentence at about 30px sits top-left inside 30px margins; a small cream rectangular button sits top-right. The upper half is otherwise empty. The house name fills the full content width in a flared humanist sans, mixed case, with capitals about 19vw tall, its baseline at roughly 87% of the viewport height. Immediately beneath, separated by a gap of a few pixels, the top sliver of a full-width landscape photograph enters from the bottom edge.",
  "type": "A single face, Trust, in regular weight: a humanist sans with flared terminals and old-style figures. The wordmark is an oversized graphic; all other text is one size of about 20-30px plus tiny 10px photo captions. Hierarchy is position, not weight.",
  "colour": "#161c1a #eae8dc #222926 #1f2926 — Cream on green-black from top to bottom with no accent colour. The map is drawn in a tone barely lighter than the ground, so photographs supply all the colour.",
  "imagery": "Natural-light photos of a stone cottage, garden and deck with square corners, in mixed portrait and landscape crops at differing sizes. One full-width opener, then small images placed singly with tiny captions under the left corner.",
  "layout": "30px margins, text held to the left 60% in one size. Photographs are staggered left and right at different widths with large dark gaps between, like pictures passed on a wall. The name and a booking button stay fixed in the top corners.",
  "sections": [
   {
    "role": "intro",
    "description": "A full-width landscape photograph runs margin to margin directly under the wordmark, followed after a gap by a four-line paragraph in the single text size, left-aligned and spanning about 85% of the width. There is no heading or label; the text simply continues the sentence begun at the top of the page."
   },
   {
    "role": "other",
    "description": "After a left-aligned paragraph, a silhouette map of the region sits centre-left, about half the viewport wide, filled in a green only a few percent lighter than the background. Five towns are marked with small ring dots and tiny labels; only the house's town has a solid cream dot. No border, legend or frame."
   },
   {
    "role": "gallery",
    "description": "Photographs are placed one or two per screen in a stagger: a portrait image about 30% wide against the left margin, a larger near-square one starting lower against the right margin, later a landscape image top-right of centre and a smaller one bottom-left. Each has a 10px caption under its left corner. More than half of every screen is empty dark ground."
   },
   {
    "role": "contact",
    "description": "Two short left-aligned sentences in the standard text size with underlined inline links to booking platforms and an email address, then a small cream certification badge. The footer is a single line at the very bottom: social link left, copyright centre, three underlined utility links right, with a tall empty gap above."
   }
  ],
  "steal": [
   "Size the wordmark to fill the content width exactly and let the first photograph tuck directly under its baseline.",
   "Draw a location map as a tone-on-tone silhouette with one filled dot among ring dots.",
   "Use a single typeface in one weight and essentially one text size, creating hierarchy through placement and emptiness."
  ]
 },
 {
  "id": "aww-normal-is-boring",
  "name": "NORMAL IS BORING",
  "url": "https://normalisboring.es/",
  "source": "Awwwards Site of the Day",
  "kind": "real-estate",
  "score": 7.3,
  "idea": "The brand name is split and half of it turned upside down: a plain sans first word top-left and a serif last word flipped 180 degrees bottom-right stay fixed while panels slide sideways between them.",
  "mood": [
   "refined",
   "playful",
   "warm",
   "editorial"
  ],
  "archetype": "split-text-media",
  "hero": "A white panel fills the left 80%; a full-height interior photo takes the right 20%. Top-left: the first word of the name in light geometric capitals, about 56px. Bottom-right of the white panel: an italic 'is' above the last word in bold didone, rotated 180 degrees so it reads upside down. Three small caps nav links run vertically up the panel's right edge. The 50px headline is broken into three two-line fragments on different columns and baselines: one at 21% from the left, one a line lower at 42%, one back at 21% whose last word turns bold italic didone. A seven-line 13px paragraph hangs beneath the middle fragment.",
  "type": "Izmir, a light geometric sans in capitals, for wordmark, hero fragments and 13px body; Juana, a high-contrast didone, bold italic for accent words and huge roman capitals (10-12vw and larger, cropped) for scrolling statements; Editorial New ultralight for the reversed paragraph.",
  "colour": "#ffffff #000000 #ece4da #c7d7e9 #db5c59 #1f9aa0 — White and black panels alternate with warm beige; pale blue and coral panels appear deeper in. Type stays black or white. A single teal dot acts as cursor; photos bring wood and plant tones.",
  "imagery": "Warm interior and garden photography of finished homes in natural light, wood and linen tones. Square-cornered; used as full-height strips, full-bleed panels and smaller insets laid over larger photos by about a third.",
  "layout": "Reads as a sideways journey: white, black and beige panels slide horizontally with photos and oversized words cropped by panel edges. Text fragments sit on an irregular grid; the two halves of the logo stay fixed in opposite corners.",
  "sections": [
   {
    "role": "gallery",
    "description": "The photo strip from the hero grows to a full-height panel while a second, smaller interior photo slides over it, overlapping by roughly a third. To the right a white panel carries a four-line statement in didone capitals about 90px tall, set so the lines run off the panel edge and are completed only as scrolling continues. A small 12px paragraph sits under the statement's left edge."
   },
   {
    "role": "intro",
    "description": "Full black panel. A nine-line paragraph in an ultralight serif at about 32px starts 70% of the way across and runs off the right edge; its words fade from white through grey to near-black line by line as a scroll-driven reveal. A single photo of a pool at dusk, roughly 300px square, sits alone in the lower-left third. The menu pill and flipped logo invert to white."
   },
   {
    "role": "other",
    "description": "Values panel on beige. Along the left edge a vertical ticker repeats one word in 90px didone capitals rotated 90 degrees, separated by thin eight-point asterisks. Beside it a large exterior photograph of a stone-and-glass house with a bathroom photo about half its size laid over its lower-right corner, square edges, no shadow or border."
   },
   {
    "role": "work",
    "description": "Beige panel where the project title is set so large that single didone letters exceed the viewport height and are cropped top and bottom, acting as black shapes in the left half. In the right half a modest 300px-wide aerial photo floats with a bracketed year above and a centred serif caption and two-line descriptor below."
   }
  ],
  "steal": [
   "Split a two-part brand name into opposite corners of the viewport and flip one half 180 degrees so the logo enacts the name.",
   "Break a headline into fragments on different columns and baselines, like a stair, and hang the body paragraph under one fragment only.",
   "Scale a project title until single letters are taller than the viewport, then float a small captioned photo beside those cropped shapes."
  ],
  "media": "The only picture on the first screen is an interior photograph cropped to the right 20% (290px, full height), the leading edge of a pinned horizontal track that widens to about 65% on the next screen. Inside the track, overlapping pairs lay a smaller photograph over a larger full-height one, project cards widen as they reach the centre, and a photograph sits framed in a flat coral field; all 29 images have square corners and reveal by clip-path while scaling down from 1.5, and there is no video.",
  "motion": "About 2.5s of entrance: the logo, then headline characters, then body lines rising from masks (y over 0.65-0.97s power3.out at a 0.025-0.033 stagger), then the photo and nav. One section pins for +=1150% (about 10,350px) at scrub 1 and is translated sideways; photo pairs move on scrub 0.35, a statement fills line by line on scrub 0, and project cards widen over 1s power1.inOut; a dot cursor grows with a back-out overshoot the house layer does not use."
 },
 {
  "id": "opl-rafael-derolez-2026",
  "name": "Rafael Derolez",
  "url": "https://derolez.dev/",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.3,
  "idea": "A portfolio as a phone carousel: a fixed text rail on the left narrates whichever phone-shaped screen is centred on the right.",
  "mood": [
   "compact",
   "dark",
   "friendly",
   "app-like"
  ],
  "archetype": "split-text-media",
  "hero": "Dark charcoal page split by a vertical hairline at 30% width. Left rail: a 55px header row with name, slash and current section as a breadcrumb in 16px sans, plus a small cobalt ticket-shaped hire button with a perforated divider and arrow; below a hairline, four short paragraphs of 16px grey text with white links, top-aligned, leaving the lower 40% of the rail empty. Right 70%: three phone-proportioned frames with large rounded corners in a row; the centre one upright, full brightness and about 680px tall, the outer two smaller, dimmed and rotated in perspective toward the centre.",
  "type": "Suisse at a single 16px size, weight 400, for everything; hierarchy comes only from grey versus white and from the breadcrumb. The one larger setting is a bold two-word line inside the blue contact card. No display type at all.",
  "colour": "#18181b #030303 #969696 #173ded #ffffff — Zinc-black field with grey text and white for links and the active breadcrumb. Cobalt blue appears only on the hire button and contact card; all other colour comes from the app screenshots.",
  "imagery": "Phone-shaped frames with large corner radius holding app screens, a selfie and short videos; side frames are dimmed to about 40% and tilted in 3D like a cover-flow.",
  "layout": "Single viewport, no page scroll: a fixed 432px text rail with 32px padding and a media stage filling the rest. Scrolling advances the carousel and replaces the rail's text; hairlines separate rail, header and stage. On mobile the stage stacks above the rail.",
  "sections": [
   {
    "role": "work",
    "description": "Same two-part frame. The breadcrumb's last word changes to the project name; under the header sit three tiny grey meta tags (employer, platform), then two paragraphs. On the stage the centred phone shows the product screen at full brightness while neighbours show the previous and next items dimmed and tilted, so the carousel works as both navigation and preview."
   },
   {
    "role": "about",
    "description": "In the rail, a cobalt card shaped like a ticket with notched sides: tiny labels top-left and top-right, a large bold two-word heading, name and local time in small text, then a perforated lower strip with email at left and a copy button at right. Under it, a career list: company in white with dates in small grey on one line, role on the next, and a small arrow at the far right of each row."
   }
  ],
  "steal": [
   "Use a breadcrumb (name / current item) as the only heading and update its last word as the content changes.",
   "Show work in device-shaped frames arranged as a cover-flow, with neighbours dimmed and tilted so the next item is always previewed.",
   "Shape the contact card like a ticket with notches and a perforated strip so the one accent-colour element feels like an object."
  ]
 },
 {
  "id": "aww-moto-finance",
  "name": "Moto Finance",
  "url": "https://www.moto-card.com/",
  "source": "Awwwards Site of the Day",
  "kind": "finance",
  "score": 7.3,
  "idea": "A metal card presented like a museum piece: lit by a single overhead light box in a black room, then orbiting through dim architectural stills.",
  "mood": [
   "nocturnal",
   "exclusive",
   "cold",
   "cinematic"
  ],
  "archetype": "product-object-centre",
  "hero": "Black full-bleed 3D scene. A pale silver-lavender light panel, a trapezoid in perspective like a ceiling light box, occupies the top 20% and centre 55% of the viewport. The two-line uppercase headline, centred at 4.4vw in medium grotesk with tight leading, straddles the panel's lower edge so its first line sits half on light, half on black. In the exact centre a small metal card stands on a low plinth, only about 150px wide, surrounded by darkness. A light-grey pill button (about 250 by 52px) is centred near the bottom; the logo is top-left and a dark pill button top-right.",
  "type": "Neue Montreal only: weight 500 uppercase at 64px (4.4vw) with near-zero tracking and leading under 1.0 for headings, 20px sentence case for body, tiny caps labels in the footer. Three sizes; centred until the left-aligned footer.",
  "colour": "#080808 #edefef #c4cbd6 #e1e5e5 #2a2f3a — Black with cool silver-grey and no brand colour at all. One section inverts to pale grey-white with grey type; the only chroma is amber city lights and a blue atmosphere rim on the globe.",
  "imagery": "Rendered chrome card with an embossed profile medallion, a night-side Earth, and small dim architectural and fashion stills floating as tilted panels in 3D. Everything underexposed, cool and low-saturation.",
  "layout": "Full-viewport scenes stacked one per screen, each with a centred uppercase heading, an optional short sub-line and a pill button. One light interlude breaks the black. The footer switches to a left-aligned statement with link columns at the far right.",
  "sections": [
   {
    "role": "features",
    "description": "Centred heading at the top with a two-line grey sub-line and a pale pill button directly under it. The lower 45% is the top arc of a night-side Earth rising from the bottom edge, about 75% of the viewport wide, with city lights and a bright blue-white rim on the upper right. Three small dark capsule labels with check icons float over and beside the globe at staggered positions, like status notifications."
   },
   {
    "role": "gallery",
    "description": "A dark 3D room: about twelve small photo panels (roughly 70 by 90px, each tilted at its own angle, heavily dimmed) arranged in two loose rows across the full width, receding with blur. The card stands edge-on in the centre, much larger, catching a specular highlight. Later the card faces front at top-centre and a centred two-line heading with a pill button sits under it."
   },
   {
    "role": "stats",
    "description": "A pale grey-white band. Two tall columns of currency amounts in mid-size light-grey sans, one at a quarter and one at three-quarters of the width, each fading to white at top and bottom like slot-machine reels, with the centre rows darkest. Between them, three short centred lines of small black text. The bottom edge of the band reveals a dark photograph."
   }
  ],
  "steal": [
   "Let a headline straddle the edge of a light shape so one line is half on light and half on dark.",
   "Show the product very small in a large dark space in the first viewport, then let it grow as the page scrolls.",
   "Use vertically scrolling columns of real-looking figures, faded at both ends, as a quiet backdrop for a three-line statement."
  ],
  "media": "An 11s hero video of a CG metal card on a plinth covers the whole first screen and holds on its last frame. Then a pinned WebGL globe in the lower half under centred text, a 3D card centred in a depth cloud of small photo tiles dimmed to 30-40%, full-bleed sticky photographs with text docked in opposite corners, and a photo strip sitting on an index list; all low-key and desaturated, photos meeting the near-black ground through 200-300px fades, 0px radius.",
  "motion": "The intro ends in about 1.2s as the camera pushes in and the headline, nav and button arrive (load 9.9s), and Lenis then runs 32 ScrollTriggers: the globe pins for 2.5 viewports at scrub 1, the card turns in 3D across its section, the theme inverts to pale grey with the nav colour following, and benefit rows scrub in one by one. Lines rise by yPercent over 0.65s power3.out and leave over 0.45s power2.in, and headings rise from a blur over 1s power2.inOut."
 },
 {
  "id": "aww-the-state-of-the-gallery",
  "name": "The state of the gallery",
  "url": "https://mesh3d.gallery/the-state-of-the-gallery",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 7.3,
  "idea": "A year-in-review told as a flight over a glowing particle landscape, where each statistic or pick is a single word floating in 3D space.",
  "mood": [
   "dark",
   "atmospheric",
   "technical",
   "luminous"
  ],
  "archetype": "immersive-webgl",
  "hero": "The desktop capture caught the loader: a blue-black screen with a faint dot grid, a 4px acid-yellow progress bar across the top edge, the small logo centred at the top, and a percentage counter at 13.9vw (200px) in thin pale blue-grey grotesk anchored bottom-left. The loaded hero, seen on mobile, splits the title in two: the first two words top-left and the last three bottom-right at the same giant size, with a centred uppercase paragraph between them, all over a full-bleed terrain of olive-green haze and yellow particles. Tiny capital labels occupy all four corners.",
  "type": "Overused Grotesk only, regular weight: display words at 5 to 14vw in pale blue-grey with a faint lilac sheen, small parenthesised counts set as superscripts beside them, and 10px uppercase captions and corner labels. Two sizes and no bold.",
  "colour": "#08090d #515721 #b9c6cd #e6f21a #c8b9ee — Blue-black ground; the olive-to-acid-yellow glow of the particle field is the single colour. Type is cool pale grey with a lilac tint, and the yellow loader bar is the brightest element.",
  "imagery": "A procedural landscape of soft olive fog ridges with thousands of yellow-white points streaming toward the horizon in perspective; later, a curved floor of small tilted white tiles standing for catalogued sites. No photographs.",
  "layout": "One pinned canvas with a text overlay. Four corner labels stay fixed; each scroll step puts a single word or name at the centre with a one-line caption beneath it in the lower third. Nothing else appears on screen.",
  "sections": [
   {
    "role": "stats",
    "description": "Full-bleed particle terrain. One category word is centred at about 5vw in pale iridescent grotesk, with its count in parentheses set small and raised at the word's top-right like a superscript. A single-line uppercase caption at 10px sits centred roughly 20% below. Behind the word the particles briefly cluster into the shape of a large numeral. Corner labels are unchanged."
   },
   {
    "role": "gallery",
    "description": "A top-pick slide: a tiny uppercase label above, then the pick's name centred at about 5vw and partly occluded by the scene. Below it dozens of small white rectangular tiles lie on a curved, receding floor grid, some flat and some tilting up toward the camera, growing larger toward the bottom edge of the viewport. A one-line caption sits under the name."
   }
  ],
  "steal": [
   "Split a title in two and pin the halves to opposite corners, top-left and bottom-right, at the same giant size with the supporting paragraph centred between them.",
   "Attach a count to a big word as a small parenthesised superscript at its top-right instead of building a stat card.",
   "Make the loading percentage the first giant typographic element, anchored bottom-left under a full-width accent progress bar."
  ],
  "media": "One fixed WebGL canvas is the only surface: a particle landscape covers 99% of the first screen with the title straight on it, and as you travel the particles leave the ground to form numerals, a figure, floating screenshot cards and a tile-grid panel, while streams of thumbnail tiles fly low between beats. No img or video elements.",
  "motion": "A percentage preloader is still at 89% at 4.5s, though the load event fired at 2.1s; after it the wheel is captured, each step easing the camera forward to the next beat, with text-free fly-through steps between them (5 of 13 screens show only terrain). Characters rise with a stagger, transform and opacity over 0.7s cubic-bezier(0.22,1,0.36,1) on 704 spans, 0.42s for secondary lines, and counts pop in with an overshoot from 0.6 to 1.08 to 1."
 },
 {
  "id": "opl-aevion",
  "name": "Aevion",
  "url": "https://drone.riotters.com",
  "source": "One Page Love",
  "kind": "physical-product",
  "score": 7.3,
  "idea": "One photoreal drone flies down the whole page through a white space organised only by hairlines and very light type.",
  "mood": [
   "clinical",
   "weightless",
   "technical",
   "calm"
  ],
  "archetype": "product-object-centre",
  "hero": "The first capture is the preloader: a white field with a tiny mono percentage counter dead centre. The loaded hero is white with a hairline-thin top bar: logo and a descriptor left, a credit and a live GMT clock in the middle, a small grey menu chip right. A pale blue-grey gradient panel fills the top 40% inside 12px margins. A white 3D drone hovers at centre, straddling a full-width hairline; a vertical hairline drops from it to the bottom edge. The headline is only 24px, two lines, far left, sitting on the horizontal rule with its second sentence greyed; a scroll cue sits far right on the same line.",
  "type": "Switzer in light weight (300) with -0.033em tracking for everything from the 24px headline to a single word at 16.7vw; protoMono at 12px in caps for bracketed labels and legal lines. Slate and pale grey mixed within one sentence. Four sizes.",
  "colour": "#fdfdfd #eef1f3 #24363f #a3abb0 #d5d9db — White on white with dark slate type and a paler grey for unrevealed words. The only tint is a faint blue-grey wash in the hero and the teal glint of the drone's lens. Cool.",
  "imagery": "A single white-and-grey quadcopter rendered live, with motion-blurred rotors, shown from front, three-quarter and side as it moves; often cropped by the right edge. Supporting graphics are hairline arcs and circles like a technical drawing.",
  "layout": "12px page margins, content hung on a few full-width and half-width hairlines. Each screen holds one idea: a statement, a word, an object. Text stays left or lower-right while the drone travels between them. Nineteen screens of mostly white.",
  "sections": [
   {
    "role": "intro",
    "description": "White screen with a vertical hairline at 50% and a horizontal one near the bottom. Left half: a four-line statement at about 3vw in light grotesk, each word either dark slate or pale grey as a scroll-linked reveal passes through it. Right half: the drone in three-quarter view, cropped by the right edge and crossing the vertical rule."
   },
   {
    "role": "showcase",
    "description": "A single noun set at 16.7vw in slate, top-left, the largest type on the page. A tiny mono label with a bullet sits far left at mid-height; a numbered chip sits top-right. The drone overlaps the right side at mid-height, and beneath it a 24px two-paragraph spec block occupies the right half, its later words still ghosted."
   },
   {
    "role": "other",
    "description": "Landing diagram: the drone hovers above a drawing made only of hairlines: a large semicircular arc, a small circular target on the baseline, vertical dividers creating three bays, and a bracketed mono label above the target. Nothing else is on screen; the object and the drawing carry the whole frame."
   },
   {
    "role": "footer",
    "description": "Bracketed mono labels at both ends of a hairline, then a two-column row: a question at left, an answer plus a small square-cornered slate button at right. Below right, two short link lists in 12px; studio logo bottom-left; a mono legal line across the bottom edge."
   }
  ],
  "steal": [
   "Use one hairline cross (a horizontal plus a vertical rule) as the only layout furniture and let the product render straddle it.",
   "Set a single noun at 16vw as a chapter title and keep all explanatory copy at 24px, with nothing in between.",
   "Reveal paragraphs word by word from pale grey to dark slate tied to scroll, so unread text stays visibly ghosted."
  ],
  "media": "Every product view is real-time 3D: one fixed WebGL canvas carries the drone, centred at about 42% of the width inside an inset 1392x812 pale panel with a giant blurred wordmark behind it, then moves to the right half, then above a semicircle gauge, then inside a flat pale panel, while the HTML scrolls round it. The only photographic colour is one muted 8s clip filling the right half of a split.",
  "motion": "A numeric preloader counts for about 4.5s, then the page wipes up from the bottom by clip-path over 1670ms on a spring-shaped linear() ease, the ghost wordmark sharpens from a 200px blur over 2020ms, and the caption letters de-blur at a 50ms stagger. Lenis with two long pins (about 3.9 and 6.8 viewports) that step through three states each, swapping the drone's pose; statements scrub from grey to ink word by word, and buttons move over 0.5s cubic-bezier(0.22,1,0.36,1)."
 },
 {
  "id": "aww-hiroto-sato",
  "name": "hiroto-sato",
  "url": "https://www.hirotos.com",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.3,
  "idea": "The portfolio's navigation is one 3D street pole: a traffic light, name plate, convex mirror and arrow signs carry the name and the links, and scrolling walks you around it.",
  "mood": [
   "playful",
   "clean",
   "urban",
   "toy-like",
   "precise"
  ],
  "archetype": "product-object-centre",
  "hero": "The captured first frame is a black preloader with one line of small tracked uppercase text centred. Once loaded the page is white: a glossy 3D signal pole runs the full height slightly right of centre, about a quarter of the width, carrying a yellow traffic light, a yellow name plate, a round mirror reflecting a tiny room, and a blue arrow sign. Top-left, a 9px grey role label sits above the name in roughly 36px uppercase grotesk. Top-right, four tiny uppercase links stack right-aligned. Bottom-left, three small label-over-value columns sit under short hairlines. Everything else is empty white.",
  "type": "Helvetica Neue LT Pro only, all uppercase. The name at about 36px medium is the largest HTML text; everything else is 9–10px in grey or black. The expressive lettering lives on the 3D signs: condensed black on yellow, slanted white on blue.",
  "colour": "#ffffff #d0d0d4 #f3e11d #2853e6 #0a0a0a #ff4a3c — White page and black micro-type; all colour is confined to the 3D object in road-sign primaries (signal yellow, sign blue, one red lamp) plus chrome reflections.",
  "imagery": "One real-time 3D object in glossy toy plastic and mirror chrome, cropped by the top and bottom of the viewport, lit flat on white with no ground shadow; the mirror holds a second miniature scene.",
  "layout": "One fixed viewport with 20px margins. Text is parked in three corners at tiny sizes, leaving the middle to the object. Scrolling does not move the page; it rotates the pole so different signs face the camera.",
  "sections": [
   {
    "role": "other",
    "description": "Scroll states instead of sections: the corner text stays put while the pole turns. One state shows the back of the traffic light with a white sign bearing a blue arrow for the contact link; another brings the name plate edge-on with the mirror reflecting sky; another returns to the front with the blue archive arrow sweeping across the lower third. Each sign is a link target and is cropped boldly by the frame."
   }
  ],
  "steal": [
   "Turn navigation into one physical object from the real world (signage, a control panel, a shelf) and let scroll rotate it instead of moving the page.",
   "Keep all HTML text tiny and monochrome in the corners so a single saturated 3D object owns both the colour and the scale.",
   "Hide a miniature scene inside a reflective surface of the hero object as a reward for looking closely."
  ],
  "media": "One fixed WebGL canvas covers the whole viewport, but the visible subject is a single chrome signpost about 42% of the width and the full height on pure white, so roughly 35-40% of the pixels carry image; footage and project art play as textures on its round sign. No img or video elements on the home page.",
  "motion": "A loading word scrambles into random capitals, then a black curtain with a curved lower edge lifts at about 2.5s and the sign's text decodes into the job title by 4.5s. There is no page scroll: each wheel step snaps the signpost round to its next face in an endless three-face loop, the lamps change and the labels re-scramble, all on one curve, cubic-bezier(.2,.8,.2,1), at .18s for colour and opacity and .26-.62s for transforms, with no reduced-motion rule."
 },
 {
  "id": "opl-specia1ne",
  "name": "Specia1ne",
  "url": "https://specia1ne.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.3,
  "idea": "One thin blue vertical line runs the full height of the page at 60% of the width, and every section hangs off it like entries on a spine.",
  "mood": [
   "precise",
   "systematic",
   "typographic",
   "cool"
  ],
  "archetype": "type-poster",
  "hero": "Type only on warm off-white. Header: wordmark left, the word 'Menu' with a four-square blue icon right, a hairline beneath, 56px side margins. A mono index label (blue number, slash, one word) sits 90px under the rule. The headline follows in four left-aligned lines of bold grotesk at 100px (7% of viewport width) with leading under 1.0, the longest line reaching 90% of the width. A two-line grey 18px paragraph sits beneath. A single 1px blue vertical line crosses the whole viewport at 60% width, straight through the headline. Bottom-left: a blue square with mono location and clock. Bottom-right: a two-line bold link wrapped in blue square brackets.",
  "type": "Geist bold at 100px for the hero, about 44px bold for section heads, 26 to 44px semibold for list entries, 16px body. Geist Mono at 11 to 14px for index labels, tags and status lines. Zero tracking on the headline; four clear steps of scale.",
  "colour": "#f2f1eb #1d39f5 #141412 #6f6e69 #ffffff — Warm off-white and one saturated cobalt. Blue starts as a hairline, bracket and small square, then takes over a whole section as a flat field with white text, then returns as one button block.",
  "imagery": "No images at all. Visual interest comes from the spine line, small numbered square chips, square brackets and flat colour fields.",
  "layout": "56px margins. Every section opens the same way: mono index label, two-line bold heading at left, a short right-aligned note at far right. Content then aligns to the vertical line: titles right-aligned against it, descriptions starting just after it, rows split by hairlines.",
  "sections": [
   {
    "role": "work",
    "description": "Full-bleed cobalt section. White heading top-left, a right-aligned note top-right, mono counters in the corners. Five project rows about 125px tall, split by faint hairlines: each project name in 44px bold is right-aligned to end just left of the vertical line, a small white numbered square sits on the line, and a mono uppercase category starts just right of it. The active row is brighter and gains a description, an arrow at far right and mono tags at far left."
   },
   {
    "role": "features",
    "description": "The same spine layout on off-white: four capability names in 30px semibold right-aligned to the line, blue numbered squares on the line, one-line descriptions to its right, hairlines between rows. The list closes with a mirrored pair of captions either side of the line, each under a tiny blue mono label, joined by a bracketed blue square on the line. A blue block wipes upward over the section as a transition."
   },
   {
    "role": "about",
    "description": "A nearly empty section: heading at left, note at right, then a short segment of the vertical line capped by tick marks with tiny mono labels at its top and bottom. At its midpoint the studio name sits right-aligned on the left of the line, a bracketed blue square on the line, and a two-line caption on the right. It is a diagram of one sentence, with most of the screen blank."
   },
   {
    "role": "cta",
    "description": "Heading at left, note at right, then a single flat blue rectangle about 480px wide and 195px tall, centred on the vertical line rather than on the page. Inside: a bold white phrase in square brackets and a mono line with an underlined email address. A hairline footer row beneath carries mono legal links at left and the location with a clock at right."
   }
  ],
  "steal": [
   "Run one 1px coloured vertical line through the whole page at an off-centre position and align lists to it: names right-aligned on one side, descriptions on the other, a numbered square on the line.",
   "Introduce the accent as a hairline and a bracket, then let it take over one entire section as a flat field.",
   "Wrap calls to action in square brackets in the accent colour instead of drawing a button."
  ]
 },
 {
  "id": "opl-fynza",
  "name": "Fynza",
  "url": "https://fynza.com",
  "source": "One Page Love",
  "kind": "finance",
  "score": 7.3,
  "idea": "Bookings are drawn as avatar dots whose orange flow lines merge into a single vertical spine, which then runs down the page as the axis for the partner list, the cash-flow timeline and the step cards.",
  "mood": [
   "friendly",
   "energetic",
   "clear",
   "warm"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Warm grey ground with a fine white dot texture and a peach gradient bleeding down from the top edge. A floating white pill navbar 80% wide holds the logo left and a language switch plus outlined and orange pill buttons right. Centred stack: a white pill badge with overlapping partner-logo dots, a two-line extra-bold uppercase headline at 4.2vw in slate navy with two words in orange, two lines of grey 18px text, an orange pill button. Around the button five round avatar photos with small booking labels sit at staggered heights across the full width; thin orange curves, two dashed, flow down from each and converge at bottom centre.",
  "type": "Golos Text only: weight 800 uppercase at 60px for every section headline with slight negative tracking, 18px regular grey body, about 24px semibold for card titles, tiny uppercase captions. A wide extended logo wordmark. Roughly four sizes; hierarchy relies on weight and colour.",
  "colour": "#edecea #ffffff #f4bba8 #f2561d #3f4f6e #1a2e7a — Warm grey and white with peach gradients fading in at section tops and bottoms; orange carries buttons, flow lines and highlighted headline words; one deep royal-navy slab near the end.",
  "imagery": "Round avatar photos, partner logo discs, sunny travel photographs inside rounded cards with white UI snippets floating on top, and illustrated vintage postage stamps tilted and scattered around the final call to action.",
  "layout": "Centred container of about 1150px; every section opens with a small white pill label and a two-line uppercase headline. A single orange vertical line runs through the page centre linking hero, logo list, timeline and step cards. Sections alternate grey, peach fade and one navy slab.",
  "sections": [
   {
    "role": "proof",
    "description": "Directly under the hero the converged orange line becomes a vertical spine and partner brands hang off it in two columns: logo then name on the left, name then logo on the right. Rows are separated by dashed horizontal rules with small orange dots where they cross the spine. There is no heading, so it reads as a continuation of the hero diagram."
   },
   {
    "role": "other",
    "description": "Problem timeline on the centre spine: small rounded-square chips labelled by week sit on the line. Events alternate left and right, each joined to its chip by a dashed horizontal line ending in a small coloured amount tag (red for outflow, green for income), with a bold label and two lines of grey text. A red-tinted rounded note sits on the spine as the conclusion while the background fades to saturated peach."
   },
   {
    "role": "how-it-works",
    "description": "Three large white rounded cards stacked on the spine, each a two-column split that alternates sides: on one side an orange numbered disc, a three-line semibold title and a small grey paragraph; on the other a rounded travel photograph with a white UI card or a cluster of logo discs floating over it. The orange line passes behind the gaps between cards."
   },
   {
    "role": "cta",
    "description": "Dotted peach-to-white field with a centred two-line uppercase headline, one word in orange, and an orange pill button. Six illustrated vintage travel stamps and round stickers are scattered around it at slight rotations, three above and three below, some tucked under the navbar. A tiny two-line legal footer sits directly underneath, centred, with no separate footer band."
   }
  ],
  "steal": [
   "Turn the hero illustration's lines into a page-long spine: let the curves converge at the fold and continue as the axis for the next section's list and timeline.",
   "Show the customer's own unit of value (a booking with name, party size and price) as small avatar chips instead of a dashboard screenshot.",
   "End on a themed sticker scatter (illustrated stamps at varied tilt) around the last call to action rather than a plain coloured band."
  ]
 },
 {
  "id": "aww-colonia-zacamil",
  "name": "Colonia Zacamil",
  "url": "https://coloniazacamil.com/",
  "source": "Awwwards Site of the Day",
  "kind": "culture",
  "score": 7.2,
  "idea": "The sentence is the layout: 'FLY TO ___ ZACAMIL' runs as one full-width line, with a strip of drone video filling the gap where a word would sit.",
  "mood": [
   "cinematic",
   "stark",
   "editorial",
   "inviting"
  ],
  "archetype": "type-poster",
  "hero": "Warm off-white field with no navigation at all. One line of black ultra-condensed capitals about 13vw tall sits on the vertical centre and runs edge to edge with 28px side margins: 'FLY', a wide gap, 'TO', then a rounded-corner strip of aerial video exactly as tall as the letters and half the viewport wide, then 'ZACAMIL'. A tiny mono bracket label sits above the last word. About 150px lower, a small black pill button with a white dot-in-circle at its right end is centred. Two centred lines of 24px serif sit near the bottom edge. The top third is empty.",
  "type": "Heathergreen, an ultra-condensed regular-weight sans, in capitals at 187px; Reckless Neue serif at 24px for the caption; Roboto Mono for the button and bracket label. Three faces, each used once, with roughly an 8:1 jump and no tracking adjustments.",
  "colour": "#ebe6e0 #000000 #3d4633 #8d8a84 #4d8fa3 — Warm putty paper with pure black type and button. The only colour on the page is inside the video strip: tree greens, roof greys and one patch of teal.",
  "imagery": "Top-down drone footage of housing blocks and trees, cropped to an extreme letterbox near 5:1 with 14px rounded corners and used as a word inside the headline; on mobile it becomes a 2:1 block between two headline lines.",
  "layout": "Single viewport, no scroll captured. Everything hangs on the central axis: full-width headline line mid-screen, button below, caption at the foot. About 80% of the screen is bare paper. On mobile the sentence stacks into three bands: words, video, word.",
  "sections": [],
  "steal": [
   "Replace a word in the headline with a media strip cut to the cap height, so the picture is read as part of the sentence.",
   "Use three type voices once each (ultra-condensed display, soft serif caption, mono button) instead of one family in many sizes.",
   "On mobile, restack the same sentence as word / image / word at full width rather than shrinking the single line."
  ]
 },
 {
  "id": "aww-zeroz-brand-site",
  "name": "/zeroz Brand Site",
  "url": "https://otsuka-air.jp/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 7.2,
  "idea": "A single supplement pouch floats in a green-lit 3D room, and bursts of white light act as the scene changes between short statements.",
  "mood": [
   "luminous",
   "clinical",
   "energetic",
   "minimal"
  ],
  "archetype": "product-object-centre",
  "hero": "The captured first viewport is a white light bloom mid-transition; the settled hero appears one frame later. A dark green 3D room with a hexagonal ceiling lamp fills the screen. A green pouch, about 35% of viewport height, floats tilted at dead centre with a white tablet beside it. The headline is split around it: two centred lines above and two below at 5.6vw in regular Helvetica Now, partly overlapping the pouch. Large thin parentheses bracket the product, and tiny three-line labels sit far left and far right at the same height. Wordmark top-left, four links top-centre, a small white store tab pinned top-right, a Japanese tagline bottom-centre.",
  "type": "HelveticaNowDisplay Regular for Latin headlines at 80px, centred, no tracking; Tazugane Gothic Regular and Medium for Japanese at about 18px with wide letter-spacing. Regular weights only, so scale and white-on-green contrast do the work. The footer wordmark is custom slashed lettering spanning the full width.",
  "colour": "#1f3a26 #00a852 #ffffff #455a48 #111312 — Everything is one green: dark and smoky in the 3D room, saturated flat green in the footer and store tab. White appears as light itself, blooming to fill the screen between scenes.",
  "imagery": "Real-time 3D pouch and tablet in a fogged green room with a hexagonal spotlight and floor glow; full-bleed canvas, no photographs visible, soft volumetric light and heavy lens bloom.",
  "layout": "A pinned full-screen canvas driven by nearly fifty screens of scroll; text arrives as short centred statements inside discs of white light. Slim fixed nav. Only the footer becomes a flat layout, with a logo left, a link column near centre and a giant wordmark.",
  "sections": [
   {
    "role": "intro",
    "description": "The room stays in place while a soft-edged white disc, about 45% of viewport width with a wide feathered falloff, opens at centre where the product hung. Inside it sits a three-line centred statement in dark grey: wide-tracked Japanese on lines one and three, a quoted Latin phrase in light grotesk on line two, all around 18 to 20px. The green floor glow and ceiling lamp remain visible around the disc."
   },
   {
    "role": "showcase",
    "description": "Between scenes the pouch dissolves into a ball of light at centre: thin radial streak lines fly outward, the hexagonal lamp flares overhead, and the tablet remains as the only solid object, drifting to the lower right of the glow. The nav wordmark and store tab switch from white to green as the background brightens."
   },
   {
    "role": "footer",
    "description": "Flat saturated green block one viewport tall. Parent-company logo top-left in white, a five-item link column starting just right of centre, an underlined store link top-right. The bottom half is the wordmark with its leading slash, in white, scaled to run from the left edge to the right edge at about 28% of viewport height. A single line of legal links sits beneath it at 10px."
   }
  ],
  "steal": [
   "Split a four-line headline into two lines above and two below a centred product, letting the object interrupt the sentence.",
   "Use a feathered disc of white light as the text container instead of a card.",
   "End the page on a flat field of the brand colour with the wordmark scaled edge to edge."
  ],
  "media": "One fixed WebGL canvas covers the fold and renders the whole story: a dark green room in one-point perspective with a glowing ceiling panel, a tilted pouch and tablet at about 23% of the width bracketed by the split headline, a light disc that becomes the text page, a burst of the logo and photographs, and about 20 lifestyle photos as skewed cards on a 3D ribbon round a chapter title. DOM video appears only in the closing link index, eight short loops stacked on portrait pictures.",
  "motion": "A light burst comes first (the page took 19.5s to load), then the product with its headline by 2.5s and the nav by 4.5s, and Lenis then drives the fixed canvas through long sticky runways (10,152px for the opening): the camera dollies into the ceiling light, the manifesto advances one line at a time in a reading spotlight, and the photo ribbon arcs over the top as the ground goes from dark green to white to mint. The house ease is cubic-bezier(.3,.26,.38,1), 67 uses, mostly at 0.3-0.5s, and staggered rises step by 40ms per index."
 },
 {
  "id": "opl-elva",
  "name": "Elva",
  "url": "https://elvalabs.ai/",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.2,
  "idea": "The entire page is staged inside one oversized phone: the headline lives on the phone's screen while a huge out-of-focus echo of the same words drifts behind it.",
  "mood": [
   "cinematic",
   "warm",
   "intimate",
   "glossy"
  ],
  "archetype": "product-object-centre",
  "hero": "Near-black grainy field. A phone outline about half the viewport wide stands centred, its top at 16% of the height and its lower half cropped by the bottom edge. Its screen shows a warm close-up of a smiling freckled face lit yellow from the right. The headline sits inside the screen, centred, white, three lines at roughly 64px with a two-line 18px sub-line. Behind the phone the same sentence repeats at about 8.5vw, blurred with colour fringing, dim grey, spanning the full width. Corners: rounded outlined logo chip top-left, glassy action bar top-right, small credit chip bottom-left, dot button bottom-right.",
  "type": "Neue Haas Grotesk Display only, regular weight, sentence case, tracking -0.03em so letters nearly touch, white. Headlines 64 to 104px, sub-lines 16 to 18px, chips 16px. The same face is reused at 8.5vw as a blurred, colour-fringed background layer.",
  "colour": "#090908 #151413 #393938 #d99a1c #362619 #ffffff — Soft black with film grain; the only colour is the amber-yellow light inside the phone photo, which bleeds faintly into the dark around the device. White text, grey blurred echo.",
  "imagery": "One warm, shallow-focus portrait (video) seen only through a phone-shaped frame with a thin light outline and realistic side buttons; heavy grain; round app icons overlaid at the top of the screen.",
  "layout": "A single centred column the width of the phone; outside it the page is empty black except for four small chips pinned to the corners. The phone stays fixed for all 2.8 screens while its inner text and the blurred backdrop change.",
  "sections": [
   {
    "role": "intro",
    "description": "The phone frame stays pinned and centred, slightly lower so its full top bezel shows. The on-screen statement is replaced by a longer five-line sentence at about 100px, centred and wider than the phone. The giant blurred echo text slides vertically behind the device, level with the headline in one frame and sinking below the bottom edge in the next, acting as a parallax layer."
   },
   {
    "role": "features",
    "description": "Still inside the phone screen: feature names set as centred headings at about 80px, each followed by a two-line 12px description and a tiny square arrow icon, stacked vertically and scrolling through the screen area like an app feed. The portrait remains behind as a darkened backdrop. In the capture several states overlap, so headings collide with the previous statement."
   }
  ],
  "steal": [
   "Put the hero headline on the screen of an oversized, bottom-cropped device so the product frame doubles as the text container.",
   "Repeat the headline behind the main object at several times the size, blurred with colour fringing, as a depth layer instead of a gradient.",
   "Pin four tiny chips to the four viewport corners (logo, action, credit, toggle) and leave out all other chrome."
  ]
 },
 {
  "id": "opl-tara",
  "name": "Tara",
  "url": "https://tara.com",
  "source": "One Page Love",
  "kind": "finance",
  "score": 7.2,
  "idea": "Two pastel circles, mint for saving and pink for spending, stand for the app's two accounts and recur as icon, inline dot, section colour and card gradient.",
  "mood": [
   "friendly",
   "clean",
   "pastel",
   "confident"
  ],
  "archetype": "split-text-media",
  "hero": "Off-white field with no navigation, only a small bold wordmark top-left. The left column is vertically centred and starts about 8% in: a two-line headline in a wide heavy grotesk at roughly 6vw with tight leading, a grey one-line subhead beneath, then a pill-shaped email field about 400px wide with a black pill button nested inside its right end. The right half holds a 3D pair floating on the page colour: a mint-to-pink gradient bank card tilted about 30 degrees, overlapping a perspective-tilted phone showing a balance screen. Two small award badges are stacked on the right edge. Roughly half the viewport is empty.",
  "type": "Herokid Wide at weight 600 with -0.04em tracking for headlines, regular-width Herokid for everything else. Sentence case in the hero, all-caps for the scroll statements. Roughly 86px headline against 14px body, with a mid size of about 24px for centred explainer lines.",
  "colour": "#f8f8f8 #0a0a0a #c3edce #f8c7c9 #ffffff — Near-white base with black type. Mint and pink appear only as the two account colours: first as small circles, then as full-screen section fields and a soft glow behind the footer wordmark.",
  "imagery": "3D bank card and tilted phone mock-ups carrying app screens, floating without a container on the page colour; later a straight-on phone on a flat mint field. Simple line icons inside solid pastel circles.",
  "layout": "Twenty screens of scroll but very little per screen: one centred object or statement per viewport with large empty margins. A wordmark top-left and a tiny pill button top-right persist. Full-bleed pastel fields mark the two product chapters; a row of four white cards closes.",
  "sections": [
   {
    "role": "intro",
    "description": "A pinned, nearly empty viewport where a single mint circle holding a line icon sits upper-centre with a pink circle peeking from behind it. On scroll the pink circle slides out to sit beside the mint one, overlapping slightly, each with its own icon, and three centred lines of roughly 24px text appear beneath explaining the two accounts. Nothing else is on screen."
   },
   {
    "role": "other",
    "description": "A chapter-title screen: two words of heavy uppercase at about 5vw, centred and stacked on two lines, with a mint dot the height of the capitals sitting inline after the first word like punctuation. The dot is the same circle from the previous scene, so the colour carries its meaning straight into the full-mint section that follows."
   },
   {
    "role": "showcase",
    "description": "Full-viewport mint field. A small eyebrow and a bold product name are centred near the top. Below, a straight-on phone mock-up stands just right of centre, and a short right-aligned bold claim with two lines of small text sits to its left, level with the phone's lower third. Text and phone hug the centre line, leaving both outer thirds empty."
   },
   {
    "role": "footer",
    "description": "After four white rounded cards and a repeated centred email pill, the footer is one row of small links and then the wordmark set enormous, around 45vw wide and cropped by the bottom edge. It is white on the off-white page and becomes visible only through blurred pink and mint glows placed behind the letters."
   }
  ],
  "steal": [
   "Assign each product concept a colour and a shape early (two pastel circles), then reuse it as bullet, inline punctuation dot and full section background.",
   "Nest the call-to-action button inside the email field's pill so the form reads as one object.",
   "Set the footer wordmark in the page's own background colour and reveal it only with soft coloured glows behind the letters."
  ]
 },
 {
  "id": "aww-realevate",
  "name": "Realevate",
  "url": "https://realevate.agency/",
  "source": "Awwwards Site of the Day",
  "kind": "real-estate",
  "score": 7.2,
  "idea": "The site is a board you zoom out of: the home screen with its slogan marquee becomes one tile beneath four tall colour-coded category cards.",
  "mood": [
   "crisp",
   "corporate",
   "confident",
   "bright"
  ],
  "archetype": "other: marquee-behind-centred-image",
  "hero": "White field, all type navy. Top row about 8% down: one link far left, an extended-caps wordmark centred, one link far right. Across the vertical middle a two-word slogan repeats as a marquee at about 15vw in medium weight, cropped by both edges; a square photograph about 19vw wide sits dead centre on top of it, hiding the letters behind. Lower third: a two-line centred subhead near 24px and, beneath it, a thin-outlined rectangular tag in tiny extended capitals. Bottom-left a copyright line; bottom-right an outlined rectangular button beside a solid navy square menu button.",
  "type": "Google Sans medium at 218px with -0.02em tracking for the marquee and roughly 16-24px for interface text. Monument Extended in small spaced capitals for the wordmark and price tag. Card titles are rotated 90 degrees and read bottom to top.",
  "colour": "#ffffff #1e2a5e #e1e2ea #3a664f #2c1a2e #1c1b1e — Navy on white with no other interface colour in the hero. The overview sits on pale lavender-grey and gives each category a flat card colour: navy, forest green, aubergine, near-black.",
  "imagery": "Glossy architectural renders of sea-view terraces, resorts and towers. One perfect square in the hero; landscape crops fill the bottom third of each category card. Square corners, full saturation, no grade.",
  "layout": "A one-screen site with two states. Home is symmetrical: corners hold small utilities, the centre holds marquee and image. The overview is a four-column row of tall cards with equal gutters and a scaled-down live copy of the home screen centred beneath.",
  "sections": [
   {
    "role": "work",
    "description": "Pale lavender-grey ground with four equal portrait cards in a row, roughly 1:2 in proportion, about 20px apart with generous outer margins. Each card is a flat colour block for its top 70% and a photograph for the bottom 30%. A small monogram sits top-left; the category name runs vertically up the right side in white at about 28px; a two-line descriptor in tiny white text sits bottom-left of the colour block, just above the image."
   },
   {
    "role": "other",
    "description": "Centred below the card row, spanning the middle two columns, sits a miniature of the home screen: a white rectangle with the tiny nav row, the slogan marquee still running and the square photo in the middle, cropped by the viewport's bottom edge. It acts as a live thumbnail of where the visitor came from and a way back."
   }
  ],
  "steal": [
   "Run a giant slogan marquee through the middle of the viewport and park a square image on top so the words are read as they pass around the picture.",
   "Build category cards as a tall colour block over a short photo, with the title rotated up the right edge.",
   "Keep utilities in the four corners (two links top, copyright bottom-left, action pair bottom-right) and leave the sides empty."
  ],
  "media": "A white screen led by type: a single centred 272px square photograph covers about 9% of the viewport and works as a window laid over a running marquee line, the words passing behind it. The preloader cycles property photographs through the same square so the load hands off without a cut; in the selection state, photographs fill the bottom 30% of four tall colour-block cards; five images in the home state, no video.",
  "motion": "About 2.2s of preloader: a navy screen with the square flipping through photographs and a counter climbing, then the ground turns white around the square and the details arrive last in a stagger. There is no document scroll: the first wheel step shrinks the home screen to about 44% below the four category cards, and the slogan marquee loops every 14.06s at about 43px/s; cards transition transform and filter over 0.8s cubic-bezier(.18,.13,0,.99), buttons wipe their fill over 0.75s, and there are 5 reduced-motion rules."
 },
 {
  "id": "opl-typewave",
  "name": "Typewave",
  "url": "https://typewave.blendmodes.com",
  "source": "One Page Love",
  "kind": "dev-tool",
  "score": 7.2,
  "idea": "A plugin about type scales sold on a near-black page where flat saturated fields (orange, lime, blue) act as stages for the plugin's own dark interface.",
  "mood": [
   "dark",
   "tidy",
   "friendly",
   "product-focused"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Near-black field. Nav row at the top: pixel-block logo and wordmark left, four plain links centred (one carrying a tiny lime tag), a cream rectangular button with a Figma glyph right. The headline sits centred around mid-height: three lines at about 6.7vw, medium weight, off-white, with the third line recoloured pale lime. Below it a three-line 18px paragraph held to about 45% of the width, then a small cream button repeating the nav action. About 150px lower, the top edge of a flat orange slab, 70% of the viewport wide with barely rounded corners, peeks over the fold; it holds the plugin window.",
  "type": "Roobert throughout: weight 500 for the 96px headline with slight negative tracking, 16-18px body, 28px card headings, about four sizes in all. Sentence case everywhere; the only emphasis device is recolouring one headline line.",
  "colour": "#0f0f0e #191918 #e6e3da #f88616 #e4f283 #1463ff — Warm near-black ground with cream text. Orange, lime and electric blue never colour paragraphs; they only fill the rectangles behind product screenshots and the matching step-number chips.",
  "imagery": "Dark plugin windows with a soft drop shadow, floated centred on flat saturated rectangles (orange, lime, blue, one pink); the rectangles are near square-cornered and inset inside a slightly lighter dark card.",
  "layout": "Centred hero, then a 1000px container of full-width dark cards, each split one-third text and two-thirds colour stage. Export features alternate text and tile left to right. A small two-button bar stays pinned bottom-centre.",
  "sections": [
   {
    "role": "how-it-works",
    "description": "Three stacked cards in a slightly lighter black, each about 1000 by 350px. Left third: a 16px square number chip in the card's accent colour at the top, a three-line 28px heading under it, and a grey 12px paragraph pushed to the card's bottom edge, leaving a tall gap between. Right two-thirds: a flat colour rectangle inset 16px with the dark plugin window centred and shadowed on it. Cards differ only by hue: lime, orange, blue."
   },
   {
    "role": "intro",
    "description": "Between demo blocks a single left-aligned sentence at about 36px sits alone on black with some 300px of space above and below. Its words light up from dark grey to cream one after another as you scroll, so mid-capture the sentence trails off into the background. The pinned two-button bar is the only other element on screen."
   },
   {
    "role": "features",
    "description": "Export options as alternating rows. One side: a square colour tile (lime, then orange) holding a code-panel screenshot. Other side: a 24px heading, a five-line grey paragraph and a row of three or four small monochrome tool logos. Tile and text swap sides on each row, and the tiles are staggered vertically so one row's tile overlaps the next row's text band."
   }
  ],
  "steal": [
   "Stage dark UI screenshots on flat saturated rectangles instead of on the page background, so the colour does the branding and the UI stays legible.",
   "Pin the paragraph to the bottom of a tall card and the heading to the top so the gap between them becomes the card's composition.",
   "Colour-key each step: the number chip and the stage behind the screenshot share one hue and nothing else on the card uses it."
  ]
 },
 {
  "id": "opl-humanoid-index",
  "name": "Humanoid Index",
  "url": "https://humanoid-index.com/",
  "source": "One Page Love",
  "kind": "other",
  "score": 7.2,
  "idea": "A catalogue of humanoid robots as a single-screen instrument: spin a wheel of names and one specimen appears on a plain card, ready to compare.",
  "mood": [
   "clinical",
   "quiet",
   "utilitarian",
   "curious"
  ],
  "archetype": "product-object-centre",
  "hero": "A white, app-like screen with no headline. Top centre: a small segmented pill control with three categories and grey counts. Dead centre: a pale-grey rounded card about 400 by 455px holding one cut-out robot; above its top-left, a tiny maker logo with name, year and company at 13px; below it, a pill toolbar of four line icons. To its right, a paler empty card with a plus button labelled 'Compare'. Left of the card, a vertical wheel of robot names: the selected one black at 20px, the rest shrinking, fading and tilting along an arc. At the far left, mid-height: a logo glyph, a grid toggle and two credit lines.",
  "type": "Geist Sans Regular only, between 12 and 20px with -0.04em tracking. Hierarchy comes from grey value and opacity rather than size or weight; the selected name at 20px is the largest text on the page. No display type at all.",
  "colour": "#ffffff #f9f9f9 #1c1c1c #9b9b9b #f1b80e — White page, off-white cards, black and grey text. All colour arrives through the robots themselves, such as one yellow model.",
  "imagery": "Cut-out product shots and renders of robots, full figure, centred with even padding on identical off-white rounded cards, held at one scale and stance so models compare like specimens. A grey two-blob skeleton shows while loading.",
  "layout": "One fixed viewport with no sections: centred card, compare slot to its right, name wheel to its left, controls parked at top centre and far left. Roughly 60% of the screen is empty white. Scrolling changes the selection, not the position.",
  "sections": [
   {
    "role": "work",
    "description": "The index is a wheel picker rather than a grid: about nine names are stacked vertically to the left of the card, right-aligned on a shallow arc. The active name is full black at 20px; neighbours step down in size, fade to light grey and tilt progressively, as if on a drum. Scrolling rotates the drum and swaps the card image, and the line above the card updates with the maker's logo, year and company."
   },
   {
    "role": "other",
    "description": "On mobile the layout becomes a horizontal card carousel: a white rounded card nearly the full viewport tall holds the robot, the next card peeks about 30px at the right, and a bottom sheet with a drag handle carries a maker icon, the model name at about 28px with the year in grey beside it, the company beneath and a position counter right-aligned."
   }
  ],
  "steal": [
   "Replace a thumbnail grid with a vertical wheel of names whose items shrink, fade and tilt away from the selection.",
   "Hold every catalogue item at the same scale and stance on an identical off-white card so differences read instantly.",
   "Keep all text between 12 and 20px and build hierarchy from grey values, leaving the object as the only large thing on screen."
  ]
 },
 {
  "id": "opl-uni",
  "name": "Uni",
  "url": "https://www.getuni.co/",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.2,
  "idea": "The product lives in the laptop notch, so the page's navigation is a black notch and the hero is a laptop outline whose notch opens into the app.",
  "mood": [
   "soft",
   "friendly",
   "light",
   "compact"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "White page with the hero as a rounded-corner panel inset 24px on all sides, filled with a grainy pastel gradient (pink-peach centre, sky blue down the right edge, orange lower-left). A black pill 300×44px sits top-centre like a laptop notch, holding only the app icon; it is the entire nav. Centred below: a hand-scrawled caps eyebrow, a two-line 48px (3.3vw) headline, two white pill download buttons side by side, one line of tiny grey reassurance. The bottom 40% is a thick black outline of a laptop screen, 960px wide, cropped by the fold, its notch expanded into a dark input bar playing the demo.",
  "type": "Instrument Sans 500 at 48px with -0.025em tracking for headings; Geist 16px for UI and 12–13px captions. Eyebrows are hand-scrawled marker capitals, irregular and tilted. Only three sizes on the page; the headline is just three times the body.",
  "colour": "#ffffff #fbdad6 #fce6db #aacbec #f9a070 #000000 — Colour lives only in the hero's grainy pastel gradient; below it the page is white and #fbfbfb with black text. Buttons are near-white pills; the notch is the single black mass.",
  "imagery": "No photos. A laptop reduced to a thick black rounded outline frames a looping screen recording of the notch UI; eight line icons below. The gradient has visible film grain.",
  "layout": "Everything on the centre axis. The laptop frame's side strokes continue down the page as hairline rules, so the mockup becomes a 960px content column holding tabs, an icon grid and an FAQ. Three short sections, generous white space, minimal footer.",
  "sections": [
   {
    "role": "features",
    "description": "Directly under the device a segmented pill control with three tabs switches the demo. Then a hand-scrawled two-word eyebrow, a centred 32px heading, and a four-by-two grid of thin line icons, each with a two-line 12px centred caption. No cards, borders or backgrounds — just icons on white with about 100px between columns, all inside the hairline-bounded column."
   },
   {
    "role": "faq",
    "description": "A #fbfbfb band inside the same column. The heading straddles the band's top edge. One rounded, hairline-bordered container holds nine rows separated by hairlines; each row has a 12px medium question at left and a thin plus sign at right. Beneath, a two-line micro footer centred: Roman-numeral year, tiny wordmark, a three-word credit, two legal links."
   }
  ],
  "steal": [
   "Shape the navigation like the product's own hardware habitat (here a black notch pill) so the nav itself demonstrates the product.",
   "Extend a device mockup's side strokes down the page as hairline rules so the mockup becomes the content column.",
   "Use a hand-scrawled marker eyebrow above a clean grotesk headline to add one human note to a system-clean page."
  ]
 },
 {
  "id": "opl-smallbits",
  "name": "Smallbits",
  "url": "https://smallbits.design",
  "source": "One Page Love",
  "kind": "other",
  "score": 7.2,
  "idea": "The icon set is the page: a full-viewport wall of the product with one docked card holding every word.",
  "mood": [
   "stark",
   "pixelated",
   "minimal",
   "direct"
  ],
  "archetype": "grid-index",
  "hero": "The whole viewport is a black field tiled with white pixel icons, each drawn about 50px on a 112px pitch, nine rows deep; alternate rows shift half a cell so it reads as a brick pattern, and icons at the edges are cropped. There is no header. A white square-cornered card, 795×170px, is docked bottom-centre: a two-line 24px semibold sentence left, a black rectangular button right, a row of five grey links below. A third-party badge floats top-right. This single screen is the entire page.",
  "type": "Inter 600 at 24px, -0.02em, for the one sentence; Inter 16px semibold grey for links and button. Nothing exceeds 1.7vw — the pixel icons, not type, are the display element.",
  "colour": "#000000 #ffffff #9a9a9a #ff6154 — Strict black and white: white icons on black, black text on a white card, grey for secondary links. The only colour is the coral third-party badge.",
  "imagery": "About ninety visible pixel icons, each an 8×8 bitmap drawn at 50px in pure white with hard edges, tiled full-bleed and cropped at the viewport edges.",
  "layout": "One viewport, no scroll. A staggered icon grid fills the frame edge to edge; all words live in one docked card. On mobile the card becomes a full-width white block with a full-width button.",
  "sections": [
   {
    "role": "other",
    "description": "Mobile restack, the only other state. The icon wall drops to five columns filling the top 73% of the screen; the card becomes a full-width white block at the bottom with the sentence on three lines at 18px, a full-width black button 78px tall, and five grey links spaced evenly on one line."
   }
  ],
  "steal": [
   "Make the product the wallpaper: tile the full viewport with the assets at large size and skip a hero image entirely.",
   "Offset alternate rows by half a cell so a regular grid reads as a pattern rather than a table.",
   "Compress all copy, the CTA and the footer links into one docked card so the page never needs to scroll."
  ]
 },
 {
  "id": "opl-madie",
  "name": "Madie",
  "url": "https://madie.es",
  "source": "One Page Love",
  "kind": "restaurant",
  "score": 7.2,
  "idea": "A burgundy-and-cream bakery brand in which the madeleines themselves, cut out like specimens, become the menu.",
  "mood": [
   "warm",
   "indulgent",
   "friendly",
   "polished"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A dark, warm photograph (iced coffee with a logo sticker and a glazed madeleine on a wooden counter, burgundy tiles behind) fills a rounded-corner frame inset 20px from every edge on a cream page; the subject sits right of centre. In the left column, starting 42% down: a small star-rating line, then a three-line uppercase headline at 5vw in a heavy geometric sans, the first two lines outline-only and the third solid cream, a three-line paragraph, and a row with a pink pill button and an underlined text link. Top-left: menu icon and script logo. Top-right: a three-language pill toggle. Bottom-right: a circular text badge.",
  "type": "Dazzle, a heavy geometric uppercase, for headlines at 72px, used both solid and as an outline stroke; Cottorway, a slightly wide geometric sans, for 14px body and for a light italic accent word. A brush-script logo. Tracked capitals near 10px for labels.",
  "colour": "#f6efe6 #3d0012 #5c0a23 #ff99d3 #160b0a #e8a530 — Cream and deep burgundy alternate by section across wavy boundaries. Bubblegum pink is reserved for buttons, the active filter pill and carousel arrows; the product cut-outs supply every other colour.",
  "imagery": "A moody warm-graded hero photo; individual madeleines shot from above and cut out with soft shadows as small menu thumbnails; white line drawings (dog in beret, cafe table); rounded photo cards stacked at a tilt; a map redrawn in burgundy.",
  "layout": "Centred intro, a left-anchored story block on burgundy, then a two-column menu inside a container about 60% of the width. Section edges are curved waves rather than straight lines. Rounded frames and a sticky header with filter pills recur throughout.",
  "sections": [
   {
    "role": "intro",
    "description": "Cream field, everything centred. A tiny tracked-capitals label flanked by two short rules, then a two-line heading: the first line outlined uppercase in burgundy at about 4.5vw, the second a lowercase light italic of the body sans, solid. Three short paragraphs at 13px follow in a column about 45% wide. The section ends in a burgundy wave rising from the bottom, with a white line-drawn dog perched on the curve."
   },
   {
    "role": "about",
    "description": "Burgundy field patterned with a faint tone-on-tone repeat of the logo. Left: a white line illustration, a three-line paragraph with bold phrases, two round pink arrow buttons and a slide counter. Right: a stack of portrait photo cards with rounded corners, the top one tilted a few degrees and the others fanned behind it. The bottom edge curves back to cream."
   },
   {
    "role": "list",
    "description": "A sticky row of three pill filters beside the logo, the active one filled pink. Each category has an outlined uppercase label at left, an item count at far right and a hairline beneath. Items run in two columns: a 60px cut-out madeleine at left, then a bold uppercase name and a two-to-three-line italic description; some carry a tiny best-seller note or a pink allergen tag. No prices and no boxes."
   },
   {
    "role": "contact",
    "description": "Deep burgundy. The left two-thirds is an interactive map restyled entirely in burgundy and pink with rounded corners, the script logo as its pin and a small address card overlaid bottom-left. The right third is a rounded outlined panel listing opening hours, phone and email under tiny capital labels, plus two social icons. The script logo, large and white, is centred below, followed by a tracked-capitals legal line."
   }
  ],
  "steal": [
   "Set a headline with its first lines as outline strokes and the last line solid, so emphasis falls on the final phrase without a size change.",
   "Replace the stock map with one restyled in the brand's two colours and use the logo as the pin.",
   "Build the menu from small cut-out product photos beside bold names and italic notes in two columns, with no cards."
  ]
 },
 {
  "id": "opl-archiv",
  "name": "ARCHIV",
  "url": "https://www.archiv.systems/",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.2,
  "idea": "A waitlist page as a museum plinth: one cut-out everyday object at a time, centred on off-white beneath a heavy serif wordmark.",
  "mood": [
   "restrained",
   "curatorial",
   "calm",
   "witty",
   "precise"
  ],
  "archetype": "product-object-centre",
  "hero": "Off-white single screen with no scroll. A heavy high-contrast serif wordmark in black caps sits top-left at a 56px margin, about 410px wide (28% of the viewport) and 80px tall. Opposite, top-right at the same margin, one line of 14px sans description aligns with the wordmark's top. Dead centre, one photographed object (a painted wooden pepper mill about 140px wide and 440px tall) stands on a barely visible lighter rounded square with a soft contact shadow; other objects replace it in turn. Below, a centred 11px grey line, then a white rounded email field 236px wide with a circled arrow inside its right end. Roughly 80% is empty.",
  "type": "The wordmark is drawn lettering in a heavy display serif with tight spacing, cap height about 5.5vw. All live text is Helvetica Neue regular at 14px and about 11px, black or grey. Two text sizes only; the contrast is wordmark against near-invisible interface text.",
  "colour": "#f1efec #000000 #ffffff #d9261c #e8a317 #7a7a75 — Warm off-white field, black wordmark, a white input; all colour arrives through whichever object is showing (red and yellow mill, tan leather, blue cap).",
  "imagery": "Studio cut-outs of single everyday objects in three-quarter view with a soft grounded shadow on matching off-white, each scaled to similar visual mass and centred, one at a time, no frame.",
  "layout": "One fixed viewport with four elements: wordmark top-left, description top-right, object in the exact centre, form bottom-centre. Margins of 56px, no rules, nav or footer. On mobile the wordmark centres and the description disappears.",
  "sections": [
   {
    "role": "gallery",
    "description": "The central object rotates through unrelated things (pepper mill, sling chair, sticker-covered hydrant, layered iced drink, record player, baseball cap), each photographed in the same light and replaced in place within a zone roughly 250-300px square. Shadow direction and visual weight stay constant, so the object is the page's only variable and no carousel controls are needed."
   },
   {
    "role": "contact",
    "description": "Beneath the object, a centred line of 11px grey text, a 30px gap, then a white field about 236 by 52px with 12px radius: light grey placeholder at left and a 26px circle-outlined arrow as the submit control inside the right end. No button label, border or shadow; the field is the only pure white on the page, which marks it as the one interactive thing."
   }
  ],
  "steal": [
   "Build a pre-launch page from four elements only (wordmark top-left, one-line description top-right, a single centred object, an email field) and leave the rest of the screen empty.",
   "Cycle one consistently lit cut-out object in the same spot to show range without adding a grid or carousel controls.",
   "Make the email field the only pure-white element on an off-white page, with submit as a circled arrow inside it rather than a labelled button."
  ]
 },
 {
  "id": "opl-beige-force",
  "name": "BEIGE FORCE",
  "url": "https://beigeforce.com/",
  "source": "One Page Love",
  "kind": "other",
  "score": 7.2,
  "idea": "A game's cast presented as a bitmap type specimen: black pixel glyphs in a ruled grid on a mustard field, each given a blandly fashionable first name.",
  "mood": [
   "satirical",
   "retro",
   "loud",
   "deadpan"
  ],
  "archetype": "grid-index",
  "hero": "Flat mustard yellow with fine grain fills the viewport. A one-line mono header spans the width with 28px margins: credit left, title flanked by lightning glyphs centre, a quote and a help link right, with a black hairline under it. Two 14px mono text columns start at the second of four grid columns; a pixel-font PLAY! button with a white-and-black double border sits in the fourth. From one third down, a four-column grid of square hairline-bordered cells fills the width, each holding one large black pixel glyph and a small centred name. A narrow strip on the right edge shows the game's blue and magenta screen.",
  "type": "Monaspace Neon mono at 14px for every word of text, regular and bold only; Kongtext bitmap face at 36px for the button and the mobile lock-out heading. The real display type is the grid of hand-built pixel glyphs roughly 190px tall.",
  "colour": "#e1ac10 #0b0b0b #2c3e9e #e6157f #4a97db — One warm mustard field with black ink only. A sliver of royal blue and hot magenta at the right edge hints at the game, and the mobile lock-out screen flips to flat sky blue.",
  "imagery": "Pixel-art icons and letters (sailboat, saucer, insect, building, capitals, punctuation) drawn as black squares with visible gaps between pixels, one per cell, centred. No photographs.",
  "layout": "A fixed frame: header rule, intro band, then a strict four-column grid of equal square cells that scrolls inside the frame while header and copyright stay put. Text obeys the same four columns; outer margins are 28px.",
  "sections": [
   {
    "role": "gallery",
    "description": "The roster grid: four columns by many rows of identical square cells separated by 1px black lines, no gutters. Each cell centres a single glyph about 55% of the cell width, assembled from small black squares with hairline yellow gaps so the pixel grid shows, and a one-word caption in 14px mono centred near the bottom edge. Letters, symbols and tiny pictograms alternate without hierarchy, like a bitmap font specimen sheet."
   },
   {
    "role": "other",
    "description": "Narrow screens get a full-bleed sky-blue lock-out card instead of the site: a two-line bitmap heading in near-black, centred slightly above the middle, with a seven-line centred mono paragraph beneath written in mock-military voice asking the visitor to return on a keyboard device. No navigation, no links, the same grain texture."
   }
  ],
  "steal": [
   "Draw icons as pixels with visible gaps on the page's background colour, so the artwork and the ruled layout grid look like one system.",
   "Set every word in one monospaced size and let weight and underlines carry the hierarchy, saving the bitmap face for a single button.",
   "Let a strip of the next screen's contrasting colours peek in at one viewport edge to promise something behind the page."
  ]
 },
 {
  "id": "opl-mat",
  "name": "Mat",
  "url": "https://www.matwidget.com",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.2,
  "idea": "The app's scrapbook cut-outs invade the page itself: stickers interrupt the headline and a green cutting mat is both brand and container.",
  "mood": [
   "crafty",
   "warm",
   "playful",
   "personal"
  ],
  "archetype": "type-poster",
  "hero": "Cream field, no navigation or logo; everything is centred. At 14% of the height a small tan caption with a cut-out camera to its left. Then a three-line lowercase headline in extra-bold rounded sans at 86px (6vw) in dark green, spanning 68% of the width, with four image cut-outs set inline at letter height: ransom-note letters spelling the name, a green cutting mat, a glass of matcha and a phone. Below, a green rectangular button with 4px radius, a faint grid texture and a soft drop shadow, carrying an apple sticker; then a two-line user count flanked by two fern leaves as a laurel. The bottom quarter is empty.",
  "type": "Nunito ExtraBold, lowercase, -0.05em tracking at 86px for the headline, and regular or italic at 16 to 24px for copy, centred. A cursive script signs the founder's note; a monospaced face (Writer) appears only in underlined footer links.",
  "colour": "#f4f1e8 #03372a #018c70 #0e3b2c #b9ab82 — Cream paper and a family of greens: near-black green type, mid-green button, deep green mat panels. All other colour comes from the photographic stickers scattered on the mats.",
  "imagery": "Photographic cut-outs with white die-cut borders (duck, apple, camera, lips) scattered on dark green cutting-mat panels with grid lines and ruler ticks; a phone mock-up cropped by the panel's bottom edge.",
  "layout": "A short centred page in a 1150px column: headline, one wide mat panel, three text columns, a narrow centred letter, then two full-bleed marquee rows of collage tiles and a three-line footer. Generous cream gaps separate every block.",
  "sections": [
   {
    "role": "showcase",
    "description": "A wide panel with rounded corners, dark green with a fine lighter grid and numbered ruler ticks around its edge like a cutting mat. A phone stands at centre, cut off by the panel's bottom edge. A dozen photographic stickers with white die-cut outlines are scattered around it at different rotations and sizes, none overlapping the phone. Beneath the panel, three text columns each start with a small cut-out object where an icon would be."
   },
   {
    "role": "intro",
    "description": "A founder's letter in a centred column about 520px wide: a small circular avatar, then four short paragraphs of italic rounded sans in dark green at about 16px, each two or three lines and separated by a full blank line, with a cursive signature in green as sign-off. There is no heading and no box, only the letter floating in cream space."
   },
   {
    "role": "gallery",
    "description": "Two full-bleed rows of landscape collage tiles, each about 320 by 150px with small rounded corners on the dark green mat ground, separated by 10px gaps. The rows are offset from one another and run off both page edges, moving in opposite directions. Each tile is a different user arrangement of stickers, so the strip works as proof without captions."
   }
  ],
  "steal": [
   "Interrupt the headline with photographic cut-outs sized to the letter height, including the product name spelled in ransom-note letters.",
   "Give a container the texture of a real object from the product's world, here a cutting mat with grid and ruler ticks, instead of a flat card.",
   "Use small photo cut-outs with die-cut white borders where feature icons would go."
  ]
 },
 {
  "id": "opl-ohhmydesign",
  "name": "OhhMyDesign",
  "url": "https://ohhmydesign.com",
  "source": "One Page Love",
  "kind": "agency",
  "score": 7.2,
  "idea": "The whole page pretends to be an open design-tool canvas floating in a blue sky: a pixel ruler across the top, selection handles on elements and a labelled multiplayer cursor.",
  "mood": [
   "playful",
   "loud",
   "bright",
   "busy"
  ],
  "archetype": "type-poster",
  "hero": "Full-bleed blue sky with blurred clouds. A 30px ruler strip spans the top with ticks every 100px, logo at left, a scroll-percentage chip and live clock at right. Beneath it float three white pills: availability at left, a centred nav with a dark active item, an email at right. Centre stack: a translucent proof badge with selection handles on its corners; a two-line headline in ultra-condensed heavy capitals about 150px tall and 50% of viewport width, filled with a vibrating orange-and-navy dot pattern; a mono orange label; two lines of grey 19px text in a dashed selection box; an orange and an outlined button. Mono captions occupy both bottom corners.",
  "type": "Headline in ultra-condensed heavy capitals (largest text 16.5vw), pattern-filled on desktop, solid navy and orange on mobile. Hanken Grotesk for body and buttons, Bricolage Grotesque bold for section heads, Space Mono in small tracked uppercase for labels. Four voices is a lot.",
  "colour": "#58a7e6 #a7d4f2 #ffffff #0e1822 #f0531c — Sky blue behind everything, white cards on top, navy for text and the footer, orange for buttons and highlights. Orange against blue supplies the complementary clash the headline exploits.",
  "imagery": "An illustrated soft-focus cloud sky as constant backdrop; laptop mockups of client sites on coloured sets inside thick white-framed rounded cards; small UI vignettes (chat thread, stat tiles). Nothing is full-bleed except the sky.",
  "layout": "Centred column about 1280px wide. Section titles in bold capitals, centred, with a small paper-note caption beneath; content sits in white rounded cards floating on the sky. The ruler strip stays fixed; the footer is a navy slab with rounded top corners.",
  "sections": [
   {
    "role": "about",
    "description": "Bento of white and navy rounded cards on the sky. Top-left, a wide white card with a large orange quote mark, a two-line bold statement whose second line is orange, grey copy and a mono footer line. Top-right, a navy card listing three large figures with orange plus signs, each row ending in a right-aligned mono label. Below: outlined capability chips, a dark live-status tile, a tools card and a small review card."
   },
   {
    "role": "how-it-works",
    "description": "Process told as a fake team chat. A centred capitals heading and a beige sticky-note caption, then one white rounded window about 780px wide with a channel-style title bar and avatars. Inside, messages alternate between a blue and an orange avatar, some with file-attachment chips, and each stage is announced by a thin orange mono divider line numbered 01 to 04. The last message shows a typing indicator."
   },
   {
    "role": "work",
    "description": "Work carousel of large rounded cards about 760px wide, each with a thick white frame, a dark laptop render filling it, and a bottom strip carrying a dot, the project name and three tiny outlined tags. Neighbouring cards are cropped by the viewport edges and faded. Below: a row of dash-shaped pagination marks with the active one orange, and two small square arrow buttons."
   },
   {
    "role": "footer",
    "description": "Navy slab with rounded top corners rising over the sky. A mono file-name label top-left, a round up-arrow top-right; then the email address as a 60px bold link with an orange arrow, an orange button and availability dot beneath, three small link columns at right. The bottom half is the wordmark at full container width, about 280px tall, white with an orange first letter, on a dashed baseline."
   }
  ],
  "steal": [
   "Borrow design-tool chrome as decoration: a ruler strip with a live scroll percentage, corner handles on one element, a labelled cursor.",
   "Explain the process as a chat thread with numbered divider lines between stages instead of three icon cards.",
   "End with the wordmark at full container width inside a slab with rounded top corners that rises over the page background."
  ]
 },
 {
  "id": "opl-glide-typeface",
  "name": "Glide Typeface",
  "url": "https://blode.co/glide",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.2,
  "idea": "The page background is one grainy sky that passes from midday blue through sunset pink to a starry night as you scroll down the résumé.",
  "mood": [
   "soft",
   "atmospheric",
   "friendly",
   "polished"
  ],
  "archetype": "other: centred-name-on-gradient-sky",
  "hero": "Full-viewport grainy gradient: saturated sky blue at the top fading through pale pink to warm amber at bottom-left, with soft diagonal cloud streaks. A translucent white pill navigation bar about 62% of the viewport wide floats centred at the top, name at its left and five links at its right. The name is centred at about 33% height in a tight italic display serif at 6.7vw on one line. Beneath it: a two-line sans introduction at roughly 2vw, a white pill button with a blue dot and blue label, then an underlined text link. The lower 35% of the screen is empty gradient.",
  "type": "editorialOld italic at 96px with -0.02em tracking for the name and section headings, and upright in a narrow cut for one large pull statement; Inter 18px for body, nav and buttons. About a 5:1 jump from display to body. Sentence case, four sizes.",
  "colour": "#3d9be9 #e8d9d7 #f3d5b8 #6f86d6 #e7b9c4 #1f4a5a — The gradient is the palette: blue to peach, periwinkle with white streaks, pink dusk, then deep teal night. Text flips from near-black to white as it darkens; cobalt is the accent.",
  "imagery": "No photographs. A full-bleed blurred sky gradient with diagonal cloud streaks and a visible film-grain overlay runs behind the entire page; small white star dots appear in the final night section.",
  "layout": "One narrow centred column, 45-60% wide, over a continuous background with no section boundaries or colour blocks. Blocks alternate between centred headings with pill buttons and left-aligned text. Experience is a left-rail timeline with glass cards; the footer is a five-column link list.",
  "sections": [
   {
    "role": "intro",
    "description": "A four-line statement in large upright serif at about 3.5vw, left-aligned inside the centred column, white over the periwinkle part of the sky. It is caught mid-reveal: the first words are fully opaque, the next few half-transparent, the rest at roughly 15% opacity, so the whole paragraph shape is visible before it fills in. Nothing else shares the viewport."
   },
   {
    "role": "about",
    "description": "Vertical career timeline. A thin line at the far left of the column carries white-ringed blue dots, each paired with a date range in serif at about 1.6vw. To the right of each dot, a wide frosted-glass card with a 1px light border and rounded corners holds the company name in italic serif, the role in smaller italic, and one line of sans description. Cards are spaced about 150px apart over the pink dusk gradient."
   },
   {
    "role": "footer",
    "description": "Night sky in deep teal, lightening toward the bottom and scattered with tiny white star dots. A centred italic heading, a three-line centred paragraph and a pale pill button occupy the upper half. Below a faint hairline, five columns of small white links with bold column titles; the first column holds the name and location."
   }
  ],
  "steal": [
   "Tie one long background gradient to page position so the palette tells time: day at the hero, dusk mid-page, night with stars at the footer, flipping text from dark to light on the way.",
   "Lay visible grain over a blurred gradient with diagonal streaks so it reads as photographed sky rather than a CSS gradient.",
   "Reveal a large statement word by word on scroll while keeping upcoming words at about 15% opacity, so the paragraph's full shape is present from the start."
  ]
 },
 {
  "id": "opl-belen-jones",
  "name": "Belen Jones",
  "url": "https://www.belenjones.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.2,
  "idea": "The whole portfolio is one screen: a slowly turning 3D box skinned with project footage behind a floor-to-ceiling list of outlined client names.",
  "mood": [
   "bold",
   "playful",
   "fashion",
   "kinetic"
  ],
  "archetype": "immersive-webgl",
  "hero": "One viewport, no scroll. A flat pastel field (periwinkle on load) with a large black-edged 3D box, about half the viewport wide, rotating right of centre; each face shows a project film still. Over everything, nine project names are stacked flush-left from top edge to bottom edge in an ultra-bold extended sans at 7.6vw, caps, drawn as thin outlines only, lines almost touching; the active name is filled solid. Two small white pill buttons sit top-right; a two-line mono location and clock bottom-right. On first load only the box is visible, drifting in from the right with its texture mirrored, before the list appears.",
  "type": "Monument Extended Ultrabold caps at 109px with line-height near 0.95, drawn as a 1px outline and filled only for the active item. Roboto Mono in tiny caps for buttons, location and time. Two sizes in total, about 10:1.",
  "colour": "#c3cbe5 #141414 #efd3da #e6dccd #cfd3cb #f9d2bf — A flat pastel background that swaps per project (periwinkle, pink, sand, sage, peach) against the black box and dark outline type. The footage supplies the saturated colour.",
  "imagery": "Campaign and music-video stills mapped as textures onto the faces of a rotating WebGL cuboid with black edges; images skew in perspective and blur while turning. No flat images anywhere.",
  "layout": "A single fixed screen. The type column sits flush to the left edge with about 10px margin and fills the full height; the 3D object occupies centre-right behind the type. Utility items are pinned to the right-hand corners.",
  "sections": [
   {
    "role": "work",
    "description": "The list is the navigation. Hovering a name fills that line solid (dark, or with a clipped piece of footage showing through the letters), swaps the page background to that project's pastel, and turns the box to a face carrying the matching film still, enlarged to roughly 45% of the viewport. All other names stay as hairline outlines drawn over the box."
   },
   {
    "role": "other",
    "description": "Mobile variant: the list is dropped. A hairline-bordered bar across the top is divided into four cells with mono caps labels for back, name, contact and next. Below it a single portrait video frame about 57% of the width is centred on the pastel field with large empty space above and below; projects advance one at a time."
   }
  ],
  "steal": [
   "Set a project list as outline-only giant caps over the media and fill just the active line, so the list is both navigation and texture.",
   "Map project stills onto the faces of one rotating box so changing project is a turn of the object, not a page change.",
   "Assign each project its own flat pastel background and cross-fade the whole field on hover."
  ]
 },
 {
  "id": "opl-tiny-computer-co",
  "name": "Tiny Computer Co.",
  "url": "https://tinycomputer.co",
  "source": "One Page Love",
  "kind": "studio-portfolio",
  "score": 7.2,
  "idea": "A software studio presented as a plain text log: one serif sentence, then monospace notes with dates in a narrow left column, and nothing else.",
  "mood": [
   "quiet",
   "terse",
   "crafted",
   "nocturnal"
  ],
  "archetype": "left-statement-quiet",
  "hero": "Near-black viewport. Everything hangs on a left margin of about 5%. A small serif wordmark sits 10% from the top; there is no navigation at all. The headline, two lines of off-white serif at 7.5vw with tight leading, starts about 27% down and spans only the left 44% of the width. One line of 18px monospace follows a full headline-line below it. The right half and the bottom 40% of the viewport are completely empty: no button, no image, no rule.",
  "type": "A custom text serif at weight 400 with -0.02em tracking for the 108px headline and the small wordmark; sohneMono at 18px with very open line spacing for everything else. Two sizes only, a six-times jump; below the hero, hierarchy comes from underlines and grey dates.",
  "colour": "#111111 #eeeeee #8a8a8a #1c1c1c — Near-black ground, off-white text and mid-grey for dates and placeholders. No accent colour; the only colour on the page is inside the single product screenshot.",
  "imagery": "One product screenshot only: a dark app window with large corner radius showing a sidebar and a masonry of image thumbnails, about 70% of viewport width, starting slightly left of the text margin.",
  "layout": "A single left column roughly 40% of the viewport wide; the right side stays empty for the whole page. Blocks are separated by a three-dash mono divider instead of rules. Lists pair a left text line with a short right-aligned date. About four screens.",
  "sections": [
   {
    "role": "showcase",
    "description": "A wide dark app-window screenshot, then in the narrow column a five-line mono paragraph that opens with the underlined product name. Below it the waitlist is written as a sentence: label text followed on the same line by a borderless input shown only as grey placeholder. Two changelog lines follow, each prefixed with an arrow and ending in a grey right-aligned date."
   },
   {
    "role": "list",
    "description": "A dated log of one-sentence notes: each entry is one or two lines of mono text at left with a grey day-month date flush to the right edge of the column and a blank line between entries; some entries are underlined as links. It ends with an underlined all-entries link with an arrow. No headings, numbers or bullets."
   },
   {
    "role": "footer",
    "description": "After a three-dash divider come two mono lines only: a two-word sign-off and an email address followed by a solid block cursor, left-aligned with a tall empty band beneath. There is no link row, no logo and no copyright; the page simply stops."
   }
  ],
  "steal": [
   "Confine the whole page to a left column under half the viewport and leave the rest empty, with no nav or buttons.",
   "Write the signup as an inline sentence with a borderless placeholder input instead of a boxed form.",
   "Pair one large serif headline with monospace at a single size for all other text, using right-aligned grey dates as the only secondary rhythm."
  ]
 },
 {
  "id": "opl-weeksync",
  "name": "WeekSync",
  "url": "https://weeksync.app/",
  "source": "One Page Love",
  "kind": "saas",
  "score": 7.1,
  "idea": "The page is a paper coupon: a dotted cut line with a scissors icon frames the viewport, and on scroll the navigation rail is cut free while the rest of the sheet tilts and falls away.",
  "mood": [
   "playful",
   "utilitarian",
   "dry",
   "hand-made"
  ],
  "archetype": "other: fixed-rail-and-top-statement",
  "hero": "Taupe-grey field wrapped by a black dotted rounded-rectangle border inset 16px from every edge. A left rail about 26% wide holds, centred on its own axis, a small black logo glyph at the top, a two-line mono tagline and a text link in braces; four nav labels, each under a small empty circle, stack at the bottom of the rail. A scissors icon sits on the bottom dotted line where rail meets main area. The main area carries one four-line statement in medium grotesk at 3vw, flush left and flush top, ending in the first quarter of the height. The remaining three quarters are empty.",
  "type": "Inter Medium at 43px with -0.05em tracking is used once, for the opening statement. Everything else (nav, card copy, counters, FAQ) is Red Hat Mono at 12 to 19px, centred in cards, with braces and italic underlines as state marks.",
  "colour": "#cdc8c2 #000000 #f8f6f3 #dfe296 — Flat warm grey ground with black ink throughout. Cards alternate off-white and a pale acid yellow-green, the only colour, which appears solely as a card fill.",
  "imagery": "Loose black brush-and-ink cartoons of anthropomorphic calendars, charts and buildings, scratchy and energetic, each placed alone in the centre of a pale yellow-green near-square card with large rounded corners.",
  "layout": "A dotted-outline rail stays pinned in the left quarter for the whole page; content scrolls in the remaining three quarters as a two-column grid of near-square cards with 8px gaps, then becomes a single mono list for FAQ. Section titles are only tiny mono labels.",
  "sections": [
   {
    "role": "other",
    "description": "Scroll transition after the hero. The single dotted frame splits along a new vertical dotted line at the rail edge as the scissors travel up it; the right-hand piece of the sheet then rotates a few degrees and drops out of view, leaving the rail as its own dotted rectangle. The rail stays pinned while the first row of cards rises from the bottom edge into the vacated area."
   },
   {
    "role": "features",
    "description": "Two-column checkerboard of near-square cards about 510px wide with 24px corner radius and 8px gutters. An off-white card holds three centred lines of 13px mono copy with a small '1 of 3' counter beneath; its neighbour is a yellow-green card with one ink cartoon. The next row flips the order, so text and drawing swap sides all the way down. No icons, titles or buttons inside cards."
   },
   {
    "role": "faq",
    "description": "FAQ as a plain mono list across the right three quarters: a tiny centred label, then questions at 14px, each preceded by a small hollow circle with about 35px between rows. The open item gets a filled dot, an italic underlined question and an indented three-line answer. No dividers, boxes or chevrons; the same hollow and filled circles mark the active item in the rail."
   }
  ],
  "steal": [
   "Give the page a physical metaphor that also does layout work: a dotted cut line frames the viewport, then separates the nav rail on scroll.",
   "Alternate text-only and illustration-only cards in a checkerboard, flipping sides each row, instead of packing icon, title and copy into every card.",
   "Use hollow and filled circles as the only state marker for both navigation and accordion items."
  ]
 },
 {
  "id": "aww-the-tuscan-journey-begins",
  "name": "The Tuscan Journey Begins",
  "url": "https://weekend-mm-2026-pasticcino-bag-master.monogrid.io/en/",
  "source": "Awwwards Site of the Day",
  "kind": "fashion",
  "score": 7.1,
  "idea": "A bag campaign told as a painted train journey: you enter through a ticket-shaped title card hung inside an illustrated vintage carriage, with the bag resting on a suitcase.",
  "mood": [
   "nostalgic",
   "painterly",
   "warm",
   "storybook"
  ],
  "archetype": "immersive-webgl",
  "hero": "A full-viewport painted train compartment, edged by a rough ochre brush-stroke border like a torn canvas. In the upper middle sits an olive-green card about 64% of the width and 42% of the height, slightly rotated, with notched ticket corners and a darker offset copy behind it. Inside, cream type: a small letterspaced first word, two lines of bold extended capitals at 6.4vw staggered left and right with a hard dark drop shadow, a small last word, and one line of bold 16px copy. A cream scalloped button overlaps the card's lower edge; a sound prompt sits bottom-centre and a round music toggle bottom-left.",
  "type": "Nimbus Sans Extended Bold in capitals at 92px with a hard offset shadow for the two title words, stepped horizontally; tiny capitals at about 0.3em tracking above and below; Nimbus Sans Bold at 16 to 20px for copy. One family, three sizes.",
  "colour": "#472913 #464f16 #29180a #8a5a2b #e4e0cf #c9a15a — Tobacco browns and ochre fill the scene; one olive-green card holds the text in cream. The same green recurs on the striped bag, tying the product to the title card.",
  "imagery": "A digitally painted vintage carriage interior with visible brush texture: leather seats left and right, a suitcase carrying the striped green bag at lower left. Full-bleed, but inside a ragged painted edge instead of a clean rectangle.",
  "layout": "Single screen, no scroll captured. A centred stack of title card, button and sound prompt over a symmetrical one-point-perspective scene whose window sits directly behind the card. One utility control is tucked bottom-left. The mobile shot shows the card unfolding before its text appears.",
  "sections": [],
  "steal": [
   "Mask a full-bleed scene with a ragged brush-stroke edge so the viewport reads as a painting rather than a screen.",
   "Put the title on a physical object in the scene's own palette (a ticket with notched corners and an offset shadow copy) instead of floating text on a scrim.",
   "Stagger two headline words horizontally and bracket them with tiny letterspaced first and last words to make a lockup out of a sentence."
  ],
  "media": "A painted 3D train compartment covers the whole first screen inside a ragged brushed border fixed over the viewport, with a flat olive placard about 65% of the width and 45% of the height laid over it like a sign and a die-cut badge button below. Oversized painted layers of 2183-3187px wait off-screen to sweep in; no video.",
  "motion": "An olive loader with an extruded word gives way to the painted world by 1.2s, then the controls, and the title card last at about 2.5s (load 7.6s), after which nothing scrolls: the eight settled screens are identical apart from a slow idle float of a few pixels on the card. Panels enter with transform over 1s cubic-bezier(.05,.7,.1,1) at 0.55s and 0.63s delays, two layers 80ms apart, and leave over .6s on a sharp ease-in; there are 10 reduced-motion rules."
 },
 {
  "id": "aww-oimachi",
  "name": "Oimachi",
  "url": "https://www.oimachi.co",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.1,
  "idea": "A studio homepage that behaves like a dense dashboard: work, posts, experiments and testimonials tiled edge to edge with 8px gutters instead of spaced-out sections.",
  "mood": [
   "dense",
   "dark",
   "matter-of-fact",
   "editorial"
  ],
  "archetype": "other: left statement over media row with posts sidebar",
  "hero": "Charcoal ground (#181818) with only 8px side margins. Top-left: a round logo, then five tiny black rectangular chips with bold white 13px labels; top-right a contact chip and a theme toggle. The headline starts at the left margin about 160px down: two lines of light grotesk at 52px (3.6vw), tight tracking, with one word in italic serif. From 280px to the bottom edge runs a three-part row: two tall images butted together (each about 535x610px: a hand holding a phone on black, a man in a printed tee) and a 330px sidebar of blog posts, each a bold 14px title, two grey truncated lines and a small-radius thumbnail.",
  "type": "Aeonik throughout: light 52px for the headline, regular 20 to 24px for mid-page statements, bold 13px for nav chips and post titles, 12px grey captions. Single words switch to an italic serif inside headings. The scale is deliberately small; nothing exceeds 3.6vw.",
  "colour": "#181818 #070707 #2a2a2a #ffffff #ff4a2b #8a8a8a — Charcoal ground with black chips and white text, unchanged from section to section; colour arrives only through work thumbnails in orange-red, purple and green. A light-mode toggle exists.",
  "imagery": "Client work as photographs, UI shots, brand graphics and generated explorations; rectangles with 4px corners in tight 4:3 strips and a masonry of mixed aspect ratios, each with a tiny caption.",
  "layout": "8px margins and 4 to 8px gutters everywhere. Short three-line statements at about 22px are indented to the 33% or 66% column and act as section breaks between tightly tiled image grids. Text columns stay narrow; images take two-thirds of the width.",
  "sections": [
   {
    "role": "work",
    "description": "Rows divided by hairlines, each about 120px tall. The left third holds a small client icon, the name in 12px bold and the sector in grey at the top, with a two-line 11px description pinned to the bottom of the row. The right two-thirds holds three equal 4:3 thumbnails with 4px gaps. Above the list a three-line statement at 22px sits at the 66% column with a text link far right."
   },
   {
    "role": "gallery",
    "description": "A statement at the 66% column introduces a dense masonry of experiments: around twenty tiles in six uneven columns with 4px gaps, sizes from 90px squares to a 280x160px feature tile, mixing screenshots, posters, renders and textures. Every tile has a 10px caption beneath in the form 'Name / Type'. No hover chrome is visible; it reads like a contact sheet."
   },
   {
    "role": "testimonial",
    "description": "Two wide video stills side by side, each cropped to a shallow band about 95px tall, showing a person mid-interview. Under each: a black square play chip, a small company icon, then the name in bold 12px and the role in grey. There is no quotation text at all; the testimonial is the video."
   },
   {
    "role": "footer",
    "description": "Four equal columns headed at 20px, each a list of 11px grey links prefixed by a tiny coloured square icon. Below, a large white circle logo with a black rounded square inside at far left, a two-line 20px question at the 33% column, and a small white booking chip with email and phone set inline beside it."
   }
  ],
  "steal": [
   "Shrink page margins and gutters to 8px and tile media edge to edge so a portfolio reads as a working dashboard rather than a brochure.",
   "Put a live blog or news sidebar inside the hero next to the showreel, so the first screen proves the studio is active.",
   "Style nav links as tiny solid rectangular chips sitting directly in the page corner instead of in a bar."
  ],
  "media": "A muted, looping reel of brand work covers about 51% of the first screen (75% of the width, 68% of the height) in a black well beside a rail of three 16:9 news thumbnails. Below: third-split rows with a label column on the left and three 3:2 tiles on the right two thirds, half-and-half video testimonials, an 8-column masonry of mixed ratios with small captions, and a text panel beside a photo stack; 34 images and 17 videos, client work supplying all the colour on near-black.",
  "motion": "There is no preloader and only the reel cuts after 400ms; a single ScrollTrigger scrubs the news rail at 0.8 so it drifts as the hero leaves, with no smooth-scroll library and no pins. Cards grow an outline over 0.5s on an ease-out-quint, images move over 0.6-0.8s on cubic-bezier(.19,1,.22,1), links fade colour over 0.2s, and 33 skeleton shimmers (1.2s) hold space while media loads, with no reduced-motion rule."
 },
 {
  "id": "opl-artem-taradash",
  "name": "Artem Taradash",
  "url": "https://taradash.me/",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.1,
  "idea": "A designer's CV compressed into one newspaper-like band at the top, after which oversized product renders and project artefacts speak at full scale.",
  "mood": [
   "matter-of-fact",
   "editorial",
   "dense",
   "confident"
  ],
  "archetype": "editorial-masthead",
  "hero": "White page with 20px margins. Top-left are three small black rectangular tags with white text (name and two links). Below them a three-line statement at about 3vw in regular-weight grotesk fills the first third, left-aligned. To its right, starting at the very top edge, run two narrow columns of 12px text, then a third column listing clients one per line, and in the far top-right a circular portrait about 200px wide with a white hand-lettered word across the face. This text band ends by a quarter of the height. Below it a huge cut-out vehicle render bleeds off the bottom, with a project card at right.",
  "type": "One family, Diatype, in regular weight throughout. Three sizes: about 43px for statements and project titles, 12.4px for all running text, about 11px for tags. Tight leading, sentence case, no bold and no capitals; hierarchy comes from size alone.",
  "colour": "#ffffff #111111 #f7f9fb #1c4fd8 #f0a23a — Strictly black on white for the frame. All colour arrives with project material: an orange-to-blue gradient, a cobalt zigzag pattern, warm photography.",
  "imagery": "Product renders cut out on white and shown very large, interface screenshots with a small corner radius, a full-width studio photo with a circular logo overlaid, and textile-pattern fields running margin to margin. Scale varies sharply between projects.",
  "layout": "A loose six-column grid with 20px margins; small text blocks hang from column lines beside very large images. Each project is arranged differently, and there are no dividers or section backgrounds, only white space and jumps in scale. The tag nav stays fixed top-left.",
  "sections": [
   {
    "role": "work",
    "description": "Each project pairs one oversized visual with a small caption cluster. In the first, a cut-out product render fills the left 60% and bleeds off the edge. The right third stacks a landscape screenshot with slightly rounded corners, then a row holding a tiny label and two-line title at about 3vw on the left and a five-line 12px description on the right."
   },
   {
    "role": "work",
    "description": "A row of three: a round black watch-face mock-up about a quarter of the width, a wide rectangle filled with a horizontal blue, violet, orange, blue gradient with a tiny tick scale beneath it, and a narrow text column at far right with label, three-line title and two short paragraphs. Circle, rectangle and text share a top line."
   },
   {
    "role": "gallery",
    "description": "A cobalt-and-white zigzag textile pattern runs margin to margin for more than a full viewport height with only a two-line caption beneath it at left. Before it, a black-backed mosaic of pattern samples and report-cover mock-ups sits beside two narrow text columns. The pattern is given a section to itself with no mock-up frame."
   },
   {
    "role": "contact",
    "description": "Closing row on white: a tiny label, then a four-line sentence at about 3vw in the left third; a small square portrait at the two-thirds mark; to its right a short question with two underlined links below. All three hang from the same top line with empty space between them."
   }
  ],
  "steal": [
   "Put bio, client list and portrait in one compact multi-column band at the top so the first scroll is already work.",
   "Use solid black rectangular tags with white text as the only navigation chrome.",
   "Let one project artefact (a pattern, a gradient) run full width for a whole screen with a two-line caption instead of framing it in a mock-up."
  ]
 },
 {
  "id": "aww-sobha-privy-collection",
  "name": "Sobha Privy Collection",
  "url": "https://sobha-privy-collection.com/",
  "source": "Awwwards Site of the Day",
  "kind": "real-estate",
  "score": 7.1,
  "idea": "Luxury homes sold by restraint: a black sculptural render and a script-over-capitals title, then white pages where interior images grow and overlap huge serif capitals as you scroll.",
  "mood": [
   "opulent",
   "hushed",
   "formal",
   "cinematic"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Full-bleed near-black video of a glossy black sculptural form, wide curved bands catching thin highlights, filling the frame at very low contrast. A centred two-line title about 46% of the width: a formal script phrase at about 6.9vw, then a line of light roman serif capitals at about 6vw directly beneath, wider than the script. Nothing else in the middle. Corners only: a two-line hamburger with a menu label top-left, a small serif wordmark with a micro subtitle top-centre, a text link top-right, a circled down-arrow bottom-left, and bottom-right a greyscale 3D-map thumbnail about 17% wide with a numeral and a two-line label.",
  "type": "TT Ramillas in light uppercase for display (up to 7.9vw) paired with the formal script Altesse for two- or three-word accent phrases that overlap the capitals; TT Commons Pro at 13px for nav, eyebrows and body. A very large jump from 100px display to 13px text.",
  "colour": "#010101 #ffffff #d8cdbd #8a7862 #1a1919 — Black hero, then pure white pages with near-black type. Warmth comes only from the beige, cream and bronze interiors in the renders. No accent colour anywhere.",
  "imagery": "Architectural interior renders in cream and bronze (double-height dining halls, lounges, marble pool rooms) in tall portrait and near-square crops, square corners, arranged in groups of different sizes that scale with scroll. The hero is an abstract black sculptural render.",
  "layout": "Centred, symmetrical compositions (heading over a three-image group) alternate with asymmetric ones (large left-aligned capitals with images offset right and lower-left). A very long scroll-driven page of about 48 screens, with pinned image scaling between text moments.",
  "sections": [
   {
    "role": "intro",
    "description": "White section, centred. A two-line micro eyebrow in tracked capitals, then a two-line heading in light serif capitals at about 2.6vw. Below it a triptych: a tall centre image about 23vw wide at 3:4, flanked by two shorter images set lower, their tops about 30% down the centre image and their outer edges touching the viewport sides. On scroll the centre image scales up and the side images rise toward its top."
   },
   {
    "role": "gallery",
    "description": "Pinned scaling group: the same three renders rearranged so the centre image is about 26vw wide and roughly 30% taller than its neighbours, which hang from a common line a little below its top and are cropped by the left and right viewport edges. Gaps are under 1vw. The fixed header stays above, its logo sitting on top of the image."
   },
   {
    "role": "intro",
    "description": "Statement with overlap: five lines of light serif capitals at about 5.5vw, flush left on a 1% margin, filling the left 55%. A grey script phrase overlaps the end of the last line and runs into a tall image occupying the right 25% from mid-height to the bottom. A second, small image about 12vw wide sits lower left under the text. Mid-transition frames show the capitals rising letter by letter from behind a baseline mask."
   }
  ],
  "steal": [
   "Pair one short phrase in formal script with a line of light serif capitals beneath it, letting the script overlap the capitals or run into an adjacent image.",
   "Arrange three images as a tall centre flanked by two lower ones cropped by the viewport edges, then scale the centre up on scroll.",
   "Keep the hero to a near-black, low-contrast render with all controls pushed to the four corners so the centred title is the only bright thing."
  ],
  "media": "A WebGL black ribbon covers the whole first screen behind the centred slogan, with a 240x140 map clip docked bottom-right (about 2.6%). Later: a centre portrait that grows from about 620 to 760px wide as it rises, a triptych with the flanking pictures cropped by the viewport edges, a picture sliding under the last lines of a statement, full-bleed night-skyline video interludes, a curved WebGL carousel pinned under a title and long pinned horizontal galleries; 28 images and 9 muted loops, square corners.",
  "motion": "After a preloader of about 1s the title drifts up a few pixels and settles by 2.5s, and Locomotive smooth scroll then scrubs nearly everything by transform as a continuous lerp: pictures move faster than text, each section slides over the previous one, and the three-worlds chapter pins a curved carousel and horizontal tracks for about 23,000px. 187 spans rise over 1.4s cubic-bezier(0.29,0.52,0.5,1) and 114 fade over 1s cubic-bezier(0.7,0,0.3,1), the stylesheet's main curve (32 uses)."
 },
 {
  "id": "aww-coffeetech-r",
  "name": "CoffeeTech®",
  "url": "https://coffee-tech.com/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 7.1,
  "idea": "Present an industrial roaster maker like a design brand: one enormous three-word statement on black, with the machine withheld until the first scroll, where it emerges from the dark.",
  "mood": [
   "confident",
   "industrial",
   "warm",
   "restrained"
  ],
  "archetype": "type-poster",
  "hero": "Near-black viewport with nothing but type. A centred three-line headline, one word per line, in Inter Medium at about 15vw with tight tracking; the first line starts a third of the way down and the last runs to within 35px of the bottom edge, its widest word spanning roughly 70% of the width. Cream letters; no subhead, no media, no hero button. Navigation is one quiet row: logo with a terracotta mark at left, four text links centred, then a filled terracotta 'Products' button with a grid icon, an outlined contact button and a language dropdown at right. The top third stays empty.",
  "type": "Inter throughout at weight 500. Display lines at 216px with -0.07em tracking and leading near 0.95 against 14px body, a jump of about 15 times. Secondary headlines near 10vw, intro paragraph around 26px. Section labels are tiny and wrapped in square brackets.",
  "colour": "#0d0e13 #e5e2dd #f3ece2 #c8603d #262629 — Blue-black and warm putty-grey sections alternate; cream type on dark, near-black on light. Terracotta appears only on the logo mark and the primary button.",
  "imagery": "Studio shots of roasters: a black machine barely lit against black after the hero, then white and black machines as cut-outs on pale-grey tiles. One warm founder portrait with a signature overlapping its edge; macro bean photos in small-radius cards.",
  "layout": "Outer margins of about 70px. A centred type poster on top, then an offset two-column intro, then a product grid pushed into the right two-thirds with its bracketed label alone in the left third. Oversized left-flush headlines open and close the lower page.",
  "sections": [
   {
    "role": "intro",
    "description": "Warm putty-grey band entered through a hairline. A portrait about 290px wide with 8px corners sits in the left third; a scrawled signature overlaps its bottom-right corner and spills onto the background. A seven-line paragraph at about 26px, medium weight, roughly 510px wide, begins at the horizontal midpoint, followed by a small underlined text link. No heading; the right quarter and the gap between the two elements stay empty."
   },
   {
    "role": "showcase",
    "description": "A headline at roughly 10vw is flush to the left edge and clipped by the right, like a slow marquee. Below, a tiny bracketed label sits alone in the left third; the right two-thirds hold a two-column grid of pale-grey tiles about 400px wide with a small radius, each with a centred machine cut-out, the model name beneath and a tiny outlined pill for its category. The grid closes with a 64px underlined 'see all' text link with an arrow."
   },
   {
    "role": "footer",
    "description": "Back to blue-black. A cream contact headline at about 10vw sits hard against the left edge, far larger than anything near it. Underneath, the terracotta logo mark is enlarged to about 140px at left; four narrow link columns in small grey text run from 28% to 85% of the width; a pill-shaped back-to-top button sits at far right, with a thin legal row at the bottom."
   }
  ],
  "steal": [
   "Let a three-word headline at about 15vw be the entire first viewport and withhold the product until the first scroll.",
   "Photograph a dark product on a background matching the page colour so it appears to emerge from the page rather than sit in a box.",
   "Overlap a handwritten signature onto the corner of a portrait so an about block feels signed rather than laid out."
  ],
  "media": "The fold is type only; one scroll later a full-bleed low-key photograph of the roaster on matching black covers 76% of the screen, so the object floats out of the dark as the second beat of the hero. Below: a portrait with a signature over its edge, product renders contained on tinted tiles in a 2x2 grid, three 4:5 macro ingredient cards with the label docked bottom-left, and a blog slider; 25 images, no video, about 12.5px corners on card media.",
  "motion": "No entrance at all: the 400ms frame already matches the settled one. No smooth scroll, pins or sticky elements; a model scale-in keyframe over 1.2s cubic-bezier(.36,.18,0,.99) with a 1.5s glow grows the roaster into place, link underlines wipe in by clip-path over 2.5s, overlay panels slide in over 0.8s, and the most common duration is 0.3s."
 },
 {
  "id": "opl-shelf",
  "name": "Shelf",
  "url": "https://www.savetoshelf.com",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.1,
  "idea": "Saves scattered across a dozen places are funnelled into one searchable shelf, shown literally by tumbling source chips and a panel edge that narrows to a point.",
  "mood": [
   "friendly",
   "clean",
   "soft",
   "optimistic"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "An off-white panel sits inside a 12px warm-grey page frame. A compact floating nav about 880px wide: logo left, three links and a lime waitlist button right. Centred stack: a small grey pill badge with a sparkle icon, then a two-line headline in General Sans Semibold at about 5.8vw with tight tracking, one word of which sits on a lime rounded-rectangle highlight; a two-line grey subhead; an email field with its button nested inside one rounded outline, 460px wide. From 75% down, the top of a bordered app window rises, and a larger search bar holding a half-typed query overlaps it with a soft shadow.",
  "type": "General Sans Semibold for headings (84px hero, 40 to 50px section heads, -0.03em); Switzer for everything else at 14 to 20px, mostly mid-grey. About four sizes. The one flourish is a headline word set on a coloured block.",
  "colour": "#fbfbf9 #f2f1ed #1b1b19 #9ee86f #e9e9e6 — Warm off-whites and soft charcoal with one lime green: the nav button, the highlighted word, small tags and a full-colour closing block.",
  "imagery": "Vector mock-ups of the app: a bordered window with sidebar and save cards, an enlarged search field, tiny wireframe thumbnails in step cards. No photography. Angled pill chips with small source icons act as illustration.",
  "layout": "Centred column inside large rounded off-white panels separated by the grey page frame. Mostly stacked heading-plus-subtext blocks, one left and right split, one narrow accordion column. Panel edges are shaped: one ends in a shallow downward chevron.",
  "sections": [
   {
    "role": "features",
    "description": "A centred heading and two-line subtext are partly covered by about nine grey pill chips, each naming a save source with a small icon, rotated at random angles as if dropped. The panel's bottom edge is a shallow V pointing down at centre; from its tip a thin vertical line descends about 80px to a second centred heading, subtext and an empty search field, so the layout itself draws a funnel."
   },
   {
    "role": "how-it-works",
    "description": "A rounded white panel split in two. Left, from a 10% inset: a small lime tag with icon, a two-line heading at about 50px and two short grey paragraphs, vertically centred. Right, from 53% to 90%: three stacked rounded grey cards about 130px tall, each with a white thumbnail tile at left (a tiny wireframe or the logo) and at right a black numbered dot, a bold one-line title and a line or two of grey text."
   },
   {
    "role": "cta",
    "description": "A lime rounded block about two-thirds of the width, flanked by narrower lime blocks at left and right separated by 14px gaps, as if cropped from a row. Inside, left-aligned and vertically centred: a 40px heading, two lines of small text and a white email field with the button nested in it. A one-line footer sits on a white strip below."
   }
  ],
  "steal": [
   "Shape a section's bottom edge into a chevron and run a hairline from its tip to the next heading, turning 'many into one' into layout.",
   "Overlap an enlarged, half-typed search field onto the product window so the hero shows the key interaction rather than a whole screenshot.",
   "Frame the page as rounded panels inside a slightly darker margin so sections read as stacked sheets."
  ]
 },
 {
  "id": "opl-midnight-2",
  "name": "Midnight",
  "url": "https://www.askmidnight.com",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.1,
  "idea": "The headline's circles are literally pictured: one blurred dark ring, sliced into horizontal bands, becomes the hero, the demo panel, the session cards and the footer.",
  "mood": [
   "calm",
   "nocturnal",
   "soft",
   "thoughtful",
   "minimal"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "No navigation at all. A canvas fills the full width and the top 90% of the viewport: a huge out-of-focus dark navy ring on drifting taupe, sage and terracotta, cut into horizontal bands about 78px tall that are slightly offset like blinds. On the vertical centre line, starting 58px from the left, sit a small rounded-square line icon and a one-line headline at 48px in cream. On the same baseline, starting 59% across, a two-line 17px statement whose first sentence is white and bold while the rest drops to half opacity. The cream page background shows as a 90px strip at the bottom. No button.",
  "type": "Public Sans only, weight 500, tracking −0.04em. Headline 48px, mid-page statement about 38px on five centred lines, body 13–17px. Signature device: within one paragraph the first sentence is full strength and the remainder faded, replacing the usual heading-plus-subhead pair.",
  "colour": "#f4efe6 #07172a #867768 #687674 #a8735c #faf7f1 — Warm cream pages against midnight navy; the gradient mixes muted taupe, sage and terracotta around the dark ring. A peach-cream fills the small pill button. No bright accent anywhere.",
  "imagery": "An animated blurred ring gradient with band displacement and fine grain, used full-bleed in hero and footer, inset with 8px corners as the demo panel, and miniaturised onto three portrait session cards. No photos or UI screenshots.",
  "layout": "30px side margins. Sections alternate between full-bleed gradient and cream type-only screens. Section headers split into left title and right small paragraph. Text blocks are short and often occupy one half of the width, leaving the other empty (the FAQ sits entirely in the right half).",
  "sections": [
   {
    "role": "intro",
    "description": "A full cream viewport with one centred paragraph of five lines at roughly 38px, about 820px wide. Only the opening sentence is dark; the remaining words are pale and darken progressively with scroll. Later, three small portrait cards, each about 115×180px with a mini gradient, a date at the top and a two-line label bottom-left, fan across the right side of the text, overlapping it with a soft shadow."
   },
   {
    "role": "showcase",
    "description": "Header row: a two-line title at 34px on the left, a three-line 12px grey paragraph in the last fifth on the right. Below, a gradient panel spans the full content width, about 650px tall with 8px corners, holding a centred question at 34px in cream, a one-line caption, and an email capsule with an inline peach button; a small play capsule sits centred near its bottom edge."
   },
   {
    "role": "features",
    "description": "A left-aligned two-line lead uses the dark-then-faded sentence device. Under it a two-by-two arrangement with no cards or borders, columns starting at 0 and 50%: each item is a 24px pale rounded-square icon, a quoted question as a 13px semibold title, then three or four lines of grey 12px text about 300px wide. A waitlist capsule floats fixed at bottom centre."
   },
   {
    "role": "footer",
    "description": "FAQ rows with hairlines and chevrons occupy only the right half of the screen above. The footer is the gradient again, full-bleed and about 190px tall: a two-line cream statement at left, an email capsule with inline button at right on the same line, and a row of tiny grey legal links along the bottom."
   }
  ],
  "steal": [
   "Slice a soft blurred gradient into horizontal bands with small offsets so a familiar glow becomes a recognisable, ownable texture.",
   "Replace heading-plus-subhead with one paragraph whose first sentence is full contrast and the rest half opacity.",
   "Remove the nav from the hero entirely and put headline left and supporting line right on one shared baseline at mid-height."
  ]
 },
 {
  "id": "opl-plastic",
  "name": "Plastic",
  "url": "https://myplastic.app",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7.1,
  "idea": "A plain, quiet app page given one physical object: a photographed vinyl record cropped by the top-right corner of the viewport.",
  "mood": [
   "clean",
   "calm",
   "tactile",
   "friendly"
  ],
  "archetype": "other: centred-statement-with-corner-object",
  "hero": "Pale grey page with no navigation, only a bold wordmark with a small orange-red caps descriptor beneath it at top left (80px margin). A photographed black vinyl record with an orange-red label is cropped by the top-right corner, showing a quarter disc about 360px wide and tall, with an orange wire stand poking out below it. The headline is centred slightly above the middle in two lines at 74px (5.2vw), about 37% of the viewport wide, followed by a two-line 17px sentence and two black store badges side by side. Lower down, an award mark and a laurel-framed rating sit centred; the bottom fifth is empty.",
  "type": "Archivo only. Headline weight 500, sentence case, tight leading, 74px against 17px body, about a 4.4x jump. Feature headings near 30px in two colours, a much larger heading in the dark section (digest peak 12vw), and tiny tracked caps in the footer.",
  "colour": "#f5f5f5 #d5d5d5 #090d0e #171615 #e0441c — Greys and near-black with one orange-red accent taken from the record label; it colours the logo descriptor and the first line of each feature heading. One near-black section breaks the light page.",
  "imagery": "Phone mockups with real app screens (album-cover grids, a camera view) sit inside mid-grey rounded panels and are cropped by the panel edge. The hero uses a cut-out photographed record with a soft shadow; album art supplies the colour.",
  "layout": "Centred hero, then feature rows on a wide container: a tall grey panel on one side and a short text block vertically centred on the other, sides swapping per row. A dark full-width section with offset white cards follows, then a narrow FAQ column and a sparse footer.",
  "sections": [
   {
    "role": "features",
    "description": "Each feature is a two-column row. One column is a mid-grey rounded panel about 540px wide and 720px tall containing a phone mockup pinned near the top, with the next phone's top edge peeking in at the panel's bottom. The other column holds a two-line heading, first line orange-red and second near-black at the same size, over a three-line grey paragraph, vertically centred. The panel side alternates left and right."
   },
   {
    "role": "showcase",
    "description": "A near-black full-width section opens with a large centred white heading. Below it, white rounded cards of different sizes are placed off-grid at staggered horizontal positions: one holds an album-cover collage with a record sliding out, with a bold white caption and a grey line beneath it on the dark ground; another is a small data card listing collection fields as label and value rows."
   },
   {
    "role": "faq",
    "description": "A left-aligned column about 480px wide, offset toward the page centre and headed by a bold short title. Six questions in small bold text are separated by hairlines, each with a plus sign at the right edge. A generous empty gap follows before a footer of three tiny caps link groups spread left, centre and right, small legal notes, and a pipe-separated caps link row."
   }
  ],
  "steal": [
   "Crop one photographed physical object by a viewport corner so the hero has a subject without a centred mockup.",
   "Set two-line feature headings at one size with the first line in the accent colour and the second in ink.",
   "Drop the nav entirely on a one-page app site: wordmark plus a one-line descriptor top left, store badges directly under the headline."
  ]
 },
 {
  "id": "opl-brikkenco",
  "name": "Brikken+Co",
  "url": "https://www.brikken.co",
  "source": "One Page Love",
  "kind": "studio-portfolio",
  "score": 7.1,
  "idea": "The studio name set as large as the viewport allows over visible column guides, with a concrete 3D logo object as the single sculptural image.",
  "mood": [
   "confident",
   "swiss",
   "spare",
   "industrial"
  ],
  "archetype": "giant-wordmark",
  "hero": "Warm light-grey page with six faint vertical column guides running full height. The studio name in black neo-grotesk, sentence case with a superscript trademark, spans edge to edge at about 19vw, hard against the top with 45px side margins. First paint shows nothing else. Then the lower half fills: a hexagonal ring logo rendered as speckled concrete, about 280px wide, sits right of centre, cropped by the bottom edge, its lower third glowing cobalt; a three-line 22px statement and a small cobalt rectangular button in mono caps sit bottom-left; a small dark video thumbnail with a play button sits bottom-right. No navigation until you scroll.",
  "type": "PP Neue Montreal medium only. Wordmark at about 19vw, statement text 22px, a large about paragraph near 40px in mid-grey, tiny wide-tracked caps for nav, buttons and section labels, and pixel-style mono caps labelling image frames in the dark section.",
  "colour": "#eeece9 #000000 #0009f2 #ffffff #ff4a1c #8f8778 — Warm grey paper and black type with a single cobalt used for the button and the glow on the 3D logo. Full-width black panels interrupt for showreel and case imagery, with one orange tile.",
  "imagery": "A concrete-textured 3D logo render, looping showreel video (a glowing green prompt bar, a monochrome fashion portrait) and black particle-flow artwork. Square corners, hard rectangular crops; media grows from thumbnail to near full width.",
  "layout": "Six visible columns with 45px outer margins. Small labels sit in column one and large text starts in column two. Light sections with a lot of empty paper alternate with near-full-width black media panels; a white floating nav bar appears centred at the top after the hero.",
  "sections": [
   {
    "role": "other",
    "description": "Showreel: the hero's small video thumbnail scales up on scroll into a black panel about 520px wide, then near full width, anchored to the right four columns, square-cornered, with a small square play button at its centre. Above it floats a compact white nav bar (about 285px wide, 4px radius) centred at the top: two tiny tracked caps links, the wordmark in the middle, two more links."
   },
   {
    "role": "gallery",
    "description": "Black full-width panel overlaid with a sparse grid of small plus-shaped registration marks. Images sit inside thin white outlined frames of different sizes that overlap each other; each frame carries its caption as white pixel-mono caps on a black tab breaking the frame's bottom edge. One tile is solid orange. The frames appear to slide sideways as a pinned sequence, ending with a single portrait and a lone play button."
   },
   {
    "role": "about",
    "description": "On the grey ground, a tiny tracked caps label sits in the first column while a statement paragraph at about 40px starts in the second column and runs to the right margin. The paragraph is set in pale grey, apparently darkening to black word by word as the reader scrolls. No image and no button accompany it."
   },
   {
    "role": "work",
    "description": "Each project is one image at full column width, square corners, roughly 16:7: here white particle contours on black with the client name in pixel type at the top. Underneath, left-aligned across the first three columns, the project name at 20px and a five-line description at 13px. The right half below the image stays empty."
   }
  ],
  "steal": [
   "Leave the layout's column guides visible as hairlines down the whole page and align every text block and image edge to them.",
   "Put captions on a tab that interrupts the image frame's border, in a contrasting pixel or mono face.",
   "Tint one part of a neutral 3D object with the brand colour as a glow, so the accent appears in the image and on exactly one button."
  ]
 },
 {
  "id": "opl-the-state-of-software-delivery-in-health",
  "name": "The State of Software Delivery in Healthcare",
  "url": "https://thoughtbot.com/healthcare-software-delivery-report",
  "source": "One Page Love",
  "kind": "other",
  "score": 7.1,
  "idea": "A survey report told as a short scroll of oversized serif statistics, with a constellation of connected points standing in for the data set.",
  "mood": [
   "sober",
   "editorial",
   "scholarly",
   "calm"
  ],
  "archetype": "other: centred title over constellation canvas",
  "hero": "A full-viewport field of very dark aubergine-brown with no navigation or logo. A canvas draws about 150 small pale dots joined by hairline segments at low opacity, spread over the whole area like a star chart. On the centre axis, starting at 30% of the height: a year in bold 15px sans inside a 60px outlined square, then a three-line serif title at 58px (4vw) occupying only 30% of the width, then three lines of 16px sans in white. Some letters of the title are drawn in a coarser pixel-stepped cut of the same face. There is no button and nothing touches an edge.",
  "type": "Redaction, a Times-like serif with bitmapped alternate grades, at regular weight for headings (40 to 58px) and for statistics at up to 23vw; single letters switch to the pixelated grade. Cosmica sans at 12 to 16px for body, an extreme numeral-to-caption jump.",
  "colour": "#1f1313 #f4f3ef #ffffff #f2b632 #3a2c2c — Sections alternate between a warm near-black and a paper off-white, with type inverting to match; the only hue is a mustard yellow used for the bars of one chart.",
  "imagery": "No photographs. Canvas-drawn networks of dots and hairlines: a full-screen field in the hero, then small tangled clusters or loose scattered points parked in the right margin of later sections.",
  "layout": "After the centred cover everything is flush left at a 6% margin in a column no wider than half the page, leaving the right side for a small canvas figure. Dark and light bands alternate, each holding one claim and one or two statistics.",
  "sections": [
   {
    "role": "stats",
    "description": "On the dark band, two statistics side by side in the left two-thirds: serif numerals about 200px tall with the percent sign set as a superscript a third of that size, and beneath each a two-line caption in 12px sans flush with the numeral's left edge. Below, a five-row horizontal bar chart: right-aligned grey labels, 2px mustard bars on a faint full-width track, values at the far right."
   },
   {
    "role": "stats",
    "description": "Paper-coloured band. A one-line serif claim at 40px, two lines of small text, a large gap, then a single figure about 335px tall (23vw) in near-black with a superscript percent sign, its three-line caption tucked beneath at 12px. The right half is empty except for a five-point constellation the size of a thumbnail. One number owns the whole screen."
   },
   {
    "role": "cta",
    "description": "Dark band with loose scattered dots. A serif heading and four lines of small text flush left, then a white rectangular button 250px wide with square corners and a long arrow, next to an underlined text link. The footer follows on the same field: a small logo at left and two short text blocks with serif subheads to its right."
   }
  ],
  "steal": [
   "Set a statistic at 20vw or more in a text serif with a superscript percent sign and a 12px caption, one number per screen.",
   "Swap single letters of a heading into a bitmapped grade of the same typeface for texture without adding a second font.",
   "Shrink the hero's background motif to a thumbnail-sized figure in the margin of later sections to keep continuity."
  ]
 },
 {
  "id": "opl-michael-pumo",
  "name": "Michael Pumo",
  "url": "https://michaelpumo.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7.1,
  "idea": "A freelance design engineer's page as a calm dark split, words on one side and a plain full-height portrait on the other, with a small panel that lets visitors restyle the site.",
  "mood": [
   "calm",
   "dark",
   "polished",
   "understated"
  ],
  "archetype": "split-text-media",
  "hero": "Exact 50/50 vertical split with no nav bar. The left half is near-black with 80px padding: a small pill with a green dot top-left; at mid-height a three-line headline in light-weight 46px sans (about 3% of viewport width), a two-line grey 18px paragraph and a white pill button 195px wide; at the bottom two lines of tiny grey text with salmon underlined links. The right half is a full-height studio portrait, head and torso against a grey wall, cropped by the viewport on three sides and meeting the dark half on a hard vertical edge. Nearly half the left panel is empty.",
  "type": "Saans throughout. Headline is light (300) at 46px with -0.044em tracking; statements about 30px; body 18px; captions 12px. Hierarchy comes from grey versus white rather than weight. One huge 'Aa' specimen (13.5vw) appears inside a settings card.",
  "colour": "#111111 #000000 #968779 #ffffff #ff7a7a #b6f09c — Near-black cards on black with white and mid-grey text. A salmon-coral marks links and project labels; a pale green dot signals availability. Warm greys enter through the portrait.",
  "imagery": "Portrait photography: the author against a grey wall, and project shots of people that fill the right half of each card edge to edge. Muted natural grade; cards have about 6px rounded corners.",
  "layout": "Dark cards on a black page with 80px side margins. Rhythm alternates card clusters (a three-column bento, stacked project cards, a four-up row) with open text sections where a small grey label sits above a large two-paragraph statement.",
  "sections": [
   {
    "role": "intro",
    "description": "Three-column bento of dark cards straight after the hero, widths roughly 23/50/23. Left card: a salmon four-line statement, tiny grey copy, a white pill button and, at the bottom, the date with a ticking clock in larger digits. Centre card: one client quote at about 22px with name, role, pagination dots and arrows. Right: two stacked service cards, one with a row of square tool icons, one with a wordmark graphic. A row of dimmed client logos follows."
   },
   {
    "role": "work",
    "description": "Project cards stacked vertically, each a wide dark card split 50/50: the left half has a salmon project name near the top, a five-line description at about 22px set lower, and a small white pill button; the right half is a photograph filling the card height. As you scroll, the next card slides up over the previous one, which dims and recedes, so the set reads as a deck."
   },
   {
    "role": "other",
    "description": "Row of four equal dark cards that act as site controls. One shows a huge 'Aa' cropped by the card top, one four overlapping circles in coral, green, black and white, one a coral sound-wave glyph, one an outline map of Australia. Each has a short title and two lines of grey copy inviting the visitor to switch typeface, palette, ambient sound, or flip the page upside down."
   }
  ],
  "steal": [
   "Drop the nav bar and give the hero's text panel three anchors: status pill at the top, statement in the middle, contact links at the bottom.",
   "Offer visitors a row of cards that restyle the site (typeface, palette, sound, orientation) as a demonstration of front-end skill.",
   "Reveal a long statement by turning its words from grey to white with scroll, so one paragraph can hold a full screen."
  ]
 },
 {
  "id": "opl-neuropelvic-surgery",
  "name": "Neuropelvic Surgery",
  "url": "https://neuropelvicsurgery.com",
  "source": "One Page Love",
  "kind": "health",
  "score": 7.1,
  "idea": "A specialist surgical practice made approachable through translucent amber-glass 3D renders of nerves and robot arms on clinical white.",
  "mood": [
   "clinical",
   "clean",
   "warm-accented",
   "trustworthy"
  ],
  "archetype": "split-text-media",
  "hero": "White page. A full-width header boxed by a 1px grey border: line-drawn logo left, six text links centred, an outlined pill ending in a black circular arrow button right. Below, from a 90px left margin: a two-line headline at ~5.6vw, tight tracking, top at 30% height; a four-line 18px paragraph about 520px wide; two pill buttons at 75% height, one outlined and one orange gradient, each ending in a black circle with a chevron. Right half: a soft-edged translucent amber 3D render of braided nerve fibres, about 40% wide, dissolving into white. At the far right, a vertical 01 to 04 slide index beside a thin rule.",
  "type": "Aspekta only. Headlines at weight 500, 81px, -0.05em tracking and leading near 0.95; body 18px medium, also tightly tracked. Three sizes: 81px heads, ~22px list and card titles, 14 to 18px text. No uppercase and no secondary face.",
  "colour": "#ffffff #121212 #ff5900 #f5f5f5 #ffb347 — White with near-black type; orange appears only in the 3D renders, the primary button and a footer that fades from white into full orange. One dark teal photo band carries the contact prompt.",
  "imagery": "Amber glass-like 3D renders (nerve strands, a surgical robot) floating on white with dissolved edges, alongside conventional operating-theatre photographs in square-cornered cards and one dark full-bleed scrimmed band.",
  "layout": "90px margins; headings run full size from the left while their content is indented to the right half or a narrower block. Sections alternate render-plus-list, accordion, two-card row, full-bleed photo band and gradient footer under a sticky boxed header.",
  "sections": [
   {
    "role": "list",
    "description": "Two columns on white. The left 40% holds an amber glass 3D render of a multi-armed surgical robot, centred and unframed. The right 45% holds a vertical list of seven procedure names at ~22px, each row about 55px tall and separated by a hairline; the top row is black and the rest light grey, implying the active row drives the render beside it."
   },
   {
    "role": "faq",
    "description": "A two-line headline at ~5vw runs from the left margin across the full width. Beneath it the accordion is indented to start at about one third of the width and ends at the right edge of the content block: six questions at ~22px, each with a chevron at the far right and a hairline below. Nothing else shares the screen."
   },
   {
    "role": "cta",
    "description": "A full-bleed photograph of a masked surgeon under a heavy teal-black scrim, about one viewport tall. A white two-line heading at ~4.5vw sits in the lower-left third with three lines of small copy and a white pill button beneath it. The following white section slides up over the photo's bottom edge with rounded top corners."
   },
   {
    "role": "footer",
    "description": "The white page background fades vertically into saturated orange over roughly 250px. On the orange: a large line-drawn logo at left, three small link columns (navigation, social, two addresses) starting at mid-width, then a hairline and a one-line legal row in black with items at left, centre and right."
   }
  ],
  "steal": [
   "Commission one material for all renders (translucent amber glass) so the 3D objects carry the brand colour on an otherwise white page.",
   "Pair an outlined pill with a solid circular arrow button inside it for every action, so buttons are recognisable at any size.",
   "Fade the page background into a full brand-colour gradient for the footer instead of cutting to a dark block."
  ]
 },
 {
  "id": "opl-mammut-studios",
  "name": "Mammut Studios",
  "url": "https://www.mammutstudios.com",
  "source": "One Page Love",
  "kind": "agency",
  "score": 7.1,
  "idea": "A friendly studio pitch in rounded colour panels, with the scribble logo enlarged as a tone-on-tone shape behind a heavy centred headline; well made but conventional.",
  "mood": [
   "friendly",
   "clean",
   "confident",
   "soft"
  ],
  "archetype": "type-poster",
  "hero": "A pale-blue panel with large rounded corners is inset 16px from the white page and fills the viewport. Top-left inside it, a small black scribble logo; top-right, three text links and a dark rounded button with a white dot. Centred at about 20% height sits an outlined pill label directly above a three-line extra-bold grotesk headline at 7vw with tight leading, about 40% of the width. A three-line grey paragraph follows. Behind the text, the logo's humps are enlarged as lighter-blue shapes rising from the bottom edge to 70% height. Bottom-left: a boxed count of open slots with a short caption; bottom-right: an outlined scroll pill.",
  "type": "PP Mori only. Weight 800 at 100px with -0.02em tracking for the hero, medium for section headings (about 44px) and card captions (about 20px), regular 18px body. The footer wordmark jumps to 11.5vw in bold. Sentence case; no uppercase anywhere.",
  "colour": "#dbe8fb #ffffff #140018 #e7f1fd #efe4f6 — Powder blue and a very dark aubergine alternate as rounded panels on a white page; text is aubergine rather than black. No bright accent, only lilac tints in work cards.",
  "imagery": "Client work as photos and mock-ups (printed tote, plated dish, billboard, a UI prompt box) in rounded-corner cards of differing aspect ratios, staggered in two columns. Client logos run as a monochrome strip.",
  "layout": "Sections are full-width rounded panels inset 16px from the viewport, alternating blue, aubergine and bare white. Inside each, a small dot-label sits at the left and the main block starts about 35% across. Work breaks into a staggered two-column masonry.",
  "sections": [
   {
    "role": "intro",
    "description": "Dark aubergine rounded panel. A tiny bullet-dot label sits at the far left; the content column starts about 37% across with a three-line heading in pale lilac at roughly 3vw, two short grey paragraphs, then three stacked text links, each prefixed by a parenthesised index number, separated by 40px gaps. The left third stays empty apart from the label."
   },
   {
    "role": "proof",
    "description": "The base of the dark panel is a single row of seven client logos in pale lilac, evenly spaced, with the first and last fading out toward the panel edges. The panel's bottom corners are rounded where it meets the white page, so the strip reads as the closing edge of the about block rather than a section of its own."
   },
   {
    "role": "work",
    "description": "On white: a left-aligned heading with a two-line grey intro, then a staggered two-column masonry. Cards differ in width and height, and the columns are deliberately misaligned vertically, the right one starting lower. Each card has rounded corners, a tiny outlined dot-pill category tag under the image and a one- or two-line caption at about 20px. Some cards are flat lilac panels holding a floating UI fragment."
   },
   {
    "role": "footer",
    "description": "Dark aubergine rounded panel: the availability badge repeated at top-left, the email address as plain text at about 2.5vw, a thin row with copyright, live local time, social links and a back-to-top link, and finally the studio name in bold at 11.5vw spanning the panel's full inner width, its baseline nearly touching the bottom edge."
   }
  ],
  "steal": [
   "Inset every full-width section 16px from the viewport as a rounded panel so the white page shows as a thin frame between colour changes.",
   "Enlarge the logo mark into a tone-on-tone shape rising from the bottom of the hero instead of adding an image.",
   "Put a scarcity cue in the hero's bottom-left corner: a small boxed number of open slots with a short plain caption beside it."
  ]
 },
 {
  "id": "opl-atlas-by-workos",
  "name": "Atlas by WorkOS",
  "url": "https://workos.com/atlas",
  "source": "One Page Love",
  "kind": "ai-product",
  "score": 7.1,
  "idea": "Give the AI agent a body: a glossy white toy robot that peeks over every product demo and changes costume section by section.",
  "mood": [
   "friendly",
   "polished",
   "bright",
   "corporate"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "White page, everything centred. The desktop capture caught the top 40% blank mid-animation; the mobile shot shows the full stack. Small logo lockup, then a two-line semibold headline at 5.8vw with tight tracking, a three-line 18px sub and a black pill button carrying a chat-app icon. Below, a 3D-rendered white robot about 20% of viewport width, shown from the chest up with a dark blue screen face. Its torso is cut off by a demo panel rising from the bottom edge: 75% of the width, large rounded top corners, blue-to-lavender gradient frame, a translucent bar of four scenario tabs (the active one a white pill) above a mock chat window.",
  "type": "InterDisplay 600 at 84px, -0.02em, for the hero; section heads about 40px in the same face with tight leading; Inter 18px body. Lato appears inside the mock chat UI to mimic the host app. Sentence case, no caps labels.",
  "colour": "#ffffff #fafafa #2f6bff #b9a8f5 #e2336b #0b1a4a — White ground, black text. Colour is confined to thick gradient frames around demos (blue to lavender, then blue, red and magenta) and the robot's glowing blue visor.",
  "imagery": "A glossy white toy-like robot mascot rendered in 3D, cropped at the chest or peeking from the bottom edge, with costume variants; mock chat conversations in white rounded windows set inside thick saturated gradient frames.",
  "layout": "Centred hero and closing, with alternating text-left/media-right and media-left/text-right rows between. Demos live in 75%-width rounded panels. Sections are separated by white space alone; one band shifts to a faint grey.",
  "sections": [
   {
    "role": "showcase",
    "description": "A mock chat window about 75% of the viewport wide, with channel sidebar and message thread, wrapped in a 12px frame filled with a vertical gradient running blue to red to magenta, rounded corners. The frame is open at the top where it joins the tab bar. Below it, three plain columns: a small black glyph, a bold 13px title and three lines of grey text."
   },
   {
    "role": "features",
    "description": "Two-column row. Left: a two-line bold heading about 40px and a four-line paragraph in a 230px column. Right: the robot seated behind an open silver laptop, with thirty or so small app icons floating in a loose arc above its head, shrinking and fading toward the edges. A lot of white around it; no container or card."
   },
   {
    "role": "other",
    "description": "Team-building band on faint grey. Five robot busts in a tight overlapping row, each with a different visor colour and accessory (headphones, hoodie, coat), centred. The heading sits directly under them at about 60px, overlapping their shoulders, then a three-line centred sub. Beneath, a wide gradient-framed panel splits into a chat column and a card showing one costumed robot."
   },
   {
    "role": "cta",
    "description": "Three gradient-framed rounded cards in a row, each a cropped UI snippet with a numbered bold caption and three lines of text under it. Centred below: a black pill button with an app icon and a tiny underlined link. The robot then rises from the page bottom, chest-up and centred, with the copyright and footer links tucked to its left and right."
   }
  ],
  "steal": [
   "Let a mascot be cropped by the top edge of the product demo so character and UI read as one object.",
   "Frame product mock-ups in a thick saturated gradient border instead of a shadow, keeping the page itself pure white.",
   "Re-dress the same 3D character per section (laptop, starry visor, costumes) to give a standard feature sequence a through-line."
  ]
 },
 {
  "id": "aww-cipher",
  "name": "Cipher",
  "url": "https://cipher.tv/",
  "source": "Awwwards Site of the Day",
  "kind": "studio-portfolio",
  "score": 7,
  "idea": "The showreel as a slowly turning wreath: a dozen film stills overlap in an elliptical ring around a tiny emblem on a black screen, with almost no text.",
  "mood": [
   "cinematic",
   "nocturnal",
   "minimal",
   "glossy"
  ],
  "archetype": "other: orbiting-image-ring",
  "hero": "The first capture is the preloader: a black screen textured with a fine grid of grey dots that thins out towards the right, the wordmark top-left and a tiny copyright glyph dead centre. Once loaded, the black screen holds a ring of about fourteen landscape film stills, each roughly 10% of the viewport wide, overlapping one another around an ellipse about 35% of the width; the centre is empty except for a 20px white emblem. The wordmark, about 11% wide, stays top-left. Four 9px uppercase links are split: one at the horizontal centre, three at the far right. A partner mark sits bottom-right. There is no headline.",
  "type": "Favorit only, and only at about 11px: uppercase nav links with slight tracking. The custom wordmark, with a macron and a schwa among its letters, is the sole large letterform. No headline and no body copy; one type size on the page.",
  "colour": "#070604 #ffffff #c9a45a #2f55c8 #c96a1e — Near-black ground with white micro-type. All colour comes from the stills: gold, cobalt blue, orange, garden green, plus one black-and-white frame.",
  "imagery": "Stills from fashion, beauty and fragrance films in 3:2 landscape crops, square-cornered and unframed, layered so each overlaps its neighbour by about a third. No captions or titles on them.",
  "layout": "A single non-scrolling stage. Navigation is pushed to the corners at tiny size and the ring of stills occupies the middle third; over half the screen is empty black. Scrolling rotates the ring instead of moving the page.",
  "sections": [],
  "steal": [
   "Arrange work thumbnails as an overlapping elliptical ring with an empty centre, and bind scroll to rotation instead of vertical travel.",
   "Shrink all text to one 11px uppercase size and let a custom wordmark be the only large type.",
   "Give the preloader its own texture (a dot grid fading across the screen) rather than a spinner or percentage."
  ],
  "media": "There is no document: one fixed canvas holds every picture as a texture, a ring of overlapping 16:9 film stills (about 240x135, overlapping their neighbours by 20-40%) round a tiny emblem, covering about 62% by 69% of the viewport, with the tiles themselves on 35-40% of the area and warm black between. No video elements; at least 35 distinct stills cycle through the ring.",
  "motion": "The dot-grid loader with a spinning chrome letter is still up at 4.5s. After that the wheel turns the ring instead of the page, sliding new stills in along the circular path with no fade or mask; nav letters roll on hover, and the few CSS transitions are transform .45s cubic-bezier(.83,.12,.35,.96) and opacity .2-.3s."
 },
 {
  "id": "opl-viewport-2",
  "name": "Viewport",
  "url": "https://viewport.theresonance.studio",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7,
  "idea": "The page is drawn inside a glowing blue rounded frame: the product's own viewport icon scaled up to the size of the browser window.",
  "mood": [
   "polished",
   "dark",
   "tidy",
   "familiar"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Black page with a fixed rounded-rectangle frame inset 18px from every edge: a 4px bright-blue border with roughly 40px corner radius; all content scrolls inside it. Top-centre, an 800px-wide dark nav capsule with a thin border: blue rounded-rectangle icon and wordmark at left, four 16px links, a blue rounded button at right. The headline is one centred line at 70px (4.9vw), medium weight, off-white, at about 35% of the height; beneath it two centred lines of 18px text, a blue button with an Apple glyph, and a 14px note. From 71% down an app window 1130px wide is cut off by the frame; a blue glow fills the bottom.",
  "type": "'ritual', a compact grotesk with slightly quirky forms, medium weight, tracking -0.03em, for headings at 70px and about 44px; the system UI font at 18px for body and 14px for notes. The last word of some headings is tinted blue.",
  "colour": "#070709 #090d14 #14171d #519dfc #1632b7 #f2f0e8 — Blue-black ground and slate cards with one cornflower-blue accent used for the frame, buttons, an accent word per heading and a saturated blue gradient that swells at the bottom of the page.",
  "imagery": "Screenshots of the app's own window and timeline, cropped into cards; the demo content inside them is a vivid cobalt-and-orange butterfly and flower poster with pixel serif type, the only warm colour on the page.",
  "layout": "Centred column about 1130px wide inside the frame. Sections are centred headings followed by dark rounded cards: a two-up, then a wide text-left and UI-right card, then a pricing card. Uniform vertical spacing; every block is a rounded rectangle.",
  "sections": [
   {
    "role": "features",
    "description": "A centred three-word heading at about 44px with the last word in blue. Below, two equal dark cards side by side with a 12px gap and 16px radius; each has a 24px heading and four lines of 14px grey text at top-left, and a product-UI crop filling the bottom half, bleeding to the card's lower edge on a blue gradient panel. A third, full-width card follows with text in the left 45% and a UI crop on the right."
   },
   {
    "role": "pricing",
    "description": "One wide dark card split in two. Left 55%: a heading, one grey line, then a small label and seven bullet lines at 13px. Right 45%: an inset panel with a 3px glowing blue border that echoes the page frame, holding the price at 56px with the old price struck through beside it, two lines of copy, a blue button and two fine-print lines. A centred gift-code link sits below."
   },
   {
    "role": "footer",
    "description": "The background becomes a saturated blue gradient filling the lower frame. A repeat of the download button and note sits on it, then a black rounded card inset about 30px from the frame: logo at top-left, a newsletter field with a square arrow button below it, two small link columns at right, and a hairline above a copyright row with two round social icons."
   }
  ],
  "steal": [
   "Wrap the whole page in a fixed, product-coloured rounded border so the browser window itself becomes the product's icon.",
   "Echo that frame at small scale on the single most important card (the price panel) so the brand device marks the conversion point.",
   "Let the demo content inside product screenshots carry a contrasting, vivid palette so the UI chrome can stay dark and quiet."
  ]
 },
 {
  "id": "opl-uncle-rudy",
  "name": "Uncle Rudy",
  "url": "https://www.unclerudy.app",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 7,
  "idea": "A grumpy cartoon uncle who insults you is the brand; his stickers and roast notifications carry the page.",
  "mood": [
   "cheeky",
   "loud",
   "cartoonish",
   "dark"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Black page. Nav at 72px margins: icon and name left, two underlined links right. Centred at 23% height: a small grey line, a two-line white headline at 64px (4.4vw) semibold, a blue pill App Store button. The lower half holds a 430px-wide iPhone mock on the centre axis, cropped by the fold, showing a cartoon grumpy man on an orange sunset with a tilted speech bubble. Die-cut sticker illustrations with thick white outlines are scattered at angles around it: googly eyes and a purple disc cut by the side edges, a large flame overlapping the phone, a tilted slogan label. Three dark notification cards stack left, tucked behind the phone.",
  "type": "System sans (-apple-system) at weight 590, 64px, -0.03em for the headline; ui-rounded 18px for body and links; 28px section heads; 11px card captions. Sticker lettering is hand-drawn. The footer name is set near 35vw as texture.",
  "colour": "#000000 #171717 #ffffff #0a6cf5 #f26a1b #7b3fa0 — Black page, white text, cards in #171717. Colour comes from the stickers and phone screen — orange, flame red, purple — plus one iOS-blue pill button repeated as the only CTA.",
  "imagery": "Flat cartoon character with thick outlines, reused as die-cut stickers with white borders at random tilts; iPhone mockups with real UI; small dark cards holding single icons. Stickers overlap devices and get cropped by edges.",
  "layout": "Centred headings over device mockups, then a four-column bento of dark rounded cards with 6px gaps, then a full-screen footer. Stickers break the symmetry by overlapping and bleeding off the sides. Five screens in total.",
  "sections": [
   {
    "role": "showcase",
    "description": "Centred 28px heading with a grey subline. Three phone mocks in a loose row at different sizes — the left showing a camera view of a handwritten list. Below, two feature titles side by side in which a UI glyph replaces part of the word: viewfinder brackets around one, a waveform inside the other; tiny grey captions and the blue pill follow."
   },
   {
    "role": "features",
    "description": "Four-column bento of #171717 rounded cards with 6px gaps. One tall card scatters six sticker poses of the character; small square cards hold one icon and a two-word caption; wide cards hold a notification mock or mini UI. Captions are 11px, centred at the card bottom. A blue pill sits centred under the grid."
   },
   {
    "role": "footer",
    "description": "Full screen. The app name is set on two lines at about 35vw in #171717 on black, cropped by the edges, a barely visible backdrop. Centred over it, a large die-cut sticker of the character's head with a tilted speech bubble. Bottom row: studio credit left; blue pill, three social icons and legal links right."
   }
  ],
  "steal": [
   "Give the product a drawn character and reuse it as die-cut stickers (thick white outline, random tilt) scattered around the hero and cropped by the viewport edges.",
   "Use real in-product copy — here insulting push notifications — as the hero's supporting text instead of a feature paragraph.",
   "Replace part of a feature title with the UI glyph it names, such as viewfinder brackets or a waveform."
  ]
 },
 {
  "id": "opl-april-leihuanani-evangelista",
  "name": "April Leihuanani Evangelista",
  "url": "https://aprilleihuanani.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7,
  "idea": "A travel scrapbook on black: torn paper, passport stamps, pins and tape frame the portrait and biography of a marketer whose brand is being well travelled.",
  "mood": [
   "scrapbook",
   "glamorous",
   "personal",
   "editorial",
   "tactile"
  ],
  "archetype": "collage-scatter",
  "hero": "Near-black page with 20px margins. Nav in 16px uppercase condensed grotesk: a small square portrait thumbnail beside a two-line name far left, three links centred, a contact link far right. Centred below is a paper collage about 43% of viewport width and 45% of its height: a white-bordered portrait photo held by a pink pushpin over torn notebook paper, a crumpled pink sheet, a passport-stamp scrap and a strip of clear tape. Under the collage, all centred: one line of condensed serif at about 30px, the name in uppercase condensed serif at 58px, and a small underlined uppercase link. A faint hairline closes the viewport.",
  "type": "A condensed high-contrast serif (digest 'lgwy') for the name, section titles up to 10.6vw and card headings; a condensed grotesk for nav, 12px body and uppercase micro-labels. The manifesto paragraph switches from grotesk roman to serif italic mid-paragraph. About five sizes.",
  "colour": "#101010 #f1eeea #e3c8cf #b9d3f0 #c9905e #8a9a4a — Near-black ground with off-white type and no UI accent. Colour comes only from paper ephemera and photos: dusty pink, sky-blue note paper, cork tan, stamp reds and blues. Warm overall.",
  "imagery": "Warm lifestyle portraits presented as bordered prints, postage stamps and tilted snapshots; cut-out paper ephemera with soft drop shadows (boarding pass, ID card, postcards, binder clip) layered on a cork clipboard. Service photos are landscape insets inside outlined cards.",
  "layout": "Tight 20px side margins. Sections alternate: centred collage, a full-width large-type paragraph with four small columns beneath, a centred corkboard, a giant centred section word flanked by tilted photos, then full-width outlined cards that stack over one another.",
  "sections": [
   {
    "role": "intro",
    "description": "A full-width paragraph at about 2.2vw in condensed grotesk that changes to serif italic for its final sentence; one phrase is ringed by a dashed oval, and a blue paper scrap and a stamp-framed photo overlap the text. A tiny uppercase label sits above. Beneath, four equal columns of 12px text, each opening with a bold run-in phrase, with no cards, icons or dividers."
   },
   {
    "role": "about",
    "description": "A tan corkboard graphic about 75% of viewport width, centred on black, with a metal clip at its top edge. Pinned to it: an ID-card mock-up, a sky-blue note carrying the heading in mixed italic and uppercase serif plus body text, a boarding pass, postcards and a tilted cream note listing client names in serif. Pieces overlap, rotate a few degrees and cast soft shadows."
   },
   {
    "role": "features",
    "description": "A one-word title in uppercase condensed serif at about 10vw, centred, with small tilted snapshots either side. Then full-width cards with 1px light-grey outlines and slight corner radius on black: tiny uppercase category label top-left, two-line serif heading at about 2.5vw, a parenthesised number in the same serif top-right, a short paragraph, rows of small outlined rectangular tags, and a landscape photo bottom-right. Each card sticks and the next slides over it."
   }
  ],
  "steal": [
   "Build the hero portrait as a paper collage (bordered print, torn sheets, stamp scrap, pin, tape) centred on black so the torn edges do the framing.",
   "Switch a manifesto paragraph from sans roman to serif italic partway through and ring one phrase with a hand-drawn dashed oval.",
   "Number stacked service cards with parenthesised serif numerals in the top-right corner and let each card slide over the last."
  ]
 },
 {
  "id": "aww-izanami",
  "name": "IZANAMI",
  "url": "https://izanami-official.com/",
  "source": "Awwwards Site of the Day",
  "kind": "architecture",
  "score": 7,
  "idea": "Silence as design: one small sentence in fog, then a slow descent from mist into a dark glass pavilion.",
  "mood": [
   "meditative",
   "dark",
   "misty",
   "ceremonial",
   "quiet"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "After a warm-black loader showing only one 18px serif sentence and a small counter, the hero is a full-bleed, desaturated grey-green image of pine forest dissolving into fog. The same sentence stays at 18px in white, left-aligned on a line about 17% from the left edge and exactly at vertical centre; it is the only text in the picture area. A small white seal-style logo sits top-left; a language switch and menu label in tiny tracked capitals sit top-right, each with a dot above. Along the bottom edge: copyright, two live city clocks, and a scroll cue at far right, all near 10px.",
  "type": "Playfair Display regular for the few headings, only 18 to 45px (3.1vw at most); Shippori Mincho for body at 14px; Cinzel capitals with wide tracking for nav, clocks and footer. Nothing is large: hierarchy comes from isolation rather than size.",
  "colour": "#0a0801 #6f7a70 #b7b5a6 #d9d2c3 #4b5b39 — Warm near-black panels and grey-green fog imagery with off-white text at reduced opacity. Moss green and sand from the small garden photos are the only colour; there is no accent.",
  "imagery": "Fog-bound forest, a black-framed glass pavilion seen in one-point perspective, and small crops of incense smoke, a bamboo water spout and raked gravel. Small images are square-cornered, portrait or square, overlapping one another and the dark ceiling plane.",
  "layout": "Wide margins, with text hung on an inner line about 17% across instead of the page edge. Most screens hold one image and one short text; small photos are placed asymmetrically near corners and overlap. A rotated section label runs down the left edge.",
  "sections": [
   {
    "role": "intro",
    "description": "Over the black ceiling of the pavilion image, a three-line serif heading at about 3vw sits left of centre, each line indented further than the one above. Faint body text follows below it. A small square photo sits top-left under the logo; at right, three portrait photos overlap in a cluster, two beige garden shots behind and a narrower green water-ripple image in front and raised higher, running off the bottom edge."
   },
   {
    "role": "other",
    "description": "Full-bleed one-point-perspective view down a glass corridor, its ceiling filling the upper half as near-black. A text link with a short leading rule sits top-left on the inner line; a landscape photo of raked gravel is tucked against the top edge right of centre; a three-line heading fades in low and left of centre over the glass. A section name rotated ninety degrees runs down the far left."
   },
   {
    "role": "footer",
    "description": "Near-black and almost empty. One section name in serif at about 24px, preceded by a long thin rule, sits at mid-height left of centre. Lower down, tiny tracked-capital columns: a nav list, two office addresses side by side, and social links pushed to the far right. The bottom edge repeats the copyright and the two city clocks."
   }
  ],
  "steal": [
   "Place a single 18px sentence at vertical centre on an offset left line over full-bleed fog, and let the absence of a headline be the statement.",
   "Stair-step a three-line heading by indenting each line further than the one above it.",
   "Run two live city clocks with time-zone labels along the bottom edge as quiet proof of where the firm operates."
  ],
  "media": "A misted forest photograph covers the whole first screen under drifting cloud layers, with text on about 0.2% of the area. Then a pinned full-screen architectural scene dollies forward while overlapping collages of two or three photographs at different widths pass over it, rows pair a text column at about 28vw with a portrait flush to the right margin, and the fog band returns as a bookend; about 11 photographs, one WebGL canvas, no video.",
  "motion": "A warm near-black screen with the tagline already in place until about 2.5s, then a fog bank creeps in from the lower right and the chrome fades in by 4.5s; load took 7.2s. Lenis with three sticky sections scrubs the scene as the forest darkens and the camera sinks into the pavilion, photographs move at different rates, and headline lines fade in one by one; two cloud layers loop on 100s linear translates, and there is no reduced-motion rule."
 },
 {
  "id": "opl-deeo-studio-2",
  "name": "Deeo Studio",
  "url": "https://deeo.studio",
  "source": "One Page Love",
  "kind": "studio-portfolio",
  "score": 7,
  "idea": "The studio's four letters as huge extruded iridescent 3D blocks tumbling across a black stage, with a quiet ultralight serif statement underneath.",
  "mood": [
   "glossy",
   "dark",
   "polished",
   "tech-forward"
  ],
  "archetype": "giant-wordmark",
  "hero": "Near-black viewport. Four extruded 3D letters, each roughly 45-60% of the viewport tall, are scattered at different depths and tilts across the top 80% of the screen: one cropped by the top-left corner, one lower and left of centre, a larger one upper-right, the last cropped by the right edge. Faces are dark glass; edges catch lilac, orange and holographic rainbow light. Over them runs a slim nav: bold caps wordmark top-left at a 60px margin, three small caps links (one with a tiny yellow tag) and an outlined rounded button top-right. Bottom-left, a light serif headline at about 72px begins and is cut by the fold after two lines.",
  "type": "PP Editorial New Ultralight for the statement headline at about 5vw; PP Neue Montreal Book, Medium and Bold for nav, caps labels and project titles; Inter 14px body. A bold Neue Montreal line reaches 160px (11.1vw) lower on the page. Light serif against bold grotesk is the pairing.",
  "colour": "#0d0d0d #ffffff #b79cf0 #ff5a1f #f5f5f5 #f0e68c — Near-black page with white type; colour comes from iridescent lilac, orange and rainbow reflections on the 3D letters and from each case-study thumbnail's own palette. The digest records one light grey section.",
  "imagery": "Extruded glassy letterforms with holographic edge light on black; case studies as square-cornered wide video thumbnails in each client's colours on a two-column grid; one tilted old snapshot in the footer.",
  "layout": "Side margins of 60px. After the hero come a small left-aligned paragraph and a caps label, then a work list that opens with one full-width thumbnail and continues as two columns with staggered vertical offsets. Every item repeats the same caption row. The footer is centred.",
  "sections": [
   {
    "role": "intro",
    "description": "The serif headline finishes just below the fold at top-left. Beneath it sits a four-line 17px grotesk paragraph in a column only about 190px wide (13% of the viewport), left-aligned at the margin, followed by roughly 120px of empty black and a tiny caps section label. The right three-quarters of the screen stay completely empty."
   },
   {
    "role": "work",
    "description": "The first project is a single thumbnail running margin to margin; the rest sit in two columns with a 14px gutter, the right column offset vertically so thumbnails never align in rows. Under each thumbnail: project name in 16px medium at left with a line of tiny grey caps disciplines beneath, and a small outlined rounded button right-aligned on the same row. Square image corners, no card containers."
   },
   {
    "role": "footer",
    "description": "A tilted, slightly warped 1990s snapshot with a year caption overlaps giant block letters of the studio name set in dark grey barely lighter than the background, each letter several hundred pixels tall. Below, a centred row of five small links and a single centred line of the light serif at about 28px with a tiny speaker icon."
   }
  ],
  "steal": [
   "Render the studio name as separate 3D letters at different depths and tilts, cropped by the viewport edges, instead of a flat wordmark.",
   "Pair the loud hero object with an ultralight serif statement at bottom-left and a deliberately tiny, narrow paragraph, leaving most of the next screen empty.",
   "Caption every work thumbnail with the same two-ended row: name and disciplines left, small outlined button right."
  ]
 },
 {
  "id": "opl-estacion-venenta",
  "name": "estacion venenta",
  "url": "https://estacionvenenta.com",
  "source": "One Page Love",
  "kind": "music",
  "score": 7,
  "idea": "Unstyled-browser typography at headline size sitting on top of a live 1-bit dithered landscape of converging tracks.",
  "mood": [
   "raw",
   "lo-fi",
   "hypnotic",
   "deadpan"
  ],
  "archetype": "other: plain-text masthead over dithered canvas",
  "hero": "White page, 20px margins. The top line, in 78px regular Helvetica (5.4vw) flush to the left edge, carries the project name, a small circular glyph, then two underlined links at the same size spaced out to the right edge: name and navigation are one line of type. Beneath it two lines at about 46px describe the project, with a stamp-sized red thresholded portrait inline after each composer's underlined name. A band of empty white follows. From 51% of the height to the bottom, edge to edge, a black-and-white ordered-dither canvas draws thick lines converging on a vanishing point at the horizon.",
  "type": "System Helvetica at regular weight, lowercase name, default black underlines on links: the browser's defaults, deliberately enlarged. Two sizes only, 78px and about 46px; no bold and no small text anywhere.",
  "colour": "#ffffff #000000 #8a8a8a #e63a1f — Pure black on pure white, including the dithered canvas, which uses two tones only and reads as grey from a distance; the single colour is the red of two tiny portrait icons.",
  "imagery": "A full-width canvas rendered as coarse 1-bit ordered dither: a perspective plane with heavy black bands running to a horizon, different in every frame. Two tiny red high-contrast face cut-outs act as inline glyphs.",
  "layout": "A single screen with no scroll: text block top-left, canvas across the lower half full-bleed, a gap of white between them. On mobile the links stack under the description and the dither cells become visibly coarser.",
  "sections": [
   {
    "role": "other",
    "description": "The lower half of the only screen is the content: a canvas spanning the full width with no margin, its top edge an irregular horizon. The ground plane is filled with a dot pattern that gets denser toward the bottom, ordered dithering standing in for a gradient, and is crossed by five to eight solid black bands that fan out from the vanishing point and shift position from frame to frame."
   }
  ],
  "steal": [
   "Set the site name and the navigation in the same oversized line of type so the header is the hero.",
   "Use ordered dithering on a canvas to get tone and depth from two colours only.",
   "Place stamp-sized duotone portraits inline in a sentence as glyphs next to people's names."
  ]
 },
 {
  "id": "opl-leedlime",
  "name": "Leedlime",
  "url": "https://leedlime.com",
  "source": "One Page Love",
  "kind": "saas",
  "score": 7,
  "idea": "A lead-finding tool dressed in oil-painted green landscapes: every product screenshot floats on a thick-brushed pastoral painting.",
  "mood": [
   "calm",
   "painterly",
   "editorial",
   "soft"
  ],
  "archetype": "split-text-media",
  "hero": "The page sits in a 1240px frame marked by two full-height vertical hairlines 100px from each viewport edge. A 64px nav inside it: logo left, four links centred, log-in and a black button right, hairline beneath. Below, a 50/50 split. Left: a three-line serif headline at 72px (5% of viewport width) starting 150px below the nav, a three-line 20px grey sans paragraph, a black rounded button with a double outline, and two tick-marked notes. Right: an impasto mountain painting filling the half edge to edge and 810px tall, with two overlapping product panels in frosted rounded frames centred on it. A black band begins at the bottom edge.",
  "type": "Newsreader regular for headings (72px hero, about 40px sections) with -0.02em tracking; Inter for everything else at 16 to 20px. Tiny tracked uppercase labels above section headings. Serif accounts for only about 10% of the text.",
  "colour": "#f9f8f6 #161412 #d7d9bc #6f8f58 #ffffff #b5ee4c — Warm off-white with near-black buttons and text. Green comes almost entirely from the paintings; a lime logo mark and pale green tick chips echo it. One black band interrupts.",
  "imagery": "Oil-painting landscapes with heavy brush texture (mountains, cottages, orchards) as backdrops; clean white product UI panels float on them inside translucent rounded frames. Paintings are square-cornered and run edge to edge within the framed column.",
  "layout": "Everything lives between two vertical hairlines, with horizontal hairlines closing sections, which gives a ruled-sheet feel. Section heads alternate centred and left-aligned. Painting-backed panels alternate with plain white card grids.",
  "sections": [
   {
    "role": "how-it-works",
    "description": "Centred tiny label and a two-line serif heading, then three equal cards in a row. The top 60% of each card is a painted landscape crop with one small white UI fragment centred on it (a URL field, two match rows, a message composer). The painting fades to white at its lower edge, and the bottom of the card holds a centred one-line title and two lines of grey copy."
   },
   {
    "role": "showcase",
    "description": "Centred serif heading with a black button, then a painted sky and meadow spanning the full framed column and about 1.2 screens tall. A large white rounded app window with a thick translucent border sits on it, inset about 30px from the painting's sides, showing the dashboard and its sidebar. The painting stays visible as a frame above, beside and below the window."
   },
   {
    "role": "footer",
    "description": "Footer on off-white: logo with a two-line description and two small social icons at left, three link columns under tiny uppercase labels at right, a status-dot line and a small copyright row. Beneath it the page ends on a full-width strip of painted farmland about 250px tall that fades upward into the page colour, so the footer dissolves into landscape."
   }
  ],
  "steal": [
   "Float clean white UI panels on a heavily textured painting inside a translucent rounded frame, so screenshots gain atmosphere without decorating the UI itself.",
   "Run two full-height vertical hairlines down the page, keep all content between them and close sections with horizontal rules.",
   "Finish the footer with a strip of landscape that fades upward into the page colour."
  ]
 },
 {
  "id": "opl-is-that-pigeon-a-fed",
  "name": "Is That Pigeon a Fed?",
  "url": "https://readymag.website/u2492934797/isthatpigeonafed/",
  "source": "One Page Love",
  "kind": "other",
  "score": 7,
  "idea": "A deadpan parody of a surveillance-agency case file that 'investigates' uploaded pigeon photos, with a cut-out pigeon standing in the middle of the headline.",
  "mood": [
   "deadpan",
   "bureaucratic",
   "dark",
   "comic"
  ],
  "archetype": "product-object-centre",
  "hero": "Black viewport. A header strip above a full-width hairline holds a bird logo with an acronym, a two-line agency name in tiny mono caps, and a classification label at far right. A cut-out pigeon stands dead centre, 20% of the width and 65% of the height. The bold mono uppercase headline at 5.6vw is split around it: two words left and one right on line one, a single letter left and the final word right on line two, outer edges on a 12% margin. Small mono copy sits lower-left; lower-right has an orange crosshair cue and a dashed warning box. A second hairline and a circled arrow close the block.",
  "type": "A bold monospace (custom upload) in uppercase at 80px for the hero and the same family at 12-14px for every label and line of copy. The tool panel switches to a tight heavy grotesk in caps for its drop-zone heading. Two display sizes and one micro size.",
  "colour": "#000000 #d5d5d0 #ffffff #ff4a1c #7a4a8c — Black blocks alternate with a putty-grey graph-paper panel. Type is off-white; one orange-red marks interactive cues (crosshair, arrow, status). The pigeon's purple-green neck is the only other colour.",
  "imagery": "One sharply lit, front-facing, symmetrical pigeon cut out on black, used as the central object. Otherwise vector details only: faint bird-footprint trails wandering across the closing section, a crosshair and a warning triangle.",
  "layout": "Three full-width blocks: a black hero bounded by two hairlines, a putty-grey ruled tool panel split about 58/42 into drop zone and status readout, and a black closing block with centred text, ended by a marquee credit strip. Fixed-size build; mobile shows the desktop layout scaled down.",
  "sections": [
   {
    "role": "other",
    "description": "Upload tool styled as a paper form under a mono title bar. The left 58% is a drop zone covered by a square graph grid with a centred two-line heavy grotesk caps heading, a tiny mono label above and a file-type hint below. The right 42% is a ruled readout: status line, a large percentage beside a thin progress bar, three numbered step cells, a log area, and a wide grey disabled button."
   },
   {
    "role": "cta",
    "description": "Black block with centred mono text: a two-line bold caps sign-off, a bold sentence, a dimmer sentence, then a dashed-border box containing two lines in orange-red. Trails of small grey bird footprints cross the background diagonally from different corners, with an occasional print tinted red. A boxed strip at the bottom repeats the design credit as a mono marquee."
   }
  ],
  "steal": [
   "Split a two-line headline around a centred cut-out object so the words frame it left and right and the object reads as part of the sentence.",
   "Carry a fiction through the interface chrome: header as agency letterhead, sections as case-file panels, status labels and dashed warning boxes in place of marketing copy.",
   "Use faint wandering footprint trails as the only decoration on an otherwise empty dark section."
  ]
 },
 {
  "id": "opl-alterg-resources",
  "name": "AlterG Resources",
  "url": "https://altergresources.com",
  "source": "One Page Love",
  "kind": "other",
  "score": 7,
  "idea": "A corporate energy site organised by visible blueprint guide lines, with the logo's trapezoid-and-arch geometry reused as frosted facets over landscape photos and as repeat-pattern bands.",
  "mood": [
   "corporate",
   "calm",
   "clean",
   "earthy"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "White page with pale-blue vertical guide lines about 30px inside each edge and a horizontal hairline under the 74px header. Header: logo at left, two links and a square-cornered outlined button at right. Centred between 17% and 30% height, a two-line headline at 4.2vw in regular-weight grotesk, first line mid-grey, second near-black. A two-line centred paragraph follows, then a rectangular outlined button with a smaller boxed green diagonal arrow inside its right end. From 57% height to the fold, a landscape photo inset to the content width shows desert rock under cloud, overlaid with thin white lines and frosted-blur panels shaped as trapezoids and an arch.",
  "type": "Sequel Sans regular at 60px with near-zero tracking for headlines, split into a grey phrase and a black phrase; Inter 17px for body and UI. Section headings drop to about 28px and card labels to 11px. Sentence case, about five sizes, no bold display weight.",
  "colour": "#ffffff #3a668f #1b370e #bfd1e1 #222222 #22b14c — White with pale-blue hairlines at the top; the team section turns steel blue and the closing band deep forest green. Green also marks the arrow icon; a brown-and-white pattern band ends the page.",
  "imagery": "Wide landscape photographs of desert rock, alpine meadow and canyon with square corners, inset to the column; the hero image carries frosted geometric facets and fine white lines. The team appears as studio headshots on white in a tight grid.",
  "layout": "Content sits between two full-height vertical guide lines, with horizontal hairlines at section breaks, like a drafting sheet. The hero is centred; later sections put text in a left column and a three-column grid of cards or portraits at right. Pattern bands from the logo shape mark colour changes.",
  "sections": [
   {
    "role": "features",
    "description": "Split section. The left 45% has a two-tone heading (grey phrase, then black phrase) at about 28px at the top and a small two-line paragraph pushed to the bottom of the block. The right 55% is a 3x2 grid of square-cornered white cards with a pale-blue 1px border. Each card is mostly empty: a small outlined icon box with a tiny coloured corner dot at top-left and a one- or two-line 11px label at bottom-left."
   },
   {
    "role": "gallery",
    "description": "Three landscape photographs side by side at equal width with 8px gaps and square corners, each a tall 5:6 crop, spanning the content column. Directly beneath, a pale band filled with a faint outlined repeat pattern of the logo's trapezoid shapes acts as a divider before the page turns blue."
   },
   {
    "role": "about",
    "description": "Steel-blue section with thin lighter guide lines continuing through it. A small heading at the left; to the right, a three-column grid of portrait cards with 8px gaps. Each card is a studio headshot on white with a dark gradient caption bar across its bottom fifth holding the name in white, the title in smaller grey, and a small social icon at the right. Group sub-labels with a coloured dot sit in the left gutter beside a thin rule."
   },
   {
    "role": "footer",
    "description": "A deep-green band crossed by thin bright-green lines that outline a large trapezoid, then a white footer repeating the header (logo, one-line description, links, outlined button), and finally a full-width band of the logo motif repeated as a brown-and-white woven pattern on pale blue."
   }
  ],
  "steal": [
   "Draw the layout grid: keep two full-height vertical hairlines at the content margins and horizontal hairlines at section breaks, in a pale tint, so plain sections still feel constructed.",
   "Overlay logo-derived shapes on a photograph as frosted-blur facets with thin white outlines instead of placing the logo itself.",
   "Set a headline in one weight and size but two tones, first sentence mid-grey and second near-black, to create emphasis without bold or colour."
  ]
 },
 {
  "id": "opl-amanda-guo-design",
  "name": "Amanda Guo Design",
  "url": "https://byamandaguo.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 7,
  "idea": "Text behaves like wet ink: serif titles and links blur and bleed until attention sharpens them, over a plain crop-marked project grid.",
  "mood": [
   "bookish",
   "understated",
   "tactile",
   "dark"
  ],
  "archetype": "left-statement-quiet",
  "hero": "Charcoal page, 32px margins. The top-left holds the bio as three short paragraphs of 16px bookish serif in a column about 450px wide (31% of the viewport), followed by three stacked links whose letters are visibly blurred, and a mono date line. The remaining two thirds of the upper viewport are empty except two tiny mono toggles top-right. At 57% down, two small mono view buttons, then a three-column project grid begins: each cell marked by thin L-shaped corner brackets, a blurred serif title, mono caps tags with square bullets and a 16:10 image, cropped by the fold. There is no headline anywhere.",
  "type": "Macaulay, a slightly bold bookish serif, at 16px for all prose and project titles; DM Mono around 11px caps for tags, toggles and dates. Largest text is 1.1vw, so hierarchy is carried by face change and blur, never by size.",
  "colour": "#1c1c1c #efece2 #014538 #000000 #e8e6e1 — Charcoal ground with warm off-white text and hairlines; all colour comes from project thumbnails. A light-mode toggle inverts it. Neutral, slightly warm.",
  "imagery": "Project thumbnails at a uniform 16:10: photography, flat logo lockups on solid fields, type specimens, device mock-ups. Square corners, inset in cells with even gutters; some blur until focused.",
  "layout": "32px outer margin, bio pinned top-left, then a strict three-column grid with about 35px gutters. Cells are delimited by corner brackets and plus-shaped crosshairs at intersections, like printer's crop marks. The last row is left incomplete; no footer.",
  "sections": [
   {
    "role": "work",
    "description": "Three-column grid of identical cells. Each cell: a 16px serif project title top-left, softly blurred until hovered; a row of one or two mono caps tags, each preceded by a small filled square; then a 16:10 image filling the cell width. Thin L-brackets mark the outer corners of each row and small crosshairs mark gutter intersections. Two tiny bordered mono buttons above the first row switch between grid and list."
   },
   {
    "role": "about",
    "description": "The bio doubles as the header. A 450px column of serif text at body size, paragraphs separated by one line space, ends with three plain stacked links rendered out of focus as if ink had spread into paper, then a mono timestamp. Top-right, a text toggle that switches the ink effect off and a small light-mode button in an inverted mono chip."
   }
  ],
  "steal": [
   "Apply a soft blur to link and title text that clears on hover, so interactivity is signalled by focus instead of colour or underline.",
   "Mark grid cells with corner brackets and gutter crosshairs in place of full borders.",
   "Skip the headline: run the bio at body size top-left and let two typefaces, a bookish serif and a mono, carry all hierarchy."
  ]
 },
 {
  "id": "opl-sand-studio",
  "name": "Sand Studio",
  "url": "https://www.sandstudio.shop/",
  "source": "One Page Love",
  "kind": "ecommerce",
  "score": 7,
  "idea": "The stickers being sold are peeled off and scattered around the page, then reused as inline emoji inside the manifesto text.",
  "mood": [
   "cheerful",
   "light",
   "friendly",
   "crafty"
  ],
  "archetype": "product-object-centre",
  "hero": "White page. Small two-line logo top-left, dark pill button top-right. Centred at the top: a grey 24px label, a 48px medium-weight title and a dark pill button, all within the first 30% of the viewport. Below them a product photo of a clear sticker bag with a black header card, about 25% of the width, stands upright in the centre down to 90%. Eight die-cut stickers with white borders and soft drop shadows are scattered across the left and right thirds at varied sizes (80 to 190px) and tilts, none overlapping the bag or each other.",
  "type": "Figtree throughout: 48px medium for the product title, 20 to 24px for card headings, and a manifesto set at about 80px regular weight with leading near 1.1. Sentence case; no caps except inside sticker artwork.",
  "colour": "#ffffff #2b2926 #f3f1ee #c7b3a0 #ef4467 #e4fcb4 — White ground with warm charcoal text and buttons. Colour comes from the stickers and one bento of tan, raspberry, lime and pale-blue cards; the footer is warm charcoal.",
  "imagery": "Flat vector stickers with thick white die-cut borders and soft shadows, a studio photo of the bagged kit, a few tilted polaroid-style snapshots, and a rendered turntable widget in the footer.",
  "layout": "Four screens: a centred hero with scattered objects, one bento block on a pale warm-grey band, a full-screen centred manifesto, and a dark footer revealed under the white page's rounded bottom corners. Margins of about 80px.",
  "sections": [
   {
    "role": "features",
    "description": "On a pale warm-grey band under a small centred label, four rounded cards. A tall tan card on the left spans both rows with a tick list and a product photo bleeding off its bottom. Top-right: a raspberry card with white text and a laptop corner, and a lime card with a two-line heading and three oversized pixel-style key glyphs. Bottom-right: a wide pale-blue card with text left and tilted snapshots overlapping its right edge."
   },
   {
    "role": "intro",
    "description": "Full white viewport. A small centred label, then a seven-line centred statement at about 5.6vw, regular weight, spanning 80% of the width. Six small sticker graphics are set inline between words like emoji, at roughly cap height. On entry the whole block is pale ghost-grey and darkens to charcoal as it scrolls into view."
   },
   {
    "role": "footer",
    "description": "Warm charcoal block; the white page above ends in large rounded bottom corners. Left: one line of white 20px text, an external link with arrow, four cream circular social buttons in a row and a tiny copyright. Right: a square silver card about 135px with a rendered turntable, a green-labelled record decorated with the stickers and a small caption naming the playlist."
   }
  ],
  "steal": [
   "Scatter the product's own pieces around a centred pack shot, each with a die-cut border and soft shadow, leaving the centre column clear.",
   "Drop small brand graphics inline between words of a large statement so they read as custom emoji.",
   "Reveal a long statement by scrolling it from ghost grey to full ink instead of sliding it in."
  ]
 },
 {
  "id": "opl-desktop-fm",
  "name": "Desktop.fm",
  "url": "https://desktop.fm/",
  "source": "One Page Love",
  "kind": "music",
  "score": 7,
  "idea": "A single 3D compact disc spins in a grey void while green laser beams bounce off it, and the whole interface is one small device-like widget docked at the bottom.",
  "mood": [
   "nostalgic",
   "cool",
   "minimal",
   "tactile",
   "techy"
  ],
  "archetype": "product-object-centre",
  "hero": "Flat cool-grey viewport with no nav. A 3D compact disc about 27% of viewport width floats just above centre, tilted in perspective, its label side printed with a white italic wordmark, two small emblems and a tagline. Six or seven thin mint-green laser lines cross the whole viewport at steep diagonals and meet at glowing points on the disc. Docked at bottom centre is a light-grey rounded widget about 280px wide: a top row with a round info button, a dotted meter and a toggle switch, a centred bold 28px wordmark, and a full-width charcoal rounded button with label left and chevron right.",
  "type": "System UI stack (-apple-system) at weight 800, 28px, with -0.036em tracking for the wordmark and a 16px bold button label; a touch of monospace on the info glyph. The disc carries an italic wide grotesk logo. Only two text sizes on the page.",
  "colour": "#bec2c5 #dadadb #2d2d2d #3cf58a #9aa0a3 — One cool grey for the whole field, a lighter grey widget and a charcoal button; mint-green lasers are the only colour, with faint cyan iridescence on the disc's data side.",
  "imagery": "Real-time 3D compact disc with a frosted label side and an iridescent data side, turning freely; neon laser beams drawn as straight lines reflecting off it across the full viewport.",
  "layout": "One screen with nothing to scroll. The object sits in the upper centre, the control widget is docked at bottom centre, and the remaining area is empty apart from laser lines running edge to edge.",
  "sections": [
   {
    "role": "cta",
    "description": "The only interface block is a 280px rounded-rectangle widget styled like a hardware control: light grey body with a soft shadow, a top strip holding a circular info button, a row of seven tiny dots like a level meter and a physical-looking toggle at right; a centred wordmark; then a dark rounded bar button spanning the widget. It stays fixed while the disc turns behind it."
   }
  ],
  "steal": [
   "For a waitlist page, show one rotating 3D object tied to the product's metaphor and reduce the interface to a single docked widget.",
   "Use straight neon lines that cross the full viewport and converge on the object to activate empty space without adding content.",
   "Style the signup as a small hardware panel (toggle, meter dots, bar button) instead of a form."
  ]
 },
 {
  "id": "opl-depo-budget-app",
  "name": "Depo Budget App",
  "url": "https://depobudget.com",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 6.9,
  "idea": "Budgeting reduced to one daily number, dressed in neo-brutalist sticker graphics: flat primaries, thick black outlines and a hard offset shadow on every box.",
  "mood": [
   "bold",
   "cheerful",
   "blunt",
   "cartoonish"
  ],
  "archetype": "split-text-media",
  "hero": "Saturated blue field with a faint grid of 100px squares. A 72px header holds a white wordmark left and a black store badge right, above a 3px black rule. Left column, starting 7% in and vertically centred: a cream box with black border holding one line of uppercase mono, a two-line white headline in very heavy grotesque at 5.3vw, two lines of 20px white copy, and a coral button with black border and hard offset shadow. Right of centre: an illustrated phone tilted about 4 degrees, 24% of the width and nearly full height, thick black outline, star stickers on two corners. A lime marquee strip closes the bottom.",
  "type": "Archivo Black at 76px with -0.025em tracking for headings (white on colour, black on cream), DM Sans at 16 to 20px for copy, and a system monospace in small capitals for labels and amounts. About a 4:1 jump; three faces.",
  "colour": "#1769e7 #f6eedf #c8e832 #7c3aed #3cbdb1 #ff5c40 — Each section takes a different flat fill: blue, cream, purple, teal, blue again, then a black footer. Lime, coral, amber and red fill cards and buttons; black outlines hold it together.",
  "imagery": "Flat vector phone frames with thick black outlines showing simplified app screens in the page palette, light and dark themes alternating; four-point star stickers as decoration. No photography.",
  "layout": "Content sits in a 1230px container with 105px margins. Sections are full-width colour blocks separated by 3px black rules; each opens with a left-aligned heavy heading and one line of copy, followed by a row of outlined cards or phones. The rhythm is uniform.",
  "sections": [
   {
    "role": "how-it-works",
    "description": "Cream section. A left-aligned heading and one line of copy, then four equal cards in a row with 16px gaps, each a different flat colour (amber, red, teal, lime) with a 2px black border and a 4px hard offset shadow. Inside each: a mono index number top-left, a bold label, one line of copy, a black hairline, then an amount in mono with a tiny uppercase caption."
   },
   {
    "role": "showcase",
    "description": "Purple section. A white one-line heading spans the container with a single line of copy beneath, then four phone screens in a row at equal width, alternating light and dark app themes, each in a thick black rounded frame. The phones run about a screen tall; a one-line white caption is centred under each at the bottom of the section."
   },
   {
    "role": "features",
    "description": "Teal section. A small amber mono label in a bordered box sits above a black heavy heading and one line of copy. Below, a three-by-three grid of white cards with black borders and hard shadows; each card is one short row with a line icon at left, a bold title and a single line of small grey copy. Cards are about 100px tall with 20px gaps."
   }
  ],
  "steal": [
   "Give each section its own flat saturated fill and separate them with a 3px black rule, so colour does the sectioning.",
   "Apply one physical rule to every box (2px black border plus 4px hard offset shadow, no blur) so buttons, cards and phones read as one kit.",
   "Show the product's core number as an oversized figure in a lime card rather than as a screenshot."
  ]
 },
 {
  "id": "aww-spotify-wrapped-party",
  "name": "Spotify Wrapped Party",
  "url": "https://wrapped-party.activetheory.dev",
  "source": "Awwwards Site of the Day",
  "kind": "music",
  "score": 6.9,
  "idea": "A desktop holding screen built as a poster lockup: a heavy extended title on black bars pierced by oversized lime year numerals, beside an op-art block of concentric rings.",
  "mood": [
   "graphic",
   "loud",
   "retro-modern",
   "punchy"
  ],
  "archetype": "type-poster",
  "hero": "Warm off-white field with a small brand glyph top-centre, a speaker icon top-right and no navigation. The lockup sits just above centre across 48% of the width: two lines of white ultra-extended heavy sans, each on its own black bar, interleaved with lime slanted condensed year numerals roughly 350px tall that weave in front of and behind the bars, outlined in thin black. A square 30% of the width, flush to the left edge, holds black-and-white concentric rings centred off-canvas. A thin black scribble line loops across the screen. Below: three centred lines of 20px bold copy, a 120px QR code, eight tiny footer links.",
  "type": "The lockup is drawn artwork: an ultra-wide heavy sans for the title against tall slanted condensed numerals, an extreme width contrast. Live text is SpotifyMix bold at 20px, centred, and SpotifyMixNarrow near 10px for footer links.",
  "colour": "#efefea #292929 #94c80d #ffffff — Off-white, near-black and a single acid lime used only for the year numerals. Everything else, including the ring block, is strictly black and white.",
  "imagery": "Flat vector graphics only: a cropped square of concentric rings like a record or radar, hairline scribble curves, and the typographic lockup. No photos. Elements overlap in clear front and back layers.",
  "layout": "Single screen, no scroll. A centred column of lockup, instruction, QR code and legal links, with one asymmetrical counterweight: the ring block bleeding off the left edge. Mobile keeps the stack and moves the rings to the right, behind the lockup.",
  "sections": [],
  "steal": [
   "Interleave two type styles of opposite width (ultra-extended title, tall condensed numerals) so one threads in front of and behind the other.",
   "Seat each headline line on its own solid bar sized to that line, turning text into blocks that can be layered.",
   "Balance a centred stack with one hard-edged pattern block bleeding off a single side."
  ]
 },
 {
  "id": "aww-lama-lama-2",
  "name": "Lama Lama",
  "url": "https://lamalama.com/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 6.9,
  "idea": "An agency site dressed as a system console: a dot-matrix dithered video ground, bracketed monospace labels and a stack of floating utility widgets around plain grotesk statements.",
  "mood": [
   "dark",
   "technical",
   "dry",
   "confident"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Captured before the text loaded: the viewport is a near-black (#1a1c1c) field filled with a full-bleed video rendered as a fine dot-matrix dither in dark greys, from which a silhouetted figure and a room barely emerge. Per the digest the headline is three left-aligned lines of bold uppercase grotesk at 72px (5vw), tight tracking, in cream. Later frames show the fixed chrome: a dark bar about 470px wide pinned top-centre holding a pixel logo, a tiny mono section label and a hamburger, and at top-right a stack of small labelled widget rows, the first with a face thumbnail and a contact label.",
  "type": "Suisse Int'l in two voices: bold uppercase at 48 to 72px with tight tracking for headings, medium sentence case at about 32px for statements and 20px body. Sometype Mono in 9 to 10px uppercase for every label, tag and button, usually wrapped in square brackets.",
  "colour": "#1a1c1c #222423 #f9f4eb #8a8a8a #000000 — Greenish near-black ground from top to bottom with warm cream text and no accent colour. All colour comes from small project thumbnails, which read as bright chips against the dark.",
  "imagery": "Background video converted to a two-tone dot-matrix dither; client work shown as strips of small square-cornered thumbnails roughly 95x65px to 100x100px in full colour and mixed crops; white client logos.",
  "layout": "20px side margins; statements occupy the left half or start at the mid-line, with mono labels pushed far right. Sections are separated by hairlines and large empty dark bands. A fixed top-centre bar and a right-hand widget stack overlay everything.",
  "sections": [
   {
    "role": "work",
    "description": "A list of full-width rows about 90px tall divided by hairlines. Each row: project name at 16px flush left; at about 19% a pair of tiny bordered mono tag chips; at 43% a small '( + )' marker; on the right a strip of three or four small colour thumbnails whose starting x position shifts from row to row and which run off the right edge. A small grey button sits centred under the list."
   },
   {
    "role": "features",
    "description": "Bold uppercase heading at about 48px flush left, then a row of three small outlined mono buttons with arrows, then a 28px paragraph held to the left 45% of the width. Lower right, three narrow columns, each headed by a bracketed mono label, list services in 12px text. Lower left, a one-line prompt followed by a black phone-number chip with a face thumbnail."
   },
   {
    "role": "proof",
    "description": "A bracketed mono label sits alone at far left above a hairline. Some 80px lower, seven white client logos are spaced evenly across the full width on one line, with roughly 150px of empty dark above and below, making a very tall and almost empty band."
   },
   {
    "role": "cta",
    "description": "A two-line bold uppercase call at about 64px flush left with a phone chip beneath it; at the mid-line a bracketed label, two short lines of 14px text and two outlined mono buttons. A hairline, then a single row of mono meta (headcount, city, coordinates, socials) closes the page."
   }
  ],
  "steal": [
   "Run background video through a dot-matrix dither in two dark greys so it gives texture and movement without competing with text.",
   "Make the fixed top bar a narrow centred block whose monospace label rewrites itself to name the current section.",
   "Show each case in a list row as a strip of tiny thumbnails that starts at a different x per row and bleeds off the right edge."
  ],
  "media": "A full-bleed 13s muted video under a WebGL pixel mosaic that dissolves to reveal it covers the first screen. Then each list row carries a right-aligned strip of small thumbnails bleeding off the right edge (two ratios, 3:2 and 4:5, at one height, five of them muted loops), a fixed dithered-photo canvas shows through one section window, client logos run as a marquee, and small portrait preview clips open in a corner dock; 32 images, 14 videos, square corners.",
  "motion": "Black with a tiny mark until past 4.5s, then a full-screen mosaic of grey squares dissolves into the hero video and the chrome fades in after the content. A custom transform scroller: statements reveal line by line through masks, thumbnails fade from grey blocks to the picture as their row enters, the nav label rewrites itself with a character scramble at each new section, and the corner dock adds one teaser per section; all motion is script-driven, with one reduced-motion rule."
 },
 {
  "id": "aww-likova",
  "name": "LIKOVA",
  "url": "https://likova.space",
  "source": "Awwwards Site of the Day",
  "kind": "real-estate",
  "score": 6.9,
  "idea": "A stepped white mask carrying the wordmark gives way to a single dusk render of the building, which the page then travels down from sky to street.",
  "mood": [
   "corporate",
   "cinematic",
   "cool",
   "polished"
  ],
  "archetype": "other: stepped-mask wordmark over full-bleed render",
  "hero": "The top 28% of the viewport is white. Its lower edge is stepped: across the left half the white continues 100px further down, forming a tab that holds the wordmark in wide-tracked geometric capitals, about 72px tall and 510px wide, at a 30px left margin, with a small round arrow button in the tab's bottom-right corner. Everything else is a full-bleed dusk render of the office block rising from the bottom edge, veiled in deep navy at first and brightening on load. A two-line uppercase tagline at about 20px floats two-thirds across at mid-height. Header: a two-line menu icon far left, three tiny uppercase items at right.",
  "type": "TT Norms Pro only. The wordmark is regular-weight capitals with very wide letterspacing; all other text is uppercase at 11 to 20px, medium weight, slightly tracked. One large capital letter in a hairline box is the only other big glyph.",
  "colour": "#0d1226 #ffffff #2f3f73 #d8c49a #e3e6eb — White and deep navy only. The render's dusk sky is graded to the same navy, so the warm facade lighting becomes the single accent. Cool overall.",
  "imagery": "One architectural CGI of a glass-and-fin office block at blue hour, full-bleed and pinned; scrolling pans from sky down to street level with cars and pedestrians. No frames or corners: the image is the page background.",
  "layout": "No conventional sections in the captured stretch: a pinned full-bleed render with small text blocks docking at fixed positions (a hairline box left of centre, a caption at the right third, a navy tab bottom-left). 20px edge margins; over 50 screens of scroll for about 500 words.",
  "sections": [
   {
    "role": "intro",
    "description": "Over the pinned render, a hairline portrait rectangle about 350px wide sits left of centre, holding a tiny uppercase label and one large capital letter for the building class; its lower part passes behind the building, so the architecture occludes the overlay. At the right third, a four-line uppercase caption at about 12px is flush-left. The wordmark has shrunk into the header beside the menu icon."
   },
   {
    "role": "other",
    "description": "At street level the render fills the viewport and a solid navy rectangle rises from the bottom-left corner, half the viewport wide and about 140px tall, mirroring the hero's white tab in the opposite corner and colour. It holds a two-line uppercase caption at its left and a small white circular button at its right end; the rest of the frame is uninterrupted image."
   }
  ],
  "steal": [
   "Step the boundary between a white band and a full-bleed image so the logo sits in a tab cut into the picture rather than on top of it.",
   "Sandwich overlay text and hairline frames between the sky and the building layer so the architecture passes in front of them.",
   "Grade the image's sky to the exact brand navy so masks, tabs and picture merge without visible edges."
  ],
  "media": "A full-bleed dusk render covers about 80% of the first screen under a stepped white slab carrying the wordmark and nav, and a fixed WebGL scene sits behind every captured screen. Later pictures enter with stepped clip-path edges (123 clip-path rules): text layered between sky and a cut-out of the building, a 50/50 pair with a 20px gutter and a third picture staggered below, and full-bleed renders replacing one another; 10 images, two background loops, square corners.",
  "motion": "A WebGL cube preloader whose counter reaches 100% by 1.2s but whose card stays past 4.5s while its stepped corners shift. Locomotive smooth scroll: the slab shrinks into a 50px header strip over 1s while the render glides up like a camera descending, words rise from translateY(110%) inside masks over 1200ms cubic-bezier(0.25,0.74,0.22,0.99), and the fixed 3D model shows one figure per screen as the camera orbits. cubic-bezier(.7,0,.3,1) appears 102 times; there is no reduced-motion rule."
 },
 {
  "id": "opl-britt-taylor",
  "name": "Britt Taylor",
  "url": "https://www.btay.ca",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 6.9,
  "idea": "A freelance designer's page carried by one hand-made cut-paper illustration language, from the desk scene that opens it to the envelope that closes it.",
  "mood": [
   "playful",
   "warm",
   "handmade",
   "friendly"
  ],
  "archetype": "illustration-led",
  "hero": "Almost no text. A cream page with the name set small in a soft serif top-left and a solid black square hamburger top-right. Everything else is one flat cut-paper illustration filling about 90% of the viewport and rotated a few degrees clockwise: a bird's-eye view of a designer at a laptop on a navy desk, sitting on a yellow rug with a blue striped fringe, surrounded by scissors, a kettle, a bonsai and a cat. The illustration bleeds off the bottom edge and nearly touches both sides. The headline only arrives one scroll later, centred, under a small spot illustration.",
  "type": "Inter Display bold with tight tracking for the statement; Averia Serif Libre, a soft slightly blurred serif, for the name, the 90px light menu, italic accents and the testimonial. Service list in uppercase bold white. About five sizes; body 16px.",
  "colour": "#f7f4ed #2f4c9c #2978f3 #f0cc40 #0e9c6c #ff5a26 — Cream ground with a fixed set of flat poster colours (navy, bright blue, yellow, green, vermilion, black) confined to illustrations, underlines and two solid panels. Warm overall.",
  "imagery": "Flat cut-paper vector illustration with wobbly scissor-cut edges and no outlines or shading; one hero scene, small spot motifs between sections, an illustrated envelope footer. Project screenshots appear only in a rounded-card carousel.",
  "layout": "Narrow centred column on cream with wide margins; sections separated by generous empty space rather than rules. Illustration blocks alternate with short text blocks; one carousel breaks the column and bleeds off both sides; solid colour panels are about 540px wide with rounded corners.",
  "sections": [
   {
    "role": "intro",
    "description": "Centred column about 380px wide. A small confetti-like spot illustration, an italic serif greeting acting as an eyebrow, then a four-line statement in tight bold grotesk at roughly 40px in which the job title and the closing words switch to light italic serif; the first italic phrase carries a hand-drawn green squiggle underline and the last fades to grey. A second spot illustration (a figure holding a banner overhead) closes the block."
   },
   {
    "role": "work",
    "description": "Under an italic serif heading with a red hand-drawn underline, a plain two-column list: six client names in 14px sans, each with a small chevron at the right end of its half-column, about 56px row spacing, no rules and no thumbnails. Directly beneath, a long centred testimonial set entirely in italic serif at about 20px."
   },
   {
    "role": "gallery",
    "description": "A horizontally scrolling row of project cards (about 4:3, 12px radius, 14px gaps) that bleeds off both edges of the viewport; a small illustrated motif and tiny client credit float centred above it. Cards mix flat illustration tiles with dark site screenshots, so the row alternates colour and density."
   },
   {
    "role": "footer",
    "description": "The footer is an object: a blue rounded tab holding the email address forms the flap, and a yellow envelope body about 500px wide opens beneath it with a V-shaped cut revealing a dense cut-paper bouquet. Credit and email sit in tiny type in the envelope's bottom corners. A services list in stacked uppercase white on a blue rounded panel precedes it."
   }
  ],
  "steal": [
   "Open with one oversized, slightly rotated illustration and almost no text; hold the headline for the second screen.",
   "Turn the footer into an object (an open envelope with the email on its flap) instead of a link grid.",
   "Underline one italic serif phrase inside a bold sans statement with a hand-drawn squiggle in a palette colour."
  ]
 },
 {
  "id": "opl-billow",
  "name": "Billow",
  "url": "https://www.billow.so",
  "source": "One Page Love",
  "kind": "saas",
  "score": 6.9,
  "idea": "A conventional product page softened by a cloud motif: the logo's cloud silhouette is blown up and blurred into a blue stage for the app.",
  "mood": [
   "soft",
   "clean",
   "reassuring",
   "bright"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Centred stack on near-white. Nav inside a 1230px container: cloud logo left, four links centred, outline Log in and navy pill right. A small outlined pill badge, then a two-line title-case serif headline at 6.4vw with -0.05em tracking in deep navy, a three-line 18px paragraph whose opening phrase sits on a pale-blue highlighter block, a glossy blue gradient pill button and an 11px reassurance line. The bottom third is a huge blurred cobalt-to-cyan cloud silhouette, the logo enlarged to full width, with the top of a white app window rising from the fold and a handwritten note with a scribbled arrow at its right corner.",
  "type": "Lastik, a high-contrast display serif, regular weight, title case, -0.05em tracking at 92px so letters nearly touch; reused at 28-40px for section and card titles. Open Runde, a rounded Inter variant, for body at 15-18px and all UI. About a 5x jump.",
  "colour": "#fcfdff #0b1f33 #0077fe #eaf5fb #22c4ff #e5e8ea — White and very pale blue with deep navy text and one electric blue for the button and the cloud glow, which shades to cyan at its edges. Sections never change ground. Cool.",
  "imagery": "Light-mode app screenshots, large, with edges and lower halves dissolving into the page; cropped UI fragments inside cards with one element sharpened and lifted. Soft cloud and sky washes behind sections.",
  "layout": "1230px container, centred hero, then a repeating module of heading, short copy and a large faded screenshot. One three-card row. Soft blue cloud washes replace hard section breaks; about twelve screens.",
  "sections": [
   {
    "role": "how-it-works",
    "description": "Centred pill eyebrow and two-line serif heading, a short centred paragraph, then three equal cards (about 400px wide, 1px pale border, 12px radius, faint blue glow at the top). Each card's upper 55% is a cropped, softened fragment of product UI with one sharp element popped forward (a blue chip, a figure, a tooltip); below, a serif card title and three lines of centred grey text."
   },
   {
    "role": "features",
    "description": "Repeated feature row: a two-line serif heading at about 28px on the left whose second line is a paler slate-blue, a two-line paragraph on the right starting at the 55% mark, then a full-width app screenshot whose sides and lower part dissolve into the white page rather than sitting in a frame. Faint cloud texture drifts behind."
   },
   {
    "role": "cta",
    "description": "A three-column checklist of features with round blue tick bullets, unreleased items greyed and tagged with tiny chips, and a blue gradient pill button beneath, all over a soft photographic sky wash. The footer continues on the same wash with an app-icon tile and three link columns under serif headings."
   }
  ],
  "steal": [
   "Enlarge the logo silhouette to full width, blur it heavily, and use it as the coloured stage behind the product screenshot.",
   "Mark the opening phrase of the sub-headline with a pale highlighter block instead of bolding it.",
   "Let product screenshots dissolve into the page at their edges rather than boxing them in a browser frame."
  ]
 },
 {
  "id": "opl-ayush-halder-portfolio",
  "name": "Ayush Halder Portfolio",
  "url": "https://www.thoughtsofayush.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 6.9,
  "idea": "A designer's page staged like an artboard: a white business-card block and a white nav card float over cinematic footage, with a pixel ruler along the viewport edge.",
  "mood": [
   "cinematic",
   "warm",
   "composed",
   "personal"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Sepia-graded footage of a fire ritual fills the viewport with no scrim. At top centre a white square-cornered card 525px wide (36% of the viewport) holds two rows split by a hairline: an announcement link, then two text links left, a signature logo centre and two social icons right. At dead centre floats a second white rectangle about 390 by 225px laid out like a business card: an italic serif opener, two role titles in bold grotesk with a brown-to-tan gradient fill split by a tall slash, a small tan square bottom left, the name bottom right. A three-line centred white statement sits above a tick-marked ruler labelled every 100px.",
  "type": "Geist in medium to bold weights at small sizes with tight tracking; the digest finds nothing above 2.3vw. An italic display serif is dropped in for single words and the card's opener. The logo is a scanned signature; sidebar labels are about 12px.",
  "colour": "#f5f3f1 #1e1e1e #ffffff #bdbda6 #a9734a #25160d — Warm off-white page with black text after a dark, fire-orange video hero; colour comes only from photographs. The role titles use a brown-to-tan gradient fill that echoes the footage.",
  "imagery": "Moody film-style street and interior photographs fill large landscape cards with small-radius corners; product UI screenshots or a white logo are inset on top of each photo at its centre rather than shown bare.",
  "layout": "After the centred hero, a two-column case list: a fixed text index in the left 15% and tall landscape cards stacked in the remaining width with about 40px gaps. The floating nav card and a top ruler stay fixed throughout.",
  "sections": [
   {
    "role": "work",
    "description": "Left: a fixed vertical list of eight project names in 12px text, about 45px apart with a small dash between each; the one in view turns black while the rest stay grey. Right: one landscape card per project, roughly 1140 by 740px, each a full-bleed photograph with either a white logo mark centred on it or a white panel of UI inset at about 70% of the card width. The client name sits small at the card's bottom-left."
   },
   {
    "role": "proof",
    "description": "Two rows on off-white, each introduced by a small grey label in a narrow left column: employer wordmarks in black spread across three columns, then award credits set as a logo plus two lines of tiny text enclosed by laurel brackets. Wide blank space separates the rows; no cards, borders or backgrounds are used."
   },
   {
    "role": "contact",
    "description": "A two-line prompt, first line grey and second black at the same size, above a single white field about 520px wide with a small label at its top-left, placeholder text at the bottom and an arrow at the right edge. The footer below is three label and value rows (site, social, contact) set to the right, with the postal address far left in grey."
   }
  ],
  "steal": [
   "Float a small white business-card rectangle at the centre of full-bleed footage instead of setting the headline directly on the video.",
   "Show UI work as a panel inset on an atmospheric photograph, one large card per project, rather than bare screenshots on grey.",
   "Run a tick-marked pixel ruler along a viewport edge as a quiet nod to the design tool."
  ]
 },
 {
  "id": "opl-digital-original-xr",
  "name": "Digital Original XR",
  "url": "https://digitaloriginal.app/xr",
  "source": "One Page Love",
  "kind": "consumer-app",
  "score": 6.9,
  "idea": "Scrolling puts the headset on you: a white VR headset rises from the bottom of the hero, turns to show its lenses, and the page dissolves into the 3D gallery it is selling.",
  "mood": [
   "clean",
   "soft",
   "spatial",
   "calm"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Pale lilac-white field fills the viewport. Logo (a small rainbow pixel square plus bold letters) top-left; one text link and a black pill button top-right. A vertically centred stack: an outlined pill badge in tiny caps, a one-line headline at 5vw spanning about 57% of the width, two lines of supporting text, then a black pill and a white outlined pill side by side. Behind, heavily washed-out gallery walls with artworks recede in perspective at the far left and right edges. A white VR headset rises from the bottom edge at centre, cropped at half height, with a small 'scroll for more' pill sitting on it.",
  "type": "Neue Montreal throughout, weight 500, sentence case, tracking -0.025em. Headline 72px over 16-18px body, a secondary heading tier near 32px and tiny all-caps pill labels: four sizes, one family, no second face.",
  "colour": "#f1f0f6 #ffffff #171717 #aeb7c2 #e0733a #46b6c4 — Cool lilac-tinted white everywhere with black pills. The only saturated colour is the orange and teal painting inside the 3D gallery, so the artwork itself carries the accent.",
  "imagery": "Rendered video: a white headset on a seamless pale backdrop, then a grey gallery room with a pink-haired avatar seen from behind facing a wide landscape painting. Full-bleed first, later inset as a rounded-corner panel.",
  "layout": "Everything hangs on one centre axis with wide empty margins. Full-viewport pinned 3D scenes alternate with narrow centred text blocks (about 45% of the width), then an accordion FAQ in a centred column and a closing call-to-action card.",
  "sections": [
   {
    "role": "showcase",
    "description": "Pinned full-viewport sequence. The hero's headset grows and rotates until its dark lens interior faces the viewer and fills the upper half of the frame. The next frame is inside the gallery: a full-bleed grey room, a large landscape painting on the far wall, side paintings angled in perspective at both edges, an avatar walking in from the left foreground, and a small black pill caption under the painting naming artist and work."
   },
   {
    "role": "features",
    "description": "Centred heading at about 2.3vw with one grey line beneath and a two-option segmented pill toggle (icon plus label each, the active one white). Under it the same gallery scene is now contained in a rounded rectangle about 66% of the viewport wide, avatar small and centred, so the earlier immersive view becomes a framed preview that the toggle switches between modes."
   },
   {
    "role": "cta",
    "description": "A frosted white rounded card at centre holds the pill badge, a repeat of the headline and the two pill buttons. Two large gallery walls with paintings flank it in steep perspective, converging toward the card, and blurred copies of the art bleed through the card's glass at its left and right edges. A one-line footer of small links sits beneath."
   }
  ],
  "steal": [
   "Let the product object bridge hero and first section: crop it at the hero's bottom edge, then scale and rotate it on scroll until it becomes the doorway into the demo scene.",
   "Shrink a full-bleed immersive scene into a rounded framed panel in the following section so one asset serves as both spectacle and interface preview.",
   "Flank the closing call-to-action card with two large images set in steep perspective so they read as walls converging on the button."
  ]
 },
 {
  "id": "opl-woblo",
  "name": "Woblo",
  "url": "https://woblo.in",
  "source": "One Page Love",
  "kind": "dev-tool",
  "score": 6.9,
  "idea": "The landing page is inspected by its own product: the headline wears the extension's selection box, element-size tag and colour-palette tooltip.",
  "mood": [
   "friendly",
   "technical",
   "bright",
   "busy"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "Off-white page, slim top bar within a roughly 1030px column: logo and three links left, one blue link right. A tiny mono proof line sits above a two-line centred headline at about 3.9vw, enclosed in a blue selection rectangle with pale-blue fill and a black tag at its top-left giving element name and pixel size. One word is swapped for a blue brush-script sticker with a white outline; a cursor with a name flag trails the last word. A white palette tooltip (five swatches, a contrast score) overlaps the grey subtext. Two pills follow, then a rounded browser screenshot cropped by the fold with a floating play pill.",
  "type": "Inter at weight 500 with -0.03em tracking for headings (56px) over 14-18px Inter body; Geist Mono for proof lines, hex codes and measurement tags. One brush-script word used as a sticker. The footer wordmark jumps to about 22vw in a heavy lowercase sans.",
  "colour": "#fbfbfb #101013 #0f7fff #e5eef7 #ff7a1a #22e08a — Near-white and near-black with one interface blue for selection states and the primary button. A pink-to-orange gradient marks the popular plan, and only the footer wordmark breaks into orange, green, pink and purple blocks.",
  "imagery": "Screenshots of the extension's side panel docked to a browser showing a well-known product page, plus tiny interface vignettes inside feature cards. Rounded corners, a blue abstract backdrop behind the main screenshot.",
  "layout": "Narrow centred column of about 1030px on a 1440 viewport. Centred two-line section headings with one grey line under each, followed by card grids: three-column bento, three pricing cards, a three-column review masonry, a single-column accordion. A small pill stays pinned bottom-centre.",
  "sections": [
   {
    "role": "features",
    "description": "Three-column grid of white cards with hairline borders and small radius. The top half of each card is a pale grey well holding a miniature working specimen of the feature: a button with a cursor, a swatch row with contrast badge, an 'Aa' type scale, file-type chips, a token list, a markdown snippet. A bold one-line title and two grey lines sit below. A last row of two wider cards has solid pale-blue lower halves and a mono hint line."
   },
   {
    "role": "pricing",
    "description": "Three equal cards. Each has a tinted header strip carrying the plan name (grey for the outer plans, a pink-orange-violet gradient with a small 'most popular' note for the middle), a black rounded-square icon, one grey line, a large price with a small per-month suffix, a full-width pill button (glossy blue only in the middle card), then a checklist with filled circular ticks."
   },
   {
    "role": "footer",
    "description": "A centred closing headline reuses the script sticker and scatters three coloured multiplayer-cursor name flags around the button. Then a small link row, and the wordmark at about 22vw: each lowercase letter is knocked out of its own solid rectangle (black, orange, green, pink, purple), the rectangles being different heights and butted together like stacked blocks."
   }
  ],
  "steal": [
   "Annotate your own headline with the product's overlay interface (selection box, element-size tag, tooltip) so the hero doubles as the demo.",
   "Fill the top half of each feature card with a miniature working specimen of the feature instead of an icon.",
   "Build a footer wordmark from letters knocked out of butted solid colour blocks of unequal height."
  ]
 },
 {
  "id": "opl-protip-marketing",
  "name": "Protip Marketing",
  "url": "https://protipmarketing.com",
  "source": "One Page Love",
  "kind": "agency",
  "score": 6.9,
  "idea": "A PR agency as a loud pop poster: hot pink and cyan fields, black outlines, sticker buttons and social-video clips used as wallpaper.",
  "mood": [
   "loud",
   "pop",
   "cheeky",
   "fashion-adjacent"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A cream header bar 78px tall above a black rule: a wide high-contrast serif wordmark at left, a segmented group of four outlined uppercase tabs right of centre with a dot marking the active one, a language toggle and outlined pill at right. Below, video fills the rest edge to edge as three vertical panels, two of a street-style clip and one product shot. Top-left over the video, two lines of 22px white text and a pink pill button with black outline. Bottom-left, a two-line uppercase bold headline at 96px (6.7vw) in cream sits on the bottom edge and runs across two-thirds of the width, over the footage.",
  "type": "Uncut Sans Bold in uppercase with -0.04em tracking for every heading, from the 96px headline to 24px service titles; Uncut Sans Medium for lists at about 18px. The logo is a wide didone-style serif, enlarged to full page width in the footer.",
  "colour": "#ff70cf #189bdc #f8fff0 #000000 #ffffff — Flat fields swap by section: cream header and contact, hot pink services, cyan portfolio and footer. Black handles all type, outlines and rules; there are no tints or gradients anywhere.",
  "imagery": "Vertical social-media clips and flash-lit fashion or product photos in portrait crop, square corners with a 1px black outline; in the hero they tile as full-height panels behind the headline.",
  "layout": "Full-width colour bands with 24px margins. In services a giant section word stays pinned top-left while a column in the right half scrolls image-plus-list blocks. The next section enters as a tilted cyan slab from the bottom-left, breaking the horizontal rhythm.",
  "sections": [
   {
    "role": "features",
    "description": "Hot pink field. The section name stays pinned top-left at about 96px uppercase bold. In the right half each service is a block: an uppercase bold title at 24px, then a portrait photo 170px wide with black outline, and to its right a list of five or six items, each prefixed with a black asterisk and separated by hairline rules. A small white outlined pill button, rotated about 15 degrees, overlaps the photo's left edge like a sticker."
   },
   {
    "role": "other",
    "description": "Section transition: the portfolio arrives as a cyan parallelogram rising from the bottom-left corner, its top edge tilted about 15 degrees, with its title in 64px black uppercase set along the slope. Cream image cards tilted to the same angle follow beneath. While it rises it covers the pinned pink section, so two saturated fields meet on a diagonal instead of a horizontal line."
   },
   {
    "role": "contact",
    "description": "Cream band split by a vertical black rule at 51%. Left: three form fields drawn only as uppercase labels with a hairline under each, the message area tall, and a small black pill submit at bottom-right. Right: label-left, value-right rows separated by hairlines, then four pink circles with black outlines holding social icons across the column. Underneath, a cyan footer band shows the serif wordmark enlarged to the full page width."
   }
  ],
  "steal": [
   "Bring the next section in as a tilted slab of flat colour with its title set along the slope, instead of a horizontal edge.",
   "Rotate a small outlined pill button and let it overlap a photo's edge so the call to action reads as a sticker.",
   "Build a contact block from nothing but uppercase labels and hairlines, then end on the wordmark stretched to full width on a flat colour."
  ]
 },
 {
  "id": "opl-goodgoodgreat",
  "name": "GoodGoodGreat®",
  "url": "https://goodgoodgreat.studio",
  "source": "One Page Love",
  "kind": "agency",
  "score": 6.9,
  "idea": "A five-chapter manifesto set as full-justified uppercase blocks, each with one small image buried inside the paragraph like a highlighted patch.",
  "mood": [
   "stark",
   "blunt",
   "monochrome",
   "conceptual"
  ],
  "archetype": "other: small centred wordmark on empty black",
  "hero": "A pure black viewport containing nothing except the studio's name, one word, set dead centre at roughly 49% of the viewport width and 6% of its height. The letters are a rounded geometric sans drawn on a canvas as stacked horizontal scanlines, so each glyph looks sliced into about ten white stripes; a tiny registered mark sits at the baseline on the right. There is no navigation, no tagline, no button and no scroll cue: about 97% of the screen is empty black.",
  "type": "Body as display: a default system grotesk in uppercase at ~3.1vw, regular weight, full-justified with visible word-space rivers and leading near 1.1. Inter for 11px labels. The wordmark is a drawn scanline geometric. Two sizes only.",
  "colour": "#000000 #ffffff #19b5d8 #4a4a4a — Black and white only; colour enters solely through the small photographs (a cyan portrait backdrop, a red magazine cover) set inside the text blocks. Unread words sit in dark grey.",
  "imagery": "One small portrait-ratio photo or cut-out object per chapter (a portrait, a magazine cover, a silver coin, a news still), about 12% of the viewport wide, centred within the paragraph and layered with the text.",
  "layout": "Each chapter is one full-viewport black screen with a single justified paragraph spanning margin to margin, vertically centred, a tiny chapter label top-left and a counter top-right. Five such screens, then two email lines and a cropped wordmark.",
  "sections": [
   {
    "role": "intro",
    "description": "Full-viewport black screen. A six-line uppercase paragraph at ~3vw, justified to both margins (about 48px each side), sits at mid-height. A portrait-ratio photograph roughly 170px wide is centred horizontally inside the block and spans its full height; the white text runs straight across it. Words not yet reached by scrolling stay blurred and dark grey. A spelled-out chapter label sits top-left and a two-digit counter top-right, both around 11px."
   },
   {
    "role": "footer",
    "description": "After the last chapter comes a tall empty black gap, then two email addresses in ~14px uppercase, stacked and centred. Beneath them the scanline wordmark returns, enlarged to the full viewport width and cropped by the bottom edge so only the top two thirds of the letters show. No links, no legal row, no columns."
   }
  ],
  "steal": [
   "Set manifesto copy as one justified uppercase block per screen and reveal it word by word from blur as the reader scrolls.",
   "Embed a single small image inside the paragraph's footprint with the text running over it, instead of placing media beside the copy.",
   "End on the wordmark at full viewport width, cropped by the bottom edge, echoing the small centred one that opened the page."
  ]
 },
 {
  "id": "opl-george-wood",
  "name": "George Wood",
  "url": "https://www.georgewood.me",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 6.9,
  "idea": "A designer's site as a narrow status panel on a solid cobalt field: live time, weather, current track and recent films sit beside the client list.",
  "mood": [
   "saturated",
   "utilitarian",
   "compact",
   "personal"
  ],
  "archetype": "other: narrow left info-panel on a single colour field",
  "hero": "Grainy cobalt-blue viewport. All content lives in a 640px column pinned to the left edge (44%), closed by a faint vertical hairline; the right 56% is empty blue. Top row: a 60px rounded avatar, the name in white 14px semibold with the role in pale blue beneath; at right the city, local time and temperature, then a square outlined settings button. A hairline-bounded ticker strip follows with a tiny caps label and a scrolling track title over a faint waveform. Three short white 14px paragraphs, then seven client rows split by hairlines: name left, outlined award pills beside some, a site link right (struck through on four).",
  "type": "Inter only, at 14px for nearly everything (the largest text is 1vw): semibold white for names, regular pale blue for secondary lines, 11px tracked caps for strip labels. There is no headline; hierarchy comes from weight, opacity and rules.",
  "colour": "#0038ff #1344f7 #ffffff #a9bcff #3a64ec — One cobalt blue for everything, with white and pale-blue text and lighter-blue hairlines; even the film posters are tinted into blue monotone. A faint noise texture softens the flat field.",
  "imagery": "Only a small avatar and a row of six film posters, each recoloured as a blue monotone so it sits inside the field. No project images at all.",
  "layout": "A single 640px left-pinned column divided by horizontal hairlines into strips: header, ticker, bio, client table, two-up testimonial cells, poster row, footer line. Internal padding is 16px. The rest of the desktop viewport stays empty.",
  "sections": [
   {
    "role": "work",
    "description": "Seven full-width rows inside the column, each about 46px tall and separated by a hairline. At left, the client name in white semibold, on some rows followed by an outlined pill naming an award count. At right, a pale site link with a north-east arrow; where the site is offline the link is struck through rather than removed, so the list keeps its full length."
   },
   {
    "role": "testimonial",
    "description": "A two-cell row divided by vertical hairlines. Each cell holds a long quote in 13px white, then the author's name and title bottom-left and the company logo bottom-right in pale blue. The second cell is cut off by the column edge to signal horizontal scrolling; two small arrow buttons sit in bordered squares underneath at the left."
   },
   {
    "role": "other",
    "description": "A strip labelled in tiny tracked caps with an external link at its right end, then six portrait film posters in a row, all converted to blue-and-white monotone with a thin lighter border. Under each poster: a truncated title, the year and a five-star rating in about 10px. A final hairline row carries the year at left and a social handle at right."
   }
  ],
  "steal": [
   "Flood the page with one saturated colour and recolour every image as a monotone of it so nothing breaks the field.",
   "Strike through dead links instead of deleting them; it shows history honestly and adds texture to a list.",
   "Add small live data strips (local time, weather, now playing, recently watched) to make a text-only profile feel inhabited."
  ]
 },
 {
  "id": "opl-near",
  "name": "near",
  "url": "https://near.com",
  "source": "One Page Love",
  "kind": "finance",
  "score": 6.9,
  "idea": "Show the real account dashboard immediately under a plain promise; there is no visual idea beyond a mint glow and a ruled page frame.",
  "mood": [
   "clean",
   "calm",
   "corporate",
   "trustworthy"
  ],
  "archetype": "app-ui-showcase",
  "hero": "White page framed by two hairline vertical rules 80px in from each side. Logo top-left inside the frame, a lone log-in link top-right. The headline starts 18% down, left-aligned: two lines of medium-weight geometric sans at 4.2vw spanning 40% of the width. Under it a two-line grey 18px sub, then a black rounded button with a grey reassurance line beside it. The right half of the upper hero is empty. At 60% down a green-dot demo label, then a dashboard screenshot with a thick dark rounded bezel spans the full frame width and is cropped by the fold. A mint-green glow rises behind it from the bottom corners.",
  "type": "Figtree only. Headline 500 weight at 60px with -0.025em tracking; section heads drop to about 36px; body 14 to 18px in grey. A modest 4:1 jump, sentence case throughout, no caps labels.",
  "colour": "#ffffff #262626 #00ec97 #171717 #eaeaea — White and charcoal sections alternate. Mint green is the one accent, used as large gradient fields behind UI widgets, in the closing band and on small icons. Cool overall.",
  "imagery": "Live-looking dashboard and swap widgets in dark and white rounded panels, placed on mint gradient blocks, plus a row of round crypto coin logos. No photography or illustration.",
  "layout": "Everything sits inside a 1280px frame drawn with hairline verticals; sections are divided into ruled cells, with bands of a faint plus-sign pattern as spacers. A left-aligned heading plus sub opens every section. White, dark, white, mint rhythm.",
  "sections": [
   {
    "role": "features",
    "description": "Inside the ruled frame: heading and one-line sub top-left, then a two-column block. The left column is a vertical list of six feature titles separated by hairlines; the open one has a pale grey fill and a three-line description, and two carry small green status text. The right column is a flat mint-green panel the full height of the list with a dark rounded swap widget floating in it."
   },
   {
    "role": "stats",
    "description": "Charcoal band divided by hairlines into three equal cells aligned to the page frame. Each cell holds a 28px white numeral top-left with a tiny grey caption under it and a lot of empty cell around. Directly beneath runs a full-width strip of faint plus signs on the same charcoal, a textured spacer before the page returns to white."
   },
   {
    "role": "cta",
    "description": "A mint-green band fading lighter toward the top holds a left-aligned 32px heading, one line of dark sub and a black rounded button, all in the left third. It bleeds into a charcoal footer: logo and two-line description left, three short link columns right, and the wordmark repeated enormous and barely lighter than the background across the bottom."
   }
  ],
  "steal": [
   "Draw the page container as two visible hairline verticals and align every cell divider to them, so the grid itself is the decoration.",
   "Put a short grey reassurance sentence inline to the right of the primary button instead of a second button.",
   "Use a strip of faint plus-sign pattern as a spacer band between sections in place of empty padding."
  ]
 },
 {
  "id": "aww-trionn-2",
  "name": "TRIONN",
  "url": "https://trionn.com",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 6.8,
  "idea": "A dark WebGL stage where the studio's angular logo floats as a wireframe among black shards the visitor can blast; the copy is secondary to the toy.",
  "mood": [
   "dark",
   "technical",
   "sleek",
   "showy"
  ],
  "archetype": "immersive-webgl",
  "hero": "Near-black canvas with dark angular shards drifting and a wireframe 3D logo mark, about 30% of the width, floating at centre in barely lighter grey. Top-left: small logo. Top-right: a mute icon, a white pill button and an outlined menu pill. The headline sits flush left directly under the logo: two lines of light-grey grotesk at 6.3vw with -0.06em tracking, reaching 42% across. Bottom-right, a 235px-wide block: a hairline-bordered two-cell box (globe icon with founding year, a two-line uppercase claim) above three lines of 16px copy. Bottom-centre, two lines of tiny uppercase instructions with emoji. Bottom-left, a small circle scroll cue.",
  "type": "Familjen Grotesk regular at 90px with very tight -0.06em tracking for headlines, rising to about 9vw capitals in the marquee; Neue Haas at 16px for copy; Martian Mono in tiny capitals for link labels. Text is pale grey rather than white.",
  "colour": "#0b0b0b #d0d0d0 #ffffff #c3c3c3 #ff6a1a — Almost entirely black and pale grey. A small orange glow on one shard and two emoji are the only warm notes. One section flips to light grey through horizontal bars.",
  "imagery": "Real-time 3D: the logo as extruded wireframe and solid black slabs, scattered shards and thin streak lines in very low contrast; later a tilted semi-transparent card with a project image floating on a pale gradient.",
  "layout": "Full-bleed stage with 36px margins. Text blocks are pinned to corners, large statements sit left or right of centre, and tiny uppercase captions hang at column edges. Twenty-eight screens of pinned scenes, a full-width marquee, a light interlude, then a dark footer.",
  "sections": [
   {
    "role": "intro",
    "description": "A four-line statement at about 4.5vw starts 55% across the screen with a first-line indent of roughly 60px, in pale grey that fills in word by word from dim to bright. A tiny uppercase section label sits alone at the far left on the first line's height. Beneath, two small captions at opposite ends of the text block: a three-line uppercase motto left, a three-line sentence right, then an underlined mono link."
   },
   {
    "role": "other",
    "description": "Marquee and wipe. A single line of capitals at about 9vw crosses the full width and runs off both edges, words separated by small plus signs with wide gaps; the 3D logo slab stands behind it and a glowing orange facet pokes between two words. The line becomes the seam of a transition: stacked horizontal pale-grey bars of varying thickness sweep up the screen and invert the page to light."
   },
   {
    "role": "stats",
    "description": "Light-grey gradient screen, empty except for a centred two-word heading near 40px in dark grey with two tiny centred lines beneath, placed in the lower middle. Below and left, a tilted semi-transparent card carrying a project image floats in perspective as it enters from the bottom edge. The nav pills invert to dark for this section."
   },
   {
    "role": "footer",
    "description": "Dark again. Top-left a tiny uppercase line, then a two-line 40px question. Right column: two mono uppercase link rows, each on its own hairline with an arrow at the end, then contact and social in small two-column lists. The bottom third is the wordmark at full width, drawn only from horizontal scanlines of varying length so it reads as a faint striped ghost."
   }
  ],
  "steal": [
   "Pin small supporting blocks to the viewport corners (a bordered two-cell fact box bottom-right, an instruction bottom-centre) so the headline can sit alone top-left.",
   "Indent the first line of a large statement and start the block right of centre, leaving a tiny section label alone at the far margin.",
   "Draw the footer wordmark from horizontal scanlines of varying length instead of solid letters."
  ],
  "media": "A fixed WebGL canvas covers the fold: a 3D logo mark about 11% of the width and half the height at the centre, with fine orbit lines reaching every edge and all the copy in the corners. Later come three-up stat cards alternating photo, numeral and photo, a section title facing a project card before a horizontal track of 720px columns, a pinned smoke-and-stone scene that smashes a stacked type list, and a giant wordmark across the foot, the pictures with about 4-6px corners and no video anywhere.",
  "motion": "No preloader: the mark's beams fly in from the edges with an orange flare while the hero's last word dissolves letter by letter with a blur, settled in about 3s (network idle near 16s). Lenis with 4 pins: the mark explodes behind the about statement and reassembles behind the marquee, the statement fills from #434343 to #d8d8d8 word by word, vertical scroll drives the project track sideways, and a stone falls through the services words whose letters scatter and fall; colour flips run 0.5s cubic-bezier(0.4,0,0.2,1) on 160 elements."
 },
 {
  "id": "opl-flowjam-2",
  "name": "Flowjam",
  "url": "https://flowjam.com",
  "source": "One Page Love",
  "kind": "agency",
  "score": 6.8,
  "idea": "A persistent frosted sidebar card holds the pitch and buttons while a soft-serif content column scrolls past it; beyond that there is no idea stronger than proof by logos and videos.",
  "mood": [
   "soft",
   "friendly",
   "grainy",
   "startup"
  ],
  "archetype": "other: sticky-sidebar-statement",
  "hero": "Grainy off-white page. A tall rounded card about 26% of the viewport wide is pinned at the left and runs off the bottom; frosted over blurred pink and yellow flowers, it holds the logo, a two-line serif tagline, a short blurb and two pill buttons in hot pink and charcoal. The main column starts 32% from the left: a hot-pink pill badge, a three-line serif headline at 4.2vw, then a paragraph whose first sentence is grey and the rest black. A lone charcoal pill button floats far right at mid-height. Below: a heart icon with a proof line, then the top of a four-column logo grid with dotted borders.",
  "type": "Gelica throughout: a soft, slightly bulbous serif at regular weight, 60px headline with tight -0.05em tracking, 16 to 19px body, down to about 9px in the sidebar. One family for everything including buttons keeps the tone warm but flattens the difference between labels and prose.",
  "colour": "#f8f8f6 #e7e8e4 #1c0f1f #ff4fe0 #0c0c0c #7b3ff2 — Warm paper white with grain, near-black aubergine text and one hot-pink accent used for the badge and primary button; a purple heart appears once. The footer flips to black.",
  "imagery": "Rounded-corner video thumbnails of founders talking to camera and product UI clips, each with a small round play button bottom-left; monochrome client logos in a dotted-line grid; blurred floral blobs behind the frosted sidebar.",
  "layout": "A fixed 26% sidebar card at left for the whole scroll; content occupies one column to its right, split into two for video tiles and four for logos. Sections are separated by whitespace only. The footer is a rounded black panel that still leaves the sidebar in place.",
  "sections": [
   {
    "role": "proof",
    "description": "Four-column grid of client logos drawn with faint dotted cell borders, each cell roughly 240px wide and 115px tall with the logo centred in dark grey monochrome. Sixteen or more logos over four rows, no captions. Above it, a centred line with a purple heart glyph and a sentence whose first word is black and the rest grey serves as the heading."
   },
   {
    "role": "work",
    "description": "Two-column grid of video cards. Each card has a header row with the client name in 14px serif and a one-line result in tiny grey beneath it at left, and a small outlined pill link at right; then a 16:9 thumbnail with about 10px radius and a round play button over its bottom-left corner. Cards are divided by hairlines rather than boxes, and some thumbnails are flat type frames instead of photos."
   },
   {
    "role": "footer",
    "description": "A rounded black panel inset from the page edges, sitting right of the sidebar. Its background is a short phrase repeated in dark-grey serif at about 5vw, rows offset so the words tile like wallpaper. Centred over it: a two-line white serif headline at about 2.5vw and a small stat line. The lower third holds the logo at left and four narrow columns of tiny text."
   }
  ],
  "steal": [
   "Pin a narrow card with logo, one-line pitch and both actions beside the scrolling content, so the call to action never leaves the screen and no top nav is needed.",
   "Set one sentence of a paragraph in grey and the rest in black to rank two claims without changing size or weight.",
   "Tile a short phrase as dark-on-black wallpaper behind the footer headline."
  ]
 },
 {
  "id": "aww-the-watch",
  "name": "The Watch",
  "url": "https://thewatch.60fps.fr/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 6.8,
  "idea": "A single 3D watch is the only actor: it holds centre stage and turns, flips and finally explodes into parts while giant product-name letters slide behind and in front of it.",
  "mood": [
   "clinical",
   "metallic",
   "monochrome",
   "technical",
   "quiet"
  ],
  "archetype": "product-object-centre",
  "hero": "Light grey field with soft darker blurs toward the corners. A steel chronograph rendered in 3D stands upright at dead centre, about 80% of viewport height. Behind it the product name is set once across the full width in a wide, squared geometric sans at 24vw in mid-grey; the watch covers the middle character, so only two letters at the left edge and two at the right are readable. A thin circle about 700px across with faint radial spokes and one darker arc sits behind the watch like a dial diagram. No navigation, logo, body copy or button anywhere.",
  "type": "Nekst, a wide squared geometric sans, regular weight, uppercase, used only huge (up to 25vw) in black, mid-grey and white within one line stack. Body is Inter at 12px in 130px columns, roughly a 30x jump with nothing in between.",
  "colour": "#e8e8e8 #c7c7c7 #a1a1a1 #6b6b6b #0a0a0a #ffffff — Entirely greyscale: pale grey ground with out-of-focus darker clouds, type in black, grey and white. The page darkens to mid-grey for the exploded view. Only the brass gear train adds warmth.",
  "imagery": "One real-time 3D steel watch shown front, three-quarter, caseback and exploded into dial, movement and plates lined up on a horizontal axis. No photographs; the object floats with no ground shadow.",
  "layout": "No grid chrome at all: the object holds the centre while type moves around it. Giant letters crop at any edge, captions sit in a 130px column left or right of the watch, and one product label is rotated 90 degrees.",
  "sections": [
   {
    "role": "showcase",
    "description": "Four stacked lines of uppercase display type about 110px tall, flush left at mid-page and running off the right edge: line one mid-grey, line two black, lines three and four pale grey to white. The watch, tilted three-quarter, floats over the upper right of the stack and hides parts of letters, so type and object share the same space instead of sitting side by side."
   },
   {
    "role": "features",
    "description": "The watch is turned to show its open caseback, placed just left of centre. To its right, a 130px-wide column holds two micro-paragraphs at 12px, each with a grey one-line title above. A small grey circular toggle sits far left. A white display word crops off the top edge. The rest of the frame is empty grey with a darker blurred cloud at upper right."
   },
   {
    "role": "other",
    "description": "Exploded view. The ground shifts to a mid-grey vertical gradient with a faint horizon line. The watch's components (dial, tourbillon, movement, barrel, bridges) are separated and spaced along one horizontal axis at eye level like specimens. Tiny part names are set vertically along the bottom edge under each piece; a small prompt with a plus icon sits top-centre."
   }
  ],
  "steal": [
   "Set the product name so large that the product itself replaces one of its characters, leaving the name half-hidden and the object as the missing letter.",
   "Stack one display line in three tints (black, mid-grey, white) on a grey ground so a single typeface produces depth without colour.",
   "End a product story with an exploded view laid out on one horizontal axis with vertical micro-labels instead of a spec table."
  ],
  "media": "One fixed full-bleed WebGL canvas renders every picture: a steel chronograph about 620px tall (69% of the height, 29% of the width) centred inside a 720px ring with the giant model code behind it, then the watch from every side, an exploded line of parts on an axis with leader labels, particle ribbons on black, a black-finish reprise and a close-up cropped by the bottom edge. No photographs and no video; two very tall gradient overlays hand the ground from light to dark and back.",
  "motion": "The preloader holds at least 4.5s on the 3D assets, then its 720px circle stays to become the ring round the watch while a dark arc draws clockwise over 1.2s. Lenis drives one pinned, scrubbed timeline over 38 screens: the watch turns, separates into parts, the ground moves from #ebebeb to #a1a1a1 to #0a0a0a, and headline lines change colour by their distance from the viewport centre; per-character transforms are written every frame, smoothed by a 20ms ease-out."
 },
 {
  "id": "opl-justin-lerner",
  "name": "Justin Lerner",
  "url": "https://jlern.com",
  "source": "One Page Love",
  "kind": "personal-portfolio",
  "score": 6.8,
  "idea": "The portfolio is a hairline grid of square cells in which the letters of the owner's name are scattered among small animated project emblems, so name and work form one crossword-like board.",
  "mood": [
   "playful",
   "spare",
   "witty",
   "hand-made"
  ],
  "archetype": "grid-index",
  "hero": "White page divided by pale grey hairlines into five columns of exact squares (each 20vw), so three full rows and a sliver of a fourth show. No header, navigation or text block. Each cell holds one centred object about half the cell wide: either a single black slab-serif capital at 5.6vw (one in the top-left cell, one top-right, three more scattered through rows two and three) or a small project emblem such as a pixel speech bubble, a photographed bowl, a red robot arm, a wireframe figure, a logo badge or a line-drawn building. One cell holds only a soft blurred cloud. About 90% of the area is white.",
  "type": "Museo Slab is the only face on desktop: weight-500 capitals at 80px used as grid letters, with no body copy at all (eleven words on the page). Mobile adds light italic slab project names and small sans year tabs.",
  "colour": "#ffffff #e9eae8 #111111 #fff200 #f0563a #4fd0c8 — White ground, grey hairlines, black letters. Colour arrives only in the emblems, each in its own one- or two-colour scheme (yellow, coral, teal, purple). Mobile adds two solid yellow icon tiles.",
  "imagery": "Small spot illustrations and logos in deliberately mixed styles (pixel art, line drawing, isometric, wireframe mesh, one cut-out photo), each centred in a square cell with no frame or background, and animated.",
  "layout": "A single edge-to-edge grid of 20vw squares with hairline dividers and no outer margin; the whole site is about 1.3 screens. Mobile switches to two columns and adds a year tab in each cell's top-right corner and an italic name under each emblem.",
  "sections": [
   {
    "role": "work",
    "description": "The grid continues for one more row below the fold with five cells holding only emblems. Across frames the emblems are caught in different states: a logo badge collapsing to a small monogram, a scan line moving down the wireframe figure, a pencil travelling across a drawn face, a coin appearing and disappearing. Each cell is a tiny looping or hover-driven animation, with no captions on desktop."
   },
   {
    "role": "other",
    "description": "Mobile header built from the same cells: a small square with the initial on crosshair lines at left, an empty cell, then two solid-yellow square tiles carrying a document icon and a paper-plane icon. Below, the two-column grid gives each project a boxed year tab notched into the top-right corner of its cell and an italic slab project name near the bottom, sometimes overlapping the emblem."
   }
  ],
  "steal": [
   "Spell the name by dropping its letters into scattered cells of a hairline grid and fill the remaining cells with project marks, so identity and index share one structure.",
   "Give each project a single small animated emblem centred in a large empty square instead of a screenshot thumbnail.",
   "On mobile, notch a small boxed year tab into the corner of each grid cell and label the cell with an italic name at its base."
  ]
 },
 {
  "id": "opl-monte",
  "name": "Monte",
  "url": "https://montecafe.com.au/",
  "source": "One Page Love",
  "kind": "restaurant",
  "score": 6.8,
  "idea": "No real concept: one warm interior photograph sells the venue while a booking bar stays pinned to the bottom of every screen.",
  "mood": [
   "warm",
   "calm",
   "hospitable",
   "understated"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "An interior photograph fills the viewport edge to edge down to a 70px full-width taupe bar pinned at the bottom, which carries a single centred serif booking link. The venue name sits alone at the exact centre of the image in a light serif at about 4vw, white, with no subhead and no button. A transparent header overlays the top: the parent group's logo at a 40px left margin, seven sans links spread along the right half, divided from the image by a one-pixel translucent rule. There is no scrim; the photo's warm mid-tones carry the white text. Mobile keeps the same arrangement with a hamburger.",
  "type": "Domaine Text Light for the venue name, intro paragraphs, section titles and footer links, all modest (60px name, 28 to 40px elsewhere); Modern Gothic for navigation, labels and small print at 12 to 16px. No large display type anywhere: the scale is deliberately flat.",
  "colour": "#f5f0ea #b9b1a4 #000000 #b5694d #ddd8d2 — Warm cream page, a taupe booking bar, black for the gift-card panel and footer. Colour comes from the photography: terracotta tile, pale timber and plant green.",
  "imagery": "Editorial interior and food photography in warm natural light, often with a motion-blurred figure. Full-bleed hero, then a horizontal strip of mixed-width crops, square social thumbnails and tall 4:5 venue portraits; corners almost square.",
  "layout": "40px side margins with content hung from full-width hairlines. Text-and-details rows alternate with image carousels that bleed off the right edge; a black inset panel and a black footer break the cream. The taupe booking bar persists at the bottom of every screen.",
  "sections": [
   {
    "role": "intro",
    "description": "Cream band opened by a full-width hairline. Left: a five-line serif paragraph at about 28px occupying roughly 48% of the width. Right third: a details table of six rows (hours, address, phone, email, social, website), each a small grey label with its value indented about 115px, separated by hairlines. Directly below, a strip of photographs of unequal widths runs off the right edge, cropped by the viewport."
   },
   {
    "role": "cta",
    "description": "A black rectangle inset 40px from the page edges and about 650px tall. Left of centre, a six-line serif paragraph in cream at about 30px with a tiny outlined pill button under it; at right, a single flat taupe rectangle the proportions of a bank card, about 235px wide, bearing the logo split to its two edges. Nothing else: the flat card stands in for an image."
   },
   {
    "role": "gallery",
    "description": "A horizontal carousel of sibling venues: 4:5 portrait photographs about 440px wide with 20px gaps, three visible and a fourth peeking at the right edge. Under each: the venue name in roughly 40px serif, generous space, a hairline, a small bold 'view venue' label, a two-line description in 14px sans and an outlined pill booking button."
   }
  ],
  "steal": [
   "Pin a full-width, low booking bar in a muted brand tone to the bottom of the viewport instead of placing a button in the hero.",
   "Set the venue name small (about 4vw) and dead-centre on an unscrimmed photograph and let the image supply the scale.",
   "Present practical details as a label and value table with hairline separators beside the intro paragraph rather than as icon rows."
  ]
 },
 {
  "id": "opl-tab-kitchen-bakery",
  "name": "TAB Kitchen & Bakery",
  "url": "https://tabkitchenbakery.com/",
  "source": "One Page Love",
  "kind": "restaurant",
  "score": 6.8,
  "idea": "A scroll-driven walk into a flat-colour illustrated cafe: a line of text parts to reveal an oval vignette that grows until you are standing inside the room.",
  "mood": [
   "warm",
   "nostalgic",
   "illustrated",
   "unhurried",
   "folksy"
  ],
  "archetype": "type-poster",
  "hero": "A full-viewport brick-red field carrying nothing but type. The three-word name is centred horizontally and sits just above vertical centre in a light regular serif at 6.3vw with very wide word spaces, cream on red. Directly beneath is a cream rule about 4px thick, exactly as wide as the title, then a one-line subtitle at roughly a third of the title size, also centred. No navigation, logo, button or image; about 85% of the screen is empty colour. It works as a title card before the scroll sequence starts.",
  "type": "Inria Serif regular for the opening title at 90px; PP Editorial New, light and slightly condensed, for the dark-green scroll lines at about 4vw; Sometype Mono in uppercase for the two corner labels and footer credits at about 12px. Three sizes in total.",
  "colour": "#9c4f49 #f7e5cd #34492d #7a7a4f #efb55b #1c1c1c — Each scroll chapter is a flat field: brick red, then cream, with olive and mustard later. Type is cream on red and dark leaf-green on cream; the illustrations use the same four hues. Warm throughout.",
  "imagery": "Flat vector illustration with black keylines in four colours: a cafe interior with red cabinet and lantern, shown first inside an outlined oval, then full-bleed; olive leaf sprigs cropped by the side edges; a botanical footer frieze with a dog.",
  "layout": "One idea per screen across about 26 pinned screens. Two tiny mono labels fixed in the top corners are the only persistent chrome; everything else is centred type or a single illustration on a flat field with wide empty margins.",
  "sections": [
   {
    "role": "intro",
    "description": "Cream field. Two centred lines of light serif at about 4vw in dark green. On scroll they separate diagonally, the first line sliding up and left and the second down and right, while a horizontal oval with a double black outline, about 40% of viewport width, opens between them showing the cafe illustration. Large olive leaf sprigs enter from the left and right edges and are cropped by the viewport."
   },
   {
    "role": "gallery",
    "description": "The oval scales up until the illustration fills the viewport edge to edge: a one-point-perspective room in flat brick, olive, mustard and cream with black outlines, a counter in the left foreground, a carved cabinet on the far wall and red shelving at the right edge. The two corner mono labels stay on top of the artwork; there is no other text."
   },
   {
    "role": "footer",
    "description": "Pale cream field. A symmetrical band of sage-and-peach botanical illustration spans the full width across the middle third, with the small serif logo inside a vine cartouche centred above a tan dog. Two single-line mono credits in brick red sit at the bottom-left and bottom-right corners. No link columns, no rule, no background block."
   }
  ],
  "steal": [
   "Open with a chrome-free title card: one serif line, a rule exactly the title's width and a subtitle, centred on a flat saturated field.",
   "Split a two-line statement diagonally on scroll, reveal an image in the gap, then scale that image's mask until it becomes the next full-bleed scene.",
   "Hold illustration, type and backgrounds to the same four flat hues so each section change is a palette swap rather than a new style."
  ]
 },
 {
  "id": "aww-lacoste-ace-breaker",
  "name": "Lacoste Ace Breaker",
  "url": "https://members-play.lacoste.com/ace-breaker-rg",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 6.8,
  "idea": "A branded arcade-game title screen where the game's own paddle and ball are set into the lockup like punctuation, over a dimmed 3D tennis court.",
  "mood": [
   "sporty",
   "premium",
   "dark",
   "playful",
   "restrained"
  ],
  "archetype": "type-poster",
  "hero": "Single fixed screen. A dimmed, slowly drifting 3D tennis court fills the viewport under a deep green wash. A two-line title is left-aligned 12.5% in from the left and sits just below centre: line one the brand name in a cream high-contrast serif, line two the game name in yellow wide grotesk at about 9.7vw, reaching 80% of the width. A tiny paddle-and-ball graphic fills the gap after line one. A hairline spans 75% of the width beneath; under it an outlined pill sits at the left end and a filled yellow pill with a ball icon at the right, with tiny uppercase legal text below. Logo top-left, hamburger top-right.",
  "type": "Digest reports MonaSans throughout, weight 400, uppercase, zero tracking; the game name is 140px in a slightly wide cut. The brand line is drawn as a high-contrast serif wordmark at the same cap height. Three sizes only: title, 28–44px button labels, 11px legal.",
  "colour": "#092617 #122815 #f4cf4e #efeadb #00503c — Everything lives inside one bottle-green field; cream for the brand line and outlines, a single warm yellow for the game name and primary button. No section changes.",
  "imagery": "A real-time 3D tennis court with branded hoardings, pushed far back by a dark green overlay and fine grain so it reads as texture; a flat vector paddle and ball are the only bright objects.",
  "layout": "One screen, no scroll. The content block is inset 12.5% each side and stacked in three bands: title, hairline, action row, with buttons pushed to opposite ends of the rule. On mobile the primary button is bracketed between two rules and right-aligned.",
  "sections": [
   {
    "role": "cta",
    "description": "The action row is the only other element: a hairline with slightly wobbly, hand-drawn edges, then two pills on one baseline at opposite ends. The secondary is a 2px cream outline about 255×95px with a pale label; the primary is a solid yellow capsule about 340×95px with a dark ball icon and dark label near 44px. Legal copy hangs under the secondary button, left-aligned, in bold 12px uppercase at reduced opacity."
   }
  ],
  "steal": [
   "Drop a small object from the product (here the game's paddle and ball) into the empty space at the end of a short headline line so the lockup itself carries the concept.",
   "Set a two-line title with line one in a serif wordmark and line two in a wide grotesk at the same cap height, separated by colour rather than size.",
   "Use a full 3D scene as wallpaper by burying it under a roughly 85–90% tint of the brand colour, so it adds depth without competing with type."
  ],
  "media": "A real-time 3D tennis stadium covers the whole first screen, dimmed under a deep-green wash to near texture so the type carries the screen; the only foreground picture is a small flat pictogram of the game tucked beside the wordmark. No photographs and no video.",
  "motion": "The loader runs at least 4.5s as a looping preview of the game: a ball drops on a gravity ease (0.5s cubic-bezier(.5,.05,1,.5)) onto a paddle sliding on a 3s loop. The title screen then arrives in a stagger, wordmark first, each part fading and rising over 0.8s cubic-bezier(.215,.61,.355,1), after which wheel steps do nothing and only the WebGL camera drifts round the stadium; the house ease is cubic-bezier(.55,0,.1,1), 51 uses, at .3s and .5s."
 },
 {
  "id": "aww-the-tie-break",
  "name": "The Tie-break",
  "url": "https://thetiebreak.merci-michel.com/",
  "source": "Awwwards Site of the Day",
  "kind": "other",
  "score": 6.8,
  "idea": "The start screen of a branded tennis game, where the lines of a court seen from above become the frame around the title; only this screen was captured.",
  "mood": [
   "sporty",
   "soft-focus",
   "elegant",
   "nostalgic"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A heavily blurred, grainy photograph of a figure in a cream jacket on a blue court fills the viewport. Thin white-to-blue lines trace a tennis court in plan across the whole screen: two horizontals near the top, two near the bottom, an inner rectangle about 45% of the viewport wide, and centre ticks; every line stops short of the middle column to leave it clear. In that column, stacked and centred: two partner logos, a two-line italic serif title at 112px (7.8vw) broken at its hyphen, three lines of 12px sans, and a small white button with a ball icon inside a hairline outer frame.",
  "type": "Instrument Serif italic at 112px for the title, white, sentence case with an exclamation mark; Work Sans 12px for the description and button label. Only two sizes, roughly a 9x jump, plus the stacked co-brand logos.",
  "colour": "#335483 #284879 #d8ccbc #1e3a8c #ffffff #8a3b45 — Cool court blues dominate, with the blurred cream jacket as a warm mass behind the title and a hint of red at the lower edge; type, lines and button are white.",
  "imagery": "One campaign photograph blurred until it is only colour masses and overlaid with coarse noise, used full-bleed as a field. On mobile the crop turns grey and darker with heavier grain.",
  "layout": "Single screen. A centre column about 22% of the viewport wide holds all content; the rest is the blurred field ruled by court lines that run to every edge. No navigation, no footer.",
  "sections": [],
  "steal": [
   "Draw the subject's own geometry, here court lines in plan, as hairlines across the full viewport and interrupt them where content sits.",
   "Blur a campaign photo until it is only colour masses, add coarse grain, and use it as the background so white type stays readable.",
   "Frame a small solid button with a second hairline outline a few pixels outside it."
  ],
  "media": "One fixed WebGL canvas covers the whole first screen with a product close-up blurred until only colour masses remain (pale grey felt, denim blue corners, a red stripe), under a radial warp and grain; text covers about 7.5% (16.9% on the phone). A line diagram of a tennis court is drawn over it as the layout frame; no video and no content images, the canvas drifting slowly like ambient footage.",
  "motion": "The preloader is up through all four intro frames: an outline ball bouncing with squash (scale 1.3 by 0.65) and a growing shadow on a 0.8s loop, falling on an ease-in and rising on an ease-out. The title screen then fades in, heading, paragraph and button each on a 2s ease opacity, and the page never scrolls: views switch on a fast 0.17s fade, and the button border changes over 0.3s cubic-bezier(0.19,1,0.22,1)."
 },
 {
  "id": "opl-lennys-newsletter-product-pass",
  "name": "Lenny’s Newsletter Product Pass",
  "url": "https://www.lennysproductpass.com",
  "source": "One Page Love",
  "kind": "other",
  "score": 6.8,
  "idea": "A perks membership presented as a conference lanyard badge, with every partner offer drawn as a tear-off coupon ticket.",
  "mood": [
   "friendly",
   "warm",
   "illustrated",
   "promotional"
  ],
  "archetype": "split-text-media",
  "hero": "Peach field. A floating pill navigation bar about 72% of the viewport wide sits 40px from the top: script wordmark with campfire mascot at left, three links and an orange outlined pill button at right. Below, a two-column split. The left 45% holds a three-line bold sans headline at about 2.8vw, a three-line paragraph, then a wide white email pill with thick black outline and an orange arrow button inside its right end. On the right, two illustrated badge cards hang on orange lanyard straps that run off the top edge behind the nav, tilted against each other. A tan logo marquee runs edge to edge along the bottom.",
  "type": "Degular in bold for headings and regular for body, sentence case, no tracking; hero headline about 40px against 20px body, section titles 64px and centred. A brush-script wordmark and a hand-lettered marker face (faveHandPro) on each coupon's value label supply the personality.",
  "colour": "#fff1e8 #fdd4b5 #ffffff #f6871f #111111 #d9a67e — Everything lives in one orange family: pale peach page, deeper peach panels, saturated orange only on buttons and lanyards, black outlines for structure. Partner logos keep their own colours inside white cards.",
  "imagery": "Flat vector illustration with thick black outlines: lanyard badges, campfire mascot, yellow starburst stickers. Otherwise third-party logos, tan-tinted in the marquee and full colour inside cards. No photography.",
  "layout": "The hero is a left-anchored split; everything after is a centred heading over a three-column grid of identical coupon cards repeated for about seven screens, the first group wrapped in a wide rounded peach panel. The closing panel returns to a split.",
  "sections": [
   {
    "role": "showcase",
    "description": "Three-column grid of coupon cards, white with a 2px black outline and 14px radius. Each card stacks: partner logo top-left, one bold line stating the offer, two or three lines of grey description, then a dotted perforation line and a peach stub with a hand-lettered dollar value at left and a small claim link at right. Some cards carry a yellow starburst sticker rotated over the top-right corner, breaking the outline."
   },
   {
    "role": "cta",
    "description": "A wide peach panel with black outline and large radius, inset from the page edges. Left half: two-line bold heading, short paragraph, orange outlined pill button. Right half: a single column of partner logos stacked vertically and clipped by the panel's top and bottom edges, reading as a vertical ticker. Below the panel the footer is one row: script wordmark left, four links and the pill button right."
   }
  ],
  "steal": [
   "Draw each offer as a physical coupon with a dotted perforation line, a tinted stub and a hand-lettered value, so a long grid of logos reads as tickets instead of cards.",
   "Hang the hero illustration from the top edge of the viewport and pass it behind the floating nav so the page seems to continue above the screen.",
   "Tint all partner logos in one brand-derived tan for the marquee and save their full colour for the cards where they matter."
  ]
 },
 {
  "id": "aww-heron-ai",
  "name": "Heron AI",
  "url": "https://heronaiapp.com/",
  "source": "Awwwards Site of the Day",
  "kind": "ai-product",
  "score": 7.7,
  "idea": "An AI agent that checks architects' models for code problems, shown as a drafting sheet: elevations and floor plans on warm paper, where the product's job is acted out with flat orange flags on the drawings instead of being described with abstract tech imagery.",
  "mood": [
   "technical",
   "precise",
   "editorial",
   "crafted",
   "calm"
  ],
  "archetype": "illustration-led",
  "hero": "Warm drafting paper inside a 7px inset frame. Between two full-width rules at y≈78 and y≈748, one contained drawing box (about 95% of the width and 72% of the height) holds a stippled, hatched concrete house elevation about 960px wide with bare trees, standing on a drawn ground line, with two tiny flat-orange squares on the facade as hotspots. Nothing else shows in the captured fold: the two-line 47px (3.2vw) uppercase bold title is docked under the lower rule at y≈775 and reveals only after the first scroll, beside a 13px intro box and an orange link. Before that a 4.5s loader draws the house as line art stroke by stroke while a spec table fills in bottom-right.",
  "type": "BT Grotesk (73% of text, 400-700) for everything readable: titles in uppercase at 47, 40 and 23px (3.2, 2.8 and 1.6vw), leading 1.0, -0.02em; body at 12-13px. Geist Mono 500 (27%) at 10-12px uppercase for labels, bracketed indices and prompts. No serif and no italic. The house version keeps the grotesk alone, in sentence case, with 16px body.",
  "colour": "#f4f3ec #282828 #626260 #b4b4b0 #fa3600 — Warm drafting paper as the ground for almost the whole page; ink for 86% of the text and for dark fills (plan walls, tab headers); a pale grey for words not yet read; one flat orange at about 2-3% of the surface for a sun disc, the violation flags, link text and approve buttons. White appears only as text on ink or orange.",
  "imagery": "Strictly monochrome architectural drawings in two registers, pure line art and dense stippled etching with hatched shadows, plus floor plans, isometric line icons and a product interface fragment set in the same paper tones. Colour enters only as flat orange shapes, never as tinted photography. Square corners, no shadows, paper grain underneath.",
  "layout": "Text starts 26px inside a 7px inset frame, at x=33. Every section spans the full frame and is cut into cells by 1px rules: halves, four columns of about 357px, two thirds plus a one-third copy rail. Sections butt against each other with no vertical gaps. An 8-viewport sticky stage carries the main story, and a zigzag of looping 464px vignettes leaves half of some screens as bare grid paper. The house version keeps the cells and marks them with tone steps and space instead of rules.",
  "sections": [
   {
    "role": "intro",
    "description": "Split at the centre. Left half: a tower drawn as line art merging into an etched render through a stepped pixel mask, a large flat orange disc behind its top. Right half: an uppercase statement of about 33px over eight lines, about 440px wide, that fills from grey to ink as you scroll, with an outlined button below."
   },
   {
    "role": "features",
    "description": "Four columns of about 357px under a header row (a two-line 40px heading left, a short paragraph right). Each column holds an isometric line icon that draws itself on (a slab pierced by a cylinder, a cube inside a circle), a 23px uppercase title in three short lines and 13px grey body."
   },
   {
    "role": "how-it-works",
    "description": "A sticky full-frame stage held for about 8 viewports. A floor plan about 520x640 builds in layers: heavy ink walls, then fine furniture and stairs, then dimension strings, then three orange squares flagging the problems, one with an arrow. A caption card about 230px wide, docked 33px from the bottom-left, changes its text at each beat. The plan then slides into the left two thirds for a one-third copy rail of four short claims."
   },
   {
    "role": "showcase",
    "description": "A product interface fragment in the middle cell, about 5/12 of the width: four figure tiles, an activity list, and an overlapping approval panel with flat orange buttons, all in the page's paper tones, with a chat panel on a plan fragment above it."
   }
  ],
  "steal": [
   "Draw the pictures in the product's own medium: for a tool that works on architectural models, plans and elevations that build in stages (structure, then detail, then dimensions, then the flagged problems) instead of abstract 3D or glowing shapes.",
   "Reveal a picture by a stepped pixel dissolve from line art to shaded render, about 19 steps in 0.58s, so the motif itself shows a line becoming a model.",
   "Spend one flat accent on about 2-3% of the surface and only on what demands attention (the problem flags, one disc, the primary action) on a warm paper ground with near-black ink. The site separates everything with 1px rules, monospace labels and bracketed indices, all banned here: keep the cells, mark them with tone steps and space, and set labels in the text face."
  ],
  "media": "Every picture is a drawing, never a photograph or a video: one contained etched elevation centred on paper (box about 95% wide and 72% high), a drawing held in one half against a statement, a sticky full-frame plan that builds beside a docked caption card, and 464px looping vignettes in a zigzag. Twenty-seven images, nine inline SVG drawings and paper-grain backgrounds.",
  "motion": "A 4.5s loader draws the house stroke by stroke, then a stepped pixel dissolve (mask position over 0.58s in 19 steps) swaps line art for etching. Lenis and 52 ScrollTriggers run the rest: lines rise with opacity and yPercent over 0.8-1.08s power2.out at a 0.02 stagger, the big statement fills grey to ink on a scrub, the plan builds in layers inside an 8074px CSS-sticky wrap, vignettes loop on a 5s linear cycle with their own eases, and hovers move over 0.48s cubic-bezier(0.625,0.05,0,1).",
  "panel": "2026-10"
 },
 {
  "id": "aww-huy-phan-vol-2",
  "name": "Huy Phan",
  "url": "https://huyml.co/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.7,
  "idea": "The whole portfolio is one fixed viewing stage: nineteen projects hang on a 3D helix that the wheel turns, each landing flat in the centre, while a giant counter, a wheel of project names and a credit block swap around it like readouts on an instrument panel.",
  "mood": [
   "precise",
   "technical",
   "playful",
   "cool",
   "polished"
  ],
  "archetype": "immersive-webgl",
  "hero": "A single fixed 1440x900 stage on light grey (#ececec) with 20px margins and a 16-column grid. The active project picture lies flat in the centre, about 380x300 (26% of the width), tilted about 1 degree; earlier cards spiral up and off the top edge, and the next ones fan down-left in perspective behind a 180px (12.5vw) index number with a small total beside it, bottom-left. Left third: a 55px vertical wordmark strip, a four-item uppercase nav at 19px and credit pairs (role, launch month, recognition). Right: a wheel of all project names centred at x≈1150, the active one dark and its neighbours faded, with three 12px colour swatches at the far edge. No headline and no readable name or role on the stage; before it a 5s intro shows a line-drawn mascot pushing a black curtain off a red two-line wordmark.",
  "type": "Three families. A neutral grotesk carries 95% of the characters: medium at 10px for labels, credits and descriptions, regular at 180px for the index number (leading 0.85, -0.04em; 90px on the phone). A narrow glyphic display face with flared terminals sets the nav (19px), project names (16px caps) and panel headings (23px), tracking +0.01em. A contrasty display face is kept for the red intro wordmark. The house version is one family with 16px descriptions.",
  "colour": "#ececec #1e1e1e #c4c4c4 #d4d4d4 #171717 #ff4949 — Light grey ground on 85-90% of the screen with near-black ink and faded grey list text; red only for the intro wordmark. All other colour comes from the photographs and three swatches per project. Much of the readout is white in difference blend so it inverts over the moving cards.",
  "imagery": "Nineteen screenshots and stills of client websites in one landscape ratio of about 5:4, square corners, each keeping its own grading (neon blue to pastel); the cards bend like paper with scroll speed and lie flat at rest. A line-drawn mascot, and an illustrated self-portrait that alternates with the vertical wordmark.",
  "layout": "One 900px screen; scrollY stays 0. Three zones balance across the width: labels and credits in the left third anchored at x=197 (column 3) and x=287 (column 4), the picture in the middle, the name wheel in columns 12 to 15. Empty space runs in a diagonal round the active card and the helix sweeps through it, so it reads as placed. On the phone everything collapses into one centred column with the image at 60% of the width.",
  "sections": [
   {
    "role": "intro",
    "description": "A white field with a black panel over the right 70%. A small line-drawn character, about 15% of the viewport tall, pushes the panel right over about 2.5s to uncover a two-line red wordmark, centred; then the project cards sweep in as a steep diagonal cascade from top-right to bottom-left, bent like pages, and settle into the helix."
   },
   {
    "role": "list",
    "description": "The right-hand wheel of all project names in 16px display caps, each with a 10px category above, a short dash and a three-line 10px description; only the active item is dark, and neighbours fade to about 20% contrast towards the top and bottom of the right 40% of the screen."
   },
   {
    "role": "about",
    "description": "The left credit block: label and value pairs for role, launch month and a recognition list of one to six lines, labels grey and values near-black, swapping with a short blur and fade on every step."
   }
  ],
  "steal": [
   "Change the content, not the layout: one fixed stage where only the active picture, its name and its credits swap per step. The site lets a 180px index number carry the hierarchy; the house rules ban index numbering, so set the project name that large instead.",
   "Let 3D cards bend with scroll speed and lie flat at rest, so the active picture is always a clean, undistorted rectangle of about a quarter of the width.",
   "Anchor a sparse three-zone screen to one grid (labels in one column, values in the next, the picture centred, the list on the right) so a fixed stage reads as composed, and swap text in under half a second (opacity about 0.3s ease) so the visitor never waits for words."
  ],
  "media": "One fixed WebGL canvas covers the screen, but pictures fill about 30% of it: the active card is about 9% of the area, and the rest is the helix of neighbours cut by the top edge and the bottom-left corner. No video on the stage; a showreel sits behind a link.",
  "motion": "A 5s intro, in which a mascot pushes a curtain aside and the cards cascade in bent like pages, follows a 9.2s load. Each wheel notch then jumps six projects round an endless loop of nineteen, the cards bending with velocity and the counter and credits crossfading through a blur (opacity 0.32s ease on 270 elements, background-color 0.52s cubic-bezier(0.22,0.61,0.36,1)), with no split text and no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-ciao-energy-launch-website",
  "name": "Ciao Energy",
  "url": "https://www.ciaoenergy.com/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 7.6,
  "idea": "The can is the whole website: one fixed real-time 3D studio scene in which the camera travels from a flavour carousel to extreme close-ups of the can's own label, where each claim is paired with the ingredient that was taken out, and the copy is a thin layer over the product.",
  "mood": [
   "glossy",
   "bold",
   "nocturnal",
   "technical",
   "energetic"
  ],
  "archetype": "product-object-centre",
  "hero": "A fixed full-viewport 3D canvas on a dark grey studio floor fading to black over the top 40%. A metallic can stands dead centre (about 16% of the width, half the height), tilted about 10 degrees, between a chrome ring hovering above and a dark plinth below; six darker, smaller cans recede on a shallow arc behind it, the outer two cut by the viewport edges. The flavour name sits on the plinth in two lines of heavy italic uppercase at about 36px, over a 480px slider and a small scroll prompt; thin chevrons about 140px either side of the can change flavour. A centred logo about 125px wide at the top, a sound toggle left, a white contact pill right. No headline: the benefits arrive one scroll later.",
  "type": "Three families. A heavy (900) italic uppercase grotesque with leading 0.8 for headings only: about 45px for feature headings, 108px (7.5vw) for the FAQ, about 190px cap height for the slogan. A neutral geometric grotesque at 16px, leading about 1.6, for body, and 18px weight 500 for FAQ questions. A monospace at 11-12px uppercase for tags, the prompt and the nav; the house version keeps those labels in the text face, sentence case, at 16px.",
  "colour": "#000000 #6a6a6a #ffffff #3d2b68 #9a8ae6 — Black page (about 60% of pixels) and a grey studio floor fading to black; all text and buttons white. One custom property carries the flavour colour (a deep violet here) and tints the close-ups and the light, and a lilac accent marks the active claim. Every other colour comes from the cans themselves. The site's blue-to-pink slider is a gradient; the house version is a flat bar in the flavour colour.",
  "imagery": "No photographs or video: one art-directed render set of about twelve aluminium cans in six flavours, a chrome ring and a plinth, under soft key lights, with depth falloff on the background cans and a flavour-tinted spot and haze on the close-ups. Always full-bleed, never boxed or rounded.",
  "layout": "Two insets: the interface at 4% (58px) for the menu, the sound toggle and a progress bar; the content at 10% (x=144), a copy column about 400px wide and vertically centred, leaving the centre-right 40-50% to the product. Eight beats of 1.25 viewports each (about 14 screens) are empty scroll spacers that move the camera; the DOM layout barely changes. After the footer the scroll loops back to the carousel.",
  "sections": [
   {
    "role": "features",
    "description": "Pinned label close-ups. The camera comes so close that one can fills a tilted band about 450px wide, cropped by the top or bottom edge, its printed label repeating the claim. Left at x=144, about 400px wide: a small tag naming the removed ingredient, a two-line heavy italic heading at about 45px, three lines of 16px body. A rail of four round 50px buttons at the right margin shows the active claim. Each beat re-angles the camera."
   },
   {
    "role": "intro",
    "description": "A two-word slogan in heavy italic uppercase across about 80% of the width at about 40% white, cap height near 190px, on a blurred lilac wash, with the can floating in front of the middle letters."
   },
   {
    "role": "showcase",
    "description": "The whole range with no text: twelve cans in every flavour colour lined up on a sweeping diagonal from lower left to upper right, bleeding off both edges over the grey studio floor."
   },
   {
    "role": "faq",
    "description": "A 108px heavy italic heading at x=144, then a 670px accordion offset right of centre: 18px questions in rows about 64px tall, each with a small chevron. A centred newsletter block about 490px wide closes the page."
   }
  ],
  "steal": [
   "For a single physical product, keep one fixed full-viewport render and move the camera, never the layout: beats of about 1.25 viewports, each with its own angle, plus real DOM text so a slow GPU or a failed WebGL context still shows every claim.",
   "Pair each claim with an extreme close-up of the product's own printed label in a tilted band beside a 400px copy column set 10% from the left, so the object proves the sentence next to it.",
   "Bind the accent to the product variant with one custom property that changes over 0.6s when the flavour changes, and let the scene's light follow it. The site floats the can over its slogan; under the house rules nothing covers a statement, so set the object beside or below the type."
  ],
  "media": "One fixed WebGL canvas covers 100% of every screen and holds the only pictures: product renders, no photographs and no video. The product stands centre in the hero, then fills a tilted band beside the copy column, then sweeps the whole range diagonally across the frame.",
  "motion": "Fourteen ScrollTriggers on empty 1125px spacers set about 26 scene values (camera, can spin, arc spacing, light, tint) that short 0.09-0.12s power1.inOut tweens chase, so the camera moves continuously between beats. Headings, split into 382 characters, enter with opacity, scale and y over 0.6s power2.out and leave over 0.9s power2.in with a 0.25s stagger; the flavour colour eases over 0.6s, and the full scene took 12.7s to load.",
  "panel": "2026-10"
 },
 {
  "id": "aww-neutomni",
  "name": "Neutomni",
  "url": "https://neutomni.com/",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.6,
  "idea": "A small web studio sells its websites like packaged goods, printed in one red ink on white paper: the preloader is a cut-along-the-line coupon, the prices are tear-off tickets with barcodes, and the process is a square wheel that rounds off as the bumpy road from A to B smooths out.",
  "mood": [
   "playful",
   "witty",
   "graphic",
   "confident",
   "editorial"
  ],
  "archetype": "giant-wordmark",
  "hero": "White page with 20px margins. A full-width red wordmark 1400x230 (97% of the width, 26% of the height) runs across the top; 10px under it a 13px row holds a one-line descriptor at the left, the nav from the centre line at x=720 and an italic email flush right. The 52px headline sits in the right half from x=720, two upright sans lines and a closing line in italic serif. A dark 576x360 video card of case-study screens is centred at the bottom and cropped by the fold, about 230px showing. Small local time and a pulsing open-for-work dot sit in the bottom corners. No button.",
  "type": "Three voices. A neutral grotesque at 400 (61% of characters) for headings and 16px body at 1.2 leading; an italic high-contrast serif (19%) that always takes the closing clause of a headline; a monospace (19%) for 13px uppercase labels, the process equation and price lines. Fixed steps of 118px (8.2vw), 80, 60, 52 and 32px, no clamp(), nothing bold, leading 1.0 for the sans and 0.9 for the italic. The house rules ban the italic accent clause and the monospace: one face per headline, labels in the text face.",
  "colour": "#cf1830 #ffffff #1a1a1a #6db1f0 #f8f4f4 — One ink: red for 63% of all text (5.5:1 on white) and for a few full grounds (preloader, process columns, footer, one price card) on a white page. A near-black band for the reel, and one sky blue saved for the pricing scene, where the site floods it in as a rising glow; the house version cuts to a flat sky field.",
  "imagery": "Staged mockup photographs of the studio's sites on real devices in real scenes (a monitor in a hedge, a tablet in robot arms, a phone on a desk) in soft daylight, square corners; a small founders photo; a 38s looping reel of case-study screens; white line drawing for the process. Only the price tickets get rounded corners and soft shadows.",
  "layout": "20px margins, and the page is built on its centre line: the nav, the hero headline, the founders photo and the counter-statements all start at x=720 while the left half holds small metadata or the opposite statement. Sections butt against each other with no conventional padding; runways of about 3448px (process), 2288px (work) and 7080px (pricing) carry the pinned scenes, so 450 words fill about 24 screens.",
  "sections": [
   {
    "role": "intro",
    "description": "Split on the centre line: a 60px four-line statement from x=20 in the left half, and a small founders photograph 340x165 dropped at x=720 beside it."
   },
   {
    "role": "how-it-works",
    "description": "Pinned for about 4 viewports on a 1400x900 stage: four red columns about 340px wide with 12px gaps rise from the bottom as a stepped bar chart until all reach about 720px. One white drawing runs across all four: a dashed guide at about 30% of the height, a wavy road below it that flattens column by column, and an outline shape that rolls along the guide and turns from square to circle. Each column ends in a 20px title and a three-line description in white."
   },
   {
    "role": "work",
    "description": "A sticky split: a two-line 118px section title at the top left and a three-row project index at the bottom left (32px italic names, the active row in full red, the others faded), facing a staged device photograph that takes 60-65% of the width and the full height, bleeding off the right edge and wiping in with a clip-path for each project."
   },
   {
    "role": "pricing",
    "description": "A sky-blue field rises from the bottom until it floods the screen; an 80px centred white headline blurs its upright lines while the closing line stays sharp, and three ticket cards fly up tilted in 3D perspective, two white receipts with a perforated edge and a barcode and one red card."
   }
  ],
  "steal": [
   "Print with one ink: every word in a single saturated colour on a white ground, with a second hue kept for one late scene so it lands as an event, not a theme.",
   "Tell a process with one drawing that crosses all the step blocks (a shape turning from square to circle while the road under it flattens) inside a pinned stage of 3-4 viewports, and keep the blocks as plain colour with a short title and three lines of copy.",
   "Turn pricing into objects you could tear off and keep: ticket cards with a perforated edge and a drawn barcode, tilted 5-15 degrees in perspective. Under the house rules they carry no resting shadow and the price is set in the text face, not monospace."
  ],
  "media": "Media covers about 35% of the first screen: the full-width wordmark across the top and a video card peeking from the fold, which grows into a sticky full-screen dark reel. Later pictures are a small photograph on the centre line, staged device photographs filling 60-65% of the width in a sticky split, and a canvas stage of rising red columns; one 38s looping video with no poster.",
  "motion": "A 3.5s red preloader in which scissors travel along a dotted cut line, the wordmark already in its final place. Under Lenis, lines blur and rise in at 'top 85%' over 0.52-0.64s power1.out with a 0.12s stagger, the process shape morphs over 1s power2.inOut, the work pin scrubs at 0.8 with 0.9s power2.inOut clip-path wipes and inactive rows at 0.28 opacity, and the pricing runway runs about 7000px with no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-belgrade-arbor",
  "name": "Belgrade Arbor",
  "url": "https://belgradearbor.rs/en",
  "source": "Awwwards Site of the Day",
  "kind": "real-estate",
  "score": 7.5,
  "idea": "A residential and office complex whose facade branches like a tree canopy, and every device on the site follows from that one image: photographs cut into rounded branch-like shards, forest-green and vanilla grounds, bronze titles and one sprout-lime accent.",
  "mood": [
   "calm",
   "luxurious",
   "warm",
   "editorial",
   "cinematic"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "Built as a full-bleed 1440x900 video scrubbed by scroll under a fixed WebGL canvas, with no poster; in the capture neither painted, so the desktop first screen stayed plain vanilla (#fdfbef) for the whole 4.5s with only a centred dark pill nav about 640x58 at y≈24 (menu left, a small gold tree mark centre, an outlined enquiry pill right). On the phone the fold is a grey pencil drawing of the branch-columned facade filling the screen and fading to white at the bottom, where a 66px name is lost in the wash. The real message, that the facade follows a tree canopy, first appears one screen down as a six-line 56px serif paragraph.",
  "type": "Two families. A light old-style editorial serif (300 roman and italic, 400) carries every statement and every list at 56px (3.9vw), leading 1.1, tracking +0.02em; uppercase chapter titles run at about 10.5vw and 13vw with leading near 0.9, and one letter-spaced word reaches about 17vw. Work Sans 400/500 does body at 16px, small paragraphs at 14px, and the tracked uppercase labels and buttons. Active list items turn italic.",
  "colour": "#fdfbef #2e3a26 #a68150 #ccbf99 #fff4d6 #e7fd55 #314759 — Vanilla page with pine-green text and dark grounds; bronze for serif titles on light, sand for caps on dark, cream for text on green. An acid lime covers about 2% of the page (labels, the active tab, links), and one late chapter turns slate blue. The pinned chapter sits on a moss-green gradient, which the house version makes a flat moss field.",
  "imagery": "Warm, soft architectural renders and photographs (sunlit marble, linen, a stair with a tree, dining and lounge interiors) masked into rounded irregular polygons that echo the canopy, and full-bleed macros of folded cream cloth and teal woven upholstery used as grounds for titles. A line-drawn isometric street map with bronze pins, an aerial render on a small rounded card, and a portrait clip of a man crossing a marble lobby.",
  "layout": "64px side gutters. Every section is exactly one viewport tall and the chapters meet edge to edge, each marked by a change of ground (vanilla, moss, full-bleed photograph, vanilla, slate) rather than padding. Most screens are half splits, text 64-690 against media on the right, then mirrored. A 9-viewport sticky stage opens the page, and a floating pill nav sits over the top of each section, where it collides with labels and body text.",
  "sections": [
   {
    "role": "about",
    "description": "Pinned for 8100px on moss green. Left column at x=64, about 625px wide: a small lime label, a 56px light serif paragraph of five or six lines, and an outlined pill to explore the building in 3D. Right half: two rounded shard-shaped photo masks, a large one about 410x550 and a small one about 225x285 overlapping its lower-left corner and set about 60px lower; the pictures crossfade inside the same shapes. The next paragraph swaps sides. A 280px progress bar with a counter sits bottom-left."
   },
   {
    "role": "intro",
    "description": "Same green ground: a two-line uppercase serif headline at about 10.5vw running almost margin to margin, then a 14px paragraph about 320px wide offset to x≈830 below it, and an underlined lime link."
   },
   {
    "role": "list",
    "description": "Split. Left, x=64-610: six nearby places stacked as 56px light bronze serif lines about 30px apart. Right 60%: a line-drawn isometric street map with bronze pins and the building as a small gold block with a flag."
   },
   {
    "role": "gallery",
    "description": "An opener of folded cream cloth, full-bleed below a 176px vanilla strip, with one bronze uppercase serif word at about 13vw docked bottom-left 150px above the fold. The next screen splits 50/50: unit types as 56px pine serif links on an 80px pitch, the active one in italic, facing a slider of eleven portrait interior renders with round arrows at mid-height."
   }
  ],
  "steal": [
   "Take one shape from the subject's own form and use it as the picture mask throughout: here canopy-like rounded polygons, a large and a small one overlapping opposite the text column, swapping sides with each paragraph.",
   "Make lists the headlines: places, unit types and wings set as 56px light serif lines on an 80px pitch, the active one in the accent colour, each list facing a picture, a map or a slider in the other half.",
   "Give every section exactly one viewport and change the ground colour or the full-bleed picture at each, so the scroll reads as chapters without padding bands; open a chapter with a full-bleed close-up of a material and one uppercase word at about 13vw docked bottom-left, coloured from a tone in that material."
  ],
  "media": "Pictures carry most screens: the pinned chapter pairs two shard-masked photographs opposite the text, chapter openers are full-bleed material close-ups and looping footage, and later chapters split 50/50 between a serif list and a map, a portrait slider or a portrait clip. Six muted videos, none autoplaying; the 16s hero clip has no poster and never painted on desktop.",
  "motion": "Lenis drives a 9-viewport sticky stage where the ground turns from vanilla to moss, serif paragraphs blur and rise in word by word (939 split characters) and photographs crossfade inside the shards; caps titles sharpen character by character, and one giant word widens its letter spacing with the scroll. The only observed CSS transition is opacity 0.3s cubic-bezier(0.4,0,0.2,1); the rest is script-driven (.65s the commonest stylesheet duration), and the page took 12.2s to load.",
  "panel": "2026-10"
 },
 {
  "id": "aww-nick-ho",
  "name": "Nick Ho",
  "url": "https://nickho-motorsports.nl/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.5,
  "idea": "A young racing driver's sponsor pitch built from the paddock's own objects: the car number as the hero, the helmet as the sponsor wall, the season calendar as a track the car drives down, a gallery dial that reads like a rev counter and a chequered-flag hand-off, all in black, white and greyscale photography with one signal yellow for what is live.",
  "mood": [
   "bold",
   "energetic",
   "graphic",
   "confident",
   "technical"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A full-bleed greyscale photograph of the driver in his helmet beside the car fills the screen as a WebGL depth-map canvas, with a 288px dark scrim at the bottom. Dead centre, the car number in white condensed figures at about 216px (15vw) dominates. Three stacked stats (figure plus 14px label) at the left, a right-aligned column of short facts at the right edge; the name as the h1 bottom-left in condensed caps at only 50px (3.5vw) over a three-line 14px intro, and the next race bottom-right. No visible nav or action: only a 24px yellow square menu button top-right and a small monogram top-left.",
  "type": "An Anton-style condensed display grotesk, uppercase, 400-600, tracking 0, leading 1.0-1.1, for every heading, figure, button label and event name: one heading size of 50px (3.5vw), event names at about 26px, the hero number at 15vw. System Helvetica 400/700 for body at 13-14px. The house version keeps the condensed face and the single heading size and raises body to 16px.",
  "colour": "#000000 #ffffff #fed60a #333333 #f0f0f0 — Black (43% of grounds) and white (53%) alternating every one or two screens with hard cuts; #333 for heading text on white; one signal yellow on about 8% of grounds and 3% of text, used only for state: the menu button, buttons, the active calendar row, two highlighted phrases and the gauge needle.",
  "imagery": "Motorsport photography of the driver, car, track and paddock, all filtered to greyscale and given colour back only when active or hovered; cut-out pictures of the helmet and a top-down car used as objects on flat ground; a 22s muted on-track clip. Square corners almost everywhere; ratios of 5:4, 0.83 portrait, 4:3, 1:1 and 16:10 by section.",
  "layout": "80px side margins on every text section and a 7-column grid of about 206px, drawn as faint vertical guides across the hero and the white sections (the house version keeps the grid and drops the guides). Sticky runs hold the helmet wall, the about chapters and the calendar; a carousel bleeds off the right edge on purpose. Breathing room comes from whole-screen colour fields rather than padding, though about 250px of white after the statement and a 1712px mostly empty logo run are real holes.",
  "sections": [
   {
    "role": "proof",
    "description": "A cut-out photograph of the race helmet about 380px wide held sticky in the centre and turning to a new angle between steps, while monochrome partner logos stream past in four staggered columns at different speeds; a small yellow partner button arrives under the helmet at the end."
   },
   {
    "role": "about",
    "description": "Sticky on black in three zones: the chapter title at x=80 in 50px condensed caps, a vertical strip of 302x362 portrait photographs at x=515 spaced every 404px (the active one in colour, its neighbours greyscale and peeking at the edges), and a 410px paragraph at the right; five chapters over about 2500px, with a chapter count and a yellow skip button."
   },
   {
    "role": "list",
    "description": "The season calendar: full-width rows about 83px tall on black, the event name in 26px condensed caps, a 14px series line and the date right-aligned. A top-down cut-out of the car (320x573) parks between the words of the heading, then drives down the centre of the list as you scroll; the current event's row turns yellow."
   },
   {
    "role": "gallery",
    "description": "A dial carousel: square photographs on the arc of a 1756px circle, the active one upright and in colour at the top centre, the others greyscale and turned along the curve, over a tick gauge with a yellow needle like a rev counter."
   }
  ],
  "steal": [
   "Turn the subject's own objects into navigation: a vehicle sliding down a schedule as the you-are-here marker, a carousel shaped like a gauge, flag tiles as the one soft transition. Each carries information as well as character.",
   "Filter every photograph to greyscale and give colour back only to the active or hovered item (filter about 0.4s), so 28 mixed photographs read as one set and colour itself means 'current'.",
   "Use one signal colour for state only, about 8% of grounds and 3% of text, on a black-and-white page that alternates every one or two screens with hard cuts, and let exactly one glyph that belongs to the subject (here the car number) jump to 15vw against a single 50px heading size, with the name as the h1 beside it."
  ],
  "media": "A greyscale depth-map photograph covers 100% of the first screen. Later pictures are a sticky cut-out helmet among streaming logos, a vertical portrait strip, a carousel bleeding off the right edge, a cut-out car that travels down the calendar, an inset clip that grows to full bleed, and a dial of square photographs: 28 images, one 22s muted clip, one WebGL canvas.",
  "motion": "There is no entrance (the page took 12.3s to load), and Lenis runs 97 ScrollTriggers with no pins: CSS sticky holds the helmet, the chapters and the calendar, 19 yPercent scrubs move the logo columns and stretched background words, and the video frame grows from an inset with about 54px margins to full bleed by scrubbing width, height and corner radius. Photographs regain colour over 0.4s, menu items slide over 0.5s cubic-bezier(.7,0,.3,1), button labels roll per character at a 0.018s stagger, and content blanks out mid-scroll under the smooth-scroll lag.",
  "panel": "2026-10"
 },
 {
  "id": "aww-odyssee",
  "name": "Odyssée",
  "url": "https://www.odysseeclinic.com.au/",
  "source": "Awwwards Site of the Day",
  "kind": "health",
  "score": 7.5,
  "idea": "A medical-aesthetics clinic presented like a skincare editorial: soft-lit close-ups of skin and slow muted loops carry the page, a thin navy serif voice argues for method over myth, and the page ends on a rolling pearl engraved with the wordmark, one polished object that stands for the result.",
  "mood": [
   "calm",
   "luxurious",
   "soft",
   "editorial",
   "quiet"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A full-bleed muted video portrait (a woman resting her chin on her hands in pale grey-blue studio light) fills the screen, followed at once by a second full-bleed close-up of lips and jaw. No headline: a single 42px strip crosses the exact vertical middle in white, the serif wordmark at x=20, an 18px serif tagline about medical aesthetics at column 3 (x≈255), and four tiny tracked caps links on the right ending in the booking link, which all but vanishes against the pale picture. The strip holds while both pictures pass under it, then becomes a sticky 42px header. The entrance is a flat warm grey veil carrying only the wordmark and tagline, lifting over about 2.5s.",
  "type": "Two families. psTimes, a condensed Times-style serif at weight 350, for statements at 48px (3.3vw) and 32px and for titles and the tagline at 18px, sentence case, leading about 1.0-1.05, every statement with a first-line indent of one column. Basel Grotesk at 430 for 14px body and 12px lightly tracked uppercase labels and links; the house version sets those in sentence case at 16px. Fixed px sizes per breakpoint, no clamp().",
  "colour": "#fffcf8 #1e305e #ffffff #28292a — A warm cream ground behind nearly everything, one deep navy for 88% of the text, the progress rule and a duotone on secondary pictures, white only over photographs. A single small red dot on a live clock is the only accent; the photographs supply skin tones, pale grey-blue studio grounds and a champagne pearl.",
  "imagery": "Soft, even studio light on pale grey-blue backgrounds, natural skin with no retouching gloss, tight crops (lips, eye, nostril, knees) and one face turned 90 degrees for tension; slow, nearly still muted loops of skin, serum drops and bubbles used as living photographs; a navy duotone on two link cards. Square corners and cover crops everywhere.",
  "layout": "20px outer margins on a 12-column grid (columns about 117px). Text has two anchors: column 3 (x≈255) for statements, body and labels, and the exact centre line for right-half paragraphs and cards. Media is always full-bleed, an exact half (720/720) or flush tiles with no gutter. Cream gaps of 232-552px separate sections, roughly one idea per screen; the closing contacts huddle in the left half.",
  "sections": [
   {
    "role": "intro",
    "description": "A 48px light serif statement on three lines from column 3 to the right margin with a one-column first-line indent, a small 108x161 double-portrait thumbnail docked at the left margin, then 14px body in a narrow column and a booking link."
   },
   {
    "role": "features",
    "description": "Pinned for four steps: a counter, a label and a 1400px rule whose navy fill grows a quarter per step, over four 350x263 muted 5s video tiles flush edge to edge; the active tile at full strength, the other three washed to about 10%, each with an 18px serif title beneath."
   },
   {
    "role": "showcase",
    "description": "Split on the centre line: a tall 672x1233 muted skin close-up holds the right half while scrolling, a small 233x291 clip of a serum drop sits just left of centre with a short caption, and a three-word 48px serif headline arrives at x=20 at mid-height."
   },
   {
    "role": "footer",
    "description": "Contact rows, an opening-hours table where only today is in full navy, and a live local clock with a pulsing dot; then the page lifts away to reveal a fixed full-bleed 9s loop of a pearl rolling on a pale grey surface with the wordmark engraved round it."
   }
  ],
  "steal": [
   "Make video behave like photographs: muted, looping, with posters, 5-29s of nearly still subjects started by script when they come into view, square corners and cover crops everywhere.",
   "Give every serif statement a first-line indent of exactly one grid column and anchor the block at column 3 with 20px outer margins, so the indent reads as a deliberate grid step; use the exact centre line as the second anchor for half-width pictures and right-half paragraphs.",
   "End on real local detail (an hours table that marks today, a live local clock), then reveal a fixed full-bleed brand object as the last screen. The site's tiny white caps nav over pale skin all but disappears; the house version is a plain bar with the booking action as a real button."
  ],
  "media": "Video is the main medium: a 27s portrait loop and a second close-up fill the first screen, then four 5s tiles flush edge to edge, a 720/720 diptych, a tall half-width clip held while scrolling, a full-bleed band that fades up from cream, two navy duotone cards, and a fixed pearl loop revealed under the footer. Nine images and eight muted, looping videos with posters, started by script; no canvas.",
  "motion": "No preloader: a warm grey veil lifts off the hero video over about 2.5-3s with the type already in place. Under Lenis the features section pins for four steps, cross-fading tiles over 0.3s cubic-bezier(0.16,1,0.3,1) as the navy rule grows, images fade over 0.5s cubic-bezier(0,0,0.2,1), underlines grow by background-size over .4s expo-out and the page lifts off a fixed bottom layer to reveal the pearl, but content is opacity-gated, so mid-scroll frames show empty cream, and there is no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-usavionix",
  "name": "USAvionix",
  "url": "https://www.usavionix.com/",
  "source": "Awwwards Site of the Day",
  "kind": "physical-product",
  "score": 7.5,
  "idea": "A maker of autonomous jet drones explains its product as a single mission played out on scroll: one pinned WebGL camera flies from a lone drone over forested mountains to a swarm, to detection overlays and then to a dark tactical map, while a console readout runs at the edges and three status colours (observed, threat, secured) carry the plot.",
  "mood": [
   "technical",
   "cinematic",
   "dark",
   "precise",
   "industrial"
  ],
  "archetype": "immersive-webgl",
  "hero": "After a preloader that shows only the dimmed drone silhouette for over 4.5s, a full-bleed real-time scene: photoreal forested mountains seen from above with a matte black flying wing dead centre, wingspan about 560px (39% of the width). A three-line claim at 80px (5.6vw), Geist 600, -0.04em, leading 0.95, sits top-left at x=32, y 88-300; a three-line 29px lead is docked bottom-right (x 874-1384) over a translucent grey pill about 248x40 that prompts the scroll. A grey contact pill and a menu button are fixed top-right, and a one-word chapter code with sliding tick rails sits top-centre. The middle 60% belongs to the scene.",
  "type": "Two faces from one superfamily. Geist (41% of characters) at 600 for heads: 80px in the hero (5.6vw, leading 0.95, -0.04em), 76px chapter titles, 50px post-story heads; 29px leads at 500 and 17-19px body. Geist Mono (59%) at 11-12px uppercase, +0.06em, for the telemetry. Sentence case except the mono. The house version keeps Geist alone and sets the readout in sentence case at 16px with tabular figures.",
  "colour": "#000000 #0f0f0f #ffffff #7aebff #ff6666 #ffcb47 — A black page and near-black scene ground with white text, and three status accents with one job each: amber for observed and the detection boxes, coral for threat, cyan for secured, each under 5% of the text and never on chrome. The terrain brings olive and slate; the closing cards bring warm orange.",
  "imagery": "Real-time photoreal terrain in a cool, desaturated olive and slate grade with volumetric haze; a matte black flying-wing drone; flat 1px overlay props (bounding boxes with confidence labels, ID tags joined by dotted lines, a sensor cone, curved flight trails, ripple rings); a satellite-style photograph of a village; then warm sunset and dusk renders of a wildfire, a desert ridge and a substation as the payoff.",
  "layout": "One full-bleed sticky canvas carries 14 chapters over about 60,000px of runway (about 4500px each), with text docked in the corners at 32px margins: title top-left, lead bottom-left or bottom-right at most about 500px wide, telemetry bottom-right, chapter code top-centre. After the story the page returns to normal flow on black for an expanding three-card row and a split with a wireframe globe; margins drift from 32 to 40 to 48px. 72 screens for 435 words.",
  "sections": [
   {
    "role": "features",
    "description": "The camera pulls back to three drones in a loose triangle, each with a small white ID tag, the tags joined by dotted lines; a 76px two-line title top-left and, bottom-right from x=732, a 29px lead over a four-row spec table with a label column and lighter values."
   },
   {
    "role": "how-it-works",
    "description": "Detection: back over the terrain, about 25 small yellow bounding boxes (40-60px) with label chips naming an object class and a confidence percentage, the drone small at the centre, and a four-line readout bottom-right with coordinates, altitude, speed and counts."
   },
   {
    "role": "other",
    "description": "A tactical map: a #0f0f0f ground with a faint perspective grid, an irregular outline of a land area covering about 40% of the width, a tag on its edge and three hotspots with 6s ripple rings. Over three chapters the hotspots and tag change colour (amber for survey, coral for threat, cyan for services on site) as grey drone glyphs fly in on curved trails."
   },
   {
    "role": "showcase",
    "description": "After the dark story, three photographic renders in a row from x=48 to 1392 with 24px gaps: one open card 660px wide and two closed at 318px, all about 628px tall with about 10px corners, the open one carrying a 29px title and a three-line 15px description bottom-left."
   }
  ],
  "steal": [
   "Tell a product's capability as one pinned scene: about 4500px of scroll per chapter, the camera moving continuously and the text still, changing only by opacity (out over 250ms, in over 400ms after a 200ms delay).",
   "Give colour a job: three status accents, each tied to one state of the story and used only on tags, hotspots and single status words, never on chrome, each under 5% of the text, on black with white type.",
   "After a cold, dark story, pay off with warm photographs in normal flow: an expanding row of three, one open at about 660px and two closed at about 318px. The site speaks in monospace telemetry over hairline grids; the house version sets the readout in the text face with tabular figures and lets the scene carry the structure."
  ],
  "media": "One sticky full-bleed WebGL scene covers 100% of every story screen, with an SVG overlay drawing the boxes, tags, trails and ripple rings over it; after the story come three photographic mission cards and a wireframe globe bleeding off the right and bottom edges. Two canvases, four images, no video.",
  "motion": "A preloader of 4.5s or more shows only the dimmed model, then Lenis drives one pinned canvas through about 60,000px: the drone turns from banked to top-down, the camera pulls back to the formation, rises into the mesh, dives to a sensor view and cuts to the map, where zone colours change by chapter. Text moves by opacity only through 346 WAAPI fades (250ms ease-out, 400ms ease-in-out after 200ms), HUD marks transform over 0.25s cubic-bezier(0.4,0,0.2,1), 64 ripple rings loop on 6s, and there is no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-maria-vasilyeva-portfolio",
  "name": "Maria Vasilyeva",
  "url": "https://www.mariavasilyeva.com/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7.4,
  "idea": "A designer's work treated as a playlist: every project is a track on one horizontal timeline, the wheel moves a playhead along it, and the track under the playhead blooms out of a thin strip of thumbnails into a scattered collage, with a hand-written layer of margin notes on top that can be switched off like the sound.",
  "mood": [
   "playful",
   "editorial",
   "personal",
   "precise",
   "experimental"
  ],
  "archetype": "collage-scatter",
  "hero": "One fixed 1440x900 off-white stage. Two near-black rails about 26px wide, inset 10px from the left and right edges, carry all the chrome as small vertical caps: name and role on the left reading upward, the menu and on/off toggles for sound and notes on the right. Seven faint lines every 112px divide the field into eight tracks; along the middle one runs a 32px strip of miniature thumbnails across the full width, the whole body of work in sequence, crossed by a thin vertical playhead. Around the playhead the current project's 10-20 images leave the strip and settle into an overlapping collage about 450-770px wide, with a small uppercase serif title and superscript year pinned to its upper-left corner. A hand-written scroll cue sits in a drawn oval at top centre (about 2.5vw), and a bottom row at y=868 gives the project number, name and link. No headline.",
  "type": "Three families. A high-contrast display serif (63% of characters) for project titles, uppercase at 29px (2vw), -0.02em, leading 1, with the year as a small superscript. A typewriter-style face (31%) for every small label at 13-15px. A loose hand-written script (6%) is the largest type on the page at 36.7px (2.5vw), used only for two notes. The house version drops the typewriter face for the text face and sets the label row in sentence case.",
  "colour": "#f9f9f9 #131313 #e9e9e9 #626262 — Strictly neutral: off-white ground on about 94% of the screen, near-black for the rails, the loader and text, a pale grey for the track lines, a mid grey for secondary text. Every hue arrives inside the project images: lavender product screens, deep greens, warm wood browns.",
  "imagery": "Case-study images of products and screens in mixed ratios (16:10 screens, portrait product shots), square corners, no shadows or filters, each keeping its own colour; pieces overlap freely and crop each other. Hand-drawn strokes, an oval round the scroll cue and a curling arrow to the project link, are the only illustration.",
  "layout": "No document scroll: a single stage whose content changes in place. The working field runs between the rails from x=48 to x=1390; the collage covers 30-50% of the width at a time and moves with the playhead, so 50-70% of the field is blank off-white, closed by the strip and the rails. A bottom row on a 4 | 1fr | 4 column grid. On the phone the rails become black bars at the top and bottom and the collage stacks above and below the strip.",
  "sections": [
   {
    "role": "intro",
    "description": "The loader: a near-black screen with the same faint tracks, a tiny percentage counter bottom centre, then groups of five short uppercase serif lines of music-themed loading phrases that slide in from the right over about 3.5s, each dragging a trail of its first letter repeated, before a 1.2s curtain reveals the stage."
   },
   {
    "role": "work",
    "description": "The strip as the index: a 32px band of 30-60px thumbnails at the vertical centre, every project's images in sequence across the full width, with the playhead marking the current position; the bottom row repeats the same three facts for every project, number left, name centred, link right."
   },
   {
    "role": "other",
    "description": "The notes layer: two hand-written notes at about 2.5vw drawn on with stroke-dashoffset, the scroll instruction in an oval at top centre and a note with a curling arrow pointing at the project link, both switchable from the right rail."
   }
  ],
  "steal": [
   "Take the whole interface from one metaphor of the subject, here a playlist: a timeline strip, a playhead, a sound toggle and loader wording that all speak it, so nothing on the screen is filler.",
   "Show the entire body of work at once as a thin thumbnail strip (about 3.5% of the height) and open only the current item into a large composition, so the index and the detail share one screen. The site rules the field with seven hairlines; the house version keeps the bands as space and lets the strip carry the structure.",
   "Use a hand-written layer at about 2.5vw, drawn on with stroke-dashoffset, for at most two instructions (where to scroll, where to click), give it an off switch, and count it as one of the page's two faces."
  ],
  "media": "One fixed WebGL canvas draws every image: a full-width 32px thumbnail strip plus one project's collage around the playhead, about 25-35% of the pixels in all, the rest off-white. No img or video elements; about 60-80 project images in the strip, 10-20 blooming per project.",
  "motion": "The loader runs past 4.5s: a counter alone for the first second, then serif lines slide in over 3.5s on cubic-bezier(0.16,1,0.36,1) and a 1.2s curtain on (0.7,0.15,0.25,1) clears it. Each wheel step slides the playhead and pulls the next project out of the strip into a collage while the last collapses back, round an endless loop of seven; nearly everything else runs on cubic-bezier(.16,1,.3,1), 1.4s for letter-spacing and transforms and 0.4s for fades, with no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-michael-gatt",
  "name": "Michael Gatt",
  "url": "https://michaelgatt.com/",
  "source": "Awwwards Site of the Day",
  "kind": "music",
  "score": 7.4,
  "idea": "A film composer shows his credits as a place you travel through: one WebGL camera flies down a corridor lined with stills from the shows and games he scored, then stops in a loose cloud of floating frames that is also the menu.",
  "mood": [
   "cinematic",
   "nocturnal",
   "quiet",
   "spatial",
   "polished"
  ],
  "archetype": "immersive-webgl",
  "hero": "A black sound gate first: one seven-word sentence stepped diagonally in tiny tracked caps (about 9px) asks for sound, with an opt-out link near the bottom edge. Then a fixed full-bleed canvas fades up from near black into a tunnel lined with about 35 dimmed stills from film, cartoons and games on its walls, ceiling and floor, receding to a vanishing point at the centre with the far planes lost in fog. At that point sits a centred four-line lockup about 450px wide: key words in 18px caps tracked 0.35em in white, joining words in about 10px grey small caps on the same baseline, saying this is a composer's world of film, TV and game music. No visible action until the wheel moves; a sound toggle sits bottom-right.",
  "type": "One family only: Zapf Humanist Demi, an Optima-like flared sans, in one weight, all caps, tracked 0.35em, leading 1.25. Two sizes and two tones make the hierarchy: 18px (1.2vw) white key words and 10-12px grey connectors and role lines. The largest word on the page is 1.2vw; the house version keeps the one flared face but sets the name at display size and nothing under 16px, in sentence case.",
  "colour": "#000000 #ffffff #969da0 — Black ground on about 90% of the pixels outside the stills, white for key words (77% of the text), a cool grey for connectors and secondary words. All other colour comes from the stills, dimmed to about half brightness.",
  "imagery": "Stills from the films, series, cartoons and games he scored, mostly landscape 16:9 to 4:3 with a few near-square, all given the same treatment: dimmed to about 50% against black, square corners, no borders or shadows, a slight Y rotation and perspective so they hang in space, the far planes fading into fog.",
  "layout": "One fixed full-bleed canvas under a thin HTML layer. Every word sits on the centre axis at x=720 in a clear vertical channel about 220px wide, with pictures pushed to the sides and corners at mixed depths. Wheel input moves the camera; scrollY stays 0. The end state is the hub: the wordmark about 60px from the top, an index toggle at mid-height, a two-line sentence nav about 40px above the bottom.",
  "sections": [
   {
    "role": "work",
    "description": "After about two wheel steps the planes pull off the walls into a loose cloud of about twelve frames, 100-250px wide at mixed depths and turned up to about 10 degrees, round a clear centre column; two large frames bleed off the top-right and bottom-right corners. The wordmark with a small role line, an index toggle and the nav fade in on the axis."
   },
   {
    "role": "footer",
    "description": "The navigation written as one sentence, about 300px wide over two lines: three destination words in 18px tracked caps in white, the joining words in about 10px grey small caps on the same baseline, the last destination alone on the second line with an underline as the primary action."
   }
  ],
  "steal": [
   "Over a full-screen picture stage, put every word on one centre axis and keep a clear channel about 15% of the viewport wide free of pictures; push the pictures to the sides and corners at mixed depths and let one or two crop off the corners so the scene reads as bigger than the screen.",
   "Keep a camera flight short, about two steps from the welcome state to a settled end state, and make that end state the menu. The site drives it from the wheel with no page scroll; here the page scrolls natively and the flight is tied to a sticky stage that ends.",
   "Dim every picture in a dark scene to about 50-60% brightness and fade the far ones into the ground, so white type stays readable with no scrim. The site sets every word at 8-18px in tracked caps; under the house rules the title is large and nothing is under 16px."
  ],
  "media": "One fixed WebGL canvas covers 100% of the screen and holds every picture as a textured plane: about 35 lining a tunnel to a central vanishing point, then about 12 floating round a clear text channel. No img or video elements in the DOM.",
  "motion": "After the sound gate the scene fades up from about 10% brightness over 1-2s while the lockup arrives letter by letter; wheel steps then dolly the camera down the tunnel and pull the planes out into the cloud, ending after about two steps. Links fade from grey to white over 0.5s cubic-bezier(0.4,0,0.2,1) and widen their tracking over 0.4s; no GSAP or Lenis, and no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-miu-miu-a-house-that-we-shaped",
  "name": "Miu Miu A House That We Shaped",
  "url": "https://immersivebags.miumiu.com/",
  "source": "Awwwards Site of the Day",
  "kind": "fashion",
  "score": 7.4,
  "idea": "A bag campaign set inside one furnished room, a period salon with hand-painted vermilion and emerald doors rendered in real time: you find the products by touching objects in the room rather than by scrolling, so the house is the interface and the brand mood comes from the paint on the set.",
  "mood": [
   "luxurious",
   "cinematic",
   "crafted",
   "quiet",
   "warm"
  ],
  "archetype": "immersive-webgl",
  "hero": "An entry gate on a flat deep navy field: a centred white block about 500px wide, a 26px bold uppercase kicker and three 58px (≈4vw) bold uppercase title lines at a 108px pitch, each force-justified so the words hug both edges and the last word is letter-spaced across the full measure; then a two-line 14px deck, a small sound notice at the top and a light Enter button about 100x48 at the bottom centre, a spinner until 1.2s. After Enter the room fills the screen: the camera opens tight on a hand-painted vermilion door and pulls back over a few seconds to the wide set while yellow subtitle lines cross-fade; then one pulsing hotspot on a notebook and a 273x100 paper-beige card at the bottom centre name the first task. No header, logo or menu.",
  "type": "Work Sans alone at 400 and 700. The gate title in bold uppercase at about 58px, force-justified; after entry the largest text is 16px (1.1vw) regular, leading 1.2, black on paper beige in the task card, and subtitles are about 14px in yellow. Type is fluid from a root unit of about 10px at 1440. The gate title runs to four lines; under the house rules it is two.",
  "colour": "#0c0f60 #ffffff #948c89 #7c6958 #776453 #fcf5e6 #ffe100 — Gate: navy at 100% with white type. Room: a greige wall (about 45%), a taupe dado (31%) and a mushroom carpet (24%), with two painted doors, vermilion (about 8%) and emerald (about 5%), carrying all the brand colour and a mustard lamp shade as a small accent. The interface is one warm paper beige with black text.",
  "imagery": "A photoreal but soft real-time set with a matte, slightly underexposed, low-contrast filmic grade: doors in rough hand-brushed paint with the frame showing through the strokes, and a red paint stroke along the dado rail like unfinished work. The canvas has no corners or frame. Product pictures arrive later as a scattered collage of rotated portrait figures (from the stylesheet, not captured).",
  "layout": "No document flow: exactly one 1440x900 viewport, scrollY 0 on all twelve wheel steps. The gate centres a 500px block with about 470px of navy either side. In the room the wall runs to y≈406, the dado to y≈686 and the carpet below; the hero door stands just left of centre and the second door is cut by the right edge. The interface is four docked pieces on under 3% of the frame.",
  "sections": [
   {
    "role": "intro",
    "description": "The intro film: the camera starts tight on the vermilion door, a lamp vignette at the left and an armchair at the right, and pulls back over a few seconds to the wide room while three short manifesto lines cross-fade as a 14px yellow subtitle about 52px above the bottom."
   },
   {
    "role": "showcase",
    "description": "The resting room as the interface: the vermilion door (about 266x600) at x≈590-856, a lamp and a table of stacked notebooks on the left, the armchair on the right, the emerald door in perspective on the side wall. One pulsing white hotspot about 36px with a 70px ring sits on the notebook, the task card names it, and a 44px sound toggle sits 20px from the bottom-right corner."
   },
   {
    "role": "gallery",
    "description": "The end page, known from the stylesheet only: five portrait figures of about 3:4 scattered with rotations from -47 to 9 degrees like photographs thrown on a table, with a fluid end title and lines that underline one after another."
   }
  ],
  "steal": [
   "Put the colour in the set, not the interface: keep about 90% of the frame in muted greige, taupe and mushroom, let two saturated accents on objects carry the brand mood, and keep the interface to one warm paper tone with black text.",
   "Open with a camera pull-back from tight on the hero object to the wide resting composition over a few seconds, and fade the first task in only when the camera settles (opacity 0.5s cubic-bezier(.23,1,.32,1)); place the hero object just off centre and crop a second one by the frame edge so the room continues past the screen.",
   "When the page is a scene, limit the interface to a few docked pieces covering under 3% of the frame: one subtitle line, one task card, one hotspot on the object to touch, one sound toggle. Under the house rules the first screen still names the product and offers a plain route to the collection."
  ],
  "media": "The gate is pure type on navy; after entry one fixed WebGL canvas renders the whole room at 100% of the viewport from the first frame, with no img or video elements in the captured state and the interface on under 3% of the frame. The intro is a camera move inside the scene, not a video.",
  "motion": "Twelve wheel steps leave the room unchanged apart from a sway of up to about 18px, while the camera pull-back plays on its own clock and then the hotspot ring pulses from scale 1 to 2.2 over 2s cubic-bezier(.215,.61,.355,1) as the task card fades in over 0.55-0.65s. Most moves use easeOutQuint (.23,1,.32,1, 37 uses) or expo-out (.16,1,.3,1) for 1.6s mask wipes, and the pulse, wiggle and jitter loops run with no reduced-motion rule after a 4.2s load.",
  "panel": "2026-10"
 },
 {
  "id": "aww-twks-1",
  "name": "twks",
  "url": "https://twks.ch/en",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.4,
  "idea": "A Geneva agency site set like a Swiss printed sheet: the fold is a black field with the navigation as one horizon line across the exact middle, broken by a single gold object from a client project that turns slowly; then an indented statement, the work on a tight 10px grid, and a fixed black footer where an animal drawn in tiny characters prowls.",
  "mood": [
   "restrained",
   "precise",
   "quiet",
   "minimal",
   "confident"
  ],
  "archetype": "product-object-centre",
  "hero": "Black 1440x900 with nothing but one photographed gold oval seal, about 250x180 (17% of the width), dead centre and turning slowly on a turntable loop, and one 20px lowercase white line at y=450 on a 6-column grid: the brand at x=10, four section links from x≈247, a three-word descriptor of the kind of agency from x≈953 and the contact link flush right. The line runs into the object and continues on the other side. No headline and no button; about 3-4% of the screen is lit and the black is the composition.",
  "type": "One family, GT Standard, a Swiss neo-grotesk at 400/500/600, in effectively two sizes: 52.8px (3.7vw) at 600, leading 1.0, -0.01em, for the statement only, and 20px (1.4vw) at 400, leading 1.2, +0.01em, for everything else. Hierarchy comes from a grey rather than more sizes; the ratio is about 2.6.",
  "colour": "#ffffff #000000 #8c8c8c — White ground (84%) and black for the fold and footer; text in black, with one grey for descriptors, links and inactive options (about 3.4:1 on white, below AA at 20px; the house version darkens it to about #6f6f6f). No accent: the client work supplies every hue.",
  "imagery": "Client work only: photographed objects and campaign images in acid yellow, pastel stickers, orange, gold on black. Three ratios (3:2, 3:4, 1:1), 0px radius, object-fit cover, no filters, and muted looping clips sized exactly like the image tiles. An animal drawn by script from tiny white characters in the footer.",
  "layout": "10px outer margins and 10px gutters on a 6-column grid of about 226px: 2-up tiles of 698px, 4-up tiles of 344px. The statement's first line is indented exactly one column so it starts under the nav's first link. Sections sit about 130-200px apart. The case grid pairs a 3:2 with a 3:4 tile per row, top-aligned, which leaves a 698x465 white hole under the shorter one. A fixed black footer is uncovered as the white page slides away.",
  "sections": [
   {
    "role": "intro",
    "description": "Four lines at 52.8px (3.7vw), weight 600, black on white, running nearly the full width with the first line indented one grid column (about 236px) so it lines up with the nav's first link; a small inline glyph stands in for one space."
   },
   {
    "role": "about",
    "description": "A small label in column 2 and an eight-line 20px paragraph in columns 5 and 6 (about 462px) with a 75px first-line indent, then two link rows, each a 20px word at the left and an arrow at the right."
   },
   {
    "role": "work",
    "description": "Four case tiles in two 698px columns with a 10px gutter, a checkerboard of 3:2 and 3:4 that swaps sides on the second row, one of them a muted autoplaying 3:4 video; under each, 8px below, a 20px client name in black over a 20px one-line descriptor in grey."
   },
   {
    "role": "footer",
    "description": "A fixed full-viewport black sheet uncovered as the white page slides up by its own height: a four-column information band in the top 40% (contact, an empty column, socials and language, address), and in the bottom 55% an animal about 350x150 built from tiny white characters that assembles from a scatter and walks slowly."
   }
  ],
  "steal": [
   "Let the navigation be the fold: one 20px line across the exact vertical centre of a dark screen, broken by a single real object about 17% of the width that turns slowly. Under the house rules the first screen also needs a clear h1, so set the name and what the agency does in two lines beside the object.",
   "Use one family and two sizes, about 20px for everything and one display size near 3.7vw, and build hierarchy from position and size rather than extra sizes or pale greys, keeping running text in the full ink; indent the statement's first line by exactly one grid column so it lines up with the nav. At that size the house rules want the statement as a two-line headline or a paragraph of 36px or less.",
   "Keep 10px margins and gutters with square corners so the work reads like a contact sheet, pair a 3:2 with a 3:4 tile per row and swap sides on the next, and caption each in two 20px lines (name, descriptor). Close the gap under the shorter tile with its caption or a quotation; the site leaves it white."
  ],
  "media": "The fold is a black field with one small turning object at the centre, about 3-4% of the screen lit; the work then sits in a 2-up checkerboard of 3:2 and 3:4 tiles and a 4-up strip of squares with one taller tile breaking the baseline, captions underneath. Seven images and three short muted loops sized exactly like the tiles; a glyph-drawn animal animates the footer.",
  "motion": "No preloader: the fold is complete at 400ms and only the object turns, face-on to edge-on over about 4s. Lenis and five ScrollTriggers sink and dim the hero on two scrubs and slide the white page away to uncover the fixed footer, labels rise with autoAlpha and y over 1.8s power4.out at a 0.1 stagger, arrows rotate over 0.5s power4.out, and the sticky nav's difference blend collides with busy pictures; there is no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-vectr",
  "name": "Vectr",
  "url": "https://vectrfl.com/",
  "source": "Awwwards Site of the Day",
  "kind": "ai-product",
  "score": 7.4,
  "idea": "An industrial staffing service tells its process as a flight over a miniature clay world: one fixed WebGL diorama of plants, warehouses, wind turbines and tiny workers in a single matte pale blue that matches the page ground, crossed by a glowing blue trail that runs from a headquarters building past a campus and a grid of work positions and ends at the brand mark itself.",
  "mood": [
   "calm",
   "technical",
   "clean",
   "soft",
   "precise"
  ],
  "archetype": "centred-statement-media-below",
  "hero": "On a pale steel-blue ground, a fixed full-viewport canvas in the same colour, its fog fading into the page so the scene has no edge: an isometric matte miniature industrial town (tower blocks, a warehouse, wind turbines, crates, tiny figures) fills the lower ~60%, cropped by the bottom and right edges. In the open fog above, a two-line 96px (6.7vw) headline, weight 500, -0.06em, leading 0.9, is centred and about 700px wide from y≈115, with a three-line 18px subline at y≈350 doing the real explaining. A transparent 80px nav: two small links at the left, the wordmark centred, a frosted apply pill and a near-black request pill at the right; an underlined scroll prompt at the bottom centre.",
  "type": "Roboto alone at 400 and 500: a 96px hero (6.7vw, -0.06em, leading 0.9), an 80px closing line, 64px section headlines (-0.04em), 36px footer cells, 24px step and FAQ titles, 18px body (the bulk of the characters), and 12-14px uppercase nav and button labels. All the typographic character comes from a custom extended geometric wordmark, used at about 90px in the nav and 1344px wide in the footer.",
  "colour": "#d0e1eb #fcfcfc #050419 #585765 #3932dc — Pale steel blue for the first 43% of the page (canvas and fog), then white, then near-black indigo for the closing call and the footer. Text is mostly a muted slate (about 4.6:1 on the blue, less over the model; the house rules want running text in the full ink). One electric indigo for the logo, the footer arrows and the light trail; a red beam is the only warm signal.",
  "imagery": "A monochrome clay render: every object matte pale blue-white with soft ambient-occlusion shadows and low contrast, colour kept for signals (a cyan-to-indigo light trail, a dot glow under the active area, a red incoming beam, the indigo mark). Black isometric pictograms at the camera's angle for the features, and one warm photograph of three hard-hatted workers on a gantry, with about 12px corners, that breaks the world.",
  "layout": "18px nav insets; content at 40 or 48px margins. The fixed canvas sits behind the first ~4700px, with a 900px sticky stage over 3.8 screens for four steps and a pinned feature row over 3.3 screens, then normal flow: a photo split (656x400 picture at x=40, text from x=830), a two-half FAQ, a dark closing block and a three-cell footer row at a 480px pitch. 12.1 screens for 326 words.",
  "sections": [
   {
    "role": "how-it-works",
    "description": "A 900px sticky stage where the camera stops at four vignettes: the headquarters building wearing the logo, taking in a red beam and sending out the blue trail; a hangar campus the trail sweeps through; a field of white square tiles with one raised and a figure on it; and finally the brand mark as a glowing indigo object in a halo of cyan dots. The step list is docked bottom-left at x=48 in a column about 600px wide: inactive steps as 14px rows, the active one with a 24px title and an 18px body."
   },
   {
    "role": "features",
    "description": "A white panel slides up over the canvas with a two-line 64px headline at x=40, and a row of four 350px cards fills in one per scroll step, each with a black isometric pictogram, a 20px title and a short 14px body."
   },
   {
    "role": "proof",
    "description": "Split: a warm photograph of three workers in hi-vis on a plant gantry, 656x400 (46% of the width), at the left margin, and from x=830 a three-line 64px headline, a two-line paragraph and a dark 48px pill, the group centred on the picture."
   },
   {
    "role": "cta",
    "description": "A near-black indigo block: an 80px two-line closing line at x=40 with a white pill under it, a full-width row of three 480x200 cells each with a 36px page name and an electric-blue arrow, then the extended wordmark in white across 93% of the width and a 12px legal row."
   }
  ],
  "steal": [
   "Set a WebGL scene's clear colour and fog to the exact page ground, render the whole world in one matte clay tone, and keep colour for two or three signals: one bright trail, one contrasting incoming beam, the brand colour on the mark.",
   "Tell an N-step process as N camera stops in one persistent scene, about 0.95 screens of scroll per step, the step list docked bottom-left and the focal object centre-right, and end the last stop on the brand mark so the journey has a destination. The site numbers its steps; the house version shows order by position and by the active step's size.",
   "Let one neutral grotesk do all the reading and give the personality to a custom extended wordmark, repeated across 93% of the width to close the footer. The site's four icon-topped feature cards drop back into a generic kit; the house version keeps the world going with a section blueprint instead."
  ],
  "media": "One fixed WebGL canvas covers 100% of the first screen, the clay town in the lower ~60% and fog in the ground colour above it, and stays behind the first ~4700px as camera stops for the steps; then one 656x400 photograph in a split, four 96px pictograms and a giant SVG wordmark. No video.",
  "motion": "A 2.5-4s CSS loader turns the mark from -60 degrees to 0 over 1.5s and draws two orbits over about 2s, then hero lines rise and fade over 1.5s cubic-bezier(.16,1,.3,1) at 0.1-0.5s staggers after the canvas fades in over 0.7s. Lenis moves the camera between four stops, swapping step copy over 0.5s on the same expo-out curve (44 uses in all) and opening the active body by grid-template-rows over 0.6s, while the pinned feature row adds one card per step; there is no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-lpas",
  "name": "LPAS",
  "url": "https://lpas.com/",
  "source": "Awwwards Site of the Day",
  "kind": "architecture",
  "score": 7.3,
  "idea": "An architecture and interiors practice organised by market sector: each of five sectors gets its own earthy ground colour, like swatches from a material board, and the sectors slide as a card rail over a fixed, dimmed video of the studio; a 45-degree corner cut taken from the logo is the one shape motif.",
  "mood": [
   "calm",
   "warm",
   "restrained",
   "editorial",
   "tactile"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "After a charcoal loader of about 4.5s with four stacked process verbs, a full-bleed muted studio video at half brightness fills the screen. A thin wordmark top-left at 50px, a small dark menu pill top-right. The headline, 75px (5.2vw, leading 1.0) in three lines about 800px wide, is docked bottom-left with its last baseline about 65px above the bottom edge, and three 14px labels (discipline, approach, a scroll cue with a 30px circle arrow) sit exactly on the vertical centre line. A 200px sliver of the first sector card already shows at the right edge as the cue to continue. The headline arrives last, about 5s in.",
  "type": "Aeonik alone, almost entirely at 400 with 600 for small labels, sentence case throughout. A short scale: 75px display (5.2vw, leading 1.0), 56px for the credo and rail titles (3.9vw, leading 1.1), 50px for the closing list, 38 and 28px section titles, 16 and 14px body, 12px captions. Fluid sizes by clamp() on a 10px root.",
  "colour": "#ffffff #262626 #111111 #625653 #925434 #c9d3df #707569 #e3c1aa — White page, charcoal for the loader and footer, near-black text (though 65% of the characters are set in mid-grey #747474). Five sector grounds of similar value and low chroma (taupe, rust, pale blue-grey, sage, peach), each with a lighter tint for hover; no other accent.",
  "imagery": "Bright architectural photography with blue skies and dusk light, its brick and timber tones echoing the sector palette, and a 61s documentary-feeling studio video as the hero. Square corners, one 8:5 ratio for projects, no filters; the hero and the closing photo are dimmed to about 50% for white text, and pictures are oversized in their frames so they can drift.",
  "layout": "50px margins and a 1340px measure on a 20-column main grid with 10px gutters. A fixed hero overtaken by a pinned horizontal rail (about 4320px of scroll), then a statement, a mirrored mosaic, a news list, a full-bleed photo band and a sticky footer uncovered like a curtain. Section gaps of about 100-140px. The ground changes by section: white, each sector colour, white, charcoal.",
  "sections": [
   {
    "role": "showcase",
    "description": "Five sector cards, each about 770px wide (53.5vw), slide left over the dimmed hero: a photograph on the top 68% and a flat sector-colour panel on the bottom 32%, holding the sector name at 56px bottom-left with a 30px inset, a two-line 16px descriptor right-aligned and a 45px outline circle-plus button top-right. The incoming card's photo grows from about 450 to 615px tall as it centres; neighbours peek about 270px on the left and 400px on the right."
   },
   {
    "role": "intro",
    "description": "A three-line 56px credo about 647px wide at the top-left; below it a 14px label in a narrow left column and a 16px paragraph about 800px wide starting at x=388, closed by an underlined text link."
   },
   {
    "role": "work",
    "description": "Six 8:5 images in two mirrored rows: one large (about 678x424, 47% of the width) beside two small ones (334x209), then two small ones bottom-aligned on the left under a placed void, with the large one on the right. The first large image has its top-left corner cut at 45 degrees by 60px and the last its bottom-right, so the cuts bracket the group. Each image carries a 16px name and a 12px place beneath it."
   },
   {
    "role": "footer",
    "description": "A full-bleed dimmed interior photograph carrying the five sector names stacked at 50px in white scrolls away to uncover a sticky 625px charcoal footer with two office addresses, social links and a back-to-top link."
   }
  ],
  "steal": [
   "Give each content category its own flat ground drawn from one material family at similar value and low chroma, each with a lighter tint for hover, and keep the rest of the page white plus one charcoal, so the colours read as a system and not as decoration.",
   "Take one shape from the logo and use it sparingly: a 45-degree corner cut of 20-60px on a single corner of selected images, alternating top-left on the first and bottom-right on the last so the cuts bracket a group.",
   "Stagger a two-row mosaic big-small-small, then small-small-big, with the small pair bottom-aligned to the tall neighbour so the void above them is placed; keep one ratio and caption every image in 16px. The site's 75px hero headline runs to three lines; under the house rules cut it to two."
  ],
  "media": "A 61s muted studio video at 50% brightness covers the whole first screen and stays fixed while a rail of photo-over-colour cards slides over it; projects sit in a mirrored 8:5 mosaic, and a full-bleed dimmed photo band carries the closing list. Thirteen media elements in all, no canvas or WebGL.",
  "motion": "Under Lenis the sector rail pins for about 4320px and travels about 836px per 900px of wheel while the incoming photo grows and pictures drift inside oversized frames. Project images wipe in with clip-path inset and opacity over 1.2s cubic-bezier(0.14,0.83,0.4,1), hovers take .3s cubic-bezier(0,0,.13,.99), the headline rises through a mask after the 4.5s loader, and there is no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-lacoste-polo-factory",
  "name": "Lacoste Polo Factory",
  "url": "https://members-play.lacoste.com/polo-factory-experience",
  "source": "Awwwards Site of the Day",
  "kind": "fashion",
  "score": 7.2,
  "idea": "A brand playground that frames the making of one shirt as a toy factory you tour: the landing is a single fixed stage where the brand's own goods, 3D polos in five garment colours and stitched crocodile patches, burst out of an embossed crest every time you turn the wheel.",
  "mood": [
   "playful",
   "toy-like",
   "soft",
   "cheerful",
   "tactile"
  ],
  "archetype": "product-object-centre",
  "hero": "One fixed 1440x900 stage: a pale sage ground with mint rays only 4-6% lighter swirling out from the centre, a full-screen 3D canvas on top. A narrow centred stack about 475px tall on the viewport's middle line: a 24px welcome line, the title in two lines at 48px bold (3.3vw, leading 0.83) in bottle green, an embossed 3D medallion about 245x170 carrying the crest, a three-line 12px paragraph at a 400px measure, and one white 244x78 button with the label left and a dark green arrow chip right. Around it 8-16 matte 3D polos (110-130px) and stitched patches tumble outward and crop at the frame. Corners at a 24px inset: a menu pill top-left, a sound pill top-right, a 234px butter-yellow prize-draw card bottom-right that tilts on a 3s loop.",
  "type": "One custom brand family in 400, 400 italic and 700. A 48px bold title (leading 0.83), a 24px regular welcome line, 18px for the button label and card copy, then 14, 13 and 12px; 12px is by far the commonest size and sets the hero paragraph. Sentence case for the title, uppercase for buttons. Sizes scale from a 40px base variable, with no clamp or vw.",
  "colour": "#d0dfbe #e1ffc2 #0b4221 #ffffff #fcf383 #4a4938 — Pale sage with mint rays on about 85% of the screen, bottle green for all text and chips, white for the button and pills, butter yellow for the promo card. The loader and the tour stations add more brand pairs (denim with sky blue, blush with red, olive with yellow), and the 3D objects bring garment green, chocolate and salmon. The house version drops the rays for flat sage.",
  "imagery": "Soft, matte, toy-like renders of the brand's own products: slightly stylised polos and crocodile patches with raised stitch dots, soft contact shadows, no outlines or gloss, and a pillowy embossed medallion. One small oval-masked photograph of polo fabric in the promo card.",
  "layout": "No scrolling sections: one fixed stage, scrollY stays 0. The text stack takes about 28% of the width (columns 9 to 16) on the centre line; the rest is stage space for the 3D burst, with chrome docked in three corners at a 24px inset. On the phone the medallion moves up to about 39% of the height and all the text docks to the bottom with a full-width 58px button.",
  "sections": [
   {
    "role": "intro",
    "description": "The loader: a solid colour ground with an outline crest about 206x140 (14% of the width) centred and a two-line caption pinned near the bottom. Every 1-2s the ground and the crest swap together through brand colour pairs (olive with yellow, mint with green, blush with red, denim with sky), with hard cuts, so the wait previews the palette."
   },
   {
    "role": "cta",
    "description": "The promo card docked bottom-right: 234x236 in butter yellow, an oval-masked fabric photograph, a round arrow chip and an 18px four-line contest line; it opens a centred sign-up dialog with seven fields, full-screen below 1023px."
   },
   {
    "role": "how-it-works",
    "description": "Behind the start button and not captured: a tour of four stations (start, knitting, dyeing, embroidering), each with its own pale machine tint, hotspots that pop in from scale 0 through 1.15 to 1 over 0.4s, and drag-to-rotate cursors."
   }
  ],
  "steal": [
   "Use the brand's own products as the moving matter: real colourways of the goods and the logo patch as matte textured 3D objects, 8-16 per frame, where abstract shapes would read as generic. Keep them out of a central lane about 420px wide; the site lets them cross the title, and the house rules let nothing lie on a headline.",
   "Turn an unavoidable load into a palette preview: a solid ground and the mark swapping colour together through four or five brand pairs every 1-2s, hard cuts, the caption pinned near the bottom.",
   "Dock all text to the bottom on the phone, with a full-width 56px button and 24px gutters, and move the moving object up to about 39% of the height, so the stage stays above the thumb."
  ],
  "media": "Media covers the whole first screen: a fixed ray-pattern ground, a full-screen 3D canvas in which 8-16 products take about 15-25% of the frame, and the embossed medallion set inside the type stack. The only photograph is a 200x106 oval in the promo card; no video.",
  "motion": "The wheel never scrolls the page: each step fires a fresh burst of polos and patches from the medallion that tumble outward, grow and leave past the edges, with no new content and no progress cue. The loader cuts between colourways every 1-2s for more than 4.5s; buttons spring on cubic-bezier(.175,.885,.32,1.275) at 0.2-0.3s (an overshoot the house motion layer does not use), the promo card shakes on a 3s loop, and there is no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-offfforum",
  "name": "OFFFForum",
  "url": "https://www.offforum.com/",
  "source": "Awwwards Site of the Day",
  "kind": "event",
  "score": 7.2,
  "idea": "Two events and two voices: the loud festival half of the name in a blunt geometric grotesk mark and the talks day in a classical flared-serif caps word, locked into one wordmark and laid over a fast documentary slideshow of past editions, so the page reads like an event poster that changes every second or two.",
  "mood": [
   "energetic",
   "bold",
   "editorial",
   "confident",
   "graphic"
  ],
  "archetype": "fullbleed-media-overlay",
  "hero": "A full-bleed documentary photograph of a past edition (speakers at microphones, a crowd under a projected logo) fills the screen under a dark scrim heaviest at the bottom, and changes every 1.5-2s with a 0.5s crossfade. The wordmark, 688x88 (48% of the width), is pinned 16px from the top-left, with a three-cell fact box under it (event, dates, venue) in 18px bold grotesk, leading 0.94. A 45px (3.1vw) serif-caps statement over four centred lines, about 47% of the width, sits in the lower third, with a small white pill ticket button about 210x26 under it; two tiny links sit top-right. The middle 400px holds no text.",
  "type": "Two families mapped to the two events. A custom flared glyphic serif at 400, caps, -0.02em, for the statement (45px, leading 0.96) and all the small UI labels; a tight grotesk at 600, -0.04em, leading 0.94-0.97, for the facts and the 32px newsletter heading. The footer wordmark is the largest type at about 12.6vw. Fixed rem tokens per breakpoint. The statement runs to four lines; under the house rules it is two.",
  "colour": "#000000 #ffffff #c5c5c5 — Strict black and white: black under the hero (about 64% of the first scroll), a white footer, grey only for legal text. All colour comes from the photography: warm stage reds and oranges, cool blue light. The scrim under the hero text is the one darkening the house rules allow on a photograph.",
  "imagery": "Candid, slightly underexposed event photography with warm stage light and natural colour, no duotone or grain: speakers, crowds, hands and objects. Square corners on all media; the only rounded shapes are the pill button and the social chips.",
  "layout": "One 16px outer margin governs everything, so the 1408px footer wordmark lines up exactly with the header logo. The page is only 1.6 screens: a 900px black hero, then a 497px white footer on an implied 24-column grid (heading in columns 1-7, links from the centre line, social chips at the right). No section rhythm beyond the black-then-white flip.",
  "sections": [
   {
    "role": "footer",
    "description": "A white block about 55% of the viewport tall: a three-line 32px bold grotesk newsletter invitation in the left 30% with two audience choices, link columns in small serif caps from the centre line, outlined social chips at the right; after about 110px of open white the black wordmark runs edge to edge inside the margins (1408x181, ratio 7.8:1) above a single legal row."
   }
  ],
  "steal": [
   "When a brand has two parts, give each its own face (a heavy geometric grotesk at 600 and a classical serif in caps at 400), lock them side by side in one wordmark and carry the split into the type tokens; it stays inside the two-face limit.",
   "For a people-driven event, run a fast documentary slideshow as the hero: two stacked image layers, a 0.5s opacity crossfade, a new photograph every 1.5-2s, and what, when and where docked under the logo at 18px bold. The site boxes the facts in 1px rules; the house version sets them as three plain columns.",
   "End a short page with the wordmark running the full width inside the same 16px margin as the header logo, so the footer itself is the finale. Give the ticket button at least 44px of height and 16px text; the site's 26px pill is easy to miss on a busy photograph."
  ],
  "media": "The photograph covers 100% of the first screen as two stacked cover layers crossfading in place under a scrim, with at least eight photographs seen across the captures; the footer's only picture is the wordmark. No video on the home page.",
  "motion": "No preloader: the page is painted by 400ms and the only motion is the slideshow, a new photograph every 1.5-2s with a 0.5s ease opacity crossfade. Lenis runs on a page only 497px deep, with no pins, reveals or split text; UI moves on power2-out cubic-bezier(.32,.94,.6,1) at .3-.4s and quart-out (.25,1,.5,1) at .6s.",
  "panel": "2026-10"
 },
 {
  "id": "aww-20-years-inspired-by-people",
  "name": "20 Years Inspired by People",
  "url": "https://inspiring.nk.studio/es",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 7.1,
  "idea": "A studio marks its twentieth year by turning the spotlight round: instead of its own work it collects what inspired it, so the home is a single night-sky door with one reversed sentence and one button into an archive of contributed stories.",
  "mood": [
   "nocturnal",
   "calm",
   "quiet",
   "cinematic",
   "intimate"
  ],
  "archetype": "immersive-webgl",
  "hero": "One fixed 1440x900 screen that never scrolls. A fullscreen WebGL field in deep teal-black with two soft glow pools in the lower third, sparse star dots, grain and the odd thin diagonal streak, darkened by vignette bands 100px deep at top and bottom and 200px at the sides. The header is corners only: a small slash wordmark at x=64, a language switch 64px from the right. Dead centre, its midpoint within 10px of the viewport middle and about 41% of the width: a tiny tracked line with the founding year, a two-line narrow serif headline at ~92px (6.4vw) with two key words underlined in mint, two lines of 12px body, and one solid mint button about 256x44 placed over the brightest glow. Text covers 1.8% of the screen.",
  "type": "Two families. A narrow high-contrast serif at weight 400 for the headline (~92px, 6.4vw, leading 1.0, sentence case, centred) and for archive titles at 24px; a geometric variable sans (DM Sans class) at 12-13px for body and the button label, on a 22px line pitch. Headline to body about 7:1, with no bold anywhere. Body at 12px sits below the house floor of 16px.",
  "colour": "#0a0a0a #091d1c #152524 #114d4e #ededed #00ffc2 — A deep teal-black ground (about 70% of the screen) with mint-teal glow (about 25%) and off-white type. One saturated mint accent kept under 1% of the screen: the button fill, two thin underlines, the logo slash and a caret.",
  "imagery": "No photograph on the home. The only picture is a living colour-and-light field drawn in WebGL; the archive of contributor portraits (30 square thumbnails on a slowly turning ring) sits behind the button.",
  "layout": "One fixed viewport with 64px header gutters and a single centred stack; no sections and no scroll. About 60% of the width is atmosphere on either side of the text, closed by the corner header items and the edge vignettes. On the phone the stack keeps its order inside ~58px margins, the headline drops to ~37px (9.5vw) and the menu becomes a 48px outlined square docked bottom-right.",
  "sections": [
   {
    "role": "work",
    "description": "Behind the button, measured rather than seen: an archive of contributed stories as 30 square 120px portraits on a ring that turns on a 72s linear loop, with story titles in the serif at 24px, leading 1.04, left-aligned."
   },
   {
    "role": "contact",
    "description": "A share form reached from the menu, five fields, where visitors add what once inspired them; the menu also lists a manifesto, a visit page and credits, set at 48px serif on the phone."
   }
  ],
  "steal": [
   "For a single-message entrance, centre the whole stack so its midpoint sits within about 10px of the viewport centre at about 40% of the width, and let the rest of the screen be one field. The site uses a glowing WebGL gradient; the house version is a flat dark ground or a real night photograph.",
   "Spend the accent on the button alone and keep it under 1% of the screen, so the button is the only bright block. The site also underlines two headline words in the accent, which the house rules ban: let the words carry the emphasis.",
   "Bring a short headline in word by word, then the body, then the button only once it settles. The site resolves each word from blur (filter 0.38s ease-out, opacity 0.5s cubic-bezier(0,0,0.2,1)); the house version uses opacity with a 16-24px rise, and keeps any loader under 2s."
  ],
  "media": "One fixed fullscreen WebGL colour field covers 100% of the first screen and is the only picture. Text sits on its darker upper middle with no scrim, the brightest glow pool is placed under the button, and every real image is kept behind one click.",
  "motion": "After a black loader that shows only a dot for over 4.5s, the headline resolves word by word from blur to sharp (84 split characters; opacity 0.5s cubic-bezier(0,0,0.2,1), filter 0.38s ease-out). After that only ambient drift and an 8s stepped grain loop move; the home ignores the wheel (scrollY stays 0) and a cursor lens smears the letters it rests on.",
  "panel": "2026-10"
 },
 {
  "id": "aww-hearst-exhibit-2026",
  "name": "Hearst Exhibit 2026",
  "url": "https://www.hollywoodexhibit2026.com",
  "source": "Awwwards Site of the Day",
  "kind": "culture",
  "score": 7.1,
  "idea": "A joint photography show from two fashion magazines presented as an archive thrown into the air: dozens of covers whirl through black space as bending paper, then two land flat and become the doors to the two galleries.",
  "mood": [
   "cinematic",
   "editorial",
   "nocturnal",
   "luxurious",
   "quiet"
  ],
  "archetype": "immersive-webgl",
  "hero": "Black at load. At about 1.2s a centred three-line serif lockup steps in word by word, the last line, the place name, widest at about 6vw (85-90px) and the block about 525px across, with a thin script connective written between the first two lines and a tiny two-line venue caption at bottom centre. By 2.5s it blurs away and magazine covers spiral up out of the lower right as bending paper planes. In the settled screen the only text is a 19px two-line question centred at y=80-125, and below it two 3:4 covers (280x373, 80px apart, the pair 44% of the width) landed side by side as the choice, with about 200px of black above and below and 400px on each side. No title, dates or nav remain.",
  "type": "Ivy Presto, a light high-contrast Didone-like serif (100-400), for the lockup: the place line at about 6vw (13vw on the phone), the two names at about 52px, a small article at about 25px, stepped left, right and full width. Instrument Sans 400 at about 19px (1.3vw), leading 1.25, slightly negative tracking, centred, for the instruction. A fluid clamp scale runs between 375 and 1920px viewports: display 50-100px, body 16-20px.",
  "colour": "#000000 #ffffff — Black ground on about 95% of the screen and white type on under 1%. Every other colour comes from the photographs: a red bow on one cover, a teal-green field on the other, skin tones.",
  "imagery": "Untouched magazine cover photography in the true 3:4 ratio, square corners, no filter, rendered as WebGL paper planes that curl in flight and unroll flat when they land. A full-screen film-grain layer flickers over everything.",
  "layout": "One fixed 1440x900 stage with no document scroll. Everything sits on the vertical axis at x=720; the real content occupies roughly columns 7 to 18, and the symmetric black void reads as a dark gallery wall around two framed prints. On the phone the covers stack at about 65% of the width with a 22px gap so both fit one screen.",
  "sections": [
   {
    "role": "showcase",
    "description": "The transition: a full-viewport canvas in which dozens of covers fly as paper that bends and twists, rising in a spiral from the lower right and shrinking as they recede, packed into the right half and covering 10-20% of the screen at any moment."
   },
   {
    "role": "gallery",
    "description": "The two galleries sit behind the covers and were not captured; the stylesheet carries a character-reveal keyframe and several more display faces that are presumably used inside."
   }
  ],
  "steal": [
   "Make the transition literal to the subject: printed matter rendered as paper that bends in flight and unrolls flat when it lands in its slot, with square corners and the true cover ratio.",
   "For a two-way choice, centre two 3:4 pictures 80px apart at about 44% of the width with at least 200px of clear ground above and below, so they read as prints on a wall. Under the house rules each door also carries its name in text, and the screen keeps the title, dates and venue.",
   "Let the photographs be the only colour: a black ground, white type and nothing else in the palette, so the two covers glow like lit prints on a dark wall."
  ],
  "media": "During the intro the canvas covers 100% of the screen but the flying covers fill only about 15%, packed into the right half; the settled chooser shows two covers on about 16% of the viewport with the rest black. No video; about a dozen further covers exist only as WebGL textures.",
  "motion": "Lockup words fade in over 800ms on cubic-bezier(0.65,0.05,0.36,1) at delays from 1000 to 2500ms while a script connective writes itself in eight strokes; the lockup leaves with opacity and a 0-6px blur over 800ms, the covers storm in, and the question arrives over 1200ms on cubic-bezier(0.77,0,0.18,1). About 5s pass before the choice can be made, with no skip and no reduced-motion rule, and a grain layer jitters at 0.15s steps forever.",
  "panel": "2026-10"
 },
 {
  "id": "aww-meer-mohsin",
  "name": "Meer Mohsin",
  "url": "https://www.meermohsin.me/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 7,
  "idea": "A front-end developer's portfolio told as a dark ritual: one red neo-tribal sigil rendered in 3D splits, merges, crumples and stretches from screen to screen, and every statement pairs hard grotesk capitals with a single word in a formal copperplate script, on black and blood red.",
  "mood": [
   "dark",
   "loud",
   "nocturnal",
   "bold",
   "experimental"
  ],
  "archetype": "immersive-webgl",
  "hero": "A red preloader of about 2.5s (#990000 with grain, a huge black script counter running 000 to 100) fades to black. The settled fold is pure black with only the two mirrored halves of a red 3D tribal emblem, each about 300x370 (21% of the width), placed symmetrically either side of the centre, and a dim progress bar bottom-left: no name, title, nav or action. On the first scroll the halves merge over a centred headline: two grotesk cap lines at about 195px (13.5vw; the longer about 66% of the width) with one script word wedged between them, overlapping both by about a third of the cap height, all in bright red. Only on the second screen does the visitor learn that this person builds websites.",
  "type": "Three families. A neutral grotesk in regular (61% of characters) and light (34%) for caps statements, a 30px light uppercase paragraph, 18px stat lines, 36px project names and a 66px sentence-case statement. A formal copperplate script (5%) for single words and numerals only: the counter, 70px stat figures, 150px service words, a 156px awards heading and a 228px (15.8vw) footer marquee. Body 18px. The house version keeps each headline in one face and gives the script a role of its own, never an accent word inside a headline.",
  "colour": "#000000 #990000 #d60407 #ffffff #f5f5f5 — Black page on about 70% of the screens, blood red for full grounds (about 12% of the area) and much of the text, a brighter red for display type, white for chrome and labels. Deep red on black and black on deep red measure only about 2.35:1, too weak for reading copy. The project mockups bring purple and amber from outside the system.",
  "imagery": "Gothic pictures (faces, an eye, a falling figure, TV static) pushed into a red duotone with heavy grain; flat illustrated flame silhouettes and white torn-paper edges as the boundaries between black and red grounds; glossy full-colour device mockups in the work section. Square corners throughout.",
  "layout": "Mostly symmetric about the vertical axis on full-bleed grounds, with a logo glyph at (42,25) and a fixed bottom bar that divides the width into thirds with three mood-word labels. Three long pins of about 5440, 4560 and 4440px stretch 295 words over 31 screens. Ground changes happen through illustrated flame and torn-paper edges 630-680px tall, never straight cuts.",
  "sections": [
   {
    "role": "about",
    "description": "The emblem crumples into a spiky mass at the centre while a full-bleed band of red flame silhouettes rises from the bottom and turns the ground red; four lines of 30px light uppercase in deep red run from x=72 to 1348, the words drifting in from scattered offsets."
   },
   {
    "role": "features",
    "description": "Pinned for about 6 screens: a full-viewport line diagram in dark red (corner diagonals, a centred square about 600px, a diamond, both axes) round a centred deck of ten stacked 216x270 duotone pictures that flips at every step, one huge red script word laid across the deck on the horizon, and a three- or four-item skills list in 16px red that types itself out at the right."
   },
   {
    "role": "intro",
    "description": "A 259x270 red card with a falling figure grows into a full-width red band about 600px tall with torn-paper edges, and its 66px black sentence (4.6vw, three lines, one word swapped into the script) scales up with it."
   },
   {
    "role": "work",
    "description": "A pinned vertical carousel: the current project as a 648x450 mockup photograph (45% of the width), the previous and next as 194x135 thumbnails directly above and below, a blurred, darkened copy of the current picture filling the ground, the 36px name at x=72 on the centre line and a 12px description at the right."
   }
  ],
  "steal": [
   "Give the page one recurring object and re-pose it in every section (split, merged, crumpled, flattened, a vertical spike): one 3D or SVG glyph carries about ten screens of continuity without new imagery. Keep it clear of the reading text, which the site does not.",
   "Change the ground colour through an edge that belongs to the theme (flame silhouettes, torn paper) instead of a straight cut, so the transition is itself a picture.",
   "Scale a small card into a full-bleed band and scale its heading with it, so a statement arrives as an event instead of a fade. The site wedges a script word into its headlines; under the house rules a headline stays in one face and one colour."
  ],
  "media": "On the fold the 3D emblem covers about 15% of the area as two halves on a black void; with the headline it takes about 60% of the centre. Pictures arrive as a centred flipping deck, a card that grows into a full-bleed band, and a vertical carousel over a blurred copy of itself: 29 images, three canvases, a full-viewport line diagram, no video.",
  "motion": "Lenis drives a scroll-scrubbed Three.js emblem that changes pose and scale per section across three pins of about 5440, 4560 and 4440px. Split words (297 elements) drift into lines on transform 2s cubic-bezier(0.075,0.82,0.165,1), skills type out character by character, panels move over .45s cubic-bezier(.23,1,.32,1), and grain (0.09s steps), a 12s ring and a fluid field loop forever with no reduced-motion rule; load took about 6.6s.",
  "panel": "2026-10"
 },
 {
  "id": "aww-gionatan-nese-26",
  "name": "Gionatan Nese",
  "url": "https://www.gionatannese.com/",
  "source": "Awwwards Site of the Day",
  "kind": "personal-portfolio",
  "score": 6.8,
  "idea": "A designer's portfolio shown as one object in an empty white room: about twenty small product-shot cards float as a slowly turning 3D sphere in the middle of a full-screen canvas, and the wheel turns the sphere instead of moving the page.",
  "mood": [
   "minimal",
   "quiet",
   "precise",
   "experimental",
   "clean"
  ],
  "archetype": "immersive-webgl",
  "hero": "A white loader first: three 16px items on the exact horizontal middle, the name in a grotesk at a 9vw left margin, a monogram assembling letter by letter in the centre, the job title in a serif ending at the same right margin, and a zero-padded serif percentage counter bottom-centre. Then a full-screen white WebGL canvas holds one sphere about 445px across centred at (720, 450): about twenty 3:4 portrait cards, 50-90px wide, each a product or object photograph on a flat light-grey or black plate. It fills 31% of the width and half the height, with white on every side. The only controls are a 216px group at top-centre (the monogram and three small view pills) and a 16px sound dot top-right. No headline: the largest type on the site is 16px.",
  "type": "Two families at one size. A neutral grotesk at weight 500 (78% of characters) for the name, monogram and project names; a delicate high-contrast serif at 400 (22%) for the job title, the view label and the counter. Everything is 14-16px (largest 1.1vw), sentence case, tracking 0. Hierarchy comes only from the change of face and from position.",
  "colour": "#ffffff #000000 #ececec #f0f0f0 — White ground on about 97% of the pixels, black text, light-grey or black card plates. The only colour is in the few saturated photographs inside the cards: a pink poster, a navy phone case, a dark red figure.",
  "imagery": "Photographs of the designer's products and objects, each plated on flat light grey (about three in four) or black, in one portrait ratio near 3:4, square corners, no border or shadow; depth is shown only by scale and overlap.",
  "layout": "No document sections: one fixed 1440x900 canvas, scrollY stays 0 and the wheel is captured. Everything aligns to the centre axis; the content takes the middle 31% of the width and the other 69% is white wall. On the phone the sphere widens to about 78% of the screen and the nav stays top-centre.",
  "sections": [
   {
    "role": "work",
    "description": "The sphere is the only content. Each wheel step turns it, near cards grow and overlap the far ones, and it eases to a resting angle. Two other views of the same set sit behind the small pills; a list of project names at 16px on a 72px row pitch exists in the markup but was not visible in any capture."
   }
  ],
  "steal": [
   "Unify mixed work by plating it: every project image on a flat light-grey or black plate in one portrait ratio with square corners, about three grey to one black, so twenty unrelated projects read as one catalogue.",
   "Place one centred object at about 31% of the width and half the height and let the rest be wall; it reads as intentional only when nothing else competes. Under the house rules add a 16px caption under it with the front item's title and year, and a plain list view one click away.",
   "Run the page at text size and let placement make the hierarchy only if the layout supplies the drama. The site has no title at all; the house version still puts the name and what the person does in a clear h1 on the first screen."
  ],
  "media": "One full-screen WebGL canvas holds about twenty image textures as cards on a centred sphere; clearly non-white pixels add up to only 2-3% of the screen. No img or video elements and no drawings.",
  "motion": "A white loader assembles the monogram letter by letter while a serif counter ticks for over 5s, although the document loaded in 916ms. After that each wheel step turns the card sphere and eases it to rest, with no page scroll and no end; pills ease on cubic-bezier(.65,0,.35,1) at 0.2-0.45s, and there are no keyframes, no split text and no reduced-motion rule.",
  "panel": "2026-10"
 },
 {
  "id": "aww-noomo-showcase",
  "name": "Noomo Showcase",
  "url": "https://showcase.noomoagency.com",
  "source": "Awwwards Site of the Day",
  "kind": "agency",
  "score": 6.7,
  "idea": "An immersive studio's year in review opened like a launch sequence: while the page loads, one letter of the wordmark stretches into the progress bar, and then a single justified manifesto fills a starfield edge to edge, with a window in the shape of the brand glyph cut into its middle that glitches the words behind it.",
  "mood": [
   "nocturnal",
   "technical",
   "loud",
   "experimental",
   "cool"
  ],
  "archetype": "type-poster",
  "hero": "A fullscreen WebGL starfield. A five-line uppercase statement at about 90px (6.2vw), leading about 0.97, forced-justified from x=14 to about x=1410 and centred vertically (y 230-656), says this is the studio's year of 3D, motion and interactive web work; most words are in a light grotesk and four key phrases in a heavier cut that, in the opening state, sit on rounded electric-blue pills with bloom. At the exact centre a pixel-cross window about 360x420 displaces and thresholds the type behind it, with about twelve chrome spheres on its outline. A 57px header (logo, three small links, a sound toggle, an email button) and one small get-started button with a round arrow centred about 40px above the bottom. The headline lives in the canvas, not the DOM, and the wheel does nothing until the button is clicked.",
  "type": "PP Neue Montreal Book and Medium for names and the canvas headline (about 90px, uppercase, justified, light and heavy cuts mixed word by word); GT America Mono at 400 for 65% of the DOM characters (nav, buttons, tags) at 11-20px; a script flourish beside the logo. DOM sizes stay at 11, 14, 16 and 20px. The house version keeps the grotesk alone, puts the headline in the DOM in two lines, and drops the monospace.",
  "colour": "#000000 #d9e0ed #d2e0ff #0004eb #050516 — Black ground on about 75% of the screen, cool off-white text (82% of it), periwinkle for the loader wordmark and button chips. Electric blue is about 2% of the DOM but 15-25% of the screen in the opening state, as a glow band, phrase pills and the button, then drains to monochrome after a few seconds. The house version keeps the blue as a flat fill on the button and sets the key phrases plainly.",
  "imagery": "No photographs or video on the first screen: a starfield, a glitch window shaped like the brand glyph, and small glossy chrome spheres, all in one Three.js canvas. In the blue state, a bloom band, slight RGB fringing and scanline grit on the type; inside the cross the type is thresholded to harsh black-and-white noise.",
  "layout": "One fixed 1440x900 stage: a fullscreen canvas, a fixed smooth-scroll wrapper and a fixed overlay; scrollY stays 0 and the 17-screen document below was never reached. The statement runs edge to edge with about 14px gutters, with bands of starfield about 170px deep above and below, closed by the header and the button. Eight case studies wait in the DOM behind the click.",
  "sections": [
   {
    "role": "intro",
    "description": "The loader: a black screen with a wordmark of chunky pixel letters about 82px tall flush bottom-left in pale periwinkle and a 50px percentage counter above it. One round letter stretches sideways into a capsule as the count rises, so the logo is the progress bar: about 520px wide at 0%, 860px at 40% (where it stalls for over 2s) and 1300px at 91%."
   },
   {
    "role": "work",
    "description": "Measured in the DOM but never visible: eight case-study entries with 20px names and tags and solid blue square-cornered buttons, reachable only after the hero button."
   }
  ],
  "steal": [
   "Make one round letter of the wordmark a capsule that stretches, docked bottom-left at about 80px tall and growing from about 36% to 92% of the width. The site uses it as the progress of a loader; the house rules allow no preloader, so here it is the entrance: the page is readable on the first frame and the letter stretches once within 1.2s.",
   "Let one statement be the whole hero, justified edge to edge with tight gutters and centred vertically with about 170px of ground above and below. The site runs it to five lines inside the canvas; under the house rules the headline is two lines, in the DOM, with a short paragraph under it for the rest.",
   "Give the brand glyph a job: cut the logo's distinctive letterform as a window through a picture and treat what shows inside differently, so the mark reads as part of the content. The site cuts it through the headline, which the house rules forbid."
  ],
  "media": "The canvas covers 100% of the first screen: the type plane takes about 97% of the width and 47% of the height, and the glitch cross with its spheres about 25% by 47% at the centre. One img (the header logo), one Three.js canvas, no video; any case-study pictures sit behind the click.",
  "motion": "The loader counts to 91% while one letter stretches into a capsule, stalling at 40% from 2.5s to at least 4.5s; the hero then opens in its electric-blue state and drains to monochrome on a timer, not on scroll, and the wheel does nothing until the button is clicked. The cross glitches the canvas type live, spans change filter over 0.4s and the header translates over 0.5s (both on cubic-bezier(0.65,0.05,0.36,1)), and a 2s bounce loop nudges the button arrow, with no reduced-motion rule.",
  "panel": "2026-10"
 }
]