Hyperstudio

---
version: alpha
name: Hyperstudio-design-analysis
description: "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."
colors:
  canvas: "#080808"
  surface: "#101010"
  surface-raised: "#202020"
  surface-strong: "#222222"
  ink: "#f3f3f3"
  body: "#f2f2f2"
  muted-strong: "#888888"
  muted-mid: "#686868"
  muted: "#333333"
  hairline: "#424242"
  neutral-a3: "#a3a3a3"
  on-light: "#222222"
  surface-light: "#dadada"
  surface-light-soft: "#e4e4e4"
  white: "#ffffff"
  black: "#000000"
  accent-sand: "#e7c59a"
  accent-slate: "#a5b7bc"
  accent-coral: "#f74f39"
typography:
  display:
    fontFamily: "Aeonik, Inter, sans-serif"
    fontSize: 63px
    fontWeight: 400
    lineHeight: 1.048
    letterSpacing: "-0.0111em"
  title:
    fontFamily: "Aeonik, Inter, sans-serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.068
    letterSpacing: "-0.0068em"
  subtitle:
    fontFamily: "Aeonik, Inter, sans-serif"
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.073
    letterSpacing: "0"
  body:
    fontFamily: "Aeonik, Inter, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.347
    letterSpacing: "0"
  mono-label:
    fontFamily: "Input, 'JetBrains Mono', ui-monospace, monospace"
    fontSize: 17.5px
    fontWeight: 400
    lineHeight: 1.314
    letterSpacing: "0"
  button:
    fontFamily: "Aeonik, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.429
    letterSpacing: "0"
rounded:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 20px
  pill: 99px
spacing:
  xxs: 6px
  xs: 8px
  sm: 11px
  md: 16px
  lg: 20px
  xl: 24px
components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
  nav-cta-pill:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-light}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
  badge-pill:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.body}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.muted}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 0px
  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
  section-label:
    backgroundColor: transparent
    textColor: "{colors.muted-strong}"
    typography: "{typography.mono-label}"
  service-item:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.mono-label}"
  portfolio-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.title}"
    rounded: "{rounded.lg}"
---

## Overview

