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

# Phantom Studios · Design System

> A stark monochrome frame for vivid creative work

**Theme:** dark · **Industry:** agency · **Source:** https://www.phantom.land/ · **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._

Phantom Studios presents an immersive, dark project gallery where a dense field of work fills the viewport. Monochrome navigation and fine dividers keep attention on the colorful project imagery.

## North star

Keep the interface nearly invisible: use a black canvas, restrained white controls and fine rules to let project imagery lead.

## Overview

The page uses near-total black as its canvas, letting the varied colors of client work provide nearly all visual contrast. White is reserved for prominent navigation, labels and calls to action; muted greys handle secondary information, while #333333 dividers quietly delineate the tightly packed project cells. Typography contrasts bold Helvetica Now headings and interface text with small uppercase Ballinger Mono metadata, creating a crisp studio-index feel. The gallery occupies almost the entire viewport and continues beyond the edges, with a subtle perspective that makes the project wall feel immersive rather than like a conventional card grid. Project images vary in color, subject and treatment, but their consistent rectangular placement gives the composition order. Overlay navigation floats above the work, including a pill-shaped contact action, a compact centered menu and a filter control. Spacious overall page bounds coexist with dense content inside the gallery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Black | `#000000` | `--color-gallery-black` | brand | Dominant page canvas and dark text for the white contact button. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary navigation, headings, project labels and the contact button surface. |
| Graphite Rule | `#333333` | `--color-graphite-rule` | semantic | Fine dividers between gallery areas and outlines around experience badges. |
| Muted Charcoal | `#4d4d4d` | `--color-muted-charcoal` | neutral | Low-emphasis navigation text against the black canvas. |
| Coal Panel | `#262626` | `--color-coal-panel` | surface | Subtle dark surface tone within text and interface areas. |
| Soft Ash | `#888888` | `--color-soft-ash` | surface | Grey filter control surface; also appears in supporting interface areas. |
| Slate Type | `#666666` | `--color-slate-type` | neutral | Occasional subdued heading text; not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#000000` (Gallery Black) · `--color-surface` → `#262626` (Coal Panel) · `--color-surface-2` → `#888888` (Soft Ash) · `--color-surface-3` → `#ffffff` (Studio White) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#000000` (Gallery Black) · `--color-text-subtle` → `#4d4d4d` (Muted Charcoal) · `--color-border` → `#333333` (Graphite Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#262626` | 15.13:1 | AAA |
| `#ffffff` | `#888888` | 3.54:1 | AA-large |
| `#000000` | `#262626` | 1.39:1 | fail |
| `#000000` | `#888888` | 5.92:1 | AA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#4d4d4d` | `#000000` | 2.48:1 | fail |
| `#4d4d4d` | `#262626` | 1.79:1 | fail |
| `#4d4d4d` | `#888888` | 2.38:1 | fail |
| `#4d4d4d` | `#ffffff` | 8.45:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ballinger-mono | `--font-mono` | webfont | 400 | Small uppercase navigation, project metadata, captions and category labels. | Space Mono |
| Helvetica Now | `--font-body` | webfont | 700, 500 | Display headings, project titles, body text and prominent buttons. | Inter |

- **ballinger-mono:** Compact mono lettering, regular weight, uppercase treatment and tight, technical label feel.
- **Helvetica Now:** Bold display and headings; medium-weight buttons; clean sans-serif forms with occasional capitalization.

### Type scale — Custom (ratio ≈ 1.764, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 0.93 | 0 | — | Helvetica Now | Large bold statements and prominent display headings. |
| h1 | 24px | 700 | normal | 0 | — | Helvetica Now | Primary page or section heading. |
| body | 18px | 700 | normal | 0 | capitalize | Helvetica Now | Prominent project and descriptive text. |
| caption | 11px | 400 | 1.1 | 0 | uppercase | ballinger-mono | Small uppercase project metadata and category labels. |
| button | 18px | 500 | 1.4 | 0 | capitalize | Helvetica Now | Contact and filter button labels. |
| nav | 11px | 400 | 1.1 | 0 | uppercase | ballinger-mono | Compact uppercase utility navigation and sound control labels. |
| code | 11px | 400 | 1.1 | 0 | uppercase | ballinger-mono | Technical-looking uppercase micro-labels and metadata. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 5, 7, 8, 10, 11, 12, 16, 17, 21, 23, 24, 32, 38, 40, 48 px.
- Section rhythm 144px · element gap 8px · card padding — · max content width 1392px.

