Hyperstudio
A dark, near-black studio portfolio for a branding-and-websites agency, built on a #080808 canvas with high-contrast off-white Aeonik display headlines and monospaced \"Input\" labels for technical/utility text. The system reads as confident, engineered, and gallery-dark — an ASCII-dotted world-map hero, thin-hairline service grids, and full-bleed portfolio panels floating on black. Brand voltage comes from the type pairing (a soft grotesque display against a mono UI voice) and from three sparse warm/cool accent hues rather than from color-heavy surfaces.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
63px · 400 · 1.048
The quick brown fox jumps
title
44px · 400 · 1.068
The quick brown fox jumps
subtitle
23px · 400 · 1.073
The quick brown fox jumps
body
17px · 400 · 1.347
The quick brown fox jumps
mono-label
17.5px · 400 · 1.314
The quick brown fox jumps
button
14px · 400 · 1.429
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 6px | |
| xs | 8px | |
| sm | 11px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 8px | |
| md | 10px | |
| lg | 20px | |
| pill | 99px |
FAQ
- What colors does Hyperstudio use?
- Hyperstudio's core palette includes #080808, #101010, #202020, #222222, #f3f3f3. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Hyperstudio DESIGN.md.
- What font does Hyperstudio use?
- Hyperstudio's primary typeface is Aeonik. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Hyperstudio design system?
- A dark, near-black studio portfolio for a branding-and-websites agency, built on a #080808 canvas with high-contrast off-white Aeonik display headlines and monospaced "Input" labels for technical/uti…