Hyperstudio is a dark, gallery-first agency portfolio. The entire surface floats on a near-black canvas (`{colors.canvas}` — #080808), and the type does almost all the work: an off-white Aeonik display headline ("World-class branding and websites for startups.") sits centered above a dotted ASCII-style world map, with a monospaced "Input" utility voice carrying labels like `// SERVICES`, `2/5 SPOTS LEFT FOR JULY`, and `QUANTUM COMPUTING`.

The type voice splits into two clear roles. **Aeonik** (a soft geometric grotesque, weight 400 with slightly negative tracking) carries the display headlines, section heads, and body copy — it feels modern, calm, and confident without shouting. **Input** (a monospaced typeface) carries technical/utility labels — nav items, tags, service captions, and portfolio metadata — giving the system its "engineering studio" register.

The palette is essentially monochrome: layered near-blacks (`{colors.canvas}` #080808 → `{colors.surface}` #101010 → `{colors.surface-raised}` #202020 → `{colors.surface-strong}` #222222) against high-contrast off-white text (`{colors.ink}` #f3f3f3, `{colors.body}` #f2f2f2). Chroma is scarce and intentional — three accent hues (`{colors.accent-sand}` #e7c59a, `{colors.accent-slate}` #a5b7bc, `{colors.accent-coral}` #f74f39) appear only in small portfolio-brand marks, never on primary chrome.

**Key Characteristics:**
- Near-black canvas (`{colors.canvas}` — #080808) with layered dark surfaces for depth instead of shadow. No measured shadows — depth is done with subtle surface-value steps and hairlines.
- Aeonik display headlines (63px / 44px, weight 400, negative tracking) — the calm, soft-grotesque brand voice.
- Monospaced "Input" labels for all utility/technical text — nav, tags, service captions, brand metadata.
- The primary CTA ("START NOW") is a light pill on black (`{colors.surface-light}` — #dadada) with dark text; the secondary CTA ("VIEW WORK") is a dark raised chip. A single light button is the loudest chrome moment on the page.
- Thin hairline grids (`{colors.hairline}` — #424242) frame the services block and portfolio cells — the layout reads as a technical spec sheet.
- Full-bleed portfolio panels (Vortex Quantics, Mixo, Garage Crew) stack down a long-scroll page, each on `{colors.surface}` with its own small brand mark.
- Rounded scale is hierarchical: `{rounded.sm}` (8px) for buttons, `{rounded.lg}` (20px) for panels, `{rounded.pill}` (99px) for the nav CTA and status badge.

## Colors

### Accent
Chroma is deliberately rare — accents appear only inside portfolio brand marks and micro-signals, never on primary chrome.
- **Accent Sand** (`{colors.accent-sand}` — #e7c59a): A warm tan highlight — the largest-frequency accent, used on small brand/detail marks.
- **Accent Slate** (`{colors.accent-slate}` — #a5b7bc): A cool blue-gray, seen on the app-development portfolio panel (Mixo).
- **Accent Coral** (`{colors.accent-coral}` — #f74f39): A hot red-orange, used on the Web3-incubator portfolio mark (Garage Crew).

### Surface
- **Canvas** (`{colors.canvas}` — #080808): The page floor — a near-black that all content sits on.
- **Surface** (`{colors.surface}` — #101010): Portfolio panels and section wells.
- **Surface Raised** (`{colors.surface-raised}` — #202020): Chips, secondary buttons, status badges.
- **Surface Strong** (`{colors.surface-strong}` — #222222): The strongest dark elevation step / darker chip fills.
- **Surface Light** (`{colors.surface-light}` — #dadada): The primary CTA fill — the only light block on the page.
- **Surface Light Soft** (`{colors.surface-light-soft}` — #e4e4e4): A slightly softer light variant on light chip states.
- **Hairline** (`{colors.hairline}` — #424242): The 1px grid/divider tone on dark surfaces — frames the service grid and portfolio cells.
- **White / Black** (`{colors.white}` #ffffff / `{colors.black}` #000000): The dotted world-map hero renders as white dots; pure black appears in map artwork.

### Text
- **Ink** (`{colors.ink}` — #f3f3f3): Display headlines and max-contrast text.
- **Body** (`{colors.body}` — #f2f2f2): Running paragraph text.
- **Muted Strong** (`{colors.muted-strong}` — #888888): Secondary labels, section-label overline.
- **Muted Mid** (`{colors.muted-mid}` — #686868): Tertiary captions and de-emphasized metadata.
- **Muted** (`{colors.muted}` — #333333): The lowest-contrast text tone (measured on `body.color`) and the dark label color on the light CTA.
- **Neutral A3** (`{colors.neutral-a3}` — #a3a3a3): A light gray used in dividers/de-emphasized UI.
- **On Light** (`{colors.on-light}` — #222222): Dark text on the light nav CTA pill.

## Typography

### Font Family
The system pairs **Aeonik** (a soft geometric grotesque) for display + body with **Input** (a monospaced typeface) for utility labels. Aeonik runs at weight 400 across all sizes with slightly negative tracking on the display sizes; Input carries the technical voice — nav items, tags, and portfolio metadata rendered in a monospace register.

- Aeonik (display + body, 400 weight, -0.0068 to -0.0111em on display) — h1, h2, h4, paragraphs, buttons
- Input (mono, 400 weight) — nav links, `// SECTION` overlines, service captions, brand metadata

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display}` | 63px | 400 | 1.048 | -0.0111em | Homepage h1 ("World-class branding and websites for startups.") — Aeonik |
| `{typography.title}` | 44px | 400 | 1.068 | -0.0068em | Section heads ("Invest Today, Stand Out Tomorrow") — Aeonik |
| `{typography.subtitle}` | 23px | 400 | 1.073 | 0 | Sub-heads / smaller Aeonik headings (h4) |
| `{typography.body}` | 17px | 400 | 1.347 | 0 | Running paragraph copy — Aeonik |
| `{typography.mono-label}` | 17.5px | 400 | 1.314 | 0 | Nav links, section overlines, service captions, portfolio metadata — Input (mono) |
| `{typography.button}` | 14px | 400 | 1.429 | 0 | Button labels — Aeonik |

### Principles
Aeonik and Input never blur roles — Aeonik is the human, editorial voice; Input is the machine/utility voice. Even the small uppercase labels (`AWARD-WINNING LOGOS`, `QUANTUM COMPUTING`) sit in the mono face, which is what gives the studio its engineering register. Weight stays at 400 everywhere — the system never bolds; contrast comes from size and from the display/mono split, not from weight.

Note: the small mono labels read visually as uppercase-tracked captions, but the measured `letter-spacing` on the Input role is `normal` (0), so no tracked caption role is declared here — the uppercase effect comes from the copy itself and the monospace rhythm.

### Note on Font Substitutes
Both **Aeonik** and **Input** are commercial/licensed typefaces and are not shipped here. For Aeonik, substitute **Inter** (or **Space Grotesk**) at weight 400 with roughly -0.01em tracking on display sizes — it preserves the calm geometric-grotesque character. For Input, substitute **JetBrains Mono** or **IBM Plex Mono** at weight 400, or fall back to `ui-monospace, monospace`. The fallback stacks in the tokens reflect these substitutes.

## Layout

### Spacing System
- **Base unit:** effectively 4–5px, but the dominant measured step is `{spacing.lg}` (20px) — it appears far more than any other value (52 occurrences).
- **Tokens:** `{spacing.xxs}` 6px · `{spacing.xs}` 8px · `{spacing.sm}` 11px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px.
- **Primary rhythm:** `{spacing.lg}` (20px) is the workhorse gap — grid gutters, chip padding, and inline spacing all snap to it.
- **Small chrome:** `{spacing.xs}` (8px) / `{spacing.sm}` (11px) inside buttons, badges, and label rows.

### Grid & Container
- Centered content on the dark canvas; hero headline + CTA row is centered above the full-bleed world-map artwork.
- The services block is a 2-column hairline grid of service items (Award-Winning Logos, Timeless Branding, Websites That Convert, 3D & Animations).
- Portfolio is a single vertical stack of full-bleed `{component.portfolio-card}` panels, each labelled with a brand name + mono category caption.
- Larger section-scale spacing values were not reliably captured (see Known Gaps).

### Whitespace Philosophy
The page uses vast negative space of pure black between and around content — the darkness itself is the whitespace. Content clusters (hero, service grid, each portfolio panel) are tightly set at ~20px internal rhythm, then separated by large black gaps that let each panel read as its own gallery frame.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow (none measured) | Body sections, hero, nav |
| Surface step | `{colors.surface}` #101010 over `{colors.canvas}` #080808 | Portfolio panels, section wells |
| Raised step | `{colors.surface-raised}` #202020 / `{colors.surface-strong}` #222222 | Chips, badges, secondary buttons |
| Hairline frame | 1px `{colors.hairline}` #424242 | Service grid, portfolio cell borders |
| Light block | `{colors.surface-light}` #dadada | Primary CTA — inverts to light for maximum pop on black |

The elevation philosophy is **value-step, not shadow**. The analysis captured zero box-shadows — depth is expressed entirely through the layered near-black surface ramp (#080808 → #101010 → #202020 → #222222) and thin hairline borders. The single loudest "elevation" moment is the inverted light CTA against the black field.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Smallest inline chips / icon tiles |
| `{rounded.sm}` | 8px | Buttons, small controls |
| `{rounded.md}` | 10px | Mid controls (9–10px cluster) |
| `{rounded.lg}` | 20px | Portfolio panels, large cards |
| `{rounded.pill}` | 99px | Nav CTA pill, status badge |

A 9px radius was also measured and sits between `{rounded.sm}` and `{rounded.md}` (treat as `{rounded.md}`, derived). The scale is compact — most chrome is lightly rounded (8–10px), panels get the softer 20px, and only the nav CTA + badge go fully pill.

### Artwork Geometry
The hero world map is rendered as a field of small square/diamond white dots (an ASCII/halftone treatment) on pure black — a signature decorative device rather than a photographic image. Portfolio panels are rectangular with `{rounded.lg}` corners.

## Components

### Navigation

**`top-nav`** — Transparent bar over `{colors.canvas}` carrying the "Hyperstudio" wordmark at left, mono nav links (SERVICES, PORTFOLIO, PROCESS) in `{typography.mono-label}` (`{colors.ink}`), and the `{component.nav-cta-pill}` at right. A small "NEW" superscript tag sits on the PORTFOLIO item.

**`nav-cta-pill`** — The "LET'S CHAT" button. Light fill (`{colors.surface-light}`), dark text (`{colors.on-light}`), `{typography.mono-label}`, fully rounded `{rounded.pill}`. Carries a small avatar chip at its left edge.

### Buttons

**`button-primary`** — The "START NOW" CTA. Light fill (`{colors.surface-light}` — #dadada), dark label (`{colors.muted}` — #333333, the measured text color), `{typography.button}` (Aeonik 14px / 400), rounded `{rounded.sm}` (derived from screenshot; see Known Gaps). Carries a small up-right arrow glyph. This is the single loudest element on the black page.

**`button-secondary`** — The "VIEW WORK" CTA. Dark raised fill (`{colors.surface-raised}`), light label (`{colors.ink}`), `{typography.button}`, rounded `{rounded.sm}`. Carries a downward arrow glyph. Sits directly beside the primary.

### Badges & Labels

**`badge-pill`** — The "2/5 SPOTS LEFT FOR JULY" availability badge above the hero headline. Dark raised fill (`{colors.surface-raised}`), text `{colors.body}`, `{typography.mono-label}`, rounded `{rounded.pill}`. Prefixed by a small status dot (color not measured).

**`section-label`** — The "// SERVICES" overline. Transparent background, `{colors.muted-strong}` text, `{typography.mono-label}` — the mono voice tags each section like a code comment.

### Content

**`service-item`** — A cell in the services grid (e.g., "AWARD-WINNING LOGOS"). Transparent background, small leading icon, an uppercase mono title in `{typography.mono-label}` (`{colors.body}`), and a short Aeonik description in `{typography.body}` (`{colors.muted-mid}`). Cells are separated by `{colors.hairline}` dividers.

**`portfolio-card`** — A full-bleed portfolio panel (Vortex Quantics, Mixo, Garage Crew). Background `{colors.surface}`, rounded `{rounded.lg}`, holding the project artwork plus a brand mark and a mono category caption (e.g., "QUANTUM COMPUTING", "APP DEVELOPMENT", "WEB3 INCUBATOR"). Each panel's small brand mark is where accent hues (`{colors.accent-sand}`, `{colors.accent-slate}`, `{colors.accent-coral}`) appear.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.canvas}` — #080808) and build depth from the surface ramp, not shadows.
- Use Aeonik weight 400 for all headlines and body — let size and the display/mono split carry hierarchy.
- Reserve the mono "Input" face for utility/technical labels (nav, tags, `// SECTION` overlines, portfolio metadata).
- Keep the light `{component.button-primary}` as the single loudest chrome moment — one inverted light block per view.
- Confine accent hues to small portfolio brand marks. The system is monochrome at the chrome layer.
- Frame service and portfolio grids with `{colors.hairline}` (#424242) — the thin-line spec-sheet look is signature.
- Let large black gaps separate content clusters; the darkness is the whitespace.

### Don't
- Don't bold type to create emphasis — the system never leaves weight 400.
- Don't apply accent colors to buttons, nav, or badges — accents belong only to portfolio marks.
- Don't add drop shadows; no shadows were measured. Use surface value-steps instead.
- Don't put display copy in the mono face or utility labels in Aeonik — the two voices stay separate.
- Don't exceed `{rounded.lg}` (20px) on panels or use pill radius outside the nav CTA and status badge.
- Don't introduce a light-background section — the light block is a scarce, single-CTA signal.

## Responsive Behavior

The analysis captured a single landing page at desktop scale, so breakpoint behavior is inferred from the layout structure rather than measured.

### Breakpoints (inferred)

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Nav likely collapses; hero headline (63px) scales down; service grid 2-up → 1-up; portfolio panels stay 1-up full-bleed |
| Tablet | 768–1024px | Service grid stays 2-up; hero centered; CTA row wraps if needed |
| Desktop | > 1024px | Full centered hero over the world-map artwork; 2-up service grid; single-column portfolio stack |

### Touch Targets
- `{component.button-primary}` / `{component.button-secondary}` and `{component.nav-cta-pill}` are the primary tap targets; exact heights were not measured (button padding measured as 0px — see Known Gaps), so verify against a 44px minimum before shipping.

### Collapsing Strategy
- Service grid reduces columns (2 → 1) rather than shrinking type.
- Portfolio panels are already full-bleed single-column and should carry down unchanged.
- The dotted world-map hero should crop/scale rather than reflow.

## Iteration Guide

1. Focus on ONE component at a time and reference its YAML key directly (`{component.portfolio-card}`, `{component.button-primary}`).
2. Variants (`-active`, `-disabled`) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline a hex in a component.
4. Never document hover; default + active/pressed only.
5. Keep the type discipline: Aeonik 400 for editorial, Input mono for utility. Bigger before bolder.
6. Depth is value-step + hairline, never shadow.
7. The light CTA is the only light block — don't multiply it.

## Known Gaps

- Only the landing page was captured; interior pages (PROCESS, full PORTFOLIO, contact/"Let's chat") are out of scope.
- The measured `button-primary` returned `color: #333333`, `radius: 0px`, `padding: 0px` — this almost certainly captured an inner text node, not the visible pill. Button fill (`{colors.surface-light}`), radius (`{rounded.sm}`), and padding are documented from screenshot ground-truth (derived) and should be re-measured on the styled element.
- **Aeonik** and **Input** are licensed/commercial typefaces (not present in `fonts_licensed`, but both are non-free); open-source substitutes are documented in the Typography section and are what actually ship here.
- The status-dot color on the "2/5 SPOTS LEFT" badge (a small green in the screenshot) was not captured in the color set.
- No box-shadows were measured; if the live site uses subtle glows/shadows they are not represented here.
- Section-scale vertical spacing (the large black gaps between panels) was not captured — the spacing scale tops out at 24px; larger rhythm values are unknown.
- Exact button/nav heights and touch-target sizes were not measured.
- Animation/transition timings (map reveal, panel scroll effects) are not in scope.

<!-- Documented by Duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/hyperstudio/design-md -->