A full-bleed project gallery dominates the viewport, arranged as a dense multi-column field with thin separators and project media mixed with compact labels. The measured page max width is 1392px, while the screenshot treatment reads as edge-to-edge and immersive. Header information overlays the top; floating controls sit near the lower edge, including a centered pill navigation. Alignment varies within project cells but the overall grid remains orderly. Section rhythm is spacious at page scale, contrasting with closely packed gallery content.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat: black canvas, white typography and fine graphite dividers establish structure without shadows. Overlay controls float above the gallery through position and contrast rather than pronounced elevation. Pill-shaped buttons and navigation surfaces provide the main layered UI, while project imagery supplies depth and visual variation.

## Imagery

A large, continuous portfolio wall combines campaign stills, product imagery, illustrations and graphic compositions. Each project retains its own saturated palette and visual character against the black interface. Media sits in rectangular frames, with some cropped or perspective-skewed in the immersive gallery view. The screenshots show project artwork rather than a single consistent photography treatment.

## Components

### Project gallery cells

Dense, media-led project entries arranged in a continuous grid, separated by fine #333333 rules and accompanied by compact metadata.

### Top utility header

Overlaid header combines logo, sound status, studio description, location and time details in small white or muted text.

### Contact CTA

White pill-shaped “Let's Talk” button with black, medium-weight Helvetica Now text.

### Bottom navigation

Floating rounded navigation groups Work, About and Careers near the bottom center; the selected item uses a white surface.

### Filter control

Grey pill-shaped Filter button with white text, positioned over the lower-right area of the gallery.

### Project metadata

Small uppercase Ballinger Mono labels identify categories and project information, with restrained contrast and outlined badges.

### Measured component styles

- **Primary button** (“Filter”): background #888888 · text #ffffff · radius 48px · padding 16px 21px · 500 17.92px Helvetica Now
- **Secondary button** (“Let's Talk”): background #ffffff · text #000000 · radius 48px · padding 16px 23px · 500 17.92px Helvetica Now · capitalize
- **Link** (“Casamigos World Cup 2026 Our partnership”): transparent background · text #ffffff · radius 0px · padding 3px 0px · 500 16px Helvetica Now
- **Badge** (“EXPERIENCE”): transparent background · text #ffffff · border 1px solid #333333 · radius 14px · padding 0px 16px · 400 10.88px ballinger-mono · uppercase
- **Navigation item** (“SOUND [OFF]”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px Helvetica Now

## Do

- Use #000000 as the dominant page canvas.
- Let project imagery supply the strongest color.
- Set small metadata in uppercase monospaced text.
- Use fine #333333 rules to divide gallery content.
- Keep navigation compact and floating above the work.
- Use white pill controls for high-priority actions.

## Don't

- Don't introduce bright interface accents unrelated to project artwork.
- Don't put heavy cards around every project.
- Don't use prominent shadows to separate layers.
- Don't let interface chrome overpower the gallery.
- Don't turn metadata into large display text.
- Don't force project images into a uniform color treatment.

## Agent prompt

Build a new Phantom Studios-style page as an immersive portfolio gallery. Use Gallery Black (#000000) for the canvas and Studio White (#ffffff) for primary text and key controls. Use Graphite Rule (#333333) for quiet dividers, Muted Charcoal (#4d4d4d) for subdued navigation, and Soft Ash (#888888) only for secondary controls. Create a dense, edge-to-edge project field with rectangular media and fine separators; preserve each project's own imagery and color. Pair bold Helvetica Now-style sans-serif headings with compact uppercase monospaced labels, using Inter and Space Mono as free substitutes. Overlay a minimal top utility header and floating pill controls, including a clear contact action. Keep the interface flat, avoid heavy shadows, and prioritize the artwork over UI decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Full-bleed, dense multi-column project gallery with top utility navigation and floating controls. | Filter projects, Switch gallery view, Navigate to studio pages | Edge-to-edge media grid, Fine dividers, Floating pill navigation, White contact CTA |

## Source CSS custom properties (selected)

```css
--color-secondary: #000000;
--color-primary: #ffffff;
```

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