Skip to content
Browse
Library

Hero Collective. Tabloid headline on a blackout stage.

  • Studio
  • Dark theme
  • 11 colors
  • 2 typefaces

Hero Collective is a soot-black agency showreel where type is the set: Anton capitals run edge to edge at 166px to 768px with 0.8 line-height, in Cream #f4f3e3 or Hero Red #f51c20. Every block is a full-bleed sheet with 37.5px top corners that slides over the one before it, so case studies, the red LATEST band, a khaki Culture Hack panel and the news collage read as a pile of posters rather than sections. Red display words carry a blurred duplicate behind them that glows like stage light, and white marker scribbles circle and underline words in the hero. Staff, set in 25px uppercase at weight 600, is the only reading voice; there are no shadows, no thin weights and almost no lowercase.

Visit herocollective.co
Screenshot of Hero Collective
Captured from herocollective.co on November 6, 2026

Hero Collective design system

Hero Collective

Brand1

  • Giant HEROES and NEWS display words, the LATEST band and filled block buttons — the one loud colour against soot black

Accent3

  • The square fill behind the HERO wordmark in the header, a touch cooler than Hero Red

  • Ground of the culture-driven manifesto section, a dark green-black under the glowing red copy

  • The Culture Hack call-to-action sheet that holds the report and subscribe buttons — the only light section

Neutrals7

  • Page canvas, case-study sheets and the footer — every rounded-top panel sits on this near-black

  • The rounded news-collage panel, a half step up from Soot Black

  • Warm brown-black ground of the PLAY showreel section behind the portrait video

  • Cream at 70% for the footer legal line and other low-emphasis small print

  • The 1px footer divider and the hand-drawn underline strokes

  • Fill of the secondary block button, carrying a Hero Red label

  • Display capitals, client names, body copy and button labels — the site never uses pure white text

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Soot Black on Hero Red

4.52 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.