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

# OPX Studio · Design System

> Quiet black canvas, confident type, expressive work.

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

OPX Studio presents a long-form project portfolio on a nearly black canvas, led by oversized white typography and varied project imagery. Its restrained interface keeps attention on the work, using subtle navigation and compact outlined case-study links.

## North star

Keep the interface nearly black and typographically confident, letting unevenly placed project imagery provide the page’s colour and rhythm.

## Overview

The page is built around a near-black foundation: #020202 defines the canvas and #000000 appears across section and project areas, with the slight shift helping broad layouts stay visually quiet rather than flatly uniform. Bright #ffffff is reserved for the central statement, project names, links, and the oversized closing wordmark. #9b9b9b softens secondary navigation and contact details. OPX-Medium gives headlines and display text a distinctive, rounded geometric voice; Untitled handles compact supporting copy and link labels. A spacious opening statement gives way to an intentionally irregular portfolio sequence: image blocks vary in size and horizontal position, while generous black intervals separate projects. Photography, screen mockups, and vivid project artwork retain their own colours inside the otherwise monochrome frame. Case-study links are small outlined pills, providing a consistent action without turning the portfolio into a conventional card grid.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary display and project text, case-study links, and occasional light image backgrounds. |
| Canvas Black | `#020202` | `--color-canvas-black` | surface | Measured page canvas and dark section background; establishes the dominant, low-glare field. |
| Deep Black | `#000000` | `--color-deep-black` | surface | Project and section backgrounds, including the portfolio’s broad black areas. |
| Soft Graphite | `#9b9b9b` | `--color-soft-graphite` | semantic | Muted supporting links and secondary text, including contact details. |

### Semantic aliases

`--color-canvas` → `#020202` (Canvas Black) · `--color-surface` → `#000000` (Deep Black) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#9b9b9b` (Soft Graphite) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#020202` | 20.75:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#9b9b9b` | `#020202` | 7.46:1 | AAA |
| `#9b9b9b` | `#000000` | 7.56:1 | AAA |
| `#9b9b9b` | `#ffffff` | 2.78:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OPX-Medium | `--font-display` | webfont | 400 | Display headings, navigation, project labels, and the closing wordmark. | Space Grotesk |
| Untitled | `--font-body` | system | 500 | Body copy and compact case-study link text. | Inter |

- **OPX-Medium:** Use the measured regular weight; oversized sentence-case statements and navigation, with compact project labels.
- **Untitled:** Use a medium sans-serif voice for small supporting copy; keep labels sentence case and legible.

### Type scale — Perfect Fifth (ratio ≈ 1.513, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 111px | 400 | 1.07 | 0 | — | OPX-Medium | Oversized closing wordmark and prominent display moments. |
| h1 | 80px | 400 | 1.21 | 0 | — | OPX-Medium | Large introductory statement near the top of the page. |
| h2 | 50px | 400 | 1 | 0 | — | OPX-Medium | Major section or editorial portfolio headings. |
| h3 | 35px | 400 | 1.29 | 0 | — | OPX-Medium | Project-group headings and prominent project titles. |
| h4 | 26px | 400 | 1.38 | 0 | — | OPX-Medium | Individual project names and smaller content headings. |
| body | 14px | 500 | 1.67 | 0 | — | Untitled | Compact descriptions, footer details, and supporting copy. |
| nav | 50px | 400 | 1 | 0 | — | OPX-Medium | Large, quiet top-level Projects and Studio navigation. |
| link | 14px | 500 | 1.67 | 0 | — | Untitled | Small View case study labels and inline actions. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 7, 15, 20, 21, 30, 50, 80, 99, 100, 150, 200 px.
- Section rhythm 50px · element gap — · card padding — · max content width 1340px.

The measured page max width is 1340px, with the canvas extending across the viewport. A spacious introductory statement sits above the portfolio; project media then follows an asymmetric, staggered arrangement rather than a rigid repeated card grid. Images alternate between left and right positions and vary in apparent scale. Large black gaps create a comfortable, editorial rhythm. Footer details use compact columns, followed by a broad wordmark.

## Shape & elevation

- Radius: link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The page is predominantly flat: no measured shadows or gradients. Separate content through black negative space and image boundaries rather than raised cards. Case-study links use a fine white outline and pill-shaped ends; project image areas remain simple rectangular frames.

## Imagery

Project visuals mix photographic scenes, device and website mockups, brand artwork, and video-like portfolio imagery. Keep each asset in its own rectangular frame and preserve its original colour; vivid colours belong to the project work rather than the site chrome. Use varied image sizes and off-center placement, with minimal surrounding decoration.

## Components

### Top navigation

Large, widely separated Projects and Studio links sit at opposite sides of the dark canvas; render quietly in muted tones.

### Intro statement

A prominent white, two-line brand statement in OPX-Medium sits centrally above the project sequence.

### Portfolio project

Combine a project image with a compact white title and a small outlined View case study link; vary image size and alignment between entries.

### Case-study link

White Untitled text inside a thin outlined pill; measured label uses 14px type and 7px 30px 7px 30px padding.

### Footer information

Arrange studio address, project enquiries and careers, and social details in compact columns using white and muted grey text.

### Closing wordmark

Set OPX Studio in very large white OPX-Medium lettering across the bottom of the dark page.

### Measured component styles

- **Link** (“View case study”): transparent background · text #ffffff · radius 45px · padding 7px 30px · 500 14px Untitled
- **Card**: background #000000 · text #292a2c · radius 0px · padding 0px · 400 18px Helvetica
- **Navigation item** (“Projects”): transparent background · text #292a2c · radius 0px · padding 0px · 400 35px OPX-Medium

## Do

- Keep the main canvas near-black and visually uninterrupted.
- Use white for the defining headline and project titles.
- Let project imagery retain its own distinctive colours.
- Stagger portfolio images across the page instead of forcing uniform cards.
- Separate projects with generous dark negative space.
- Make case-study actions small, outlined, and pill-shaped.

## Don't

- Do not introduce unmeasured accent colours into the interface chrome.
- Do not place gradients or shadows behind the content.
- Do not regularize the portfolio into a dense, even grid.
- Do not make navigation or links louder than the work.
- Do not add heavy card borders around project imagery.
- Do not replace the oversized display type with generic small headings.

## Agent prompt

Build a new OPX Studio-style page with a restrained near-black canvas. Use Canvas Black (#020202) for the primary background and Deep Black (#000000) for project or section areas; reserve Gallery White (#ffffff) for major headings and project titles, and Soft Graphite (#9b9b9b) for secondary information. Set display and navigation in a rounded geometric sans similar to Space Grotesk, with a clean sans such as Inter for compact copy. Start with a prominent statement and quiet, widely separated navigation. Present work as an editorial sequence of rectangular images with varied sizes and alternating alignment, not uniform cards. Preserve colour within imagery while keeping surrounding UI monochrome. Use compact, thin-outlined pill links for case studies, broad negative space between projects, and a simple multi-column footer. Avoid shadows and gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Dark full-width page with an opening statement above an asymmetrically positioned, staggered portfolio gallery. | Top-level project and studio navigation, Browse project cases, Open case-study links | Near-black canvas, Large white statement, Variable image blocks, Outlined pill links |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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