---
title: "Hyperstudio design system"
variant: extended
source: https://www.hyperstudio.org/
captured_at: 2026-10-12
theme: dark
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/hyperstudio-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hyperstudio · Design System

> Quiet, monochrome canvases for bold digital work

**Theme:** dark · **Industry:** agency · **Source:** https://www.hyperstudio.org/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hyperstudio pairs a near-black canvas and restrained typography with expansive client work imagery. The long-form homepage moves from a concise studio pitch through services and portfolio projects into process, studio rationale, and contact.

## North star

Keep the studio interface nearly black and typographically restrained, giving each client project image room to command attention.

## Overview

The page is anchored by a near-black canvas (#080808) that stays consistent across the long scroll, letting project imagery carry most of the variation. Off-white (#f3f3f3) headlines and muted grays establish a clear hierarchy without introducing bright section bands; faint charcoal borders separate portfolio frames and content areas. Aeonik is the primary voice: clean, rounded sans-serif headlines sit large and centered in the hero, then shift to left-aligned section headings and compact supporting copy. Input appears in small technical-style labels and navigation details, adding a subtle contrast in texture. The layout is spacious and restrained, with narrow centered content zones, generous gaps, and repeated project showcases that alternate large image-led moments with dark breathing room. Buttons use pale fills against the dark canvas, while warm beige accent (#e7c59a) is sparing. Keep gradients and other colors from the client work contained within imagery rather than treating them as studio brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#080808` | `--color-studio-black` | brand | Dominant page canvas and the uninterrupted background tying the long homepage together. |
| Soft Ash | `#989898` | `--color-soft-ash` | neutral | Muted supporting text, secondary descriptions, and low-emphasis copy. |
| Hairline Charcoal | `#212121` | `--color-hairline-charcoal` | neutral | Fine borders and portfolio or card dividers on the dark canvas. |
| Silver Gray | `#c1c1c1` | `--color-silver-gray` | neutral | Secondary text and subtle button or interface details. |
| Gallery White | `#f3f3f3` | `--color-gallery-white` | neutral | Primary headings, high-priority text, and bright interface labels. |
| Frosted Silver | `#d0d0d0` | `--color-frosted-silver` | neutral | Gradient and mockup tones; not a defining page surface color. |
| Card Black | `#101010` | `--color-card-black` | surface | Slightly lifted dark card backgrounds in studio explanation and content panels. |
| Deep Graphite | `#191919` | `--color-deep-graphite` | surface | Gradient or rendered content tone; not a major standalone page section. |
| Shadow Graphite | `#141414` | `--color-shadow-graphite` | surface | Subtle gradient transition within rendered interface or content treatment. |
| Pale Silver | `#dadada` | `--color-pale-silver` | neutral | Occasional supporting text and light details within interface or artwork. |
| Warm Sand | `#e7c59a` | `--color-warm-sand` | accent | Sparse warm accent in small details; avoid using it as a broad surface. |
| Muted Pewter | `#a3a3a3` | `--color-muted-pewter` | neutral | Occasional low-emphasis text detail. |
| Slate Charcoal | `#252525` | `--color-slate-charcoal` | surface | Subtle dark gradient tone and restrained panel or media transitions. |
| Night Slate | `#1d1d1d` | `--color-night-slate` | surface | Dark gradient transition, not a prominent independent section color. |
| Absolute Black | `#000000` | `--color-absolute-black` | neutral | Black details and media backgrounds, especially inside portfolio artwork. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Light button fills and occasional links; usually softened by the surrounding dark palette. |

### Semantic aliases

`--color-canvas` → `#080808` (Studio Black) · `--color-surface` → `#101010` (Card Black) · `--color-text` → `#f3f3f3` (Gallery White) · `--color-text-muted` → `#989898` (Soft Ash) · `--color-text-subtle` → `#c1c1c1` (Silver Gray) · `--color-border` → `#212121` (Hairline Charcoal) · `--color-accent` → `#e7c59a` (Warm Sand)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f3f3f3` | `#080808` | 18.05:1 | AAA |
| `#f3f3f3` | `#101010` | 17.15:1 | AAA |
| `#989898` | `#080808` | 6.94:1 | AA |
| `#989898` | `#101010` | 6.6:1 | AA |
| `#c1c1c1` | `#080808` | 11.13:1 | AAA |
| `#c1c1c1` | `#101010` | 10.57:1 | AAA |
| `#e7c59a` | `#080808` | 12.26:1 | AAA |
| `#e7c59a` | `#101010` | 11.64:1 | AAA |

### Gradients

- `linear-gradient(rgba(242, 242, 242, 0.85), rgba(66, 66, 66, 0.19) 85%, rgba(50, 50, 50, 0.13) 94%, rgba(16, 16, 16, 0))`
- `linear-gradient(rgb(37, 37, 37), rgb(29, 29, 29))`
- `linear-gradient(rgb(207, 207, 207), rgb(192, 192, 192))`
- `linear-gradient(rgb(181, 181, 181), rgb(228, 228, 228))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aeonik | `--font-body` | webfont | 400, 700 | Primary headlines, body copy, navigation, buttons, and links. | Inter |
| Input | `--font-input` | webfont | 400 | Small technical-style navigation and section eyebrow labels. | IBM Plex Mono |

- **Aeonik:** Mostly regular weight; large clean sentence-case headlines, compact navigation labels, and no conspicuous display case.
- **Input:** Use sparingly for compact uppercase labels and metadata to contrast with Aeonik’s rounded sans-serif.

### Type scale — Perfect Fourth (ratio ≈ 1.292, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 63px | 400 | 1.05 | -0.011em | — | Aeonik | Oversized hero headline and other prominent statement text. |
| h1 | 44px | 400 | 1.07 | -0.007em | — | Aeonik | Primary page or section headline, including the hero title. |
| h2 | 34px | 400 | 1.03 | 0 | — | Aeonik | Services, process, and studio-introduction section headings. |
| h3 | 23.5px | 400 | 1.07 | 0 | — | Aeonik | Service titles and prominent portfolio or process subheads. |
| h4 | 22.5px | 400 | 1.11 | 0 | — | Aeonik | Smaller supporting titles and card-level headings. |
| body | 17.5px | 400 | 1.35 | 0 | — | Aeonik | Main descriptive copy for services, process, and studio rationale. |
| caption | 16.5px | 400 | 1.28 | 0 | — | Aeonik | Project labels, supporting notes, and smaller content captions. |
| button | 16px | 400 | 1.38 | 0 | — | Aeonik | Primary and secondary action labels. |
| link | 16px | 400 | 1.38 | 0 | — | Aeonik | Navigation, inline actions, and contact links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 11, 14, 16, 19, 20, 23, 24, 25, 33, 35 px.
- Section rhythm 130px · element gap 10px · card padding 80px · max content width 850px.

The page uses a centered, spacious composition with a measured max content width of 850px. Navigation and the hero sit within a compact top frame; the hero headline is centered, while services and process content shift to left alignment. Service cards form a two-column grid, then the portfolio becomes a long sequence of framed, mostly single-column project showcases with occasional full-bleed media. Large vertical gaps separate major blocks, keeping overall density low despite the extended page length.

## Shape & elevation

- Radius: button `10px` · media `50%` · xs `8px` · sm `9px` · md `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface reads mostly flat: dark canvas, restrained card surfaces, and fine charcoal borders do the structural work. No measured shadows define the system. Pale CTA fills provide the clearest separation from the background; portfolio media sits in frames with subtle rules rather than raised, floating cards.

## Imagery

Portfolio media is the primary visual event: branded identity systems, websites, print pieces, and product or technology scenes appear in large framed showcases. Images mix photographic scenes, graphic identity work, and polished product renders. They may bring saturated blues, pale neutrals, or warm brand colors, but those colors belong to client artwork rather than the Hyperstudio interface. Keep imagery tightly framed and preserve its contrast against the near-black surroundings.

## Components

### Top navigation

Compact brand lockup with a fine separator, small service and portfolio links, and a pale rounded LET'S CHAT action.

### Hero pitch

Centered availability badge, large two-line headline, and paired START NOW and VIEW WORK actions above the first large visual.

### Service grid

Four dark service panels in a two-column grid, using small line icons, concise headings, and muted descriptions.

### Portfolio showcase

Tall, centered, image-led client project sequences with compact identity labels and thin dark framing.

### Process block

Two-column process section with a left-side headline and quote action, paired with numbered steps and concise explanations.

### Studio rationale

Dark inset content panel with centered heading, short explanatory copy, and a restrained manifesto link.

### Contact strip

Compact closing invitation with email context and a pale form CTA, followed by a small footer contact prompt.

### Measured component styles

- **Primary button** (“LET'S CHAT”): background #ffffff · text #f3f3f3 · radius 10px · padding 0px · 400 14px Aeonik
- **Link** (“SERVICES”): transparent background · text #f3f3f3 · radius 0px · padding 0px · 400 14px Aeonik
- **Card** (“Why Hyperstudio? We started Hyperstudio ”): background #101010 · text #333333 · radius 0px · padding 65px 95px 63px 95px · 400 14px Aeonik

## Do

- Use #080808 as the page-wide canvas.
- Set primary text in #f3f3f3 and secondary copy in measured grays.
- Let client portfolio images supply most of the visual variety.
- Separate content with thin #212121 rules rather than shadows.
- Keep hero copy centered and later service or process content left-aligned.
- Use pale buttons as clear, occasional action anchors.

## Don't

- Do not add bright section backgrounds to the studio interface.
- Do not treat colors from client artwork as brand accents.
- Do not crowd the page with dense copy or tight section spacing.
- Do not use heavy shadows or raised-card effects.
- Do not apply a display font or bold weight to every heading.
- Do not turn the sparse warm accent into a dominant color.

## Agent prompt

Build a new agency page in Hyperstudio’s restrained dark portfolio style. Use Studio Black (#080808) for the continuous canvas, Gallery White (#f3f3f3) for key headings, Soft Ash (#989898) for supporting copy, and Hairline Charcoal (#212121) for subtle separators. Keep client imagery as the main source of color, framed cleanly against dark negative space. Use Aeonik or Inter for the primary sans-serif and a restrained Input-like mono face for small technical labels. Center the hero and its paired actions; let content sections move into left-aligned layouts and sparse two-column grids. Favor generous measured spacing, slim borders, and flat surfaces over shadows. Use pale filled buttons sparingly and keep Warm Sand (#e7c59a) to tiny details. Preserve a calm, editorial rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and actions above a wide hero visual. | availability indicator, start project CTA, view work link | centered display type, dark canvas, paired buttons |
| 2 | other | Wide media area on the same near-black canvas. | visual transition | monochrome dotted graphic, full-width dark field |
| 3 | other | Left-aligned eyebrow, headline, and short introduction. | services context | compact section label, open dark layout |
| 4 | feature-grid | Two-column grid of four service summaries. | service overview, scan by category | line icons, thin dividers, muted descriptions |
| 5 | product-showcase | Centered project frame with image-led brand and website assets. | project browsing | compact project label, large media, dark frame |
| 6 | product-showcase | A centered single-project media panel. | portfolio exploration | large framed image, near-black surround |
| 7 | product-showcase | Tall, centered portfolio presentation. | portfolio exploration | project imagery, subtle frame rules |
| 8 | product-showcase | Single-column project imagery within a dark frame. | portfolio exploration | large image, quiet background |
| 9 | gallery | Wide, full-bleed portfolio media within the project sequence. | visual browsing | full-bleed imagery, minimal chrome |
| 10 | product-showcase | Centered project image with dark margins. | portfolio exploration | framed media, large negative space |
| 11 | product-showcase | Two-column image arrangement within a portfolio block. | compare project assets | paired imagery, dark frame |
| 12 | product-showcase | Centered single-column portfolio image. | portfolio exploration | large media, restrained framing |
| 13 | gallery | Wide full-bleed project media. | visual browsing | full-bleed imagery, minimal chrome |
| 14 | product-showcase | Single-column project image with broad dark surround. | portfolio exploration | framed imagery, thin separators |
| 15 | product-showcase | Centered vertical project presentation. | portfolio exploration | project artwork, dark negative space |
| 16 | product-showcase | Centered single-project media frame. | portfolio exploration | large image, quiet frame |
| 17 | product-showcase | Single-column project media between dark intervals. | portfolio exploration | framed image, low-contrast borders |
| 18 | gallery | Wide, full-bleed artwork in the portfolio sequence. | visual browsing | edge-to-edge media, dark transitions |
| 19 | product-showcase | Centered portfolio image with spacious margins. | portfolio exploration | large artwork, thin frame |
| 20 | product-showcase | One project image centered on the dark canvas. | portfolio exploration | dark surroundings, image-led layout |
| 21 | product-showcase | Centered single-column media presentation. | portfolio exploration | project imagery, spacious separation |
| 22 | how-it-works | Two columns: studio statement and quote action beside numbered steps. | four-step explanation, request a quote | numbered list, left-aligned heading, compact copy |
| 23 | other | Centered copy inside a subtle dark inset panel. | read manifesto | centered title, text panel, quiet link |
| 24 | contact | Compact contact invitation with a form CTA. | email contact, fill form | inline text and button, dark strip |
| 25 | footer | Minimal closing line centered beneath a wide visual area. | email us, DM on X | small muted text, dark background |

## Source CSS custom properties (selected)

```css
--radius: 0px;
--text: 60px;
--radiusservices: 5px;
--border: #3b3d45;
--background: #eeebe7;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hyperstudio-org