Skip to content
Library

OFF+BRAND.. Iridescent sphere on warm parchment.

  • Studio
  • Light theme
  • 6 colors
  • 1 typeface

OFF+BRAND. operates as a typographic architecture on warm parchment: a near-monochrome canvas (#e5e4e0) where a single custom geometric sans-serif (Ataero Retina OB) carries nearly all the expressive weight. Headlines are monumentally large (up to 103px) with tight line-height (0.80) and whisper-wide tracking, while a singular iridescent gradient sphere — yellow bleeding into pink, then blue, then dissolving into white — anchors the hero as the only chromatic event on an otherwise achromatic page. Interfaces should feel like an editorial spread: thin concentric circle ornaments, a precise 2×5 client logo grid, grid-paper project cards, and label text that tracks wide like museum signage. There are no shadows, no fills, no buttons heavier than a ghost link with a 10px radius — restraint is the entire design language.

Screenshot of OFF+BRAND.
Captured from itsoffbrand.com on October 11, 2026

OFF+BRAND. design system

OFF+BRAND.

Accent1

  • Signature gradient object in the hero — the only chromatic element, flowing from saturated yellow through hot pink to cool blue before dissolving to white. Functions as a brand beacon, not a UI color

Neutrals5

  • Primary text, heading strokes, link borders, all dark UI elements — near-black with zero blue cast, reading as editorial print

  • Hairline borders, subtle dividers, structural outlines that need to recede against the parchment

  • Mid-tone surface between parchment and white — secondary panel background when a layer needs quiet separation

  • Page canvas, section backgrounds — warm off-white that replaces pure white, making the page feel like printed stock rather than a screen

  • Elevated card surfaces, logo container backgrounds, project card canvases — pure white to lift content above the warm parchment

Try a pairing

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

Aa

Paper on Ink

16.86 : 1 contrast

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

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