# Design Reference - Hyperstudio
> Monochrome terminal with amber accents. The design feels like a precisely coded interface, where every element serves a distinct, functional purpose against a dark, featureless backdrop.

## Source
- Original site: https://hyperstudio.org
- Captured: 2026-04-11T16:37:41.665Z

## Tags
- dark mode
- monochrome
- high contrast
- minimalist
- tech-focused
- futuristic
- typographic
- precise
- command-line
- controlled accent

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Void | `#101010` | neutral | Primary page background, deepest dark surface. |
| Deep Space | `#080808` | neutral | Secondary background, slightly darker than Midnight Void, used for subtle depth. |
| Polar White | `#F3F3F3` | neutral | Primary text color, hero headlines, clear contrast against dark backgrounds. |
| Absolute Zero | `#FFFFFF` | neutral | Accent text and background for interactive elements like buttons, header text. |
| Ash Gray | `#949494` | neutral | Secondary text, subtle borders, slightly toned down from main text. |
| Dark Carbon | `#333333` | neutral | Border colors, muted backgrounds for secondary elements. |
| Slate | `#C1C1C1` | neutral | Subtle borders, outlines, dividers. |
| Light Gradients | `#B5B5B5` | neutral | Subtle background gradient for UI elements, providing a soft, almost imperceptible texture. |
| Amber Glow | `#E7C59A` | accent | Key accent color for interactive elements, 'NEW' tags, drawing attention in a restrained way appropriate for a tech brand. |
| Neon Green | `#00AC5C` | semantic | Small status indicators, 'spots left' tags, indicating positive status or availability. |

## Typography
- role: Primary typeface for all headlines, body text, and UI elements. Its confident, geometric forms convey technical modernity and clarity consistently across sizes.; sizes: 13px, 14px, 16px, 17px, 18px, 21px, 23px, 34px, 44px, 63px; family: Aeonik; weight: 400, 700; lineHeight: 0.95, 1.03, 1.05, 1.07, 1.11, 1.22, 1.28, 1.29, 1.34, 1.35, 1.38, 1.43, 2.69; substitute: Inter; letterSpacing: -0.011, -0.007
- role: Secondary typeface used for specific data points and code-like elements, adding a monospaced, technical contrast to Aeonik for specialized information. The tighter letter spacing enhances its code-like appearance.; sizes: 13px, 14px, 16px, 17px, 18px; family: Input; weight: 400; lineHeight: 1.20, 1.21, 1.25, 1.31, 1.48, 1.50, 1.54; substitute: IBM Plex Mono; letterSpacing: -0.037, -0.022

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "tags": "20px",
      "buttons": "8px",
      "default": "8px",
      "statusIcons": "99px"
    },
    "elementGap": "10px",
    "sectionGap": "64px",
    "cardPadding": "24px"
  },
  "radius": {
    "tags": "20px",
    "buttons": "8px",
    "default": "8px",
    "statusIcons": "99px"
  }
}
```

## Component Patterns
- name: Availability Status Pill + CTA Button Group
- name: Service Feature Cards Grid
- name: Why Hyperstudio Manifesto Block
- name: Primary Ghost Button; role: Call to action button for primary actions
- name: Secondary Ghost Button; role: Call to action button for secondary actions
- name: Small Status Pill Tag; role: Indicates status or limited availability
- name: Header Navigation Link; role: Navigation items in the primary header
- name: Header Navigation Tag; role: Highlighted new navigation items
- name: Chat Button; role: Persistent contact CTA in the header
- name: Service Feature Card; role: Used to highlight key service offerings
- name: Manifesto Button; role: Secondary call to action button, typically for more information.

## Do
- Prioritize high contrast between text and background, typically Polar White (#F3F3F3) on Midnight Void (#101010) or Absolute Zero (#FFFFFF) on Dark Carbon (#333333).
- Use Aeonik at size 63px, weight 700, and lineHeight 0.95 for primary display headlines to maintain a commanding yet compact presence.
- Employ Amber Glow (#E7C59A) exclusively for key attention-grabbing elements, such as 'NEW' labels or critical status indicators.
- Maintain a default border radius of 8px for most interactive elements and cards, using 99px only for circular or pill-shaped tags.
- Utilize Input font for any content that benefits from a monospace, data-like presentation, especially at -0.037em letter spacing for specific technical details.
- Structure layouts with ample section-gap (64px) to create a spacious, breathable feel between content blocks despite the dark theme.
- Employ Neon Green (#00AC5C) to denote positive status, availability, or success, ensuring it stands out as an unambiguous indicator.

## Don't
- Do not introduce additional vibrant colors; stick to Amber Glow (#E7C59A) and Neon Green (#00AC5C) as the only chromatic accents.
- Avoid using drop shadows for elevation; rely on varied shades of dark neutrals like Midnight Void (#101010) and Deep Space (#080808) for depth perception.
- Do not deviate from the specified tight line-heights for headlines, as they are crucial for the dense, impactful typographic style.
- Do not use generic system fonts; Aeonik and Input are essential to the brand's distinctive technical aesthetic.
- Avoid excessive rounding; maintain sharp or subtly rounded corners (8px) for most UI elements, reserving pill shapes for specific tags.
- Do not use full-width background images that break the defined dark background color palette; visual interest comes from typographic treatment and data visualization.