# Airstudios · Design system migration spec

> Source: https://airstudios.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as an excellent example of how high-end creative studios use bold colors, minimalist typography, and generative art to create a unique and memorable brand identity.

## 1. Identity DNA

Airstudios presents itself as a digital recording studio, where the control room is the browser and every interface element is a channel in the mix. The design system is a high-fidelity signal path, balancing vibrant primary tones with the disciplined restraint of a professional session. It is a space where the creative energy of sound is rendered visible through light, geometric precision.

**One-liner:** A bold, artistic website for a professional recording studio
**Keywords:** recording studio · music · creative · sound
**Analogy:** A high-end recording studio's digital presence

## 2. Color

The color system is defined by a single, dominant note: a vibrant coral pink that acts as the primary acoustic canvas. Supporting tones like a dark olive provide the necessary counterpoint, ensuring the composition remains balanced and not overwhelmed.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FA516A` | main background |
| `--bg-quiet` | `#4A4A44` | quiet area |
| `--ink` | `#1A1B1B` | body text |
| `--line` | `rgba(26,27,27,1.0)` | divider |

**Color principle:** Vibrant primary backgrounds with dark text for high contrast

The governing principle is one of stark contrast and singular focus, where a vibrant primary can command the space when given ample room.

## 3. Typography

Typographic voice is delivered almost exclusively through a light-weight grotesque sans-serif, specifically Akzidenz-Grotesk. The choice rejects decorative serifs and heavy weights, favoring the clean, functional tone of a studio's technical manual or equipment labels.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 300 | 0px | Logo |
| body | 14px | 1.14 | 300 | 0px | Small text and navigation |

**Type rules:**
- Light weight (300) is heavily used
- Uppercase text for navigation and emphasis

## 4. Spacing

Spacing follows a tight, efficient rhythm, mirroring the compact layout of a soundboard where elements are precisely placed for immediate access.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent padding and margins

## 5. Surfaces

Surfaces are rendered with absolute flatness, devoid of shadows or gradients. Structure is communicated through the sparing use of thin, 1px solid lines, much like the clean routing on a patch bay.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid lines used sparingly for structure

## 6. Layout

The layout skeleton centers its content, establishing a clear focal point akin to a microphone's sweet spot. This is anchored by a columnar footer, providing a structured, low-end foundation for the composition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered layout with footer organized in columns

## 7. Motion & Interaction

Motion philosophy treats the interface as a living signal, with smooth transitions applied to all elements for seamless state changes. The hero's generative animation operates as a continuous, abstract performance, setting the artistic tone from the outset.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Generative animation for the hero graphic
  - Smooth background color transitions

- **Hover:** Subtle changes
- **Click:** Immediate response
- **Transition:** All elements have transitions applied
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is professional and artistic, with headlines that are minimalist and bold in their clarity. The tone is direct and functional, avoiding embellishment to let the work and the studio's aesthetic speak.

- **Tone:** Professional and artistic
- **Headline style:** Minimalist and bold
- **CTA style:** Understated and functional
- **Avoid:** Clutter / Bright primary colors without balance / Heavy fonts

### Don'ts
- ❌ Don't use heavy font weights — screenshot shows light weight (300) used almost exclusively
- ❌ Don't use complex drop shadows — screenshot shows flat, clean surfaces
- ❌ Don't use rounded corners on buttons or cards — screenshot shows sharp, straight edges
- ❌ Don't use center-aligned text for body copy — screenshot shows left-aligned text
- ❌ Don't use excessive padding — screenshot shows tight, efficient spacing
- ❌ Don't use serif fonts — screenshot shows a consistent use of grotesque sans-serif

The system deliberately avoids heavy font weights, complex shadows, and rounded geometry, rejecting visual noise in favor of a sharp, clean, and airy composition.

## System Prompt (paste into AI tool)

```
Airstudios is a high-end recording studio website that uses a bold, vibrant aesthetic. The primary background color is a coral pink (#FA516A), with a dark olive (#4A4A44) used for a mobile or alternate state. The text color is a very dark gray/black (#1A1B1B). The typography is a light-weight (300) grotesque sans-serif (identified as Akzidenz-Grotesk). The site heavily features generative, abstract line art as a focal point. Key critical donts: 1) Do not use heavy or bold font weights, as the design relies on light, airy typography. 2) Do not add rounded corners to containers or buttons; the aesthetic is sharp and geometric. 3) Do not use complex shadows or gradients; keep surfaces flat and clean.
```