Foundations
Imagery
Imagery is the content; gradient and type are the frame. Creator photography is asymmetric and collaged, and crop ratios map directly to the same ratios the product enforces for feed posts, portraits, and Stories.
Mosaic collage
Asymmetric, not gridded-and-equal
One cell is deliberately twice the size of its neighbors — the about-page's literal 'creator collage,' built from a CSS grid with explicit column/row spans rather than a uniform N×N grid.
Sticky pinned hero
The image arrives, then holds its position
Full-viewport photography pinned with position: sticky; top: 0 while a logo-morph sequence and text scroll independently around it.
Scroll inside this frame ↓
The photo stays pinned…
…while this text keeps scrolling past it.
position: sticky; top: 0;
Legibility
No text sits on unprotected photography
Every text-on-image instance in the source pairs with a scrim gradient — see Colour for the full overlay system.
Caption text sits here
Loading state
A shimmer, not a flat grey box
A skeleton background fills media containers before the real asset loads, visually consistent with the neutral palette.
Usage
Do / Don't
Do
- Vary cell size within a single collage composition.
- Crop new creator photography to one of the three core ratios (1:1, 4:5, 9:16) used elsewhere in this manual.
- Pair text over photography with a scrim gradient — never place it directly on an unprotected image.
Don’t
- Build a uniform, equally-sized tile grid for editorial collage — the system's signature is asymmetry.
- Treat the about-page's 3:4 portrait card ratio as the product standard — it's a deliberately distinct editorial crop.
- Show a flat grey box while media loads — the established pattern is an animated shimmer.