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

# PostNew · Design System

> Dark canvas, vivid moving-image work

**Theme:** dark · **Industry:** portfolio · **Source:** https://www.postnew.xyz/ · **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._

A restrained dark portfolio lets a curated stream of motion, CGI, and graphic-design projects take center stage. Small, unobtrusive controls and generous empty space frame a varied mix of immersive visual work.

## North star

Keep the interface quiet and dark so each project’s imagery supplies the colour, scale, and visual drama.

## Overview

The visual strategy is built around a nearly uninterrupted charcoal canvas (#1a1a1a), with off-white (#fafafa) reserved for legible interface text. The measured palette is deliberately sparse; vivid colour belongs to the project artwork, not to the site chrome. ABC Diatype Medium provides a compact, contemporary sans-serif voice, with tight negative tracking and medium weight in the measured heading and body roles. The page presents a centered navigation above an open, vertically paced portfolio feed. Project media varies in scale and aspect ratio, alternating landscape and portrait compositions rather than sitting in uniform cards. Small edge controls and view toggles stay visually quiet against the dark background. Wide gaps around the work create a gallery-like rhythm, while the absence of visible borders, card surfaces, and shadows keeps attention on the images and videos. Treat artwork colours as project-specific, not as reusable interface accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Charcoal | `#1a1a1a` | `--color-gallery-charcoal` | brand | Continuous page canvas behind navigation, controls, and the vertically spaced portfolio feed. |
| Soft Chalk | `#fafafa` | `--color-soft-chalk` | neutral | Primary interface text and small navigation or control details against the dark canvas. |

### Semantic aliases

`--color-canvas` → `#1a1a1a` (Gallery Charcoal) · `--color-text` → `#fafafa` (Soft Chalk)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fafafa` | `#1a1a1a` | 16.67:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype Medium | `--font-body` | webfont | 500 | Measured heading and body text, including the compact site identity and interface labels. | DM Sans |

- **ABC Diatype Medium:** Medium weight with tight negative tracking; use a clean sans-serif voice and avoid oversized display typography.

### Type scale — Minor Third (ratio ≈ 1.222, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 22px | 500 | 1.13 | -0.025em | — | ABC Diatype Medium | Compact site identity or primary heading within the portfolio interface. |
| body | 18px | 500 | 1.15 | -0.025em | — | ABC Diatype Medium | Navigation labels, project-related interface text, and supporting copy. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11", "ss09", "ss10"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 7, 8, 10, 12, 13, 14, 50 px.
- Section rhythm 50px · element gap 10px · card padding — · max content width 936px.

The measured content has a 936px page max width, while the screenshot shows a centered, narrow media column within a much wider dark viewport. A compact navigation sits near the top; small controls align near the page edges and around the media area. Projects form a single vertically paced feed with varied image widths and aspect ratios, not a rigid card grid. The comfortable density comes from large qualitative gaps between pieces, with the measured section gap at 50px and element gap at 10px.

## Shape & elevation

- No box shadows measured: the page is flat.

The page reads as flat: the dark canvas carries no measured shadows, gradients, or border system. Artwork sits directly against the background without visible card framing. Small dark control backplates provide subtle separation where needed, but avoid adding decorative elevation or layered surfaces.

## Imagery

The portfolio mixes motion clips, CGI product scenes, and graphic compositions. Media appears as clean, rectangular frames in varied portrait and landscape proportions, often centered with dark space around it. Some artwork is colourful, but that colour is contained within the project media rather than applied to the site interface.

## Components

### Top navigation

A small centered row of Index, Feed, and Profile links near the top, set in light text on restrained dark backplates.

### Portfolio feed

A vertically paced sequence of project media with varied proportions and widths, separated by generous dark negative space.

### Edge index

A compact vertical set of small indicators along the left side, functioning as a quiet navigation cue.

### View toggle

A small control group beneath the lead media with light icon details on a subtle dark backing.

### Project links

Minimal text links associated with work; keep link treatment visually close to the off-white interface text.

### Measured component styles

- **Primary button**: background #242424 · text #0000ee · radius 0px · padding 10px 12px · 400 12px sans-serif
- **Link** (“Case”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #1a1a1a as the dominant page canvas.
- Reserve #fafafa for concise, readable interface text.
- Give project media varied rectangular proportions.
- Center the artwork within generous dark negative space.
- Keep navigation and controls compact and subdued.
- Let each project provide its own colour palette.

## Don't

- Do not introduce unmeasured interface colours.
- Do not turn project artwork colours into brand accents.
- Do not place every project in a uniform card.
- Do not add visible decorative borders or heavy shadows.
- Do not crowd the feed with dense captions.
- Do not replace the quiet gallery rhythm with a busy grid.

## Agent prompt

Build a new creative portfolio page in PostNew’s restrained gallery style. Use Gallery Charcoal (#1a1a1a) as the continuous canvas and Soft Chalk (#fafafa) for interface text; do not invent additional interface palette colours. Use ABC Diatype Medium or a close free sans-serif such as DM Sans, with compact medium-weight labels and slightly tight tracking. Place a small centered navigation above a vertically paced feed. Present projects as varied rectangular image or video frames surrounded by generous dark space, without forcing them into uniform cards. Keep any edge index or view controls small and unobtrusive. Let the artwork supply its own vivid colours; keep the surrounding interface flat, with no decorative borders, gradients, or shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Single dark portfolio section with top-centered navigation and a vertically spaced sequence of varied media frames. | Compact section navigation, Project browsing, View toggle | Dark canvas, Centered media, Edge index, Generous negative space |

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