← Live page Hero layouts — 00–19 All tests
00

Original homepage hero

Archived copy of the live two-column hero as it stood before the orbit treatment shipped: copy on the left, collage on the right, orange 12,000+ sticker, Get Started / Give now. Faithful production markup — not a sketch.

01

Collage as the piece

The collage becomes a large centered object. Headline, lede, buttons and badge sit smaller beneath it — the drawing is the hero, the type is the caption.

02

Stacked column

Copy first, full width, at live display scale. The collage sits underneath as a wide landscape band — a vertical stack instead of a split.

03

Type over collage

The collage is the field. Headline and actions overlay the left side, with a dark scrim so the white type still reads.

04

Split reversed

The live two-column hero, mirrored: collage on the left, copy on the right.

05

Full-bleed, copy in the corner

Collage fills the viewport. Type is a compact cluster parked in the bottom-left corner rather than a partner column.

06

Editorial magazine

The headline spans the page under a hairline. Lede, buttons and badge sit in a narrow left rail; the collage takes the rest of the row.

07

Asymmetric bleed

A slim copy rail aligned to the wrap. The collage is oversized and runs off the right edge of the viewport — not a 50/50 split.

08

Copy left, collage as a strip

Text owns the column. The collage is cropped to a tall vertical sliver — a strip of the drawing, not a second panel.

09

Pointer field

The collage is no longer a drawing in a column — it is a field. Photos and the yellow notecard scatter to the edges and drift with the cursor, depth-sorted. Copy sits in the quiet middle.

Connection is an essential human need.

Guiding students from alone known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

10

Broken type

The headline is an object, not a block of copy. “Alone” and “known” take the full measure; the arrow between them is a physical stroke of orange. Stamps of gathering photos sit as punctuation.

Guiding students from

alone known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

11

Filmstrip scrub

Copy first, then a horizontal strip of gathering photos. Move the pointer across it to scrub — like winding a roll of film, not sliding a carousel.

Guiding students from alone known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

Move across the strip to scrub

12

Sticker board

A cork locker door. The headline is an orange bumper sticker, the lede a yellow notecard, the photos Polaroids, the CTAs a stacked pair of pills. Everything is applied, nothing is typeset in a column.

Guiding students from alone → known

Connection is an essential human need.

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

13

Yearbook spread

Two pages. Left is the “alone” year — four quiet portraits on ruled cream. Right is “known”: the banner photo, the headline, the ask. A gutter shadow binds them into one book.

Whisper · The year they sat alone

Unseen
Unknown
Waiting
Quiet

Whisper · The year they were known

Guiding students from alone known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

14

Notecard fan

Four cards in a stack — yellow, lavender, tan, orange — the same stock as the collage notecard. Hover fans them so the headline, lede, a photo, and the CTAs can all be read at once.

Guiding students from alone → known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

Hover the stack

15

School marquee

The live school names become a pair of tickers that frame the headline — a movement running above and below the words, photos peeking on the right.

Guiding students from alone known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

16

Orbiting known

One word holds the center. Gathering photos orbit it and stay upright; the pointer tips the ring. The rest of the headline and the ask sit underneath, out of the way of the motion.

known

Guiding students from alone →

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

17

Cut letters

Extreme negative space, then one word at billboard scale. The banner photo is cut into the letterforms of KNOWN — the destination is the picture.

Guiding students from alone →

known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

18

Text thread

The question every lonely student is asked, and almost never answers honestly. “How are you?” arrives first; the hero copy is the real reply. Photos sit beside the phone like attachments.

How are you?

Guiding students from alone → known

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.

Supporting 12,000+ students nationwide

19

Full collage orbit

The original gathering photos stay on the outer ring. The inner rings use the real die-cut pack from stickers/whisper-stickers-2025 — not the low-res stand-ins. One conversation card. The ask sits below, without a cream tray.

Guiding students from aloneknown

We combat student loneliness by creating meaningful spaces of conversation, connection, and community.