CURATED · OPEN · FREE

Airstudios

A bold, artistic website for a professional recording studio

EditorialExperimentalStudioTypographyPhotographic
Airstudios screenshot
↓ Download design system (3 MB)Open in OpenDesign

Visit: https://airstudios.com

📦 Browse pack contents →

01

Identity DNA

recording studiomusiccreativesound

A high-end recording studio's digital presence

02

Color

#1A1B1BInk
#FA516ABG
#4A4A44BG quiet
rgba(26,27,27,1.0)Line

Vibrant primary backgrounds with dark text for high contrast

03

Typography

grotesque-sans

Light weight (300) is heavily used · Uppercase text for navigation and emphasis

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Consistent padding and margins

05

Surfaces

sm · 0px
md · 0px
lg · 0px
pill · 999px

1px solid lines used sparingly for structure

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered layout with footer organized in columns

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

Generative animation for the hero graphic · Smooth background color transitions

Subtle changes · Immediate response

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko