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.

Hyperstudio design system
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
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











