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

# Two Create Studio · Design System

> Quiet space, oversized type, and work in focus.

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

Two Create Studio presents its design practice through a restrained, warm-neutral canvas and oversized, lightweight typography. The portfolio unfolds as a spacious sequence of project-led editorial compositions, with imagery adding occasional color and contrast.

## North star

Keep the interface nearly invisible so expansive typography and selected project imagery lead the experience.

## Overview

The page builds its identity from a tightly controlled palette: warm off-white fills the canvas, near-black carries the typography, and a pale gray-beige hairline separates broad content bands. There are no persistent accent colors; richer hues belong to individual project imagery rather than the studio interface. PP Neue Montreal is used with a clean, light presence, from an oversized sentence-case hero to compact uppercase project labels. Layout is editorial and deliberately sparse: navigation sits at the top edge, the hero is left aligned, and selected work continues as a long vertical portfolio with changing two-column arrangements and occasional full-bleed media. Generous empty areas give projects room to register and keep the page from feeling like a conventional card grid. Borders are subtle, corners remain square, and the presentation avoids visible shadows or decorative UI. The result is quiet and gallery-like, with typography and the work itself doing nearly all the visual talking.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#f9f7f4` | `--color-gallery-ivory` | surface | Page canvas and the continuous background across the hero and portfolio sections. |
| Studio Ink | `#0c0c0c` | `--color-studio-ink` | neutral | Primary headings, navigation, project labels, and body text. |
| Soft Rule | `#e3e1dd` | `--color-soft-rule` | neutral | Fine separators between page regions; keep borders quiet against the warm canvas. |

### Semantic aliases

`--color-canvas` → `#f9f7f4` (Gallery Ivory) · `--color-text` → `#0c0c0c` (Studio Ink) · `--color-border` → `#e3e1dd` (Soft Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c0c0c` | `#f9f7f4` | 18.29:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 400 | Display, body, caption, navigation, and project-link typography throughout the page. | Inter |

- **PP Neue Montreal:** Use the measured regular weight; large sentence-case display text has slightly tight tracking, while small project labels use uppercase.

### Type scale — Golden Ratio (ratio ≈ 1.669, base 66.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 111px | 400 | 1.02 | -0.01em | — | PP Neue Montreal | Oversized left-aligned hero statement. |
| body | 66.5px | 400 | 1.02 | -0.01em | — | PP Neue Montreal | Prominent supporting and project-description text. |
| caption | 33.5px | 400 | 1.1 | 0 | uppercase | PP Neue Montreal | Compact uppercase project labels and metadata. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 10, 14, 20, 36, 50, 72, 140 px.
- Section rhythm 72px · element gap — · card padding — · max content width 1400px.

Use a wide, left-aligned editorial canvas with a measured page maximum width of 1400px. Keep the header close to the top edge and let the hero statement occupy a broad, open field. Below it, sequence portfolio work vertically, alternating two-column project arrangements and occasional full-bleed imagery rather than repeating a uniform card grid. The measured section gap is 72px; spacing is comfortable and generous, with alignment shifts helping each project feel individually composed.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

Keep the interface flat: the measured data reports no shadows, gradients, or radius scale. Use the pale measured border color for delicate separators, not heavy card outlines. Preserve clean, square-edged framing and avoid stacked surfaces that compete with the imagery.

## Imagery

Let project imagery provide the page's occasional color, texture, and subject matter: product and packaging work, editorial imagery, and a video-led project appear within the portfolio. Images sit in spacious compositions, sometimes paired with project text and sometimes given a wider, full-bleed presence. Treat their colors as project-specific, not as interface palette.

## Components

### Top navigation

Minimal edge-aligned wordmarks and studio navigation in uppercase, set in near-black without filled buttons or visible container styling.

### Hero statement

Large, regular-weight PP Neue Montreal headline, left aligned and broken into short lines across the warm off-white canvas.

### Portfolio divider

A quiet horizontal hairline and a restrained section label separate the introductory hero from selected work.

### Project label

Compact uppercase client or project name sits above a larger, sentence-case project description.

### Project feature

A spacious two-column composition pairs project copy with imagery or video; select work can expand into a full-bleed media treatment.

### Measured component styles

- **Primary button** (“TWO CREATE”): transparent background · text #000000 · radius 0px · padding 0px · 400 44.424px PP Neue Montreal · uppercase
- **Link** (“LA PRAIRIE LIFE MATRIX Swiss precision e”): transparent background · text #0c0c0c · radius 0px · padding 0px · 400 10px PP Neue Montreal
- **Navigation item** (“STUDIO”): transparent background · text #0c0c0c · radius 0px · padding 0px · 400 44.424px PP Neue Montreal · uppercase

## Do

- Use the measured warm off-white as the continuous page canvas.
- Set primary text in the measured near-black.
- Give the hero statement generous room and strong left alignment.
- Use thin, low-contrast rules to separate major page regions.
- Vary project composition while keeping the overall page sparse.
- Let project photography supply color rather than interface accents.

## Don't

- Do not add unmeasured colors to the studio interface palette.
- Do not turn the portfolio into a dense, uniform card grid.
- Do not add shadows, gradients, or rounded-card treatments.
- Do not make project captions compete with the display headline.
- Do not treat vivid colors inside project images as brand UI colors.
- Do not fill generous whitespace with unnecessary decoration.

## Agent prompt

Build a new page in the Two Create Studio visual style: an editorial, minimal canvas in Gallery Ivory (#f9f7f4), with Studio Ink (#0c0c0c) typography and Soft Rule (#e3e1dd) separators. Use PP Neue Montreal when available, or a close sans-serif substitute such as Inter. Keep navigation understated and uppercase, then anchor the page with a large, regular-weight, left-aligned statement. Structure the content as a spacious vertical sequence, using varied two-column project compositions and occasional full-bleed imagery instead of repetitive cards. Keep interface surfaces flat and square-edged; the measured system has no shadows, gradients, or radius scale. Preserve generous whitespace, compact project labels, and a clear distinction between interface colors and any color appearing inside portfolio imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top-edge navigation above a broad, left-aligned oversized headline on a warm-neutral canvas. | Studio navigation, Clear opening statement | Oversized lightweight type, Thin horizontal rule, Open whitespace |
| 2 | gallery | Long vertical portfolio with spacious, alternating two-column project compositions and occasional media-led layouts. | Project browsing, Linked portfolio entries | Compact uppercase labels, Large project descriptions, Subtle dividers, Project-specific imagery |
| 3 | gallery | A full-bleed editorial project within the continuing vertical portfolio, identified by a left-aligned title and description. | Editorial project browsing, Linked project entry | Full-bleed imagery, Lightweight project typography, Warm-neutral canvas |

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