Skip to content
Browse
Library

HIFI. Lemon cursor in a blacked-out terminal.

  • Finance
  • Dark theme
  • 11 colors
  • 3 typefaces

HIFI is a black-canvas money-infrastructure site that reads like a terminal at 2 a.m.: Void Black #000000 sections, 1px white-at-20% hairlines and square corners everywhere, with Lemon Signal #f2ff66 as the only colour that isn't grey. Lemon lights the primary buttons, the opening word of the hero and section headlines, and the small sparkle nodes in its line diagrams. Rhithmic Sans carries the headlines at a single 400 weight with zero tracking, so 80px statements stay calm and engineered; Space Grotesk handles reading copy in 70% white, and Space Mono bold sets navigation, footer links and JSON payloads, giving the page its developer-console register. Warm red-and-amber motion-blur photography bleeds behind two middle sections as the only atmosphere.

Visit hifi.com
Screenshot of HIFI
Captured from hifi.com on November 6, 2026

HIFI design system

HIFI

Brand1

  • Primary button fills, the announcement strip, first words of headlines and diagram nodes — an acid highlight that reads as a live cursor on black

Accent1

  • Text and chip fills sitting on Lemon Signal: the Book Demo label and the Read More tag — a warm near-black instead of pure black

Neutrals9

  • Page canvas, hero and every content section, capability grid cells and Get Started label text

  • Footer field and the top stop of the fading header gradient, a hair off pure black

  • Product cards over photography: white at 7% laid on the image, with a 1px top glint

  • White-at-10% grid backings and quiet raised strips behind ruled content

  • The 1px white-at-20% rules that frame grids, panels and card edges on black

  • Small legal and helper copy where even 50% white would be too loud

  • White-at-50% Space Mono: JSON values, footer column heads and secondary metadata

  • White-at-70% reading copy and the header navigation labels — body text never goes full white

  • Headlines after the lemon lead-in, card titles, outline-button borders, footer links and line diagrams

Try a pairing

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

Aa

Void Black on Lemon Signal

19.27 : 1 contrast

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

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