Signal White
#ffffffFilled pill buttons (LET'S CHAT, START NOW), inverted text on light surfaces, icon strokes — the single high-contrast action color
Hyperstudio
hyperstudio.orgWebsite preview
The design language
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.
Color palette
brand
accent
Compass Gold
#6f6759Outlined icon strokes in service and portfolio sections — warm metallic against the cool dark
neutral
Obsidian
#101010Page canvas, full-bleed dark background
Carbon
#080808Deepest surface level, hero band, and overlay backgrounds
Chalk
#f3f3f3Primary text, headings, and body copy on dark surfaces
Smoke
#9c9c9cSecondary muted text, captions, helper labels
Ash
#c1c1c1Mid-weight borders, subtle dividers, tertiary text
Graphite
#212121Primary 1px border color for cards, grids, and section dividers — the structural line work
Iron
#474747Secondary border and stroke detail
Card Slate
#3b3d45Card and panel border accent on elevated sections
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
63px · 400 · 1.05 · -0.69px trackingThe quick brown fox jumps
heading-lg
44px · 400 · 1.07 · -0.31px trackingThe quick brown fox jumps
heading
34px · 400 · 1.03The quick brown fox jumps
heading-sm
23px · 400 · 1.07The quick brown fox jumps
subheading
21px · 400 · 0.95The quick brown fox jumps
heading-xs
18px · 400 · 1.31The quick brown fox jumps
text-17
17px · 400 · 1.29The quick brown fox jumps
body
16px · 400 · 1.25The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Aeonik
- Weights
- 400, 700
- Sizes
- 13px, 14px, 16px, 17px, 18px, 21px, 23px, 34px, 44px, 63px
- Line height
- 0.95–1.43 (tight at display sizes, breathing at body)
- Letter spacing
- -0.0110em at 63px, -0.0070em at 44px, default at body
- Fallback
- Inter, Satoshi, or General Sans
- Features
- 'ss01' on, 'cv11' on
Primary typeface for everything — display headlines, body, buttons, links. Weight 400 across all sizes is signature: no bold shouting, authority through scale and tracking alone.
Additional typeface
Input
- Weights
- 400
- Sizes
- 8px, 13px, 14px, 16px, 17px, 18px
- Line height
- 1.20–1.54
- Letter spacing
- -0.0370em, -0.0220em
- Fallback
- IBM Plex Mono, JetBrains Mono, or Space Mono
Secondary typeface for meta text, labels, and small captions. Tighter tracking (-0.037em at 8px, -0.022em at 18px) gives it a utilitarian, almost monospace feel — used for status pills, section metadata, and fine print.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 120-210px
- Card padding
- 32-48px
- Element gap
- 20-24px
Border radius
tags
4pxcards
8pxicons
99pxbuttons
9999px (pills)Spacing scale
1px2px3px4px6px7px8px10px11px12px14px15px16px17px19px20px23px24px25px30px33px35px40px45px50px55px85px95px115px130px210pxGuidelines
Do
- Use weight 400 for all headings — never bold. Scale and tracking carry hierarchy, not weight.
- Separate every section with a 1px #212121 hairline rule. No background color shifts between sections.
- Use 9999px radius only on filled white pill buttons. Everything else stays at 4px or 8px.
- Set display type at 63px Aeonik weight 400 with letter-spacing -0.69px. This is the voice of the system.
- Use #6f6759 Compass Gold exclusively for icon strokes — never for text or backgrounds.
- Apply a Pulse Green (#98ff38) dot only for live/active status indicators like availability counts.
- Keep all body text in #9c9c9c Smoke. Never use pure #808080 — the slight warm tilt matters.
Don’t
- Never add drop shadows. Elevation comes from hairline borders and color contrast alone.
- Never use bold or semibold weight on display type. Weight 400 at 63px IS the headline.
- Never use a colored fill behind text. The canvas stays Obsidian or Carbon throughout.
- Never use fully rounded corners on cards. 8px maximum — the system is architectural, not soft.
- Never place icons in any color other than Compass Gold or Chalk. No blue, no green, no multicolor.
- Never use photography as hero or section content. Dot-maps, icons, and type are the only visuals.
- Never break the 1200px content column. Full-bleed is reserved for the canvas and the dot-map graphic.
Components
White Pill Button (Primary Action)
Filled button for highest-priority CTAs like START NOW and LET'S CHATSolid white (#ffffff) fill, Obsidian (#101010) text, 9999px border-radius, 12px 24px padding, Aeonik 14px weight 400 uppercase. Small icon or arrow glyph right-aligned. No shadow — contrast alone creates elevation.
Ghost Outline Button (Secondary)
Secondary CTA placed beside primary actionsTransparent background, 1px white (#ffffff) border, white text, 8px radius (not fully pill), 10px 20px padding, Aeonik 14px weight 400 uppercase. Used for VIEW WORK and similar secondary flows.
Status Badge (Pill)
Inline availability/scarcity indicator (e.g. '2/5 SPOTS LEFT FOR JULY')Dark card background (#1a1a1a), 1px Graphite (#212121) border, 4px radius, 8px 14px padding. Small Pulse Green (#98ff38) dot prefix. Text in Aeonik 12px weight 400, Smoke (#9c9c9c) color, uppercase tracking.
Service Card (2×2 Grid Cell)
Displays a single service offering in the services sectionTransparent background, 1px Graphite (#212121) border on bottom and sides (no top border to merge with section divider). Compass Gold (#6f6759) outlined icon at top-left, 32px. Heading in Aeonik 14px weight 400 uppercase Chalk (#f3f3f3), body in Aeonik 14px weight 400 Smoke (#9c9c9c). 48px padding all sides.
Portfolio Card
Showcases a client project thumbnail in the portfolio gridNo background fill, 1px Graphite (#212121) border or divider line, 8px radius. Small outlined client icon centered, client name in Aeonik 16px weight 400 Chalk, category label in Input 13px uppercase Smoke. Tight vertical padding 24px.
Section Divider Line
Separates page sections horizontally1px solid Graphite (#212121) stroke spanning full content width. The single most repeated visual element — it IS the page structure. No gradients, no fades, no decorative breaks.
Top Navigation Bar
Persistent site header with brand, nav links, and CTATransparent background floating over Obsidian canvas. Left: 'Hyperstudio' wordmark in Aeonik 18px weight 400 Chalk. Center-left: nav links (SERVICES, PORTFOLIO, PROCESS) in Aeonik 14px weight 400 uppercase Smoke with 24px gaps. Right: outlined 'LET'S CHAT' pill button. 1px Graphite bottom border.
Headline Display Block
Hero and section opener typographyAeonik 63px weight 400 Chalk (#f3f3f3), line-height 1.05, letter-spacing -0.69px. Centered or left-aligned. No color, no decoration — the size and tracking do all the work. Followed by a compact sub-headline in Aeonik 21px weight 400 Smoke.
Dot-Map World Graphic
Decorative hero visual — a pixelated globe rendered in white dotsFull-width illustration of a world map composed of small white (#f3f3f3) circular dots on the Obsidian canvas. No stroke, no fill — just dot density defining continents. Serves as atmospheric proof of global reach without literal photography.
Manifesto Text Block
Centered narrative text in the 'Why Hyperstudio?' sectionMax-width 600px centered. Aeonik 23px weight 400 Chalk for the section title, Aeonik 16px weight 400 Smoke for body paragraphs, generous 24px line-height. Ghost outline 'READ MANIFESTO' button below.
Outlined Icon Set
All UI icons across the page1.5px stroke, no fill, Compass Gold (#6f6759) or Chalk (#f3f3f3) color, 24–32px size. Geometric and minimal — pen nib, open book, monitor, waveform. The gold tint against black gives them a compass-rose quality.
Footer / Bottom Bar
Closes the page with contact or site info1px Graphite top border, transparent background. Small Aeonik 14px Chalk text for email (hello@hyperstudio.org), Input 13px Smoke for secondary links. No background fill, no padding beyond 32px vertical.
Surfaces & elevation
Level 0
Obsidian Canvas
#101010Base page background — the default state
Level 1
Carbon Depth
#080808Hero band, card surface elevation, overlay depth
Level 2
Hairline Grid
#2121211px border lines that define cards, sections, and structure
No drop shadows. Elevation is achieved through a single mechanism: hairline 1px Graphite (#212121) borders that trace the perimeter of every container. The only 'lift' on the page is a white-filled pill button — and that lift comes from color contrast, not shadow. This keeps the system flat, architectural, and fast.
Layout & imagery
Layout
Full-bleed Obsidian canvas, content constrained to a 1200px max-width centered column. Hero is a centered headline stack with a dot-map world graphic spanning the full viewport width below. Sections are separated exclusively by 1px Graphite horizontal dividers — no alternating bands, no background shifts. The services section uses a 2×2 grid inside a bordered frame. The 'Why Hyperstudio?' block is a narrow centered column. Navigation is a transparent top bar with no sticky behavior visible. Spacing is generous — 120–210px between sections — creating a slow, editorial vertical rhythm rather than a dense product layout.
Imagery
Near-zero photography. The only imagery is the dot-matrix world map on the hero — white circular dots on black forming continents through density alone. No product shots, no team photos, no client logos as photography. Icons are the only recurring graphic motif: thin 1.5px outlined strokes in Compass Gold or Chalk, geometric and minimal (pen, book, monitor, waveform). The visual system treats whitespace and type as the primary content; imagery is decorative atmosphere, not explanatory.
Design notes
Agent Guide
primary action: no distinct CTA color ## Quick Color Reference - Canvas: #101010 - Primary text: #f3f3f3 - Muted text: #9c9c9c - Border: #212121 - Icon stroke: #6f6759 - Primary action (filled pill): #ffffff background with #101010 text ## Example Component Prompts 1. **Hero headline block**: Obsidian (#101010) background. Headline at 63px Aeonik weight 400, color #f3f3f3, letter-spacing -0.69px, line-height 1.05. Below it a filled white pill button (#ffffff fill, #101010 text, 9999px radius, 12px 24px padding, Aeonik 14px uppercase) labeled 'START NOW ↗'. 2. **Service grid cell**: Transparent background, 1px bottom border in #212121. Compass Gold (#6f6759) outlined icon at 32px top-left. Heading in Aeonik 14px weight 400 uppercase #f3f3f3, 16px margin-top. Body in Aeonik 14px #9c9c9c, 8px line-height increase. 3. **Status pill badge**: Background #1a1a1a, 1px #212121 border, 4px radius, 8px 14px padding. Pulse Green (#98ff38) 6px dot prefix. Text in Aeonik 12px uppercase #9c9c9c, letter-spacing 0.5px. 4. **Section divider**: Full-width 1px solid #212121 line, 0 margin top and bottom — the line IS the layout. 5. **Manifesto block**: Centered, max-width 600px. Title at 23px Aeonik weight 400 #f3f3f3. Body at 16px Aeonik weight 400 #9c9c9c, line-height 1.5. Ghost outline button below: transparent fill, 1px #ffffff border, 8px radius, #ffffff text, Aeonik 14px uppercase.
Similar brands
Resn
Same near-black canvas with large-weight-400 type and the world-is-our-canvas dot/illustration energy
Active Theory
Dark-mode studio site with oversized quiet headlines, minimal UI chrome, and editorial section spacing
Locomotive (studio)
Obsidian background, Aeonik-adjacent geometric sans, ghost-outline buttons, and the 'wireframe in light' visual philosophy
Pentagram
Editorial typography discipline — weight 400 at 63px, aggressive negative tracking, sections divided by hairline rules rather than color bands
Ueno
Dark agency site with single-color icon system, generous section gaps, and type as the dominant visual element
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
