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

# Yung Studio · Design System

> Quiet black canvas, vivid work, confident type

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

Yung Studio’s homepage pairs a nearly all-black canvas with concise white typography and vivid, oversized project imagery. Its editorial portfolio feed gives the work room to speak, using select colored cards as restrained accents.

## North star

Keep the canvas black and typography restrained so colorful project media, not interface chrome, commands attention.

## Overview

The page is anchored by a pure black (#000000) canvas, with white (#ffffff) type and fine outlines establishing a crisp, high-contrast frame. The opening statement is large but restrained, aligned to the left; compact navigation sits above it, and a small text link provides the only immediate action. The portfolio feed shifts visual emphasis to media: a broad white project card sits beside a tall, pale-gold (#d4c98f) editorial card, while a vivid blue (#6083ff) card appears elsewhere as a deliberate accent. PolySans carries the headings, navigation, and body copy with clean, unembellished shapes; PolySans Mono is reserved for tiny uppercase code-like labels. The page has a compact, controlled rhythm, but its long black intervals make the featured projects feel isolated and deliberate. Rounded card corners soften the otherwise square, gallery-like composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Dominant page canvas and negative space; also carries dark text on the white project card. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary text, navigation outlines, hairlines, and the surface of a featured project card. |
| Electric Blue | `#6083ff` | `--color-electric-blue` | accent | A vivid project-card surface; an accent within the portfolio feed, not the main page background. |
| Soft Silver | `#c4c4c4` | `--color-soft-silver` | surface | Muted card and text tone; secondary to the black-and-white interface. |
| Muted Gold | `#d4c98f` | `--color-muted-gold` | accent | Pale-gold editorial project-card surface and occasional heading accent. |
| Signal Green | `#00d57b` | `--color-signal-green` | accent | A limited accent observed in project-card content, not a defining interface color. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#d4c98f` (Muted Gold) · `--color-surface-2` → `#c4c4c4` (Soft Silver) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Studio Black) · `--color-text-subtle` → `#c4c4c4` (Soft Silver) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#6083ff` (Electric Blue) · `--color-accent-2` → `#d4c98f` (Muted Gold) · `--color-accent-3` → `#00d57b` (Signal Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#d4c98f` | 1.67:1 | fail |
| `#ffffff` | `#c4c4c4` | 1.74:1 | fail |
| `#000000` | `#d4c98f` | 12.55:1 | AAA |
| `#000000` | `#c4c4c4` | 12.04:1 | AAA |
| `#c4c4c4` | `#000000` | 12.04:1 | AAA |
| `#c4c4c4` | `#d4c98f` | 1.04:1 | fail |
| `#6083ff` | `#000000` | 6.19:1 | AA |
| `#6083ff` | `#d4c98f` | 2.03:1 | fail |
| `#6083ff` | `#c4c4c4` | 1.95:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __polySans_c5b537 | `--font-body` | webfont | 400, 600 | Display, headings, body, navigation, links, and card copy | Inter |
| __polySansMono_2d6016 | `--font-mono` | webfont | 400 | Small code-like labels | IBM Plex Mono |

- **__polySans_c5b537:** Clean sans-serif with regular and semibold weights; navigation is uppercase, while most text keeps natural casing.
- **__polySansMono_2d6016:** Regular monospace used for compact uppercase micro-labels.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.1 | 0 | — | __polySans_c5b537 | Large introductory or statement headlines. |
| h1 | 40px | 400 | 1.1 | 0 | — | __polySans_c5b537 | Primary page and major section headings. |
| h2 | 28px | 400 | 1.3 | 0 | — | __polySans_c5b537 | Secondary section headings and feature titles. |
| h3 | 24px | 600 | 1.33 | 0 | — | __polySans_c5b537 | Emphasized card or subsection headings. |
| body | 18px | 400 | 1.56 | 0 | — | __polySans_c5b537 | Project descriptions and supporting editorial copy. |
| caption | 16px | 400 | 1.5 | 0 | — | __polySans_c5b537 | Dates, metadata, and compact supporting labels. |
| nav | 12px | 600 | 1 | 0 | uppercase | __polySans_c5b537 | Small uppercase labels in the primary navigation. |
| link | 16px | 400 | 1.5 | 0 | — | __polySans_c5b537 | Text actions such as About Us and Contact Us. |
| code | 10px | 400 | 1 | 0 | uppercase | __polySansMono_2d6016 | Tiny uppercase monospace project or category labels. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 7, 8, 9, 10, 12, 13, 16, 20, 32, 36, 40 px.
- Section rhythm 36px · element gap 10px · card padding 16px · max content width 1368px.

Use a dark, nearly full-bleed canvas with content aligned to the left and a measured maximum width of 1368px. The header is compact and spans the upper area; navigation and outlined studio/contact controls sit opposite the wordmark. The introduction is short, followed by a portfolio feed with asymmetrical media cards. Keep sections separated by generous black negative space rather than visible bands. The overall density is compact within individual cards, while the page rhythm alternates concise content with large open stretches.

## Shape & elevation

- Radius: button `10px` · card `10px` · nav `6px` · xs `6px` · sm `8px` · md `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is largely flat, with no measured shadows or gradients. Use fine white outlines for navigation controls and a subtle horizontal hairline near the footer. Layer card copy directly over or beneath project media as shown, using rounded corners to distinguish image-led surfaces from the black canvas.

## Imagery

Project imagery is the main color source: vivid, varied photographic and motion-led work appears inside rounded cards. The lead skin-science image is a wide crop, paired with a taller audiovisual project card. Keep media framed cleanly and allow its own colors and graphics to remain prominent; do not add decorative illustration to the surrounding black interface.

## Components

### Header navigation

White wordmark and compact uppercase navigation sit on black; outlined Studio and Contact controls use white strokes and rounded corners.

### Intro statement

A left-aligned, multi-line white headline is followed by a small About Us link with an arrow.

### Featured project card

A broad rounded media card uses a white caption panel with black title and supporting copy.

### Editorial project card

A tall media-led card uses a pale-gold (#d4c98f) text surface, dark copy, and compact date/category metadata.

### Sound control

An outlined dark control overlays project media, with uppercase ENABLE SOUND text.

### Footer

A compact navigation and copyright area returns to black, with a thin horizontal divider and small links.

### Measured component styles

- **Primary button** (“STUDIO”): transparent background · text #ffffff · border 1px solid #ffffff · radius 10px · padding 19.6px 20px · 600 12px __polySans_c5b537 · uppercase
- **Link** (“About Us”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px __polySans_c5b537
- **Card** (“Outer Bio BRAND Making the invisible sig”): background #ffffff · text #000000 · radius 10px · padding 16px · 400 16px __polySans_c5b537
- **Navigation item** (“Yung Studio LATEST LAUNCHED UPCOMING R&D”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px __polySans_c5b537

## Do

- Use #000000 as the dominant canvas.
- Keep primary interface text white and high contrast.
- Let project imagery supply most visual variety.
- Use asymmetrical card sizes in the work feed.
- Keep navigation compact and uppercase.
- Reserve bright colors for project surfaces and media.

## Don't

- Do not fill the page with colored section bands.
- Do not add gradients or decorative shadows.
- Do not make every project card the same shape.
- Do not crowd the introductory headline with controls.
- Do not treat illustration colors as global interface colors.
- Do not add oversized, colorful button styling.

## Agent prompt

Build a new Yung Studio-style page on a #000000 canvas, using white (#ffffff) for clear typography, navigation, and hairline outlines. Keep the header compact and the introductory statement left-aligned, then let large project imagery drive the page. Arrange portfolio cards asymmetrically, with a broad lead card and selected contrasting surfaces such as Muted Gold (#d4c98f) or Electric Blue (#6083ff); use Signal Green (#00d57b) only when supported by the project media. Set most interface text in a clean sans such as Inter, with a monospace face for tiny uppercase metadata. Keep card corners softly rounded, shadows absent, and content rhythm spacious through black negative space. Use concise copy, restrained controls, and a thin footer divider. Avoid gradients, excess decoration, and uniform card layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact header above a left-aligned studio statement and link on black. | Primary navigation, About link | White type, Outlined controls, Black canvas |
| 2 | content-feed | Asymmetrical portfolio cards with a broad lead project beside a tall editorial project. | Project links, Media playback control, Category and date metadata | Rounded media cards, White caption surface, Pale-gold project surface |
| 3 | stats | Single-column section of selected work and impact metrics on the dark canvas. | Project highlights, Press link | Large section heading, Compact project labels, Numerical proof points |
| 4 | cta | Sparse, left-aligned closing headline and contact link on black. | Contact action | Large white heading, Minimal text link |
| 5 | footer | Compact multi-column navigation and legal information on black, separated by a fine rule. | Section navigation, Privacy link | White hairline, Small text, Black background |

## Source CSS custom properties (selected)

```css
--background: #0a0a0a;
--foreground: #ededed;
--theme-bg: #000;
--theme-fg: #fff;
```

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