Skip to content
Library

Hyperstudio. Blueprint scratched into obsidian.

  • Studio
  • Dark theme
  • 10 colors
  • 2 typefaces

Hyperstudio runs on a near-black canvas where everything is carved out by light. The aesthetic is editorial-tech: a deep matte black background (#101010), crisp off-white type (#f3f3f3), hairline 1px borders (#212121), and the occasional warm gold or signal-green dot for punctuation. Typography does the heavy lifting — oversized 400-weight headlines with aggressive negative tracking create a quiet, confident voice, never shouting. Components are reduced to their skeleton: outlined buttons, ghost pills, thin dividers, no shadows, no fills beyond a single white pill for primary actions. The whole system feels like a wireframe rendered in light on obsidian — restrained, precise, and deliberate.

Screenshot of Hyperstudio
Captured from hyperstudio.org on October 11, 2026

Hyperstudio design system

Hyperstudio

Brand1

  • Filled pill buttons (LET'S CHAT, START NOW), inverted text on light surfaces, icon strokes — the single high-contrast action color

Accent1

  • Outlined icon strokes in service and portfolio sections — warm metallic against the cool dark

Neutrals8

  • Deepest surface level, hero band, and overlay backgrounds

  • Page canvas, full-bleed dark background

  • Primary 1px border color for cards, grids, and section dividers — the structural line work

  • Card and panel border accent on elevated sections

  • Secondary border and stroke detail

  • Secondary muted text, captions, helper labels

  • Mid-weight borders, subtle dividers, tertiary text

  • Primary text, headings, and body copy on dark surfaces

Try a pairing

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

Aa

Carbon on Signal White

20.03 : 1 contrast

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

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