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

# Studio HEED · Design System

> A quiet dark canvas for a vivid portfolio

**Theme:** dark · **Industry:** design · **Source:** https://www.studioheed.com/ · **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._

Studio HEED pairs a restrained dark studio introduction with a wide, horizontally arranged portfolio. Compact white typography and muted media let each project carry its own visual character.

## North star

Keep the interface quiet and compact so the project imagery, not decorative UI, carries the page.

## Overview

The page uses a nearly black canvas as a quiet frame for a horizontally arranged portfolio. White is reserved for compact navigation, contact details, and project labels, while the opening studio description appears in a softer gray. Portfolio media introduces restrained beige and pale green alongside deep blue and black; these are project-specific colors, not a broader interface palette. Suisse Intl appears in a consistent semibold weight, with small navigation and caption text supporting the work rather than competing with it. The layout is intentionally asymmetric: a compact text block sits near the upper left, contact links align at the upper right, and a broad band of project tiles runs below. Generous dark negative space separates the introduction from the imagery. Media corners are subtly rounded, while labels sit directly beneath each tile. The overall effect is an editorial portfolio that keeps interface chrome minimal and gives the showcased work the strongest visual presence.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Navigation, contact links, and project labels against the dark canvas. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Black canvas areas and dark gaps within the portfolio presentation. |
| Soft Stone | `#c2c1bf` | `--color-soft-stone` | surface | Inverse surface measured in the palette; pale project artwork appears in the portfolio. |
| Studio Charcoal | `#161616` | `--color-studio-charcoal` | surface | Dominant page canvas and dark section background. |
| Deep Navy | `#00174f` | `--color-deep-navy` | accent | Blue surface visible in portfolio media; treat as project artwork, not a general UI accent. |

### Semantic aliases

`--color-canvas` → `#000000` (Pure Black) · `--color-surface` → `#c2c1bf` (Soft Stone) · `--color-surface-2` → `#161616` (Studio Charcoal) · `--color-surface-3` → `#00174f` (Deep Navy) · `--color-text` → `#ffffff` (Studio White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#c2c1bf` | 1.8:1 | fail |
| `#ffffff` | `#161616` | 18.1:1 | AAA |
| `#ffffff` | `#00174f` | 17:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 600 | Navigation, introduction, contact information, and project captions. | Inter |

- **Suisse Intl:** Semibold throughout; compact lowercase-forward text with no measured tracking or uppercase treatment.

### Type scale — Major Third (ratio ≈ 1.25, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 14px | 600 | 1.4 | 0 | — | Suisse Intl | Studio introduction and supporting copy. |
| caption | 12px | 600 | 1.4 | 0 | — | Suisse Intl | Project names and category labels beneath portfolio media. |
| nav | 12px | 600 | 1.4 | 0 | — | Suisse Intl | Studio name, Work and Info links, and contact navigation. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 10, 14, 17, 20, 54 px.
- Section rhythm 54px · element gap 14px · card padding — · max content width —.

Use a broad, dark canvas with a compact introduction aligned toward the upper left and contact details aligned toward the upper right. The portfolio forms a wide horizontal sequence of differently sized media tiles, with captions directly below. Preserve the strong asymmetry and substantial negative space between the top information and project band. The measured grid has 12 columns, but no maximum content width was captured; follow the screenshot’s expansive, edge-spanning composition rather than inventing a fixed width.

## Shape & elevation

- Radius: media `5px` · xs `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The page is visually flat: no shadows were measured, and the dark canvas provides separation through contrast and open space. Keep navigation and captions unboxed. Media has a subtle measured corner radius, while project bands and image edges should not gain invented borders or layered card treatments.

## Imagery

The portfolio is media-led, combining project imagery, video, graphic artwork, and occasional illustration. Present items as a horizontally flowing row of rectangular tiles with restrained rounding and varied visual content. Keep project-specific pale neutrals, green, blue, and black confined to the artwork; avoid applying them as global interface decoration.

## Components

### Top navigation

Compact white Suisse Intl semibold links for the studio identity and Work, Info navigation, positioned at the upper left.

### Studio introduction

Short, muted-gray statement beneath the top-left navigation; keep it visually secondary to the portfolio.

### Contact block

White email, phone, social links, and language options grouped at the upper right in compact stacked text.

### Portfolio media tile

Rectangular, subtly rounded project media tile; widths and imagery vary across the horizontal sequence.

### Project caption

White project name followed by a muted category label directly below each media tile.

### Measured component styles

- **Link** (“Maneken App Brand Identity”): transparent background · text #ffffff · radius 0px · padding 0px · 600 0px Suisse Intl
- **Navigation item** (“Studio HEED Work, Info”): transparent background · text #ffffff · radius 0px · padding 0px · 600 12px Suisse Intl

## Do

- Use Studio Charcoal #161616 as the dominant canvas.
- Keep interface text compact and semibold in Suisse Intl or a close substitute.
- Align studio details left and contact information right.
- Give portfolio media more visual weight than the surrounding interface.
- Place project names and categories directly below their imagery.
- Keep artwork-specific colors within their respective project tiles.

## Don't

- Do not add gradients or decorative shadows.
- Do not turn project-specific colors into global interface accents.
- Do not add prominent button treatments absent from the reference.
- Do not center the entire layout or force symmetrical columns.
- Do not crowd the media with extra labels or interface chrome.
- Do not invent borders, spacing values, or a fixed maximum width.

## Agent prompt

Build a new page in the Studio HEED visual style: a restrained, media-led design studio portfolio on Studio Charcoal #161616, with a compact upper information area and a broad sequence of project tiles. Use Studio White #ffffff for navigation, contact details, and project names; make introductory copy quieter than the navigation. Set all text in a Suisse Intl-like semibold sans serif, with small, concise labels. Keep the composition asymmetric, leaving substantial dark negative space between the introduction and imagery. Use varied project artwork in rectangular tiles with subtle rounding and captions immediately beneath. Soft Stone #c2c1bf and Deep Navy #00174f may appear inside project artwork, not as recurring UI accents. Avoid shadows, gradients, heavy borders, oversized controls, and ornamental effects. Let the showcased work define each tile’s color and character.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Compact introduction and contacts above a wide, horizontally arranged portfolio gallery. | studio navigation, contact links, project browsing | dark canvas, asymmetric header, media tiles, caption labels |

## Source CSS custom properties (selected)

```css
--ease-linear: cubic-bezier(0.25,0.25,0.75,0.75);
--ease-in-sine: cubic-bezier(0.47,0,0.745,0.715);
--ease-out-sine: cubic-bezier(0.39,0.575,0.565,1);
--ease-in-out-sine: cubic-bezier(0.445,0.05,0.55,0.95);
--ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-out-expo: cubic-bezier(0.19,1,0.22,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
--ease-in-back: cubic-bezier(0.6,-0.28,0.735,0.045);
--ease-out-back: cubic-bezier(0.175,0.885,0.32,1.275);
--ease-in-out-back: cubic-bezier(0.68,-0.55,0.265,1.55);
--gap: 1rem;
--font: 600 1.2rem/1.4 "Suisse Intl";
--font-copy: 600 1.4rem/1.4 "Suisse Intl";
--font-headline: 600 3.2rem/1.2 "Suisse Intl";
--radius: 0.5rem;
--color-black: #161616;
--color-white: #fff;
--color-sand: #c6b9a8;
--color-brown: #afa291;
--bg-color: #161616;
--text-color: #ffffff;
--transition-text: 0.5s transform cubic-bezier(0.215,0.61,0.355,1),0.5s opacity cubic-bezier(0.215,0.61,0.355,1);
```

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